I guess I must have made some amateur mistake that I keep on overlooking, but I can't seem to figure it out.
I'm making a onepage smoothscrolling website. If you scroll, the browser detects the direction and then scrolls you to the appropriate div. However when I scroll, an incorrect pagenumber is passed every time.
Here's the relevant javacript code:
var mousewheelevt;
var wheeldirection;
var wheeldirectiontype;
function ScrollToPage(pageNumber, directionNumber, directionNumberType) {
console.log('pageNumber: ' + pageNumber);
var direction;
var newPageNumber;
var directionType; //0=up, 1=down
console.log('directionNumberType: ' + directionNumberType);
console.log('directionNumber: ' + directionNumber);
if (directionNumberType == 0){
//non ff
if (directionNumber > 0) {
directionType = 0; //up
} else {
directionType = 1; //down
}
} else {
//ff
if (directionNumber < 0) {
directionType = 0; //up
} else {
directionType = 1; //down
}
}
console.log('directionType: ' + directionType);
console.log('pageNumber: ' + pageNumber);
if (directionType == 0) {
direction = 'up';
if(pageNumber > 1) {
newPageNumber = pageNumber - 1;
} else {
newPageNumber = 1
}
} else {
direction = 'down';
if(pageNumber < 5) {
newPageNumber = pageNumber + 1;
} else {
newPageNumber = 5;
}
}
$.scrollTo( $('#Page_' + newPageNumber), 800);
console.log(direction + ' - ' + newPageNumber);
}
$(document).ready(function() {
var y;
if(/Firefox/i.test(navigator.userAgent)) {
mousewheelevt = "DOMMouseScroll";
wheeldirectiontype = 1;
} else {
mousewheelevt = "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
wheeldirectiontype = 0;
}
for (y = 1; y <= 5; y++) {
console.log(y);
if (document.attachEvent) {//if IE (and Opera depending on user setting)
if(wheeldirectiontype == 0) {
document.getElementById('Page_' + y).attachEvent("on"+mousewheelevt, function(e){ScrollToPage(y, w.wheelDelta, wheeldirectiontype)});
} else {
document.getElementById('Page_' + y).attachEvent("on"+mousewheelevt, function(e){ScrollToPage(y, e.detail, wheeldirectiontype)});
}
} else if (document.addEventListener) {//WC3 browsers
if(wheeldirectiontype == 0) {
document.getElementById('Page_' + y).addEventListener(mousewheelevt, function(e){ScrollToPage(y, e.wheelDelta, wheeldirectiontype)}, false);
} else {
document.getElementById('Page_' + y).addEventListener(mousewheelevt, function(e){ScrollToPage(y, e.detail, wheeldirectiontype)}, false);
}
}
console.log(y);
$("#Page_" + y).wipetouch({
wipeUp: function(result) {ScrollToPage(y,1,0);},
wipeDown: function(result) {ScrollToPage(y,0,0);}
});
}
});
and here's the html:
<body>
<div id="Page_1" class="Landscape">
Ankerrui 2
</div>
<div id="Page_2" class="Landscape">
Voorwoord
</div>
<div id="Page_3" class="Landscape">
Beschrijving
</div>
<div id="Page_4" class="Landscape">
In de buurt
</div>
<div id="Page_5" class="Landscape">
Foto's
</div>
</body>
the page loads right on the first page, when I scroll down it scrolls to the bottom page wih the console showing 6 as the pageNumber. When I scroll back up, it stays on the last page, with the console showing 6 as the pageNumber as well. This is right if the pageNumber would actually be 6, but it should be respectively 1 and 5.
The console does show the right values for the y variable that is used to add the attachEvents, so I'm a bit clueless here.
Related
I'm doing this exercise with JavaScript and we're supposed to create a ninja pacman-style game with Javascript and then keep score. The ninja eats sushis and I'm doing one point per sushi.
The current behavior is that I can store scores when the ninja goes up or down. Problem is that when the ninja moves horizontally, the score only counts the first sushi. Second and third sushis aren't counted. I did use the same logic for vertical and horizontal moving around.
Here is my code. Added the whole code for context, but the problematic part is after "document.onkeydown = function(e) {".
<script type="text/javascript">
var world = [
[1,1,1,1,1],
[1,0,2,2,1],
[1,2,1,2,1],
[3,2,2,2,3],
[1,2,1,2,1],
[1,2,2,2,1],
[3,2,1,2,3],
[1,2,2,2,1],
[1,1,1,3,1],
]
var worldDict = {
0 : 'blank',
1 : 'wall',
2 : 'sushi',
3 : 'onigiri'
}
var ninjaScore = 0;
function drawWorld() {
var output = "";
for (var row = 0; row < world.length; row++) {
output += "<div class='row'></div>"
for (var x = 0; x <world[row].length; x++) {
output += "<div class='" + worldDict[world[row][x]]+"'></div>"
}
output += "</div>"
}
document.getElementById('world').innerHTML = output;
}
drawWorld();
var ninjaman = {
x: 1,
y: 1
}
function drawNinjaMan() {
document.getElementById('ninjaman').style.top = ninjaman.y * 40 + "px"
document.getElementById('ninjaman').style.left = ninjaman.x * 40 + "px"
}
drawNinjaMan();
document.onkeydown = function(e) {
if (e.keyCode == 40) { //DOWN
if (world[ninjaman.y + 1][ninjaman.x] != 1) {
ninjaman.y++;
if (world[ninjaman.y + 1][ninjaman.x] == 2) { //Checking if next block is sushi; adding to score
ninjaScore = ninjaScore + 1;
}
}
}
if (e.keyCode == 38) { //UP
if (world[ninjaman.y - 1][ninjaman.x] != 1) {
ninjaman.y--;
if (world[ninjaman.y - 1][ninjaman.x] == 2) { //Checking if next block is sushi; adding to score
ninjaScore = ninjaScore + 1;
}
}
}
if (e.keyCode == 37) { //LEFT
if (world[ninjaman.y][ninjaman.x - 1] != 1) {
ninjaman.x--;
if (world[ninjaman.y][ninjaman.x - 1] == 2) { //Checking if next block is sushi; adding to score
//Somehow this is returning false on the second key press; need to check why
ninjaScore = ninjaScore + 1;
}
}
}
if (e.keyCode == 39) { //RIGHT
if (world[ninjaman.y][ninjaman.x + 1] != 1) {
ninjaman.x++;
if (world[ninjaman.y][ninjaman.x + 1] == 2) { //Checking if next block is sushi; adding to score
//Somehow this is returning false on the second key press; need to check why
ninjaScore = ninjaScore + 1;
}
}
}
world[ninjaman.y][ninjaman.x] = 0;
drawWorld()
drawNinjaMan()
}
Could anyone please point out what I'm getting wrong?
Also, to give credit: This is an exercise from the pre-bootcamp course at Coding Dojo (https://www.codingdojo.com/). They came up with most of the code and the exercise itself.
I think it's because you're moving the ninja on top of a sushi, and then checking the block ahead of the block you are on in the direction you are moving. And all your motions are wrong, up, down, left and right.
This should fix it.
https://plnkr.co/edit/VCsa2cTWYaUn2jiTgmS4?p=preview
if (world[ninjaman.y][ninjaman.x-1] == 2) { //Checking if
should be
if (world[ninjaman.y][ninjaman.x] == 2) { //Checking if
I'm making an alcohol simulator, so when I press a button, you see an alcohol bottle being drained, but at the same time I should see the stomach filling. I have a code already for 'drinking', but I want to fix that if the water of the bottle moves 2 steps, that the water of the stomach only moves one step. I'll put just the js here, if you want the html as well, let me know.
var top_max = 475,
top_min = 400,
left_max = 200;
function move_img(str) {
var step = 1; // change this to different step value
var el = document.getElementById('i1');
var el2 = document.getElementById('i2');
if (str == 'up' || str == 'down') {
var top = el.offsetTop;
var height = el.offsetHeight;
console.log(height);
if (str == 'up') {
top -= step;
height += step;
} else {
top += step;
height -=step;
}
if (top_max >= top && top >= 110) {
document.getElementById('i1').style.top = top + "px";
document.getElementById('i1').style.height = height;
} else {
clearInterval(myVar)
}
} else if (str == 'left' || str == 'right') {
var left = el.offsetLeft;
if (str == 'left') {
left += step;
} else {
left -= step;
}
if (top_left < left && left >= 0) {
document.getElementById('i1').style.left = top + "px";
} else {
clearInterval(myVar)
}
}
}
function auto(str) {
myVar = setInterval(function () {
move_img(str);
}, 90);
}
function nana() {}
var myVar;
function handler() {
clearInterval(myVar);
auto(this.id);
}
function auto(str) {
myVar = setInterval(function(){ move_img(str); }, 2) ;
}
function stop(){
setTimeout(function( ) { clearInterval( myVar ); }, 1);
}
This is a script that I'm using for a slider. In this slider I've 2 button left and right for visit the slides. I've used jQuery and a bit of Javascript for do this. I'm using a button for play/pause but after the 3rd time the slider crash and it goes really fast.
The button
<input type="button" class="pausa" value="PAUSE" />
The script
$(document).ready(function(){
var one = "label#arrow-";
var x = 2;
var y = 0;
var two = ".arrows";
function clickin() {
if(jQuery('.pausa').data('clicked')) {
jQuery('.pausa').click(function(){
$(this).data('clicked', false);
$(this).val('PAUSE');
return setTimeout(clickin, 4000);
});
}
else {
while ((x != 7) && (y == 0)) {
$(one + x + two).trigger('click');
x++;
if (x != 7)
return setTimeout(clickin, 4000);
}
if (x == 7) {
y = 1;
x = 5;
}
while ((x != 0) && (y == 1)) {
$(one + x + two).trigger('click');
x--;
if (x != 7)
return setTimeout(clickin, 4000);
}
if (x == 0) {
y = 0;
x = 2;
return setTimeout(clickin, 4000);;
}
}
}
setTimeout(clickin, 4000);
jQuery('.pausa').click(function(){
$(this).data('clicked', true);
$(this).val('PLAY');
return clickin();
});
});
I've fixed it:
You can check the complete code here
$(document).ready(function(){
var one = "label#arrow-";
var two = ".arrows";
var x = 2; //Value of the button
var point = 0; //Check if you are pressing for play or pause
function clickin() {
if(point % 2)
$('.pausa').val('PLAY'); //Rotation Pause
else
$('.pausa').val('PAUSA'); //Rotation Play
if(!(point % 2)) //If it's in Play (Pause for button)
{
$(one + x + two).trigger('click');
x++;
if(x == 7)
x = 1;
return setTimeout(clickin, 4000)
}
else return 1; //If it's in Pause (Play for button)
}
setTimeout(clickin, 4000);
jQuery('.pausa').click(function(){ //Waiting input click
point++;
return clickin()
});
});
I am building a leap motion controlled music player, the menu system is controlled with leap motion.
Tilt up and down scrolls through menu items, right swipe selects that item, left swipe goes back up a menu level.
The issue I am having is when you swipe right on 'artist list' menu, it then changes to 'songs' menu and because the leap motion swipe gesture works on frames it triggers my function multiple times so the first song is immediately selected.
Here is relevant code:
var updateSelection = function() {
if(Math.floor(x) == x && $.isNumeric(x)){
var listLength = $(menu + ' li').size();
if (x > listLength) x = listLength;
if (x < 1) x = 1;
$(menu + ' li').removeClass('active');
$(menu + ' #' + x + artist ).addClass('active');
scrollToIt = x + artist;
idTagX = x;
if (scrollDirection == "down") {
var topPos = document.getElementById(scrollToIt).offsetTop;
document.getElementById('cssmenu').scrollTop = topPos;
//document.getElementById(scrollToIt).scrollIntoView();
}
else if (scrollDirection == "up"){
var topPos = document.getElementById(scrollToIt).offsetTop;
document.getElementById('cssmenu').scrollTop = topPos;
//document.getElementById(scrollToIt).scrollIntoView(true);
}
}
}
if(frame.hands.length > 0)
{
var hand = frame.hands[0];
pitchRadians = hand.pitch();
if (pitchRadians > 0.45) {
newX = x - 0.1;
x = roundNumber(newX, 2);
scrollDirection = "up";
updateSelection();
}
else if (pitchRadians < -0.45){
newX = x + 0.1;
x = roundNumber(newX, 2);
scrollDirection = "down";
updateSelection();
}
else {
x = parseInt(x);
updateSelection();
}
}
//--------------------------------------------------Swipe Selection
if (frame.gestures.length > 0) {
for (var i = 0; i < frame.gestures.length; i++) {
var gesture = frame.gestures[i];
//---- Swipe ----
if (gesture.type == "swipe") {
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
if(isHorizontal){
if(gesture.direction[0] > 0){
$(menu + ' #' + idTagX + artist).click();
console.log(artist);
} else {
console.log("Menu Left");
// $("#" + artist).hide();
//menu = ".artists"
}
} else {
// Vertical swipe
}
}
}
}
})
This might well be a simple fix, I have just been looking at this code too long to get my head round it.
I have written a solution to this, detailed below, answering so other users can see for future reference.
var prevSwipe = "";
var d = new Date();
var now = d.getTime();
var prevSwipeTime = now;
function rightSwipe () {
d = new Date();
if(prevSwipe == "right") {
if(prevSwipeTime + 1000 < d.getTime()) { //time elapsed, run code
$(menu + ' #' + idTagX + artist).click();
prevSwipe = "right";
prevSwipeTime = d.getTime();
console.log("prev == right");
} // otherwise do nothing
} else {
$(menu + ' #' + idTagX + artist).click();
prevSwipe = "right";
prevSwipeTime = d.getTime();
console.log(prevSwipeTime);
console.log("prev != right");
}
}
Hope this helps somebody!
I'm trying to create a "spawn point" for a div. I have made it work and I have a working collision detector for it. There are two things I wanted to ask regarding my code.
How do I get my code to work with more than one player (window.i). - At the moment, after an hour of fiddling, I've only broken my code. This whole area screws up the collision detector, I have more than one player showing at times, but I'm unable to move.
How do I make it so that it detects the contact before it happens - I've tried working with the "tank's" margin and subtracting it's width, so that before it makes contact it calls an event, but it has been unsuccessful and completely stopped the collision function working.
I'm sorry that it's asking a lot, I really do understand that, but the issues come into eachother and rebound off so I thought it was best I put it all into one question rather than 2 separate ones an hour apart.
function animate() {
var tank = document.createElement("div");
tank.id= "tank";
tank.style.marginLeft="0px";
tank.style.marginTop="0px";
tank.style.height="10px";
tank.style.width="10px";
document.body.appendChild(tank);
x = parseInt(tank.style.marginLeft);
y = parseInt(tank.style.marginTop);
document.onkeydown = function () {
e = window.event;
if (e.keyCode == '37') {
if (x > 0) {
if (collisionDetector() == false) {
x = x - 10;
tank.style.marginLeft = x + "px";
} else {
alert();
}
}
} else if (e.keyCode == '39') {
if (x < 790) {
if (collisionDetector() == false) {
x = x + 10;
tank.style.marginLeft = x + "px";
} else {
alert();
}
}
} else if (e.keyCode == '38') {
if (y > 0) {
if (collisionDetector() == false) {
y = y - 10;
tank.style.marginTop = y + "px";
} else {
alert();
}
}
} else if (e.keyCode == '40') {
if (y < 490) {
if (collisionDetector() == false) {
y = y + 10;
tank.style.marginTop = y + "px";
} else {
alert();
}
}
}
}
}
window.lives = 3;
function playerSpawn() {
window.i = 1;
while (i > 0) {
var player = document.createElement("div");
randMarL = Math.ceil(Math.random()*80)*10;
randMarT = Math.ceil(Math.random()*50)*10;
player.id = "player";
player.style.marginLeft= randMarL + "px";
player.style.marginTop= randMarT + "px";
player.style.height="10px";
player.style.width="10px";
document.body.appendChild(player);
i--;
}
}
function collisionDetector() {
x1 = tank.style.marginLeft;
x2 = player.style.marginLeft;
y1 = tank.style.marginTop;
y2 = player.style.marginTop;
if ((x1 == x2 && y1 == y2)) {
return true;
} else {
return false;
}
}