Solved

custom dropdown hides in IE

Posted on 2011-09-27
12
420 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

813 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now