?
Solved

JQuery Slide Panel Close Action

Posted on 2011-10-26
5
Medium Priority
?
855 Views
Last Modified: 2012-05-12
Hi,
Please have a look at http://www.gotoprintshop.com/desco and the slide panel on top.
Everything works just fine. Only thing I want to close the panel, once open, on click outside the open tab. This is for visitors who miss the close button.

The script now is:
jQuery(document).ready(function() {
    
    // Expand Panel
    jQuery("#open").click(function(){
        jQuery("div#panel").slideDown("slow");
    }); 
    
    // Collapse Panel
    jQuery("#close").click(function(){
        jQuery("div#panel").slideUp("slow");
    });     
    
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    jQuery("#toggle a").click(function () {
        jQuery("#toggle a").toggle();
    });     
        
});

Open in new window


What could be the function to close the panel while clicking outside?

Thanks for any help.
0
Comment
Question by:jayseena
  • 3
  • 2
5 Comments
 
LVL 15

Expert Comment

by:Eyal
ID: 37036309
try to add this...
$(document).mouseup(function (e) {
  $('div#panel').click();
});

$('div#panel').mouseup(function(e) {
  e.stopPropagation();
//if that doesn't work try using preventDefault():
//e.preventDefault();
});

Open in new window



0
 
LVL 15

Expert Comment

by:Eyal
ID: 37036314
sorry my mistake...

instead of
$('div#panel').click();
use
$("#close").click();
0
 

Author Comment

by:jayseena
ID: 37036388
Thanks for that quick help.
It works, but has a small issue. Visit http://www.gotoprintshop.com/desco again.
When we click outside the tab, it closes. But if try to open the tab again, it doesn't open, until we click on outside again.  Further the close but doesn't appear when opened. And you click outside once, then on the close button, the panel opens and closes two times. This is the same when you click on the close button link, when the slider is open.

Am I doing a mistake with the code you provided? The code used right now is :

jQuery(document).ready(function() {
	
	// Expand Panel
	jQuery("#open").click(function(){
		jQuery("div#panel").slideDown("slow");
	});	
	
	// Collapse Panel
	jQuery("#close").click(function(){
		jQuery("div#panel").slideUp("slow");
	});		
	
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	jQuery("#toggle a").click(function () {
		jQuery("#toggle a").toggle();
	});	
	
	
		
	$(document).mouseup(function (e) {
	$("#close").click();
	});

	$('div#panel').mouseup(function(e) {
 	 e.stopPropagation();
	//if that doesn't work try using preventDefault():
	//e.preventDefault();
	});

		
});

Open in new window

0
 
LVL 15

Accepted Solution

by:
Eyal earned 2000 total points
ID: 37036394
try this...
jQuery(document).ready(function() {
	
	// Expand Panel
	jQuery("#open").click(function(){
		jQuery("div#panel").slideDown("slow");
	});	
	
	// Collapse Panel
	jQuery("#close").click(function(){
		jQuery("div#panel").slideUp("slow");
	});		
	
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	jQuery("#toggle a").click(function () {
		jQuery("#toggle a").toggle();
	});	
	
	
		
	$(document).mouseup(function (e) {
	$("#close").click();
	});

	$('div#panel, #toggle a').mouseup(function(e) {
 	 e.stopPropagation();
	//if that doesn't work try using preventDefault():
	//e.preventDefault();
	});

		
});

Open in new window

0
 

Author Closing Comment

by:jayseena
ID: 37036416
Thank you very much.
Works perfectly. (Only that, once it is closed and click outside, the button toggles to close. )
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

616 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