Archive for April, 2009
Hiding & Showing Div Tags
When CSS started becoming more and more supported by the Internet browser community, designers soon realized that they could make sites much more dynamic than ever before. So, to get started, let’s write some basic HTML code for the div, as well as set the default display CSS style of ‘none’ (starts with the div hidden).
{code type=html}<div id=”myDiv” style=”style: none;”>
Hello World!
</div>
<input type=”button” value=”Toggle” onclick=”doToggle(‘myDiv’);”/>{/code}
From here we can use either regular javascript (as seen in this example), or the jQuery libaries (http://jquery.com).
Using Javascript:
{code type=javascript}<script type=”text/javascript” language=”JavaScript”>
function doToggle(obj) {
var elem = document.getElementById(obj);
if (elem.style.display != ‘none’) {
elem.style.display = ‘none’;
} else {
elem.style.display = ”;
}
}
</script>{/code}
Preloading Images
There are a couple options available to a web designer when it comes to preloading images. In the recent past, the most common way was to do it through Javascript (as shown in Example 1), but when the paranoia about cross-site scripting exploits using Javascript started gaining publicity, a fair percentage of the web-saavy community disabled Javascript, which can and has seriously crippled the functionality of many websites. The only viable alternative, with which all modern browsers support is through CSS (as shown in Example 2).
Example 1 (Javascript)
{code type=html}<script type=”text/javascript” language=”JavaScript”>
imgLogo = new Image();
imgLogo.src = “logo.gif”;
</script>{/code}
Example 2 (CSS)
{code type=css}<div style=”display:none;”>
<img src=”logo.gif” height=”150″ width=”350″>
<img src=”logo_rollover.gif” height=”150″ width=”350″>
</div>{/code}
Note: With both examples, the code has to be placed as early in the document as possible. With CSS, it should be placed after the <body> tag, and with the Javascript, it should be placed between the <head> tags.
No comments