Solved

custom dropdown hides in IE

Posted on 2011-09-27
12
421 Views
Last Modified: 2012-05-12
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')
0
Comment
Question by:nzinsli
  • 6
  • 4
  • 2
12 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 36895785
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
 
LVL 15

Expert Comment

by:Eyal
ID: 36898538
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
 

Author Comment

by:nzinsli
ID: 36902917
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:nzinsli
ID: 36902927
Sorry moagrius, I forgot that fact. Attached is the js.
jquery.selectbox-0.5.js
0
 
LVL 15

Expert Comment

by:Eyal
ID: 36902943
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
 
LVL 19

Expert Comment

by:moagrius
ID: 36902975
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
 

Author Comment

by:nzinsli
ID: 36903911
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
 

Author Comment

by:nzinsli
ID: 36920948
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
 
LVL 19

Accepted Solution

by:
moagrius earned 500 total points
ID: 36923257
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
 

Author Closing Comment

by:nzinsli
ID: 36923975
Thank you! That's working wonderfully.
0
 

Author Comment

by:nzinsli
ID: 36923977
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
 
LVL 19

Expert Comment

by:moagrius
ID: 36924063
glad you got it working
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question