Solved

custom dropdown hides in IE

Posted on 2011-09-27
12
415 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

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

Expert Comment

by:Eyal
Comment Utility
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
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:nzinsli
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you! That's working wonderfully.
0
 

Author Comment

by:nzinsli
Comment Utility
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
Comment Utility
glad you got it working
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
comparing strings that contain line breaks 18 34
getting id from database 5 23
Re-position the objects 7 45
modify h2 4 8
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
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…
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)

762 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

8 Experts available now in Live!

Get 1:1 Help Now