dropdown box image swap: firefox vs. IE7...grrr

by **rangana** on Tue Apr 14, 2009 1:02 am

The code that I'm using is known as "ternary operation". The shorthand of the if-else statement.

Have a good read:
http://www.mredkj.com/tutorials/referen ... rnary.html
http://www.webmasterworld.com/forum91/513.htm

If you're still stumped, get back.

by **Suffer** on Wed Apr 15, 2009 6:45 am

rangana in first place, as always.

by **erkerr67** on Wed Apr 15, 2009 3:59 pm

great, thanks for those links, they were extremely helpful in understanding it a bit more.

hmm still trying to completely grasp this though, been doing a bunch of trial and error but still no luck :-/ i don't think i totally understand it yet.

what i dont think im understanding now at this point is not the breakdown of the logistical operators but how it's compiling the information...like how in:

bottom1.style.display=this.value=='foil'?'none':'';

how does bottom1 div get the option value for the respective DIV and figure out it's not "foil" when it's not part of that DIV and it's in the option dropdown instead? and isn't if it IS equal to foil, it goes to 'none' meaning the value is none or the display is none? and if it's not equal to 'foil' it goes to blank, aka ''

gah so confusing for me.
here's the code below with my divs before the form if that helps at all?....

<div class="mid">

<div id="bottom1">
<img src="customizer-img/parts/default-bottom.gif" />
</div>

<div id="bottom2" style="display:none;">
<img src="customizer-img/parts/foil-sealed.gif" />
</div>

<div id="bottom3" style="display:none;">
<img src="customizer-img/parts/beads.gif" />
</div>

<div id="bottom4" style="display:none;">
<img src="customizer-img/parts/dropper-tip.gif" />
</div>

</div>

<div class="form">
<form action="">

<select name="bottom-end" class="custom" onchange="var bottom1=document.getElementById('bottom1'), bottom2 = document.getElementById('bottom2'), bottom3 = document.getElementById('bottom3'), bottom4 = document.getElementById('bottom4');
bottom1.style.display=this.value=='foil'?'none':''; bottom2.style.display=this.value=='foil'?'':'none'; ">

<option value="type" selected="selected">Bottom End Type</option>
<option value="default">Default</option>
<option value="foil">Foil Sealed</option>
<option value="beads">Beads</option>
<option value="droppertip">Dropper Tip</option>
</select>
</form>
</div>

by **rangana** on Wed Apr 15, 2009 4:13 pm

What are you trying to do?

You want "bottom1" and "bottom2" div become visible when "Foil Sealed" option is selected?

Also, the '' in my code denotes positive value for "display" property - if that confuses you.

by **erkerr67** on Wed Apr 15, 2009 4:25 pm

just the bottom2 div appear when foil option is selected.

each div is matched up with a dropdown option. when that option is selected, that div shows up and all the others are hidden.

this is the link if you want to check it out.
http://208.179.155.80/customizer.html

bottom1 div is the default option
bottom2 div is the foil sealed option
bottom3 div is the beads option
bottom4 div is thedroppertip option

and thanks for the clarification on the '' didn't know about that attribute.

by **rangana** on Wed Apr 15, 2009 10:52 pm

First, you should note that you have conflicting events.

An element's event could only be used once, otherwise, the second call will override the first.

Let me point you on this error:

Code: Select all: <body id="company" onload="myPreload('white.jpg', '601.jpg', '602.jpg');">

You were calling "myPreload" function, on the onload event. This isn't erroneous in the first place, but it appears you're calling another function on the same event of "body" element. It's this part:

Code: Select all: window.onload=make_hover_list;

Since the "inline" onload event comes later than your anonymous function assignee, then the above noted code is replaced by your "myPreload()" call.

To fix that issue, you need to do it like this:

Code: Select all: window.onload=function () { make_hover_list; myPreload('white.jpg', '601.jpg', '602.jpg'); }

Going back to your issue, I suggest on using "switch" statement instead. This part:

Code: Select all: <select name="bottom-end" class="custom" onchange="var bottom1=document.getElementById('bottom1'), bottom2 = document.getElementById('bottom2'), bottom3 = document.getElementById('bottom3'), bottom4 = document.getElementById('bottom4'); alert(this.value); bottom1.style.display=this.value=='foil'?'none':''; bottom2.style.display=this.value=='foil'?'':'none'; "> <option value="type" selected="selected">Bottom End Type</option> <option value="default">Default</option> <option value="foil">Foil Sealed</option> <option value="beads">Beads</option> <option value="droppertip">Dropper Tip</option> </select>

...needs to be:

Code: Select all: <select name="bottom-end" class="custom" id="myopt"> <option value="type" selected="selected">Bottom End Type</option> <option value="default">Default</option> <option value="foil">Foil Sealed</option> <option value="beads">Beads</option> <option value="droppertip">Dropper Tip</option> </select>

...and add this code on the head section of your page:

Code: Select all: window.addEventListener?window.addEventListener('load',customOpt,false): window.attachEvent('onload',customOpt); // FF : IE function customOpt() { var opt = document.getElementById('myopt'); opt.onchange = function () { var divs = ['bottom1','bottom2','bottom3','bottom4']; customOpt.resetDivs(divs); switch(this.value.toLowerCase()) { case 'foil': customOpt.domID(divs[1]).style.display=''; break; case 'beads': customOpt.domID(divs[2]).style.display=''; break; case 'droppertip': customOpt.domID(divs[3]).style.display=''; break; default: customOpt.domID(divs[0]).style.display=''; } } customOpt.resetDivs = function (arr) { for (var i = 0 ; i < arr.length; i++) this.domID(arr[i]).style.display='none'; } customOpt.domID = function (el) { return document.getElementById(el); } }

...and one last thing, remove "language="javascript"" here:

Code: Select all: <script type="text/javascript" language="javascript">

...that is deprecated.

Hope that helps.

by **erkerr67** on Mon Apr 20, 2009 11:59 pm

fantastic. thank you so much, this helps a ton. hopefully i'll be good from here on out. i have a bumpy road ahead of me with the some different javascript-focused stuff with this same project but i'll try and tackle it

dropdown box image swap: firefox vs. IE7...grrr

Re: dropdown box image swap: firefox vs. IE7...grrr

Re: dropdown box image swap: firefox vs. IE7...grrr

Re: dropdown box image swap: firefox vs. IE7...grrr

Re: dropdown box image swap: firefox vs. IE7...grrr

Re: dropdown box image swap: firefox vs. IE7...grrr

Re: dropdown box image swap: firefox vs. IE7...grrr

Re: dropdown box image swap: firefox vs. IE7...grrr

Who is online