Hi all I am using a down menu on our website and it is all working fine except when you activate one of the drop-downs you can also activate any other drop-down menu without the previous one closing and it looks messy. Can anyone please suggest a way to make the previous menu close when you click on another one?
Here is my script
<script type="text/javascript">
function DropDown(el) {
this.dd1 = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd1.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd1 = new DropDown( $('#dd1') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-5').removeClass('active');
});
});
</script>
And here is the HTML
<div id="dd1" class="wrapper-dropdown-5" tabindex="1">School Information
<ul class="dropdown">
<li><i></i>Break and Breakfast Price List</li>
<li><i> </i>Bus Timetables</li>
Many Thanks
J Tech
Instead of removing a class, you need to blur the selects:
$('.wrapper-dropdown-5').blur()
I think you're looking for accordion menu . Here it's example. Demo Download
Related
<script>
$(document).ready(function() {
$("#services").click( function() {
$(".subMenus").fadeToggle("slow")
});
});
</script>
This is my code. I can hide and show the dropdown(subMenus) with this code. I want to show the dropdown in my first click which it works but I want to go to a link when I clicked to services for the second time. How can I do?
There is a perfect way for you
$("#services").one('click', function() {
$(".subMenus").fadeToggle("slow")
});
You can do this be checking the visibility of your element. When it's not visible show it, when it is move to your link:
$("#services").click( function() {
if($(".subMenus").is(":visible"))
window.location = "yourLinkHere";
else
$(".subMenus").fadeToggle("slow");
});
I am completely new to javascript (and jquery) and have been experimenting with drop down menus the past couple of days. I found this one fancy notification menu, and I tried to see what happens when I have two of them on the page. Anyways, I made a quick example of my problem here:
http://jsfiddle.net/rgt03mu4/24/
The problem is that I can have both notification containers open up if I click on both.
If I am already clicked on one of the bells, then I click on the other, it should close the other one. Instead it keeps it open, and even when you click on the other container one, it still doesn't close it. You have to click off the page or click the notification bells. I am trying to make it to where you can only have one open at a time. So in order to do this, I tried changing the names of the functions:
As you can see:
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
I added the next function to be called test(), which you would think, since it's an entirely new function it would work differently. Instead, the error still persists.
What am I doing wrong? I even gave the the new bell it's own divs and link name. I also renamed container to container2.
Set the global variable for your container:
var nContainer = $(".notification-popup-container");
var nContainer2 = $(".notification2-popup-container");
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
nContainer2.hide(); //hide the second container
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
And you can do same with other function.
DEMO
There is no need to give the popup containers different classnames.
I would give the a-tags a common classname instead of an id. The href can be used to identify the target popup, so the binding between the link and the target popup is set in the origin of action. The JS part would be abstracted and could be reused.
<a class='notification-link' href='#firstpopup'>X</a>
<a class='notification-link' href='#secondpopup'>X</a>
<div class='notification-popup-container' id="firstpopup">
... firstpopup
</div>
<div class='notification-popup-container' id="secondpopup">
... secondpopup
</div>
The click handler first hides all the popups before opening a new one.
$(".notification-link").click(function () {
$(".notification-popup-container").hide();
var targetId = $(this).attr('href');
$(targetId).fadeIn(300);
return false;
})
working example: http://jsfiddle.net/qyLekdwk/
The problem here is how the event propgation is handled
$(function () {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function () {
nContainer.fadeToggle(300);
});
//page click to hide the popup
$(document).click(function (e) {
if (!$(e.target).closest('#notification-link, .notification-popup-container').length) {
nContainer.hide();
}
});
});
$(function test() {
var nContainer2 = $(".notification2-popup-container");
//notification popup
$("#notification2-link").click(function test() {
nContainer2.fadeToggle(300);
});
$(document).click(function (e) {
if (!$(e.target).closest('#notification2-link, .notification-popup-container').length) {
nContainer2.hide();
}
});
});
Demo: Fiddle
I am using 'slideToggle' to open a couple divs on a site and want to ensure all of the divs are closed before another is opened. Is there a way to run a if..then to ensure a toggled div isn't open before opening another?
Here is my script;
<script type="text/javascript">
$(function()
{
$("a#toggle").click(function() {
$("#contact").slideToggle(500);
return false;
});
$("a#toggle_about").click(function(){
$("#about").slideToggle(500);
return false;
});
});
</script>
Calling tag;
<li>Contact Me</li>
And called div;
<div id="contact">blah, blah...</div>
And CSS;
#contact{display: none; padding: 7px; font-size: 14px;}
Thanks,
------EDIT------
This seems to work ok, I can control the transition by setting speed to 500 or 0. It just seems like a lot of code for a simple if..then.
Thanks for the suggestions and possible solutions.
<script type="text/javascript">
$(function()
{
$("a#toggle").click(function(){
if ($("#about").is(':hidden')){
$("#contact").slideToggle(500);
return false;
}else{
$("#about").slideToggle(500);
$("#contact").slideToggle(500);
return false;
}
});
$("a#toggle_about").click(function(){
if ($("#contact").is(':hidden')){
$("#about").slideToggle(500);
return false;
}else{
$("#contact").slideToggle(500);
$("#about").slideToggle(500);
return false;
}
});
});
</script>
Fiddle Example
If you add appropriate classes to your html and change the href to target the div it needs to open, you can significantly simplify your code.
<ul>
<li>Contact Me</li>
<li>About Me</li>
</ul>
<div id="contact" class="toggleable">blah, blah...</div>
<div id="about" class="toggleable">blah, blah...</div>
Now you can handle both links with a single event.
$(".toggler").click(function (e) {
e.preventDefault();
var target = $(this).attr("href");
$(".toggleable").not(target).hide();
$(target).slideToggle();
});
the end result is when you click on "Contact Me", about will hide if it is open, and contact will show if it is hidden or hide if it is shown.
http://jsfiddle.net/nYLvw/
You could implement a helper function to collapse any visible elements with a certain class, and then call that every time you're about to toggle a div.
The markup:
<div id="contact" class="toggle-content">blah, blah...</div>
The code:
function hideToggleContent() {
$('.toggle-content:visible').slideUp( 500 );
}
$(function() {
$("#toggle").click( function() {
var isVisible = $("#contact").is(':visible');
hideToggleContent();
if( isVisible ) {
return false;
}
$("#contact").slideDown( 500 );
return false;
});
$("#toggle_about").click( function() {
var isVisible = $("#about").is(':visible');
hideToggleContent();
if( isVisible ) {
return false;
}
$("#about").slideDown( 500 );
return false;
});
});
You might also check out the jQuery UI accordion, it's default behavior accomplishes the same. http://jqueryui.com/accordion/
UPDATE: Added Fiddle Link For Example
There are several ways to solution this problem.
Whenever you are tweening for effect, and you want to only tween if not already tweening, you will want to track the state of your tween.
Typically, you might have a trigger/toggler, and a target. I like to use closures to accomplish the state tracking. I might use something like this:
$(function () {
// closures
var $togglers = $('[selector][, selector]');
var $target = $('[selector]');
$target.tweening = false;
var tweenStop = function () {
$target.tweening = false;
};
var togglerClick = function () {
if (!$target.tweening) {
$target.tweening = true;
$target.slideToggle(500, tweenStop);
}
};
// handle the event
$togglers.click(togglerClick);
});
>> SAMPLE FIDDLE <<
Helo,
I have a button that displays a div after clicking this button.
But after trying many combinations of jQuery, I can not ensure that once the button clicked, the page will automatically scroll the div available while that appears.
My code
$(document).ready(function() {
var job = $("#job");
var open = $("#open");
job.hide();
open.click(function() {
job.slideDown();
$(this).fadeOut();
return false;
});
});
Thank you in advance for your answers
$("#job").hide();
$('#urBtn').on('click', function(){
if (!$("#job").is(':visible')){
$("#job").fadeOut();
}
});
I really don't know what would be the best title for this. Basically, on my page I have a dropdown menu which is implemented by jQuery (.slide). The dropdown appear in both at the top and bottom of the page, so it's easier for user to scroll down and can still use the dropdown menu. The page to display this I use rail partial so that I can refactor it quite easy.
The problem is, since the two dropdown menus are in the same page, so they can't not have the same ID but they have the same functionality, when the user click then opens up and show other options. What is the best way to let them use the same logic but different id and less code as possible.
I don't want to do something like this.
$('.sub_export_record1').hide();
$('.export_record_link1').click( function(e) {
e.preventDefault();
});
$('.export_record1').click( function(e) {
if ( $(".sub_export_record1").is(":hidden") )
{
$('.sub_export_record1').slideDown("slow");
}
else
{
$('.sub_export_record1').hide();
}
});
And then the second one
$('.sub_export_record2').hide();
$('.export_record_link2').click( function(e) {
e.preventDefault();
});
$('.export_record2').click( function(e) {
if ( $(".sub_export_record2").is(":hidden") )
{
$('.sub_export_record2').slideDown("slow");
}
else
{
$('.sub_export_record2').hide();
}
});
Thanks a lot. :)
HTML
<ul>
<li class="export_record">
<%= link_to "Export this Record"%>
<ul class="sub_export_record">
<li><%= link_to "Export to Photo Wall"%></li>
<li><%= link_to "Export to PDF"%></li>
<li><%= link_to "Export to CSV"%></li>
</ul>
</li>
</ul>
There is no need to identify the elements. Give them the same class (as you already have in the snippet):
$('.sub_export_record').hide();
$('.export_record').click( function(event) {
event.preventDefault();
var $sub = $(this).children(".sub_export_record");
if ( $sub.is(":hidden") ) {
$sub.slideDown("slow");
}
else {
$sub.hide();
}
});
Give same class and different ID and then use something like this:
Suppose the class name is export_record. You can give different ID to each menu and check which element is clicked.
$('.export_record').click( function(e) {
e.preventDefault();
$('.export_record').hide();
$(this).slideDown("slow");
if($(this).attr("id") == "THE_ID_YOU_GAVE_TO_ELEMENT"){
/* Do operation for that specific element. */
}
});
You could do this:
$('.sub_export_record').hide();
$('.export_record_link').click( function(e) {
e.preventDefault();
});
$('.export_record').click( function(e) {
var $sub = $(this).find(".sub_export_record"); //This is the key
if ($sub.is(":hidden") )
$sub.slideDown("slow");
else
$sub.hide();
});
With this, you can have the same html for both widgets and only 1 javascript code.
Hope this helps. Cheers
Just hook up the same event handlers to both elements. Use parent IDs to directly address each object for the purposes of hooking up the event handlers. For purposes of this illustration, I just assumed that the top menu is contained inside a div with an id of header and the bottom div with in id of footer, but you can use any CSS selector that uniquely targets each one.
$('#header .sub_export_record').click(handleExportClick);
$('#footer .sub_export_record').click(handleExportClick);
function handleExportClick() {
var $obj = $(this);
if ($obj.is(":hidden")) {
$obj.slideDown("slow");
} else {
$obj.hide();
}
}
Several comments :
you could use id with multiple selectors, you would have something like :
$("#sub1, #sub2").hide();
$("#sub_export1, #sub_export2").click()...
you cannot use multiple click functions, you will have to merge all your functions into the click one [Edit] i was wrong as Felix pointed out
Regards,
Max