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… :DHow 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?
32 Responses
PERTAMAX!
sambil cari link Switch to “Bahasa Indonesia”
*scratching head*
pake css browser selector dong :P http://rafael.adm.br/css_browser_selector/
hiks..ora mubeng :(
tambah ilmu lagi meski kudu ngerti bahasa enggris,
yala, belajar javascript ah~
dah di jkt bli?
Yah, agak2 mudeng…
meskipun english-ku masih acakadut..
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*
Bingung… kalau udah JavaScript :(
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
wah keren juga tuh css di gabung ama java, tapi gimana pake nya yach masih gak mudeng
hwehe it’s sophisticated. since I am not able to make any javascripts myself, i thank to the java free stuff LOL.
nggilani.. ra ngerti blas.. :-S
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?*
duhhh, syusyah. :(
Hadoh-hadoh…. css gw aja masih ecek-ecek, ini tutor ditambahin pake javascript pulak…
di save dolo lah… hihihi… :D
Next tut? I guess you should write about how to be a CSS master like Didats, LOL. Anyway, this is a great one!
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!
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…
maksudnya drawing menu itu loh, yang sutbokx. di sini pake perpoks juga ga muncul bos.
Request, tutorial Drupal donk…. :D
#20 tetep gag tau yg mana…
#21 mba, mba… dipikir aku tau segalanya yak? hihihi…
drupal mah gag ngerti sama sekali… mangap… :D
drawing menu.. salah ya.. maksudku drawer menu.
menu yang muncul diatas itu kalo kita klik. themes ini kalo pake fayerfok gak muncul nih…
#22 mas, mas… aku gak mikir gitu kok. Aku mikirnya, AYO BIKIN DONK…! *maksa mode*
Hehehe… :p iya deh enggak… *muter2 nyari tutor drupal*
Ternyata bisa ya..
Saya sempat memikirkan hal ini juga. Tetapi ga sampai tahu setelah tutorial ini.
Hehehe.
nice tutorial…keep going on!!!
mohon bimbingan wordpress dong, cara bikin template yang apik mas!
ajarin dong cara buat template dengan wordpress
nice tutorial helpfully, thx
waduh, susahnya minta ampuuu….n, di save aja ah mumpung ketemu.
Dari dulu klo diajak baca programming kok gak nyangkut-nyangkut. Gw kebanyakan makan singkong kali ya ?
Agak ngerti dikit tp gak ada hasilnya yg kudapat