Playing CSS under Javascript

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.

Got the point? You have to! *maksa* Hahahaha… :D

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?

No related posts.

Kategori: blog, tutorial

 

32

Komentar

Gravatar
 

medon @01.10.2006

PERTAMAX!

sambil cari link Switch to “Bahasa Indonesia”

 
 
Gravatar
 

Mrs. Sparrow @01.10.2006

*scratching head*

 
 
Gravatar
 

iang @01.10.2006

pake css browser selector dong :P http://rafael.adm.br/css_browser_selector/

 
 
Gravatar
 

oón @01.10.2006

hiks..ora mubeng :(

 
 
Gravatar
 

agung @01.10.2006

tambah ilmu lagi meski kudu ngerti bahasa enggris,

 
 
Gravatar
 

anima @01.10.2006

yala, belajar javascript ah~
dah di jkt bli?

 
 
Gravatar
 

Yogie @01.10.2006

Yah, agak2 mudeng…
meskipun english-ku masih acakadut..

 
 
Gravatar
 

firman firdaus @01.10.2006

for the next tutorial, i suggest we have a study case of any weblogs design, and then break down the code, step by step. deal?

*sambil ngelancarin english, haha*

 
 
Gravatar
 

Nurudin Jauhari @02.10.2006

Bingung… kalau udah JavaScript :(

 
 
Gravatar
 

windede @02.10.2006

hmmm… berat om… pas puasa gini bisa terkuras nutrisi otak; antara mikirin bahasa inggrisnya dgn maksud tulisannya huehehehe…

the next tutorial request: all about plugin… apa aja yg easy dan menarik untuk dipergunakan :D

 
 
Gravatar
 

aribowo @02.10.2006

wah keren juga tuh css di gabung ama java, tapi gimana pake nya yach masih gak mudeng

 
 
Gravatar
 

kristee @02.10.2006

hwehe it’s sophisticated. since I am not able to make any javascripts myself, i thank to the java free stuff LOL.

 
 
Gravatar
 

aRdho @02.10.2006

nggilani.. ra ngerti blas.. :-S

 
 
Gravatar
 

boku_baka @02.10.2006

btw, I’m using firefox 1.5.05 and I can’t access your “drawer menu” on top of this page. But it’s shown up when I used IE.. how come?

*piye nih Pluk?*

 
 
Gravatar
 

Fitri Mohan @02.10.2006

duhhh, syusyah. :(

 
 
Gravatar
 

Irwan @02.10.2006

Hadoh-hadoh…. css gw aja masih ecek-ecek, ini tutor ditambahin pake javascript pulak…
di save dolo lah… hihihi… :D

 
 
Gravatar
 

Hedi @02.10.2006

Next tut? I guess you should write about how to be a CSS master like Didats, LOL. Anyway, this is a great one!

 
 
Gravatar
 

nananias @02.10.2006

you want to know the technique that i’ve been used to display two languages

wakwakwak you have been used? by whom? in what way? *i don’t want to make any mental picture :D*

should be i have been using dats!

 
 
Gravatar
 

didats @02.10.2006

wah siyal! pada kga ngarti rata-rata… udah belagak ngomong pake inggeris segala lageee…. *tendang yang bikin tutorial*

#14 loh, what did you mean about drawing menu?

#18 eh, ibu guru, mangap.. salah yak? hihihi… :D
nanti tak benerin deh… kan belom di bahas di kelas bu…

 
 
Gravatar
 

firman firdaus @02.10.2006

maksudnya drawing menu itu loh, yang sutbokx. di sini pake perpoks juga ga muncul bos.

 
 
Gravatar
 

Fany @03.10.2006

Request, tutorial Drupal donk…. :D

 
 
Gravatar
 

didats @03.10.2006

#20 tetep gag tau yg mana…
#21 mba, mba… dipikir aku tau segalanya yak? hihihi…
drupal mah gag ngerti sama sekali… mangap… :D

 
 
Gravatar
 

boku_baka @03.10.2006

drawing menu.. salah ya.. maksudku drawer menu.
menu yang muncul diatas itu kalo kita klik. themes ini kalo pake fayerfok gak muncul nih…

 
 
Gravatar
 

Fany @03.10.2006

#22 mas, mas… aku gak mikir gitu kok. Aku mikirnya, AYO BIKIN DONK…! *maksa mode*
Hehehe… :p iya deh enggak… *muter2 nyari tutor drupal*

 
 
Gravatar
 

buchin @30.11.2006

Ternyata bisa ya..
Saya sempat memikirkan hal ini juga. Tetapi ga sampai tahu setelah tutorial ini.
Hehehe.

 
 
Gravatar
 

DShock @08.01.2007

nice tutorial…keep going on!!!

 
 
Gravatar
 

lolak @30.01.2007

mohon bimbingan wordpress dong, cara bikin template yang apik mas!

 
 
Gravatar
 

mozax @22.02.2007

ajarin dong cara buat template dengan wordpress

 
 
Gravatar
 

han @02.07.2007

nice tutorial helpfully, thx

 
 
Gravatar
 

juragan @02.08.2007

waduh, susahnya minta ampuuu….n, di save aja ah mumpung ketemu.

 
 
Gravatar
 

Ruud @13.12.2007

Dari dulu klo diajak baca programming kok gak nyangkut-nyangkut. Gw kebanyakan makan singkong kali ya ?

 
 
Gravatar
 

room_______________ @07.05.2008

Agak ngerti dikit tp gak ada hasilnya yg kudapat

 
 

Maaf, form komentar saya tutup. Jika ada pertanyaan atau pendapat, langsung saja ke halaman kontak.