This jQuery code as part of jQuery Waypoints messes up all the jQuery code below it, what's wrong please? (By messing up I mean I don't believe code below fires.)
Very many thanks for your help, and please let me know if you would like any further details.
var waypoint = new Waypoint({
element: document.getElementsByClassName('social-section-3'),
handler: function(direction) {
if (direction === 'down') {
$('.social-bg-tennis-video').get(0).pause();
$('.social-bg-events-video').get(0).play();
}
if (direction === 'up') {
$('.social-bg-tennis-video').get(0).play();
$('.social-bg-events-video').get(0).pause();
}
}
});
var waypoint = new Waypoint({
element: document.getElementsByClassName('home-section-5'),
handler: function(direction) {
if (direction === 'down') {
$('.home-bg-social-video').get(0).play();
}
if (direction === 'up') {
$('.home-bg-social-video').get(0).pause();
}
}
});
var waypoint = new Waypoint({
element: document.getElementsByClassName('coaching-section-3'),
handler: function(direction) {
if (direction === 'down') {
$('.coaching-bg-private-video').get(0).pause();
$('.coaching-bg-junior-video').get(0).play();
}
if (direction === 'up') {
$('.coaching-bg-private-video').get(0).play();
$('.coaching-bg-junior-video').get(0).pause();
}
}
});
var waypoint = new Waypoint({
element: document.getElementsByClassName('coaching-section-4'),
handler: function(direction) {
if (direction === 'down') {
$('.coaching-bg-junior-video').get(0).pause();
$('.coaching-bg-mini-video').get(0).play();
}
if (direction === 'up') {
$('.coaching-bg-junior-video').get(0).play();
$('.coaching-bg-mini-video').get(0).pause();
}
}
});
UPDATE
I Have found that I can add as many…
var waypoint_coachingsection3 = new Waypoint({
element: document.getElementsByClassName('coaching-section-3'),
handler: function(direction) {
if (direction === 'down') {
$('.coaching-bg-private-video').get(0).pause();
$('.coaching-bg-junior-video').get(0).play();
}
if (direction === 'up') {
$('.coaching-bg-private-video').get(0).play();
$('.coaching-bg-junior-video').get(0).pause();
}
}
});
…as I like and the code the Waypoints code works, although any unrelated jQuery below or above this code fails.
I also found if I add other of these code blocks for elements on other pages, the Waypoint code blocks for the other pages below the top code fail!
Also, I found this as the only (related) console error:
Uncaught TypeError: Cannot read property ‘top’ of undefined – jquery.waypoints.min.js:7
I fixed this by using a different method of calling Waypoints which worked for my situation, eg.:
var waypoints = $('.coaching-section-3').waypoint({
handler: function(direction) {
if (direction === 'down') {
$('.coaching-bg-private-video').get(0).pause();
$('.coaching-bg-junior-video').get(0).play();
}
if (direction === 'up') {
$('.coaching-bg-private-video').get(0).play();
$('.coaching-bg-junior-video').get(0).pause();
}
},
offset: '30%'
})
Thanks for everyone's help.
Related
I'm using jQuery 1.12.2 and sometimes I encoutered the error Unable to get property 'defaultView' of undefined or null reference.
The error occured at this line :
if (jQuery(event.target).is('[contenteditable]') ||
jQuery(event.target).css('position') == 'absolute' ||
jQuery(event.target).css('position') == 'fixed') {
return;
}
Edit
This is on document mousedown event.
jQuery(document).bind('mousedown', function (event) {
var $active_element;
if (jQuery(event.target).parents(".ui-draggable").length > 0) {
if (jQuery(event.target).parents(".ui-draggable").parent().data('contentbuilder')) {
$active_element = jQuery(event.target).parents(".ui-draggable").parent(); //Get current Builder element
}
}
//Remove Overlay on embedded object to enable the object.
if (jQuery(event.target).attr("class") == 'ovl') {
jQuery(event.target).css('z-index', '-1');
}
(...)
if (jQuery(event.target).is('[contenteditable]') ||
jQuery(event.target).css('position') == 'absolute' ||
jQuery(event.target).css('position') == 'fixed'
) {
return;
}
jQuery(event.target).parents().each(function (e) {
if (jQuery(this).is('[contenteditable]') ||
jQuery(this).css('position') == 'absolute' ||
jQuery(this).css('position') == 'fixed'
) {
return;
}
});
(...)
}
I think it isn't in the .each() function but maybe ?
It comes from getComputedStyle() fucnction...
Can you help me ?
I was trying to make something similar to this site (service section)
I almost achieved the basic functionality by using waypoint.js but unable to make transition animation i.e. controlled with scroll.
I tried doing this jquery fadeout and fadein but that makes sometime if we scroll fast, waypoint event not triggering.
You can view my code (friddle) here
var $fixe = $('.fixe');
var $one = $('.one');
var $two = $('.two');
var $three = $('.three');
var $four = $('.four');
var $end = $('.dummy');
$fixe.waypoint(function (direction) {
if (direction == 'down') {
$fixe.addClass('fixed');
}
else {
$fixe.removeClass('fixed');
}
});
$one.waypoint(function (direction) {
if (direction == 'down') {
$('p').text("This is a test ONE");
$('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+TWO&w=200&h=100&txttrack=0");
}
else {
$('p').text("This is a test ZERO");
$('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+ONE&w=200&h=100&txttrack=0");
}
});
$two.waypoint(function (direction) {
if (direction == 'down') {
$('p').text("This is a test TWO");
$('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+THREE&w=200&h=100&txttrack=0");
}
else {
$('p').text("This is a test ONE");
$('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+TWO&w=200&h=100&txttrack=0");
}
});
$three.waypoint(function (direction) {
if (direction == 'down') {
$('p').text("This is a test THREE");
$('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+FOUR&w=200&h=100&txttrack=0");
}
else {
$('p').text("This is a test TWO");
$('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+THREE&w=200&h=100&txttrack=0");
}
});
$end.waypoint(function (direction) {
if (direction == 'down') {
$fixe.removeClass('fixed');
}
else {
$fixe.addClass('fixed');
}
}, { offset: '99%' });
Also when the last waypoint event triggered the "fixed" class removed which causing big blank space. Is there any way to solve this.
Here is my code:
$(function() {
$('#fadeinright').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("fadeinright");
}
});
$('#fadeinleft').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("fadeinleft");
}
});
$('#fadeintop').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("fadeintop");
}
});
$('#fadeinbottom').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("fadeinbottom");
}
});
$('#simplefadein').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass("simplefadein");
}
});
Does some one knows how to make it shorter?
i am about to add more classes, and im not sure its the right way of doing the code.
here is an example how it works: https://jsfiddle.net/nbgdzspy/35/
My variant
$('#fadeinright, #fadeinleft, #fadeintop, #fadeinbottom, #fadeinbig, #fadeinsmall').waypoint(function(direction) {
if (direction === 'down') {
$(this).removeClass($(this).attr('id'));
}
});
Here is one way:
['fadeinright', 'fadeinleft', 'fadeintop', 'fadeinbottom', 'fadeinbig', 'fadeinsmall'].forEach(function (name) {
$('#' + name).waypoint(function (direction) {
if (direction === 'down') {
$(this).removeClass(name);
}
}, {
offset: '100%'
});
});
I have written a small script that highlights a different event (div) every 3 seconds. This works fine on firefox chrome safari but on ie8-ie10 it doesn't run.
When I go into the developertools and debug the script I get the error Object doesn't support this property or method.
It stops after this line
var status = jQuery(".home-event-images").css("display");
The complete script
jQuery(document).ready(function($){
rotate();
});
var cnt=1;
function rotate() {
var status = jQuery(".home-event-images").css("display");
if (status === 'block') {
if (cnt < 2) {
cnt++;
} else {
cnt = 0;
}
if (cnt === 0) {
jQuery(".home-event-listing1").removeClass("home-event-listing-active");
jQuery(".home-event-listing2").addClass("home-event-listing-active");
jQuery(".home-event-image-active").removeClass("home-event-image-active");
jQuery(".home-events-image2").addClass("home-event-image-active");
}
if (cnt === 1) {
jQuery(".home-event-listing2").removeClass("home-event-listing-active");
jQuery(".home-event-listing3").addClass("home-event-listing-active");
jQuery(".home-event-image-active").removeClass("home-event-image-active");
jQuery(".home-events-image3").addClass("home-event-image-active");
}
if (cnt === 2) {
jQuery(".home-event-listing3").removeClass("home-event-listing-active");
jQuery(".home-event-listing1").addClass("home-event-listing-active");
jQuery(".home-event-image-active").removeClass("home-event-image-active");
jQuery(".home-events-image1").addClass("home-event-image-active");
}
} else {
cnt=1;
jQuery(".home-event-listing1").removeClass("home-event-listing-active");
jQuery(".home-event-image-active").removeClass("home-event-image-active");
jQuery(".home-event-listing2").removeClass("home-event-listing-active");
jQuery(".home-event-image-active").removeClass("home-event-image-active");
jQuery(".home-event-listing3").removeClass("home-event-listing-active");
jQuery(".home-event-image-active").removeClass("home-event-image-active");
}
setTimeout(rotate(),3500);
}
Any help would be appreciated
So here is my snake script -
http://jsfiddle.net/6bKHc/24/
I started to create a snake game, but basically move(top), move(bottom) e.c. is not working. Any ideas why? I understand that I can't pass the elements to variable like this, so maybe you could show me how to do that correctly?
Ok cleared syntax and took a look at errors this should get you started
$(document).keydown(function(event){
var move, inter;
inter = setInterval(move = function() {
var dir = $(".snake").data('dir');
var snake = $('.snake');
if(dir == 'top') {
snake.stop().animate({"top": "+=5px"});
}
if(dir == 'bottom') {
snake.stop().animate({"top": "-=5px"});
}
if(dir == 'left') {
snake.stop().animate({"left": "+=5px"});
}
if(dir == 'right') {
snake.stop().animate({"top": "-=5px"});
}
}, 500);
if(event.which == 40) {
$(".snake").data('dir','top');
} else if(event.which == 39) {
$(".snake").data('dir','left');
} else if(event.which == 37) {
$(".snake").data('dir','right');
} else if(event.which == 38) {
$(".snake").data('dir','bottom');
}; });
fiddle
Couple of obvious additions to make:
boundary checking
smoothness of animation.
To make it work you will have to moodify your code like follows :
$(document).keydown(function() {
var inter;
return function(event) {
var move, prevDirection;
clearInterval(inter);
inter = setInterval(move = function(direction) {
var value, prop;
switch (direction || prevDirection) {
case "top":
prop = "top";
value = -5;
break;
case "bottom":
prop = "top";
value = 5;
break;
case "left":
prop = "left";
value = -5;
break;
case "right":
prop = "left";
value = 5;
break;
}
if (direction) prevDirection = direction;
$(".snake").css(prop, $(".snake").position()[prop] + value);
}, 500);
if (event.which == 40) {
move('bottom');
} else if (event.which == 39) {
move('right');
} else if (event.which == 37) {
move('left');
} else if (event.which == 38) {
move('top')
};
}
}());
http://jsfiddle.net/6bKHc/42/