We Keep Coding

launch function once if class is added on visible Element [duplicate]

This question already has an answer here:
jQuery trigger when 2/3s of div are in viewport
(1 answer)
Closed 6 years ago.
I would like to check if a class is added on an Element during the scroll and launch another function, just once, until the class is added to the next element.
here my first function :
function onScreen() {
$('article').each(function() {
var thisTop = $(this).offset().top - $(window).scrollTop();
var middleScreen = $(window).height() / 2;
if (thisTop < middleScreen && (thisTop + $(this).height()) > middleScreen) {
$(this).addClass('visible');
} else {
$(this).removeClass('visible');
}
});
}
// launch
$(window).on('load scroll', onScreen);
My seconde function : I would like to launch just once if the visible class is added to another article.
function textChange() {
var v = $('article.visible');
var el = $('.el', v);
var text = $(el).html();
$('.titre').html(text);
}
$(window).on('load scroll', textChange);
note : It's important to me to keep two separate function.
My issue is the scroll function get call textChange() each pixel I scroll on the page. Strangly, the onScreen() function add the visible class just once until the next article gonna be visible.
Thanks for yours suggestions.

Introduce a global variable that tells you if the function has been executed or not:
var textChanged = false;
In your textChange() function set it to true when the function was called the first time:
function textChange() {
if(!textChanged){
textChanged = true;
var v = $('article.visible');
var el = $('.el', v);
var text = $(el).html();
$('.titre').html(text);
}
}
EDIT: Alternatively you can do the check before the function gets called:
if (thisTop < middleScreen && (thisTop + $(this).height()) > middleScreen) {
$(this).addClass('visible');
if(!textChanged){
textChange();
}
} else {
$(this).removeClass('visible');
}

jQuery toggle not working on resize

When I resize the window, the toggle part is not working, I had to refresh the page again(keeping the window in the resized state) and it works fine.
bodyClass() part is working fine, just not the menu() part.
Please help :)
jQuery(document).ready(function() {
function menu(){
var memberAreaWidth = jQuery(window).width();
if( memberAreaWidth <= 900 ){
jQuery('.memebers-menu').css('display', 'none');
jQuery('.memebers-header-logo span').click(function(){
jQuery('.memebers-menu').toggle();
});
}
}
function bodyClass(){
var memberAreaWidth = jQuery(window).width();
if( memberAreaWidth > 900 ){
jQuery('body').addClass('fullwidth');
}else{
jQuery('body').removeClass('fullwidth');
}
}
jQuery(window).on("load resize",function(){
menu();
bodyClass();
});
});

Move the click event delegation so it only happens once. The rest of the code looks fine.
var smallWidth = false;
jQuery('.memebers-header-logo span').click(function(){
if (smallWidth){
jQuery('.memebers-menu').toggle();
}
});
function menu(){
var memberAreaWidth = jQuery(window).width();
if( memberAreaWidth <= 900 ){
jQuery('.memebers-menu').css('display', 'none');
smallWidth = true;
} else {
smallWidth = false;
}
}

Simplify your code a bit, put the event handlers outside the functions so they do not re-bind each time the function is called (which would end up with multiple event handlers firing); pass a parameter so you only have to calculate it once.
jQuery(document).ready(function() {
jQuery('.memebers-header-logo span').on('click', function() {
jQuery('.memebers-menu').toggle();
});
jQuery(window).on("load resize", function() {
var memberAreaWidth = jQuery(window).width();
menu(memberAreaWidth);
bodyClass(memberAreaWidth);
});
function menu(memberAreaWidth) {
if (memberAreaWidth <= 900) {
jQuery('.memebers-menu').hide();
}
}
function bodyClass(memberAreaWidth) {
if (memberAreaWidth > 900) {
jQuery('body').addClass('fullwidth');
} else {
jQuery('body').removeClass('fullwidth');
}
}
});

Jquery functions - Ignore particular link within a function

The following single page site uses a waypoint script to navigate and highlight nav items - http://www.jbleitch.co.uk/dt/
It works well - the issue is that we need to alter a link to navigate to an external website - but the script prevents default on any links - so its reasonably complicated!
this is the original script -
//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
var dataslider = 1;
var clicked = false;
var windowWidth = window.innerWidth;
var narrow = (windowWidth <= 1000);
var navblock = $('.navBlock');
var dataslide = 1;
var myDirection = 'down';
var curSlide = 0;
slide.waypoint(function(direction) {
if (direction === "down") {
dataslide = $(this).attr('data-slide');
curslide = dataslide;
if (narrow) {
navScroll(dataslide);
}
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
}, {
offset: '25%'
}).waypoint(function (direction) {
if (direction === "up") {
dataslide = $(this).attr('data-slide');
curslide = dataslide;
if (narrow) {
navScroll(dataslide);
}
links.removeClass('active');
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active');
}
}, {
offset: '-25%'
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
//if (dataslide === 0 && $('.slide[data-slide=2]').offset().top > 10) {
// navblock.hide();
//}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
//alert(myDirection);
//alert(dataslide + ' ' + curSlide);
var scrollto = $('.slide[data-slide="' + dataslide + '"]').offset().top
//if (dataslide > curSlide) {
// scrollto = scrollto + 1;
// //alert("down");
//}
//else if (dataslide < curSlide) {
// //alert("up");
// scrollto = scrollto - 1;
//}
htmlbody.stop().animate({
scrollTop: scrollto
}, 3200, 'swing', function () {
if (narrow) {
navScroll(dataslide);
}
else {
navblock.removeClass('nofix');
navblock.removeAttr('style');
}
curSlide = dataslide
});
//setTimeout(function () { }, 3300);
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
});
function navScroll(dataslide) {
//alert('div[data-slide="' + dataslide + '"]');
var slidepos = $('.slide[data-slide="' + dataslide + '"]').offset.top;
navblock.addClass('nofix');
//navblock.hide();
navblock.css({ top: $('.slide[data-slide="' + dataslide + '"]').offset().top });
navblock.fadeIn('slow');
//alert(navblock.attr('class'));
//alert("nav scroll");
}
this is the navigation list -
<ul class="navigation">
<li data-slide="2" class="nv1 active">Services</li>
<li data-slide="3" class="nv2">Fees & Reporting</li>
<li data-slide="4" class="nv3">News</li>
<li data-slide="5" class="nv4">Meet the Team</li>
<li data-slide="5" class="nv4"><a style="color:inherit!important; text-decoration:none" href="http:www.othersite.com">Careers</a></li>
<li data-slide="7" class="nv6">Our Credentials</li>
<li data-slide="8" class="nv7">Contact</li>
</ul>
I need to change the careers site to navigate to the url but the script above prevents it from doing so - I have tried the following alteration -
links.click(function (e) {
if(!=".nv5"){
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});
But no luck - can anyone suggest an alternative!?

Usually I get the info i want in a data attribute, and then i can make anything
<li data-slide="5" class="nv4">
Careers
</li>
Then, in the click handler:
links.click(function (e) {
if($(this).attr("data-ref") != ""){
//get the link
var link = $(this).attr("data-ref");
//go to link
window.location.href = link;
} else {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});

You can simply add a condition to your link method whereby it will check for an attribute or some other property and follow through with the link if required
You were on the right track with your initial attempt. This should work
links.click(function (e) {
if(!$(this).hasClass("nv5")){
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});
That's assuming you have the class nv5 on the links you want to remove the behaviour from

Prevent scrolling jquery script from running twice

I'm new to jquery and have put together the following code to make a DIV appear after a set scroll-down amount. If scrolling back up, the DIV disappears. Optionally, once the DIV has appeared, there is a link to close it. This all works as intended, apart from that I only want the script to run once. At the moment if I scroll back up, the yellow box appears again. How can I ensure the box stays closed? As another option, could I integrate cookies or localStorage?
Many thanks! Russ.
Javascript:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
return false;
});
});
Here is the jsfiddle link to my code: jsfiddle link

You can remove the class to ensure the box stays enclosed with removeClass(). Or directly $(".box").remove() after your animation.
You can store this choice with cookie but if the client deletes his cookies, it's lost.

You can remove event scroll from window and for localStorage do something like that:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
if(localStorage['noNotification'] == 'true'){
$(window).off('scroll');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
$(window).off('scroll');
localStorage['noNotification'] = 'true';
return false;
});
});

try this http://jsfiddle.net/AbwXu/4/
var notdisplayed=true;
$(function(){
var target = $(".box");
if($(window).scrollTop() > 30){
target.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 30 && notdisplayed){
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
notdisplayed=false;
}
});
$('a.close').click(function() {
$($(this).attr('href')).slideUp();
notdisplayed=false;
return false;
});

.next() not working as intended

So,
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).prev().addClass('active');
}
works fine, it adds the class "active" to this previous div of the same kind.
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).next().addClass('active');
}
However, adds the class to the next div (as i intend for it to do) for about 0.5 of a second BUT then removes it.
Here's ALL of the jQuery (as per your comments below) - Please do not comment on my horrible code organization
$(window).load(function () {
// Initial variables
var numberSlides = 0;
var currentSlide = 1;
var ready = true;
var pageWidthR = $(document).width() - 352;
var pageWidthL = $(document).width() - 352;
// Update number of slides by number of .slide elements
$('#features-slider .slide').each(function () {
numberSlides++;
});
// Go through each slide and move it to the left of the screen
var i = 0;
$($('#features-slider .slide').get().reverse()).each(function () {
if (i == 0) {
} else {
var newWidth = i * 115;
$(this).css('left', '-' + newWidth + '%');
}
i++;
});
// Animate the first slide in
$('#features-slider .slide:last-child').addClass('active').animate({
left: 0
}, 1500);
// Remove the loading message
$('#loading').fadeOut(1000, function () {
$('#loading').remove();
// Now that we're done - we can show it
$('#features-slider').show();
});
/***** Left and Right buttons *****/
/* Right */
$('#rightbutton').click(function () {
var numberSlides = 0;
$('#features-slider .slide').each(function () {
numberSlides++;
});
var index = $('.slide.active').index() + 1;
if (!$('.slide').is(':animated') && index != 1) {
$('#features-slider .slide').each(function () {
if ($(this).hasClass('active')) {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) + 115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) + 115;
}
$(this).animate({
left: newLeft + '%'
}, 1500);
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).prev().addClass('active');
}
});
}
});
/* Left */
$('#leftbutton').click(function () {
var numberSlides = 0;
$('#features-slider .slide').each(function () {
numberSlides++;
});
var index = $('.slide.active').index() + 1;
if (!$('.slide').is(':animated') && index != numberSlides) {
$('#features-slider .slide').each(function () {
if ($(this).hasClass('active')) {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) - 115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) - 115;
}
$(this).animate({
left: newLeft + '%'
}, 1500);
if ($(this).hasClass('active')) {
$(this).next().addClass('active');
$(this).removeClass('active').not($(this).next());
}
});
}
});
});
$(document).ready(function () {
// Hide the slider and show a loading message while we do stuff and the images / DOM loads - Also disable overflow on the body so no horizontal scrollbar is shown
$('body').css('overflow-x', 'hidden');
$('#features-slider').hide();
$('#loading').html('<center> <img id="loader" src="/wp-content/themes/responsive/library/images/ajax-loader.gif" /> Loading</center>');
});
RESOLVED
New left button function :
$('#leftbutton').click(function(){
var numberSlides = 0;
$('#features-slider .slide').each(function(){
numberSlides++;
});
var index = $('.slide.active').index()+1;
if( !$('.slide').is(':animated') && index != numberSlides ){
var done = false;
$('#features-slider .slide').each(function(){
if($(this).hasClass('active')){
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft)-115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft)-115;
}
$(this).animate({left: newLeft+'%'}, 1500);
if($(this).hasClass('active') && done == false){
$(this).next().addClass('active');
$(this).removeClass('active');
done = true;
}
});
});

If you're iterating forward through the elements, then it should be clear what's going on - you add the "active" class to the next element, and then the next iteration takes it away.
This is just a guess however as you did not post enough code for me (or anybody else) to be sure.
edit — ok now that you've updated the question, it's clear that the guess was correct. The .each() function will iterate forward through the elements. When an element has the "active" class, and the code removes it and adds it to the next element, then on the next iteration the work is undone.

Since you are referencing this and by the behavior you're describing, you are likely iterating a loop for a list of elements. As a result, you are completing the action you want but the next iteration is removing the previous changes due to your usage of removing a class and then adding the class back.
As it stands now, your code does not illustrate how this occurence can be happening.
Update:
As suspected, you seem to be looping as signified by: each(function(){. While iterating through your objects the class is being pushed forward and is not acting as desired. You are stating add the class to the next element, but remove it from the current element, and this behavior continues through your iteration.
On a side note, update your code to call removeClass() on the current object first, before adding it to the next object:
if ($(this).hasClass('active')) {
$(this).removeClass('active').next().addClass('active');
}