1. Hoverevent on li tag with unobtrusive javascript
Goal:We want to put a hover event on li tag, but ie6 knows hover just on links.So we need to put a class on li tag on mouseover and remove this class
on mouseout.
The jQuery way:
$(’#target li’).mouseover(function(){$(this).addClass(’over’)})
.mouseout(function() { $(this).removeClass(’over’)
});
}
The javascript way:
if((navigator.appName==”Microsoft Internet Explorer”) && (parseInt(navigator.appVersion) <=6)) {
//then we browse through the li tags
var target=document.getElementById(’target’).getElementsByTagName(’li’);
for(i=0; i<target.length; i++) {
//then we set that on mouseover event to add besides the actual class the “over” class, and on mouseout to remove the over class
target[i].onmouseover=function() { this.className+=” over”; }
target[i].onmouseout=function() { this.className=this.className.replace(” over”, “”); }
}
}
Floated elements with different heights bug
Goal: floated li elements with diferent height, don’t align properly, so we have to add after the last li element in every line an empty li element with clear:both style.
Here is the jQuery method:
With this line we insert a new li tag with the class “clear” after every second li tag in the list with the classname “target”.
In case we just want to use javascript without any js library, we cand do it this way:
var odd=document.getElementById(’right’).getElementsByTagName(”ul”);
var newLi;
for (var x = 0; ; x
//then we filter those that have the class list
if (odd[x].className.indexOf(’list’) != -1) {
//then we get an array of all the li elements in our list
var oddli=odd[x].getElementsByTagName(’li’);
for (var z = 0; z
//because dom doesn’t have insertAfter method, we have to get every third li element and use the insertBefore method on them
if(z%3==0) {
//here we have to create a li element at each third li element
newLi=document.createElement(’li’);
if(z>0) odd.insertBefore(newLi, oddli[z-1]);
}
}
}
}
Thats all.
Rounded corners
Goal: we want to apply rounded corners to an image with id “target” , so we wrap it in a div that will have position:relative; and than insert 4 span
tags that will represent the 4 corners of the image, that will have position absolute.
The jquery way:
$(’#target’).wrap(’
The javascript way:
//first we create the wrapper div with the class “wrapper”
var wrapdiv = document.createElement(’div’);
wrapdiv.className = ‘wrapper’;
//then we copy into this wrapper div the cloned version of the image
var target=document.getElementById(’target’);
wrapdiv.appendChild(target.cloneNode(true));
//then we replace the original image with the wrapper div that has inside the cloned image
target.parentNode.replaceChild(wrapdiv, target);
//then we create all the span elements and insert it before the image inside the wrapper
var tl=document.createElement(’span’)
tl.className=”topleft”
var tr=document.createElement(’span’)
tr.className=”topright”
var bl=document.createElement(’span’)
bl.className=”bottomleft”
var br=document.createElement(’span’)
br.className=”bottomright”
wrapdiv.appendChild(tl)
wrapdiv.appendChild(tr)
wrapdiv.appendChild(bl)
wrapdiv.appendChild(br)