joseblog

test

admin — Mon, 13 Jul 2009 06:18:50 +0000

//first we check the browser name and version to be ie6
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    //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”, “”); }
}
}

Hello world!

admin — Sun, 14 Jun 2009 12:44:20 +0000

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Three short snippet in javascript and jquery

admin — Mon, 08 Jun 2009 19:19:54 +0000

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:

if(($.browser.msie) && ($.browser.version <= 6)) {
$(’#target li’).mouseover(function(){$(this).addClass(’over’)})
.mouseout(function() { $(this).removeClass(’over’)
});
}

The javascript way:

//first we check the browser name and version to be ie6
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 //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:

$(’#right ul.target li:odd’).after(’

’);

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:

//first we browse through every ul tag in the div with id right
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(’

$(’.wrapper’).prepend(”)

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)

Floated elements with different heights bug

admin — Mon, 08 Jun 2009 18:17:35 +0000

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:

$(’#right ul.target li:odd’).after(’

’);

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:

//first we browse through every ul tag in the div with id right
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.

test1

admin — Sun, 07 Jun 2009 16:30:56 +0000

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!