andrew.wong.p.k

Been around JQuery and find some interesting usage of it and compress it as much as I can. Most webmaster looking for a way to compress as much size as possible to make a website load fast.

Dropdown menu script is one of my most used Javascript. In order to make really useful of it, I then make a small experiement on it and see how it goes. The 6 lines saved a lot of size and my time for looking for more Javascript. This is much more safer than safe weight loss pills.

Demo

$(function () {
$(‘CLASS‘).hover(
function () {$(‘CLASS‘, this).slideDown(100);},
function () {$(‘CLASS‘, this).slideUp(100);
});
});

These are the 6 lines I’m going to use to make 3 effects, dropdown, tooltip and a slide.

Let’s make a basic drop down menu, hiding the second-level menu.

#menu {
height: 30px;
list-style: none;
}
#menu li {
float: left;
position; relative;
padding: 2px 10px;
}
#menu li ul {
display: none;
list-style: none;
position: absolute;
background: #efefef;
width: 200px;
z-index: 1;
}
#menu li ul li {
clear: both;
display: block;
}

Now we are going to call the second-level menu (ul) with the Javascript.

$(function () {
$(‘#menu li‘).hover(
function () {$(‘ul‘, this).slideDown(100);},
function () {$(‘ul‘, this).slideUp(100);
});
});

Continue with the second effect, which will be using the same 6 lines of Javascript – The tooltip.

a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
position: absolute;
top: 20px;
padding: 10px;
background: #ccc;
}

I hided the span so it will only comes out when hover the link (a)

$(function () {
$(‘#menu li, a.tooltip‘).hover(
function () {$(‘ul, span‘, this).slideDown(100);},
function () {$(‘ul, span‘, this).slideUp(100);
});
});

Now I have this 6 lines work on both effect. Going for the third one, the slide Since I use the same 6 line Javascript, I keep on the span, so I don’t need to add more line on the function.

#slide {
position: relative;
width: 300px;
}
#slide .none {
display: block;
}
#slide span.thumb {
display: block;
width: 175px;
padding: 13px 0px;
background: #eee;
cursor: pointer;
}
#slide span.thumb span {
position: absolute;
right: 0px;
top: 0px;
display: none;
z-index: 1;
}

Because I use the same class (span), so I don’t need to add more into the Javascipt. Only the .thumb class.

$(function () {
$(‘#menu li, a.tooltip, .thumb‘).hover(
function () {$(‘ul, span‘, this).slideDown(100);},
function () {$(‘ul, span‘, this).slideUp(100);
});
});

These 6 lines will work on 3 effects on the same page or not. So it dramatically compressed the size of one website.

Demo

Tags: Javascript, JQuery

• 19th February 2010 at 8:09 pm
• Discovery
• 3 comments

If you like this articles, share it with your friend! Digg it StumbleUpon Facebook Twitter del.icio.us Google Yahoo! Reddit