Logo


Quote of the day - Andy Budd on Usability

Posted in css, usability by Dragan on the June 2nd, 2008

Andy Budd on CSS, usability and stuff like that:

But I do think that in this world where I've got a PS3 at home that performs live texture-mapping rendering in 3D, on the fly, why we can't get a browser that can render rounded corners on a box in 2008. You know, we should all have jet packs here! A rounded corner box or multiple background images shouldn't be rocket science.

Rest of the article here..

CSS Menu with slider

Posted in css, Programming, Javascript by Dragan on the May 11th, 2007

CSS Menu with slider using Prototype.js

This little example shows how to make really simple and yet very nice CSS Menu with slider.

Example

Part 1 - HTML

<div id="menu">
	<div id="m-top">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">F.A.Q.</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="m-slider">
		<div id="slider"></div>
	</div>
</div>	

Part 2 - Javascript

Now we add Javascript event that listen for mousemove on div that holds menu.

window.onload=function(){

	var offsetLeft=$('menu').offsetLeft;

	Event.observe('menu', 'mousemove', function(event){

		coordinateX=Event.pointerX(event)-offsetLeft;
		$('slider').style.marginLeft=coordinateX-20+'px';

	});

}

Part 3 - CSS

Here you can see the CSS file that is used for this example.

Download

slider.html
slider.css
helper.js
prototype.js (1.5.1)


Pure CSS rollover menu

Posted in css, Programming by Dragan on the April 10th, 2007

Pure CSS Menu - light, fast, easy to make, SEO Friendly

This is my favorite technique for making CSS rollover menus. Its a combination of image replacement technique, and pure CSS list menus.
There is no javascript, and beneath it is valid XHTML code, so you don't need to worry about SEO performance.

Example

How to make your own

Ok, here is how you make this kind of menu - it's actually really simple:

First you must make your background image:
CSS Menu background
Please note that this is one image, and not two separate images.
If your menu is 400px by 50px background image should be 400px by 100px. Upper half of picture is background for normal state, and lower half is for rollover.

HTML Code

<div id="main-nav">
	<ul>
		<li><a href="#" class="home"><span>Home</span></a></li>
		<li><a href="#" class="about"><span>About us</span></a></li>
		<li><a href="#" class="faq"><span>F.A.Q.</span></a></li>
		<li><a href="#" class="contact"><span>Contact</span></a></li>
	</ul>
</div>

Now apply this CSS code, and there you have it - pure css rollover menu.


MGraph Update

Posted in ajax, css, Programming, Javascript by Dragan on the April 10th, 2007

MGraph - Ajax based graph, updated to v0.95

Ajax MGraph - Ajax Based graph
Hey hey, There is a small but nice update to Ajax MGraph. After some thinking I've decided to add a space for user note. You can easily pass HTML as note text, so you could add link to some data, or some small image .. or whatever...

New features

 

  • Added option to add a note
  • Added transparency on graph bars
  • Visual style changed

I'm really satisfied with feedback I'm getting on MGraph, so I'll continue to make improvements, stay tuned for more!

MyTabz Update - vertical tabs

Posted in css, Programming, Javascript by Dragan on the April 6th, 2007

Ajax MGraph

Posted in ajax, php, css, Programming, Javascript, graph by Dragan on the March 31st, 2007

Ajax Graph based on Prototype.js

Note: Updated to v.0.96 on January 16. 2008

Note: Updated to v.0.95 on April 10. 2007

For one of my projects, i needed simple graph to represent data for a single year by months.
I came up with this solution, and decided to make free version.

ajaxMgraph preview

For now it has few limitations (only positive numbers, only integers), but ill fix those in next few days...


Next Page »

All Rights Reserved, Copyright © 2007 Dragan Bajcic.
YourTree | Dragan@YourTree | Web Development and Consulting | rent a car srbija