A Little April Fool’s Day Fun

Alright, well this code is useless on every day of the year except, you guessed it, APRIL FOOLS DAY! What we are going to create is a code that reopens a page when the user navigates away from it. This will become very annoying and is a great little prank to play on your friends. Here is the code:

<script type=”text/javascript”>
function openIt(){
window.open(”http://www.yoursite.com”);
}
</script>
<body onunload=”openIt()”>
</body>

Well, first off, you can have other code in the body to make this seem like more of a webpage, this code will just generate a blank screen. But anyways, on the first few lines I used javascript to create a function called openIt. When this function is called it opens up the page inside the brackets. You can change “http://www.yoursite.com” to the URL of the site that contains this code. Then the last major piece of code worth explaining is on line 6. This is what I used to call the openIt. The onunload event calls a function, in this case openIt when the website the user is viewing is closed or navigated away from. This includes, but is not limited to using the back button, exiting out of the browser, or typing a new address in the URL bar.

I hope you enjoyed this code, and used it on all of your friends =D


Read More...

Preloading Images

Did you ever go on a website where you scrolled over a picture or a link that was a picture and then 5 seconds later the picture changed. This time difference is extremely annoying and can drive users away from your website. The solution does not lie in getting rid of these roll-overs but to preload your images using javascript. Preloading your images loads your images when the page loads instead of when you scroll over the image. Here is how you do it:

<script type=”text/javascript”>
<!–
pic= new Image(100,100);
pic.src=”image.gif”;
//–>
</script>

The first line creates a new image object named “pic” that has a width of 100px and a height of 100px. The new Image() construct needs two parameters. The first is the width in pixels and the second is the height of the image in pixels. Then the second line specifies the location of the image you are preloading, just replace “image.gif” with whatever image you want to preload. And that is about it. Just be sure to place this in the header section of your website.


Read More...

Getting the max-width property to work in IE

As you may know, the max-width property is very useful. With it you can set the maximum width of an object; whether it be an image or the body of your website. Most browsers can read this code and produce the correct results.

#footer{
max-width:500px;
}

What that code does is make an element with a maximum width of 500 pixels. The only problem with that code is Internet Explorer versions six and earlier cannot process this. Here is what you need to add to get the same results in those browsers:

#footer{
max-width:500px;
width:expression(this.width > 500 ? “500px” : this.width);
}

That expression makes it so that early versions of IE can understand this crucial property.


Read More...