slideDown function needs two click to work - javascript

I'm having a slideDown function on my site. But somehow it doesn't work the first time when you click it. So I need to click two times to make the function work. What can possible be wrong?
I also want the div to slide up when I click on the button again, don't know how I will do this. I tried using slideToggle but it just ended up with the div going up and down a couple of times before closing. Even for this I needed to click two times.
Here is my JS:
function showCart() {
$("#rollDown").click(function() {
$("#shopping_cart_page").slideDown();
});
/* not relevant for this */
emptyBag = document.getElementById("emptyBag");
emptyBag.addEventListener("click", emptyCart);
}
And here is my HTML:
<div id="navbar">
<ul>
<li>Products</li>
<li>About</li>
<li>Giveaways</li>
<li>Contact </li>
<li><a id="rollDown">Shopping Bag</a></li>
</ul>
</div>

Here's a simple example:
jQuery:
$(document).ready(function(){ // Just adding the click event inside the document ready method should do the trick for you.
$("#rollDown").click(function() {
$("#shopping_cart_page").slideToggle();
});
});
HTML
<input type="submit" id="rollDown" value="Toggle"/>
<div id="shopping_cart_page">Hi</div>
Fiddle: http://jsfiddle.net/64gn1unk/

Related

Jquery on method firing only once

I am having a problem here, i want to add and remove a class to a element and I am using on() method to handle the click event on body. The code works on the first click but after the first click it wont handle the event anymore!
Below is the code:
$('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){
var navigation = $(this).parents().find('#cshero-header-navigation');
if(!navigation.hasClass('collapse')){
navigation.addClass('collapse');
}else if(navigation.hasClass('collapse')){
navigation.removeClass('collapse');
}
});
This is a problem I am having with menu icon that appears on mobile and tablets and I want to open and close the menu when clicked!
I tried putting an alert just below the first line of code and it will alerts only once! Any help is appreciated!
<div id="cshero-header-navigation" class="col-xs-12 col-sm-7 col-md-9 col-lg-9 phones-nav" style="z-index:999999;">
<div class="navigation-main">
<div class="cshero-navigation-right hidden-xs hidden-sm icon-search-hidden">
<div class="nav-button-icon">
</div>
</div>
<nav id="site-navigation" class="main-navigation">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="nav-menu menu-main-menu">
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
</ul>
</div>
</nav>
</div>
<div id="cshero-menu-mobile" class="collapse navbar-collapse">
<i class="cms-icon-menu pe-7s-menu"></i>
</div>
This is my html code. In mobile view the menu will be opened only once!
So the issue is with your code: you forgot to include a comma , between #cshero-menu-mobile and .cms-icon-menu. Below is the recommended solution:
$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){
var navigation = $(this).parents().find('#cshero-header-navigation');
if(!navigation.hasClass('collapse')){
navigation.addClass('collapse');
}else if(navigation.hasClass('collapse')){
navigation.removeClass('collapse');
}
});
Rather than using on, you could simply use the click handler as well like so $('body').click('#cshero-menu-mobile, .cms-icon-menu', function(){... which would still work.
From what I can deduce, it would appear that you're trying to imitate Bootstrap's accordion. I would recommend you use that instead.
Try this:
$('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){
$(this).parents().find('#cshero-header-navigation').toggleClass("collapse")
});
To every one interested, I fixed the problem, just changed the first line from
$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){
to
$('body').click(function(){
this seams to bind the click event directly to body so a simple solution!

How to execute js code again whenever a class name change?

Sorry for my editting format in advance cos it's been a long time since I asked a question. I will try my best to follow all the rules.
So I have this list which works like an image carousel:
<div class="carousel">
<ul>
<li class="past"><img src="img1.png"/></li>
<li class="past"><img src="img2.png"/></li>
<li class="current"><img src="img3.png"/></li>
<li class="future"><img src="img4.png"/></li>
<li class="future"><img src="img5.png"/></li>
</ul>
</div>
Whenever I click on an image, the clicked item's class name will change to "current" and I will translateX <ul> to make "current" <li> look "centered". All of these are in "carousel" <div>.
However I have another div which has a background of an empty-screen iPhone mockup:
<div class = "iphone_screen">
<div>
<img class="display" src="blank_screen.png"/>
</div>
</div>
and I want to do this to the "iPhone" <div>:
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
But this jQuery will only be executed once when I load the page.
So how do I execute my jQuery code again whenever I lick one of the <li> items and make the class name current change?
Update: Thank you all for the replies! I feel so stupid......I don't know why I ask this question.........I added a click function before and it didn't work.Then I started to look for alternatives. Now when I think about it, the selector must be wrong.
Since the event that drives everything comes from a click on the li you could run on a click for any li's (inside a ul) inside the carousel classed div.
$(".carousel > ul > li").click(function () {
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
});
put your code in a function.
$(".carousel li").on("click" ,function () {
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
});

slideToogle not working

I can't get this effect to work as it should, what might be the issue? IT doesn't open and close, in the JS fiddle it works.
I have absolutely no idea why it doesn't work. The Jquery is implemented properly. (Since my google maps code is working). I'm calling the scripts file. This is making me insane. :D
************************EDIT***************************************
So I found the issue, my GMaps code is conflictiong with this code, if I comment ot GMaps everything works fine. I just have to find a way around this now.
<nav>
<div class="nav-container js--top-nav">
<ul class="top-nav">
<li>HOME</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon "></i></a>
</nav>
And the JS
$('.js--nav-icon').click(function() {
var nav = $('.js--top-nav');
nav.slideToggle(200);
});
Are you putting your code inside $(document).ready()?
Please try like this:-
$(document).ready(function(){
$('.js--nav-icon').click(function() {
var nav = $('.js--top-nav');
nav.slideToggle(200);
});
});
As you stated "I can't get this effect to work as it should". If my asumption is right, what you want is to stop the flickering of the div while toggling. then do one thing in your js.
Replace this
var nav = $('.js--top-nav');
to
var nav = $('.top-nav'); // toggle the ul instead of the div
http://jsfiddle.net/2c5vkkqo/4/

Cannot give .focus() to an element of a dropdown menu

Here is a Boostrap navigation bar, containing a dropdown menu, containing itself an <input>.
When I click on the dropdown menu, it is succesfully displayed. The value of the <input> is successfully changed to Bonjour but this <input> doesn't get the focus. Why ?
http://jsfiddle.net/rzsmdg4f/1/
How to give the focus to a input contained in a dropdown menu with .focus() ?
Code :
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="dropdown"> Dropdown<span class="caret"></span>
<ul class="dropdown-menu" role="menu" style="min-width: 250px;">
<li>
<div style="padding:4px 20px;">Link:</div>
</li>
<li>
<div style="padding:4px 20px;">
<input class="form-control" id="ha" type="text" placeholder="blabla" />
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
JS :
{
var maa = document.getElementById('maa');
console.log(maa);
maa.addEventListener('click', function () {
console.log($('#ha'));
$('#ha').val('Bonjour');
$('#ha').focus();
});
};
jsFiddle Demo
The element exists at the time of the click, so changing its value and logging it will properly show the current state of the element. However, it has not been displayed yet and as a result focusing it will not really have any effect. You could probably refactor some small snippet in the library to expose a hook that you could use to make your focus work. Or, you could make the observation that in the very next event handler the element will be visible and use a small timeout.
maa.addEventListener('click', function () {
console.log($('#ha'));
$('#ha').val('Bonjour');
setTimeout(function(){$('#ha').focus();},10);//timeout here
});
the simplest solution i came in mind is to just delay the focus. the reason its not focusing is because the element is not yet visible.
http://jsfiddle.net/xab7Leoq/
setTimeout(function() {
$('#ha').focus();
}, 100);
another solution is to find out when its getting visible, and then do it. it may be a better solution yet more complicated. :)
edit1: stopping propagation:
// Prevents the propagation
$('#ha').click(function(ev) {
ev.stopPropagation();
});
like in http://jsfiddle.net/xab7Leoq/
Figured I might as well post an answer, even if late... since this seems to work well and doesn't require setTimeout: http://jsfiddle.net/cvLbfttL/
$("#maa").focus(function () {
$('#ha').val('Bonjour');
$('#ha').focus();
return false;
});
$('#ha').click(function(){return false;});
The anchor "maa" gets the focus when clicked, and it happens after the click callback/event returns. So you can do your code in the focus event instead. I couldn't figure out how to tab to the anchor inside JSFiddle, but I assume the code would also run if you set the focus to the anchor using some other method, but that should be fine I think, maybe even nice.
An example using callback function. Man avoid to use setTimeout() function, because the results are unpredictable.
http://jsfiddle.net/v62tdn9z/
var $maa=$('#maa'), $ha=$('#ha');
$maa.mousedown( function () {
$ha.val('Bonjour');
$maa.mousemove(function () { $ha.focus(); });
});
Having a tabindex on the element could be the solution. This worked in my case.

Toggle fade elements, fade out each on second click

I have this problem that I want to fade in the elements hidden within my li.
<li class="btn">One
<div class="hidden">Hidden One</div>
</li>
<li class="btn">Two
<div class="hidden">Hidden Two</div>
</li>
It works, but I want to be also able to hide either of the hidden elements when I click on it for the second time.
Please, see fiddle.
Any help would be highly appreciated!
You can do:
$('.btn').click(function () {
var hidden = $(this).find('.hidden');
$('.hidden').not(hidden).fadeOut();
$(this).find('.hidden').fadeToggle('fast');
});
Updated Fiddle
Just change the first line in your click handler to:
$('.hidden').not($(this).find('.hidden')).fadeOut();
jsFiddle example
$('.btn').click(function () {
$('.hidden').not($(this).find('.hidden')).fadeOut();
$(this).find('.hidden').fadeToggle('fast');
});

Categories