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

[erkerr67]

Hello, hoping someone can help me out with this! I'm doing a basic image swap from a simple text dropdown box. You select the specified text from the dropdown box and it swaps out the image with another image corresponding to that text.

I have this working well in Firefox, no problems at all. But when I test it in IE7, nothing happens (of course, right?)... any ideas? Makes me sad

Now I'm not sure if this is the most effecient way of building this but it's how a beginner like me put it together....basic onmousedown functions within the form. ...does IE not read these because they're placed within a form? I have no clue! help!

Anyway, here's my code:

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

<select name="extend" class="custom">
<option value="not-extended" selected="selected" onmousedown="if(document.getElementById('extend2').style.display == 'none'){ document.getElementById('extend2').style.display = 'block'; document.getElementById('extend').style.display = 'none'; } ">not extended</option>

<option value="extended" onmousedown="if(document.getElementById('extend').style.display == 'none'){ document.getElementById('extend').style.display = 'block'; document.getElementById('extend2').style.display = 'none'; } ">Extended</option>
</select>

</form>
</div>

and here's a scrap link that gives you an idea of what im trying to do....
http://208.179.155.80/customizer.html
(look at the snap-valve type/extended option - the rest dont do anything yet, only that one should be functioning)

[rangana]

Replace this part of your markup:

Code: Select all

<select name="extend" class="custom">
                                                <option value="not-extended" selected="selected" onmousedown="if(document.getElementById('extend2').style.display == 'none'){ document.getElementById('extend2').style.display = 'block'; document.getElementById('extend').style.display = 'none'; } ">not extended</option>
<option value="extended" onmousedown="if(document.getElementById('extend').style.display == 'none'){ document.getElementById('extend').style.display = 'block'; document.getElementById('extend2').style.display = 'none'; } ">Extended</option>
</select>


...with:

Code: Select all

<select name="extend" class="custom" onchange="var e1=document.getElementById('extend'), e2 = document.getElementById('extend2'); e1.style.display=this.value=='not-extended'?'none':''; e2.style.display=this.value=='not-extended'?'':'none' ">
<option value="not-extended" selected="selected">not extended</option>
<option value="extended">Extended</option>
</select>


You should rely on "onchange" event as it's cross-browser.

Hope that helps.

[erkerr67]

that is great, thank you so much it works!

didn't realize onmousedown was not IE compatable. and that way of coding it with the variables is much for efficient and saves room too, thank you!

I also just noticed (only in IE of course!) that if you click on the "extend" option, it gives me horrible gaps between the divs - do you have any idea why? Each div has it's set height in the CSS to be the size of the image so there should be no reason for gaps...firefox displays all of this fine

I know it's not a javascript question but just adding to this post. IE is frustrating to me as I don't know all the tricks and tips yet. any help would be fantastic.

[rangana]

Remove all the browsers default margin and padding.

Try to have this on your CSS:

Code: Select all

*{
margin:0px;
padding:0px;
}


...otherwise, create another rule for IE and set the top margin with a negative value.

[erkerr67]

Ah! I can't believe I forgot THAT part...that's always the first thing I plug in ha..

buuut unfortunately that actually still didn't work.

Good idea though about setting up the rule for a negative margin just for IE...I guess that's an effective way around it. How would I go about doing that just for that specific DIV?

[rangana]

Code: Select all

<!--[if IE]>
<style type="text/css">
#extend, #extend2 {
margin-top:-10px;
}
</style>
<![endif]-->


Feel free to adjust the negative marign.

[erkerr67]

this goes in the <head> </head> within <script> tags correct? at least that's what i thought but it doesn't seem to be executing :/

[rangana]

It must go on the head tag, but not inside the script tag.

[erkerr67]

Hm..the whole code is commented out when placed within the head tags and not script tags... trying to grasp this whole javascript workaround thing as i'm pretty new to it. thank you so much for helping me.

and as a small backtrack, if you look at my link again, (http://208.179.155.80/customizer.html) another addition to the product has a selection of 4 different images to choose from....when looking at that new javascript code you gave me to swap out images, im having trouble trying to understand the logic part of hiding the certain divs (this part especially:

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

(i know it works but i just havent seen it built that way before so its a bit confusing to me).
I'm not certain what is changing what in that blip of code since the foil value is repeated twice but being called by 2 different ID's hmm.

how would i go about doing this for multiple choices as opposed to just two?

[erkerr67]

oh ok well i figured out the IE - case CSS...it's been a while since i've used conditional statements for IE so it took a while for it to come back to me... so got that part fixed. Thanks a ton for the help on all of that. Any ideas too about that other problem I ran into? Still been trying to figure that one out with the multiple choices over just the two choices. A little bit of a puzzle for me.

[rangana]

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.

[Suffer]

rangana in first place, as always.

[erkerr67]

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>

[rangana]

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.

[erkerr67]

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.