Didats Triadi - Indonesian, CSS Design, Web Design, Web Development, Wordpress Customization based in Kuwait

• global domain registration
• Kerosene Heaters
• International Domain Names

Tired with different result between IE and the other browsers? Or, you want to know the technique that i’ve been used to display two languages on my latest tutorial? Yes, you go to the right place… :p

But sorry, this tutorial only available in English. Even my English still worst! Hehehe….. If anyone want to translate this tutorial in Indonesia, just give me the link, and I will put it on this page.

Ok, we start!

If we have a CSS code that shown below:

#wrap {
background:#000;
color:#FFF;
width:100px;
height:100px;
}

From the code above, we can use javascript to replace those codes:

var idwrap = document.getElementById("wrap");
idwrap.style.background = "#000";
idwrap.style.color = "#FFF";
idwrap.style.width = "100px";
idwrap.style.height = "100px";

Got the point? Ok, if you have a basic knowledge about programming languange, you’ll be understand the code above. If not, let me explain it to you.

First step, create the object

var idwrap = document.getElementById("wrap");

Explain to the javascript, that you’ll be editing an element, which is element that used WRAP as an ID. The object that we have created, will be known as IDWRAP variable. Feel free to change the variable name. That’s only a variable name.

Second step, specify the style

If you want to specify the CSS property under javascript, follow this method:

object_name.style.css_property = “css_property_value”;

So, from the method above, we want to specify the wrap ID to give the black (#000) background. This is the code:

idwrap.style.background = "#000";

Got it? if not, read carefully! If my languange hard to understand, feel free to give me a correction, or ask me directly.

The javascript events

Events are the beating heart of any Javascript application. The simple way to understand is, Javascript will running after the trigger has started. Review the button below.

How to hide an element?

The CSS code to hide an element use display property. This is the CSS code.

#wrap {
display:none;
}

So, we can use javascript to hide an element. The syntax is still the same with the code that i’ve explained above. But on this part, we will create a function that will hide the ID that we’ve specify already.

function HideID(which_id) {
var obj_id = document.getElementByID(which_id);
obj_id.style.display = "none";
}

See the example of that function.

That’s it! easy, eh? Feel free to ask me directly about this tutorial. If you want an example of a weblog that used this method, see blogombal. Look carefully the lines on the bottom part. All the lines has line up. Want to see more? see Water and Stone website. That what I called 100% height javascript technique… :D

Any idea, what will be the next tutorial?