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.