We Keep Coding

Is there a way to add a different action on the second click with jQuery?

My current code is this:
$('.how-we-menu').on('click', function() {
$('.how-we-menu > ul').slideDown();
$('.under').on('click', function() {
$('.under > ul').slideDown();
})
$('.over').on('click', function() {
$('.over > ul').slideDown();
})
$('.ar').on('click', function() {
$('.ar > ul').slideDown();
})
$('.fc').on('click', function() {
$(this).children('ul').slideToggle();
})
});
I am trying to avoid slide toggle because it affects another element and slides both of them up so I want to make each element work individually. So when you click ".fc > ul" once it slides down and when you click again it slides up.
I hope this makes sense thanks!

Use $(this) in the function so it only affects the element you clicked on.
$('.fc').on('click', function() {
$(this).children('ul').slideToggle();
});
And all the event handlers should be at top level, not inside another event handler. Since they all do the same thing, you can bind them all at once.
$('.how-we-menu, .under, .over, .ar, .fc').on('click', function() {
$(this).children('ul').slideToggle();
});

Remove transparency on menu drop down Javascript

I've been trying to implement a feature that removes the transparency of the dropdown menu on my website so that it is actually readable for visitors.
The code I am currently using, which removes transparency on scroll but not on drop down is:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
});
});
I tried changing it to this (and variations of this) but can't seem to get it to work:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$('#transmenu').removeClass('transparency');
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
$('#transmenu').addClass('transparency');
});
});
Any help would be greatly appreciated!
Thanks!

Without the html that this is hooking into it's a bit difficult to answer your question.
But given the fact that scrolling gets the job done, the only element I can see that could be preventing the functionality you want is that your selector to add show event handler is either selecting nothing in particular or an element in the DOM that is not the bootstrap dropdown element that triggers 'show.bs.dropdown', which is my reasoning for the first statement.
You can try the following debug code to verify:
// Should log to console with 'selected' if selector works alternatively 'not selected'
console.log($('#transmenu .dropdown').length > 0 ? 'selected' : 'not selected');
// Log to console when show event triggered
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
console.log('triggered');
});
Hope that helps you find a solution. Happy coding!

see the documentation at http://api.jquery.com/on/ and it should become obvious why your fancy named events are never being triggered (without defining any event namespace in the first place).
$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});
the DOM selector also might be #transmenu.dropdown instead of #transmenu .dropdown (depending if id and class attributes are present on the DOM node to select - or if one selects the parent node by id and there is/are nested node/s with a class attribute present).

How to scroll down on click button 1 time

i want to know how i can scroll down only 1 time from homepage on click of button, if already scrolled then on click button to don't scroll down?
I'm suck with jQuery and i don't know how to do it.
Currently using this code but its always back at #what-is-it id so i don't like this:
$("#scroll").click(function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
if you have solution with javascript its also welcomed.
Just want to scroll down if users is on homepage? And if he back at home page make button again scroll down him.

Just use this styling for the navbar:
#nav {
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
}
And the solution for jQuery part is in this jsfiddle.
https://jsfiddle.net/Lnq2etu9/5/ - I think what you're looking for is this.
I just edited Sim's code to make it work for you.

Yust unset your click event with jquery off(). Here ist the API: http://api.jquery.com/off/
So update your code like this:
$("#scroll").click(function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
//unset click event:
$(this).off();
});
another possibility is to use one():
The .one() method is identical to .on(), except that the handler is
unbound after its first invocation.
from the API: http://api.jquery.com/one/
$("#scroll").one('click', function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
});
you wrote:
if already scrolled then on click button to don't scroll down?
unset your click function handler with the jquery onscroll function:
$(window).scroll(function() {
$("#scroll").off();
});
...if the user scrolls, this unsets your click event.
EDIT:
I've updated the code, you posted here and in the comment below:
//your scroll function
function scrollDown() {
$('html,body').animate({
scrollTop: $("#nav").offset().top
},'slow');
}
//set your handler on page load
$("body").on("click", "#scroll", scrollDown);
//scrol event handler
$(window).scroll(function() {
var navHeight = 300; // custom nav height
if($(window).scrollTop() > navHeight) {
$('#nav').addClass('goToTop');
//finish scroll animation
$('html,body').finish();
//set event handler to #scroll with your scroll function
$("body").off("click", "#scroll", scrollDown);
} else {
$('#nav').removeClass('goToTop');
//unset event handler
$("body").on("click", "#scroll", scrollDown);
}
});
So this sets your click event to the button, when your navbar is stick to the top and removes it when not.
And here is a link to an example fidde: http://jsfiddle.net/Lnq2etu9/3/

Add/remove class on click - how do I remove the class on a second click area?

I have a menu with a dropdown, where the LI element gets an activeclass on click. I have, after a lot if struggle, managed to set a script that sets an active class to an div that I have hidden, which shows on the click as an overlay of the site (under the dropdown). everything works as It should, except if I click outside the dropdown to close it instead of clicking the menubutton. This doesnt change my overlay div's class- how do I change my script to work on clicks outside the dropdown aswell, and what should I target here?
The hidden div:
<div id="site-overlay"></div>
script:
$.noConflict();
jQuery(document).ready(function(){
jQuery('li').on('click', function(){
if(jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
})
});

This will work:
$.noConflict();
jQuery(document).ready(function () {
jQuery('li').on('click', function () {
if (jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
});
jQuery("#site-overlay").click(function () {
jQuery(this).removeClass("active");
});
});
Notice the new event handler.

You can add a click event to the document body and then check the click location:
$(document).click(function(event) {
if(!$(event.target).closest('#site-overlay').length) {
if($('#site-overlay').is(":visible")) {
$('#site-overlay').hide()
}
}
})

jQuery('li').on('click', function(){
...
}
This executes only when you click on 'li' element.
But what about clicking outside 'li' element?
Try to add or replace:
jQuery('body').on('click', function(){
if(jQuery('.megamenu li').hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
}

jquery two divs using 'hover' event

$('img.clientImage').live('hover', function () {
if ($('div#ClientImageHover').length > 0) {
$('div#ClientImageHover').remove();
} else {
$('<div id="ClientImageHover">Change Image</div>').insertAfter($(this));
$('div#ClientImageHover').css({ 'top': $(this).position().top });
}
})
Now what happens if I hover over #ClientImageHover. You guessed it, it will start flickering quickly on and off. Because there's a mouseout event on .clientImage.
I need to create the element here and append it after the img then position it on top of it. This is working correctly, but I am having issues when hovering over #ClientImageHover. How can I keep showing this div normally when the mouse is over it and keep everything as it currently is?
Thanks.

To expand on my comment, do something like this jsFiddle
HTML:
<div class="container">
<img class="clientImage"></div>
</div>
JS
$('.container').live('hover', function () {
if ($('div#ClientImageHover').length > 0) {
$('div#ClientImageHover').remove();
} else {
$('<div id="ClientImageHover">Change Image</div>').appendTo($(this));
$('div#ClientImageHover').css({ 'top': $(this).position().top });
}
});

You could break it up to use .mouseenter() and.mouseleave(). Use .mouseenter() on img.clientImage and then only remove it on $('div#ClientImageHover').mouseleave();
http://jsfiddle.net/gkkxG/