blog, tutorial

Playing CSS under Javascript

October 1st, 2006

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?


Share:
These icons link to social bookmarking sites where readers can share and discover new web pages.

  • bodytext
  • del.icio.us
  • Facebook
  • Google
  • Ma.gnolia
  • StumbleUpon
  • Technorati

Daftar sekarang juga untuk cara gampang dapat uang lewat blog


32 Comments


Gravatar
#1. medon » 01.10.2006

PERTAMAX!

sambil cari link Switch to “Bahasa Indonesia”

Gravatar
#2. Mrs. Sparrow » 01.10.2006

*scratching head*

Gravatar
#3. iang » 01.10.2006

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

Gravatar
#4. oón » 01.10.2006

hiks..ora mubeng :(

Gravatar
#5. agung » 01.10.2006

tambah ilmu lagi meski kudu ngerti bahasa enggris,

Gravatar
#6. anima » 01.10.2006

yala, belajar javascript ah~
dah di jkt bli?

Gravatar
#7. Yogie » 01.10.2006

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

Gravatar
#8. 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
#9. Nurudin Jauhari » 02.10.2006

Bingung… kalau udah JavaScript :(

Gravatar
#10. 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
#11. aribowo » 02.10.2006

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

Gravatar
#12. 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
#13. aRdho » 02.10.2006

nggilani.. ra ngerti blas.. :-S

Gravatar
#14. 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
#15. Fitri Mohan » 02.10.2006

duhhh, syusyah. :(

Gravatar
#16. 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
#17. 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
#18. 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
#19. 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
#20. firman firdaus » 02.10.2006

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

Gravatar
#21. Fany » 03.10.2006

Request, tutorial Drupal donk…. :D

Gravatar
#22. 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
#23. 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
#24. 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
#25. buchin » 30.11.2006

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

Gravatar
#26. DShock » 08.01.2007

nice tutorial…keep going on!!!

Gravatar
#27. lolak » 30.01.2007

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

Gravatar
#28. mozax » 22.02.2007

ajarin dong cara buat template dengan wordpress

Gravatar
#29. han » 02.07.2007

nice tutorial helpfully, thx

Gravatar
#30. juragan » 02.08.2007

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

Gravatar
#31. Ruud » 13.12.2007

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

Gravatar
#32. room_______________ » 07.05.2008

Agak ngerti dikit tp gak ada hasilnya yg kudapat

Leave a Reply




Daftar sekarang juga untuk cara gampang dapat uang lewat blog