custom dropdown hides in IE

Our site is using a jquery selectbox plugin originally from brainfault.com. This allows us to style the face of the ddl with images. A problem has been found in IE, where the dropdown will hide when the scrollbar or arrows is clicked. I can see in the JS that the click function is running the hideme function, which toggles the visibility...but what I dont understand is why clicking on the scrollbar is triggering the click function of the options?

http://tinyurl.com/3hj9hpd
(There's 2 dropdowns on the right under 'Three ways to find a theme')
nzinsliAsked:
Who is Participating?
 
moagriusConnect With a Mentor Commented:
there are several ways you can do it.  with jquery, i'd probably use .is and .closest to make sure e.target isn't one of those elements.

also, binding mousedown directly to the body can behave unpredictably, as often the body will be computed as it's contents - probably safer to bind a mousedown to the window or document.

here's one way - fidde: http://jsfiddle.net/YJLXg/, and sample document attached as snippet.
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.container,
			.child {
			 margin: 1em;
			 padding: 1em;
			}
			.container {
			   background: green; 
			}
			.child {
			   background: red;
			}
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(document).bind('mousedown', function(e){
				   var handle = $(e.target);
				   if(handle.is('.container')){
					   return;
				   }
				   if(handle.closest('.container').length > 0){
					   return;    
				   } 
				   alert('body clicked, not on container');
				});
			});
		</script>
	</head>
	<body>
	<div class="container">
		<div class="child">words</div>
	</div>
	</body>
</html>

Open in new window

0
 
moagriusCommented:
all the script on that page is compressed - i opened up a handful of .js files and ran searches on "hideme", but no luck.  can you identify the specific piece of code that's relevant?
0
 
EyalCommented:
this happens because the read only text box(selectbox-occasions) loses focus and the blur of the plugin occurs

I would recommend using other plugin like
http://labs.abeautifulsite.net/projects/js/jquery/selectBox/ or
http://dl.dropbox.com/u/124192/websites/selectbox/index.html or
http://www.bulgaria-web-developers.com/projects/javascript/selectbox/ or
http://code.google.com/p/sexy-combo/
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
nzinsliAuthor Commented:
I see. Is there any way to fix that for IE? I will look into the other options in the mean time...thanks for your recommendations.
0
 
nzinsliAuthor Commented:
Sorry moagrius, I forgot that fact. Attached is the js.
jquery.selectbox-0.5.js
0
 
EyalCommented:
if we will spend time on it we can solve your problem, but you should ask the author of the plugin to fix that bug, so if in the future he will provide new version you will not need to worry on compatibility for your site
0
 
moagriusCommented:
right now it's toggling on click, if focus hasn't fired - i suspect the focus isn't firing predictably.  since the options close it anyway, i don't see any real need to toggle it on click - click should always open, and selecting an option should always close.

try changing line 102 from:

 $container.toggle();

to:

 $container.show();

i believe that's probably all you need...  but, if that works but it stays open when it shouldn't, you might try adding a mousedown on document.body to close it, and exempt the element itself (e.g., check if event.target is in the display list of the element - if not, close it).  definitely try the small change above first, before worrying about that second bit.
0
 
nzinsliAuthor Commented:
Eyal, I was going to do that, but as far as I can see the authors site is no longer there and the script isnt being kept up.
0
 
nzinsliAuthor Commented:
container.show didn't work at all.

I've got it close to working by removing the hasfocus assignments from the mouseover/mouseout of the li to a mouseenter/mouseleave of the container. However the 2nd one with the scrollbar isnt closing once you've clicked the scrollbar. It wont close until you click to 'drop it down' again and then click off elsewhere on the page. I tried adding...
	$('body')
	.click(function(){
		if ($container.is(':visible') && hasfocus <= 0 ) {
			hideMe();
		}
	})

Open in new window

...but that didn't work. How should I handle a body click and tell if its on the container or not?
0
 
nzinsliAuthor Commented:
Thank you! That's working wonderfully.
0
 
nzinsliAuthor Commented:
The final solution...
$(document).bind('mousedown', function(e){
		var handle = $(e.target);
		if(handle.is('#'+elm_id+'_container')){
			return;
		}
		if(handle.closest('#'+elm_id+'_container').length > 0){
			
			return;    
		}
		hideMe();
    });

Open in new window

0
 
moagriusCommented:
glad you got it working
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.