Solved

custom dropdown hides in IE

Posted on 2011-09-27
12
426 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Database Solutions Engineer FAQs

In this series, we will discuss common questions received as a database Solutions Engineer at Percona. In this role, we speak with a wide array of MySQL and MongoDB users responsible for both extremely large and complex environments to smaller single-server environments.

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

617 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