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%'
});
});
Related
I am trying to build an application for android tv and I wanted to use the remote movements. I first checked if there was a package which could help me with this but I could not find one.
Then I moved on to the official documentation listed here
I am trying to use this code:
var TVEventHandler = require('TVEventHandler');
class Game2048 extends React.Component {
_tvEventHandler: any;
_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function(cmp, evt) {
if (evt && evt.eventType === 'right') {
cmp.setState({board: cmp.state.board.move(2)});
} else if(evt && evt.eventType === 'up') {
cmp.setState({board: cmp.state.board.move(1)});
} else if(evt && evt.eventType === 'left') {
cmp.setState({board: cmp.state.board.move(0)});
} else if(evt && evt.eventType === 'down') {
cmp.setState({board: cmp.state.board.move(3)});
} else if(evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
});
}
_disableTVEventHandler() {
if (this._tvEventHandler) {
this._tvEventHandler.disable();
delete this._tvEventHandler;
}
}
componentDidMount() {
this._enableTVEventHandler();
}
componentWillUnmount() {
this._disableTVEventHandler();
}
But the var TVEventHandler = require('TVEventHandler'); says no module was found called TVEventHandler. And I tried to import it manually from react-native/Libraries/Components/AppleTV and that gives me an error stating that the component may not have been exported error.
I am not sure what I am doing wrong here. I did everything the Doc asks
Resolved the issue. Use this in your class Instead. And make sure to import the TVEventHandler from react-native:
_tvEventHandler: any;
_enableTVEventHandler() {
var self = this;
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
console.log("kcubsj"+evt.eventType)
if (evt && evt.eventType === 'right') {
console.log('right');
} else if (evt && evt.eventType === 'up') {
console.log('up');
} else if (evt && evt.eventType === 'left') {
console.log('left');
} else if (evt && evt.eventType === 'down') {
console.log('down');
} else if (evt && evt.eventType === 'select') {
//self.press();
}
});
}
_disableTVEventHandler() {
if (this._tvEventHandler) {
this._tvEventHandler.disable();
delete this._tvEventHandler;
}
}
componentDidMount() {
this._enableTVEventHandler();
}
componentWillUnmount() {
this._disableTVEventHandler();
}
Original Answer
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.
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.
This is an excerpt from a js file
$searchBox.keyup(function(event) {
if (event.keyCode === 13) { //enter
if(currentResult > -1) {
var result = $searchResults.find('tr.result a')[currentResult];
window.location = $(result).attr('href');
}
} else if(event.keyCode === 38) { //up
if(currentResult > 0) {
currentResult--;
renderCurrent();
}
} else if(event.keyCode === 40) { //down
if(lastResults.length > currentResult + 1){
currentResult++;
renderCurrent();
}
} else {
var query = $searchBox.val();
if (lastQuery !== query) {
currentResult = -1;
if (query.length > 2) {
self.search(query);
} else {
self.hideResults();
}
if(self.hasFilter(getCurrentApp())) {
self.getFilter(getCurrentApp())(query);
}
}
}
});
This means that it should only perform the action if the "Enter", "Up" or "Down" keys are pressed, right? Because the search start happening as soon as any key is pressed.
I also tried changing searchBox.keyup to searchBox.change but that messed up how something else was working.
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/