Safari Javascript Issue

Question

Hello,

I am currently working on a Javascript program for my company (Leader Technologies) that is used to register products for Logitech. The URL for that is : http://wwwtest.onlineregister.com/logitechreg/

My program looks totally fine on everything single web browser (including IE 6) that I have tried except Safari 4. On Safari 4, after a location, language and product category have been selected, when the actual product menu is clicked (id=WHPR), the div responsible for displaying the product is shown, but the drop-down selections are still visible. On all other browsers, the drop-down and the possible selections inside it in hidden (which is the intended behavior.)

Directly, my question is can I hid this drop-down successfully in Safari 4 WITHOUT completely emptying out the drop down and then repopulating it with only the selected value? I would rather not do this if at all possible, but if it's the only way to accomplish my goal then I can change the site additionally.

I believe the problem is where I set the listeners on the <select> :

<select id="WHPR" class="ui-formulate-ignore" style="width: 280px; visibility: visible;" onchange="whprChanged(this);" onfocus="displaySelector(form, document.getElementById('WHPR')); document.getElementById('imageHolder').focus(); this.blur();" name="WHPR">

Thank you all very much for taking the time to help me. I really appreciate all the help available on this site.

-Brian J. Stinar-

Answer 1

I think it's some kind of a bug in Safari - for example if you do .focus() nof for the DIV but for another input element like a textfield, then after clicking the selectbox both would have the focus (or actually, the focus would stay in the selectbox and the textbox would only seem to have the focus by having thicker border than usual).

Anyhow quick and dirty methot to achieve the goal would be removing the selectbox from the page (display: none) and then bringing it back (display:inline).

replace the this.blur() with the following command

this.style.cssText='display:none';var select = this; window.setTimeout(function(){select.style.cssText='display:inline';},1);

If you don't use a delay then it doesn't work - the removal and retrieval of the element need to be in different scopes.

Answer 2

Not to pick on your style, but attaching listeners inline like you're doing is not very clean. Why not take advantage of jQuery's ability to deal with any browser discrepancies? The page you refer to is already loading it.

See http://docs.jquery.com/Events/bind