I have 2 click functions set up, the first one allows you to click and scroll through the .test divs. After this the .test:last-child is targeted to remove the red class, add the blue class and then fire a click function on the blue class div, and hide it. Only problem is it doesn't seem to recognise the click function on the .blue div and isn't working.
jsFiddle demo:
http://jsfiddle.net/neal_fletcher/adMYV/1/
HTML:
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
jQuery:
$(document).ready(function () {
$(".red").click(function () {
var next;
next = $(this).nextAll(".test");
$('html, body').animate({
scrollTop: next.offset().top
}, "slow");
return false;
});
});
$(document).ready(function () {
$('.test:last-child').removeClass('red').addClass('blue');
$('.blue').click(function () {
$(this).hide();
return false;
});
});
Any suggestions would be greatly appreciated!
Try like this:
http://jsfiddle.net/adMYV/3/
CODE
$(document).on("click", ".blue", function () {
$(this).hide();
return false;
});
You can do the click event on the .test selector.
And in the click function event to user hasClass jquery function and act as you want in each case.
EDIT:
Like this:
$(document).ready(function () {
$(".test").click(function () {
if($(this).hasClass('red')) {
var next;
next = $(this).nextAll(".test");
$('html, body').animate({
scrollTop: next.offset().top
}, "slow");
} else if($(this).hasClass('blue')) {
$(this).hide();
}
return false;
});
$('.test:last-child').removeClass('red').addClass('blue');
});
Take a look http://jsfiddle.net/adMYV/4/
Related
I want to trigger a click on "bigbutton" when hovering over a div, "div1". And if I click on any other button, the "bigbutton" needs to be unclicked and the click need to move the newly clicked button. Here's what I've tried:
Html
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
Jquery
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").trigger('click');
});
});
With the above code, I'm only able to do half of what I want. So, tried the following, did not work.
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").on('click');
});
$("button").click(function () {
$("#bigbutton").off('click');
});
});
PS. I'm extremely sorry about the formating errors as my phone has a broken screen.
Something like this?
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseover(function () {
$("#bigbutton").trigger('click');
});
$("#button1").click(function () {
$("#bigbutton").off('mouseover').css("background-color", "");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
Thanks to #mplungjan for helping me complete my first query which can be found here: Remove div with button click using JavaScript
The code works as intended however when we tried to get the slideDown() function to work it looks a bit... laggy and then just pops up without the animation being completed as intended.
Would like some support to see how can this be fixed.
Find below working code:
$(function() {
var $original = $('#ValuWrapper'),
$crossButton = $('#cross'),
$content = $("#content");
$content.on("click", ".cross", function() {
if ($(this).is("#cross")) return false;
var $cross = $(this);
$(this).next().slideUp(400, function() {
$(this).remove();
$cross.remove();
});
});
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
.hide() // if sliding
.attr("id",$original.attr("id")+$content.find("button.cross").length)
.slideDown("slow") // does not slide much so remove if you do not like it
);
});
});
#content { height:100%}
#cross { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" class="buttonImgTop cross" id="cross">X</button>
<div id="ValuWrapper">
...content comes here... <br/>
</div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>
Kindly use below updated code for animation.
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
// if sliding
.attr("id",$original.attr("id")+$content.find("button.cross").length).hide());
// does not slide much so remove if you do not like it
$("#"+$original.attr("id")+$content.find("button.cross").length).slideDown("slow");//change
});
and remove #content { height:100%;}
When you clone the $original you should reset its height so jQuery knows what height its got to animate to.
E.G: $original.css('height', $(this).height())
See demo:
$(function() {
var $original = $('#ValuWrapper'),
$crossButton = $('#cross'),
$content = $("#content");
$content.on("click", ".cross", function() {
if ($(this).is("#cross")) return false;
var $cross = $(this);
$(this).next().slideUp(400, function() {
$(this).remove();
$cross.remove();
});
});
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
.css('height', $(this).height())//set height
.hide() .attr("id",$original.attr("id")+$content.find("button.cross").length)
.slideDown("slow")
);
});
});
#content { height:100%;}
#cross { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" class="buttonImgTop cross" id="cross">X</button>
<div id="ValuWrapper">
...content comes here...
</div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>
Background: Trying to build a fullscreen menu for mobile devices on a one page site.
Problem: The #handle div needs to be clicked 2 times for action. I have tried to use following in different ways but i seem to implement it wrong in some way:
live / die,
bind / unbind,
on / off,
delegate / undelegate.
I don't understand how i should solve my problem. Sorry for bad id-names on some divs.
HTML
<div id="overlay">
<input type="checkbox" id="op"></input>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<div id="nav">
<ul>
<li class="homescroll" class="overlayli">Home</li>
<li class="servscroll" class="overlayli">Services</li>
<li class="workscroll" class="overlayli">Work</li>
<li class="aboutscroll" class="overlayli">About</li>
<li class="contactscroll" class="overlayli">Contact</li>
</ul>
</div>
</div>
</div>
Jquery
When li is clicked the user gets scrolled down the page and the menu is hidden:
If the user now wants to open the menu again it needs to be clicked 2 times for action.
<script>
$(document).ready(function () {
$('li').hover(
function () {
$('li', this).fadeIn();
},
function () {
$('li', this).fadeOut();
}
);
$(".aboutcroll").off().on('click', function() {
$('html, body').animate({
scrollTop: $("#aboutdummy").offset().top
}, 800);
$("#overlay").hide();
$("#handle").on('click');
});
});
</script>
When #handle is clicked the overlay fullscreen menu will open:
<script>
$(document).ready(function(){
$("#handle").off().on('click', function() {
$("#overlay").show();
});
});
</script>
The problem seems to be with your #handle onClick function
In your code you are using
$("#handle").off().on('click', function() {
$("#overlay").show();
});
Here .off() is removing the event listener on the first click! Try removing .off()
Also for the scrolling, you can use the following code (which is also without .off())
$("SELECTOR").click(function() {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 500);
return false;
});
Hope this works for you! And If it doesn't it would better if you can share your code via jsFiddle or CodePen.
$("span").click(function(){
$("div").fadeToggle();
});
$("span").click( function(){
$("a").css({ opacity: '0' });
$(".text1").delay(200).animate({ opacity: '1' });
$(".text2").delay(400).animate({ opacity: '1' });
$(".text3").delay(600).animate({ opacity: '1' });
});
I want to animate my text in the following way:
When you click on the "CLICK HERE" text, the links in the pink div should animate. Each line should fade in, one after the other.
However, I think my code is wrong, because if you click the "CLICK HERE" text several times in quick succession, animation build up occurs.
How should I fix this?
http://jsfiddle.net/XdLzp/
Did you try somthing like this
$("span").click(function(){
$("div").fadeToggle();
});
$("span").click( function(){
$("a").css({ opacity: '0' });
$(".text1").animate({ opacity: '1' },function(){
$(".text2").animate({ opacity: '1' },function(){
$(".text3").animate({ opacity: '1' });
});
});
});
You have to stop the animation queue on the items e.g.
<a class="content-toggle" href="#">CLICK HERE</a>
<div class="content">
<div>TEXT 1</div>
<div>TEXT 2</div>
<div>TEXT 3</div>
</div>
$('.content-toggle').on('click', function(e) {
e.preventDefault();
var content = $('.content');
// Stop any ongoing animations and hide children.
content.finish().children().finish().hide();
content.fadeToggle(400, 'swing', function() {
animateChildrenIn(content);
});
});
function animateChildrenIn(parent) {
parent.children().each(function(i) {
$(this).delay((i + 1) * 200).fadeIn(800);
});
}
Fiddle: http://jsfiddle.net/4RW5d/
Hey guys I would like to be able to add a background behind the text "CLICK ME" when clicked, so it stays active until de-clicked. I currently have a slide and toggle format which is shown here, but I have been unable to figure out where I can add another active class within the current script.
http://jsfiddle.net/schermerb/rAMQT/
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
.toggleBtn {
font:14px noral Futura, sans-serif;
color:black;
margin:50px;
}
.below {
background:red;
}
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle();
});
});
You can toggle an active class:
In your JS: (note the $(this).toggleClass('active') line)
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
$(this).toggleClass('active');
return false;
});
CSS:
.toggleBtn.active{
background:blue;
}
http://jsfiddle.net/rAMQT/3/
Do like this:
Add an active class to the elment the clicked.
and when the slideToggle complete remove this class;
Javascript
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
var self = this;
$(this).addClass("active");
$(this).next('.below').slideToggle(function(){
$(self).removeClass("active");
});
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
var self = this;
$(this).addClass("active");
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle(function(){
$(self).removeClass("active");
});
});
});
Css
.active {
background-color: blue;
}
jsFiddle
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
if ( $( this ).hasClass( 'active' )){
$(this).removeClass('active');
}else{
$(this).addClass('active');
}
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle();
});
});
Here is the JSFIDDLE with the working code