jquery, how to avoid hide menu when i click on it - javascript

I am trying to do the following code which works fine:
/*
** SHOW OR HIDE A MENU DEPENDING IF I CLICK OUTSIDE OR INSIDE
*/
function showBasket(){
var $basket=$('#basket');
var nstyle=$basket.css("display");
if (nstyle=='none'){
$basket.fadeIn(false,function(){//showing the basket
$('html').bind("click",function(){
$basket.fadeOut();//hidding the basket
$("html").unbind("click");
});
});
}
}
Is there possible to avoid that the layer 'basket' doesn't hide when i click on it? My problem is that when i click in the html documen,t it hides, and i want that, but i also dont want to include the layer 'basket' in that event, because i have controls to use in the layer.
I would appreciate any help or idea,
thank you in advance!!

try this
function showBasket(){
var $basket=$('#basket');
var nstyle=$basket.css("display");
$basket.on('click',function(e){
e.stopPropagation();
return false;
}
if (nstyle=='none'){
$basket.fadeIn(false,function(){//showing the basket
$('html').bind("click",function(){
$basket.fadeOut();//hidding the basket
$("html").unbind("click");
});
});
}
}

Related

How to change the href of a button depending on whether a class is active or not

I am struggling to use Js and Jquery to change the href of a button depending on whether a class is active or not. I am still new to Javascript so I'm not sure if this is the best way to go about this but any advice on how to get my current code working properly would be awesome.
Here is my code..
if ($("#carousel-item-1").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-2").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-3").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
The code works for carousel-item-1. It sucessfully changes the buttons empty href attribute to the desired website address. But what can I do to get the other two working? The active class DOES change on the other carousel items so that's not the problem but my button doesn't change the href depending on which carousel item is active. It just stays at the first carousel items link. Thanks for any help
Without seeing the rest of your code, it's hard to advise, but basically you need to apply your if statement logic when a new slide is presented. At that time, the slide will be active and you can apply the attribute.
If you're using the jQuery carousel there is a event called slid.bs.carousel that is fired when a new slide transitions in. For example....
$("#myCarousel").on('slid.bs.carousel', function () {
// The carousel has finished sliding from one item to another
checkForActive()
});
function checkForActive() {
if ($("#carousel-item-1").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-2").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-3").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
}

Mega Drop Down Menu

I have created a Mega Menu, and I am not proficient in javascript/jquery.
I have applied .slideToggle to bring out the dropdown on click. I want to close the first drop-down automatically if someone clicks on the second drop-down while bringing the 2nd drop-down. I tried Google before asking here. Below is the script I used as well as the link to Codepen.
Codepen link for Mega Menu
Any help would be appreciated. Thanks a ton in advance.
$(function(){
$(".about").click(function(){
$(".mainSub").slideToggle("slow");
$(".one").toggleClass("aboutClick");
})
$(".hf").click(function(){
$(".hfnav").slideToggle("slow");
$(".two").toggleClass("aboutClick");
})
$(".cntct").click(function(){
$(".three").toggleClass("aboutClick");
})
})
Edit: I want the About Us drop-down to close if someone clicks on Housing Finance, and the content of Housing finance drop-down should come up.
I think based on your codepen link, you're looking for
$(function(){
$(".about").click(function(){
$(".mainSub").slideToggle("slow");
$('.mainNavSub>*').removeClass('aboutClick');
$(".one").addClass("aboutClick");
});
$(".hf").click(function(){
$(".hfnav").slideToggle("slow");
$('.mainNavSub>*').removeClass('aboutClick');
$(".two").addClass("aboutClick");
});
$(".cntct").click(function(){
$('.mainNavSub>*').removeClass('aboutClick');
$(".three").addClass("aboutClick");
});
});
It removes the class from the other objects and adds the class to the current object.
I think this should do it.
var mainSubs = $(".mainNavSub > li .mainSub");
$(function(){
$(".mainNav").on("click", ".mainNavSub > li", function() {
var self = $(this),
currentSub = self.find(".mainSub");
if(currentSub.is(":visible")) {
mainSubs.slideUp("slow");
} else {
$.when(mainSubs.slideUp("slow"))
.then(function() {
currentSub.slideDown("slow");
});
}
});
});

Jquery Toggle & Offclick

I'm kind of a newbie when it comes to jquery so I wondered if someone could help me.
I've made a toggle function. When you click on the user_button the user_info shows, when you offclick the user_info disapears. But now I want to let the user_info disapear also when you click again on user_info (so when it is open it closes).
This is the jquery I have. Thanks in advance!
$(document).ready(function(){
$("#user_button").click(function(){
$("#user_button").addClass("active")
$("#user_box").toggle();
});
$("#user_box").mouseup(function(){
return false;
});
$(this).mouseup(function() {
$("#user_button").removeClass("active");
$("#user_box").hide();
});
});
Could you post a testable example on for example jsfiddle.net? This allows other to "play" with the actual code.
Try to take look at methods suchas show, hide, toggle toggleClass etc.
Take your code => http://jsfiddle.net/3Nxz2/3/
$(document).ready(function(){
$("#user_button").click(function(){
//alert("click");
$("#user_button").addClass("active")
$("#user_box").toggle();
});
$("#user_box").mouseup(function(){
//return false;
});
$(this).mouseup(function() {
$("#user_button").removeClass("active");
//$("#user_box").hide();
});
});

Collapsible Menu Not Staying Open

Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks
The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.

Jquery .ClickOut Event

Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...
Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});
It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?

Categories