Javascript images pre-loader
Here you are, doing a photo gallery and in that photo gallery you have many thumbnails that on click will display the larger picture.
If you are using the simple “document.getElementById(‘someid’).innerHTML=’‘” or many other javascript method to load your images then you have a problem.
When the user click he will have to wait for the image to load and sometimes will see parts of the images opening bit by bit.
This javascript preloader will load all your desired images in the background and so when you call them they are ready to be displayed 
This will come handy also a lot when doing a javascript slide show… but this will be my next post here
Demo: http://joeabiraad.com/demos/preloader/
Files: http://joeabiraad.com/demos/preloader/preloader.rar
Hope it helps
//Jo
How to make a Sudoku (Only javascript used)
10 days ago, a good friend of mine asked me to write a sudoku online game for him.
He is always bored at work and wanted to lose some time, so… here it is
PLAY
Rules of sudoku
- Each row should contains all numbers from 1 to 9 (no repetition)
- Each column should contains all numbers from 1 to 9 (no repetition)
- Each 3×3 table should contains all numbers from 1 to 9 (no repetition)
Logic used
- Start by generating each number in a cell at a time by choosing randomly from 1 to 9
- If the number is ok and do not conflict with the other cells —> Continue to next one
- Else —> go back one cell and choose another number
How to do a menu with sub items using CSS
Every website needs a menu, in this tutorial i am gonna show you how to do a menu with sub items using only CSS and javascript.
First lets take a look at the final result:
The CSS
margin:0;
padding:0;
border:0;
}
.nav{
background: url(../images/nav-bar.gif) no-repeat 0 18px;
width: 934px;
height: 30px;
margin: 0 auto;
list-style: none;
font-size: 14px;
padding-left: 5px;
line-height: 15px;
margin-bottom: -8px;
position: relative;
padding-top: 18px;
}
.nav li{
display: inline;
line-height: 30px;
height: 30px;
float: left;
padding-bottom: 5px;
margin-bottom: -5px;
}
.nav li a{
color: #fff;
float: left;
height: 30px;
padding: 0 19px;
text-decoration:none;
}
.nav li a:hover,
.nav li:hover a,
.nav li.hover a{
background: url(../images/hover.gif) repeat-x;
text-decoration: none;
}
.nav li ul{
background: url(../images/1×1.gif);
display: none;
}
.nav li:hover,
.nav li.hover{position: relative;}
.nav li:hover ul,
.nav li.hover ul{display: block;}
.nav li ul{
width: 125px;
position: absolute;
top: 31px;
left: 0px;
}
.nav li li{
background: #5a8a47;
display: block;
float: none;
height: auto;
font-size: 12px;
line-height: 14px;
padding: 4px 0 3px 18px;
margin-bottom: 1px;
}
.nav li li a{
float: none;
padding: 0;
}
.nav li:hover li a,
.nav li.hover li a{background: none;}
.nav li li a:hover{
background: none;
text-decoration: underline;
}
Defining “html,body,ul,li” to avoid any not desired margin, padding and border.
Class “nav” is for the whole “ul”, of course you can change the width (so background pic) to suit your needs.
You can easily figure out your way in the rest
The Javascript
var nav = document.getElementById(“nav”);
if(nav){
var nodes = nav.getElementsByTagName(“li”)
for (var i=0; i
this.className+=" hover";
}
nodes[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", hover);
The javascript here is responsible for the rollover menus, all it does really is add the “hover” class to an “li” element on mouseover and replace it with “” on mouseout.
Hope this is useful, you can download the files from http://mazesolutions.me/demos/hmenu/hmenu.tar
Demo:
// Jo