I have a piece of code that I've written that is supposed to keep track of which image is going to appear next on the page depending on which button is pressed
$(document).ready(function(){
$("#moveleft").click(function(){
var negoff = "false";
$("#slideshow>ul>li").animate({left: '-=' + actualwidth + 'px'}, 500);
$("#slideshow>ul>li:first-child").remove();
offset++;
console.log("Offset: " + offset);
if(offset > 4){
offset = 0;
}
if(offset < 0){
offset = offset * -1;
negoff = true;
}
$("#slideshow>ul").append('<li><img src="images/' +
contentcategories[offset] + '.jpg"/></li>');
$("#slideshow>ul>li:last-child").css({width: picturewidth + "px",
left: + 6 * actualwidth + "px"});
if(negoff){
offset = offset * -1;
negoff = false;
}
});
$("#moveright").click(function(){
var posoff = "false";
$("#slideshow>ul>li").animate({left: '+=' + actualwidth + 'px'}, 500);
$("#slideshow>ul>li:last-child").remove();
offset--;
console.log("Offset: " + offset);
if(offset < -4){
offset = 0;
console.log("Offset: " + offset);
}
if(offset > 0){
offset = offset * -1;
posoff=true;
console.log("Posoff: " + posoff);
}
$("#slideshow>ul").prepend('<li><img src="images/' +
contentcategories[(contentnum - 1) + offset] + '.jpg"/></li>');
$("#slideshow>ul>li:first-child").css({width: picturewidth + "px",
left: + 0 + "px"});
if(posoff){
offset = offset * -1;
posoff = false;
}
});
});
The confusing thing about this is that if I click on the #moveright button 2 times in a row the offset goes to -1 then to 0 and keeps looping through the 2 values. Nearly the same thing happens with the #moveleft button. It cycles through the values 0 and 1.
I am confused by this because the only place where I set the offset variable to 0 is if goes above 4 or goes below -4 and I'm not seeing a reason for it to be set to 0 after it goes to 2 or -2.
Let's take a look at what you're doing here. You're writing a string into a variable, trying to use it as a boolean value, i. e. true and false, and then, in your if statements, you are checking whether or not the variable is: not null, not undefined, not false. The tricky thing here's that it actually is defined, it is not null, and it is a string ("false")
Long story short: Remove the "" around your "false", it should be fine then.
Remove the quotes from var negoff = "false"; and var posoff = "false";.
Your code could be refactored a bit but that's neither here nor there. The crux of the problem is that "false" == true since non-empty strings are truthy values in JavaScript. I assume it's just a typo, but here's what's happening:
offset starts at 0. If #moveLeft is clicked, it gets incremented to 1. Then it gets multiplied by -1 because if(negoff) will be true. So now it's -1 and the next click increments it back to 0. Rinse and repeat. The opposite is happening for #moveRight.
Related
I'm trying to make a scrolling image that switches to a different 16:9 section using navigation buttons. Everything works, except jQuery seems to be limiting if(igBase.css('left') > igMaxLeft) to -1200px or greater, even though igMaxLeft is, for example, -2600px. Is there any reason for this behavior? The math looks right to me.
var igWrap = $('.infographic-wrapper');
var igBase = $('.infographic-base');
var igPrev = $('.infographic-previous');
var igNext = $('.infographic-next');
var igFrameWidth = igWrap.css('width');
var igMaxLeft = parseInt(igBase.css('width'), 10) + parseInt(igFrameWidth, 10);
igMaxLeft = '-' + igMaxLeft + 'px';
igPrev.click(function(){
if(igBase.css('left') < '0px'){
igBase.css('left','+=' + igFrameWidth);
}
});
igNext.click(function(){
if(igBase.css('left') > igMaxLeft){
igBase.css('left','-=' + igFrameWidth);
}
});
Here's the full example: https://codepen.io/arinthros/pen/YejRey
Converting the css pixel strings into integers solved the problem. Thanks user2864740 for the tip.
var igMaxLeft = (parseInt(igBase.css('width'), 10) - parseInt(igFrameWidth, 10)) * -1;
igPrev.click(function(){
if(parseInt(igBase.css('left'), 10) < 0){
igBase.css('left','+=' + igFrameWidth);
}
});
igNext.click(function(){
if( 0 >= parseInt(igBase.css('left'), 10) && parseInt(igBase.css('left'), 10) > igMaxLeft){
igBase.css('left','-=' + igFrameWidth);
}
});
What is the right way to increment an array in a loop? I'm passing in a non zero based number and want to get the right starting position for the Array.
I can get it to work using eval:
arrayPosition = "articleArray[" + (goTo - 1) + "][0]";
window.scroll(eval(arrayPosition), 0);
But I know this isn't proper coding and now that I'm using //"use strict"; it will no longer run.
I've tried variations of:
var x = arrayPosition[goTo - 1][0];
window.scroll(x,0);
But these don't work.
function scrollToArticle(referrer, goTo, showSection) {
// referrer, goTo are required
var showSection = (typeof showSection) !== "undefined" ? showSection : false;
var tmpNum = Math.round(articleArray.length / 2);
if (goTo !== tmpNum && goTo !== articleArray.length) {
arrayPosition = "articleArray[" + (goTo - 1) + "][0]";
window.scroll(eval(arrayPosition), 0);
} else if (goTo === tmpNum) {
window.scrollTo(mainContentCenterScrollTo - (window.innerWidth / 2), 0);
} else {
arrayPosition = "(articleArray[" + (goTo - 1) + "][0]) + (articleArray[" + (goTo - 1) + "][1])";
window.scrollTo(eval(arrayPosition), 0);
}
}
There should be no need for eval, just a reference to the array:
var arrayPosition = articleArray[goTo - 1][0];
window.scroll(arrayPosition, 0);
Sorry to all it was my on fault as was noted above the value being past into to array was a string and not a number which is why eval worked and [i-1] didn't.
I im quite confused in the negation of the functionality of my function. The original function takes 9 elements starting at nth index and decrease their transform position.
function pushIt(max, target, index, count) {
if (count == max || count == img.children ) {
running = false;
return;
}
var tmp = target[index];
var matrix = window.getComputedStyle(tmp).getPropertyValue("transform");
var translate_left = matrix.split(",")[4];
var translate_top = matrix.split(",")[5].split(")")[0]-215;
tmp.style.transform = "translate3d(" + translate_left + "px," + translate_top + "px,0)";
setTimeout(function(){
pushIt( max, target, index + 1, count + 1 );
},50)
}
What i wanted to do is to negate its functionality , e.g it wont decrease but increase transform position of (nth * 3) - 1 element ( counting down 9 elements )
function pushItDOWN(max, target, index , count) {
if ( count == max || index < 0 ) {
running = false;
return;
}
console.log("down");
var tmp = target[index];
var matrix = window.getComputedStyle(tmp).getPropertyValue("transform");
var translate_left = matrix.split(",")[4];
var translate_top = matrix.split(",")[5].split(")")[0]+215;
tmp.style.transform = "translate3d(" + translate_left + "px," + translate_top + "px,0)";
setTimeout(function(){
pushItDOWN(max, target, index - 1, count + 1 );
},50)
}
}
What second function does is takes elements and set their transform to oblivion (e.g out of viewport) and somehow break the functionality of first function.
Did i overlook some key fact that is causing the problem , i seem to fail to find the root of the problem.
Live demo for better understanding
I'm not 100% sure, but most likely this is your error:
This will result in a string:
matrix.split(",")[5].split(")")[0]
Lets say it is "500", then
matrix.split(",")[5].split(")")[0] + 215
// equals
"500" + 215
// results in (because + is both used as string concatenation as addition)
"500215"
// - will work, because it only has one meaning
"500" - 215 // results in 285
Parse the value as an int (or float if necessary) before adding the 215:
parseInt(matrix.split(",")[5].split(")")[0]) + 215
http://jsfiddle.net/fxLcy/ - example with setTimeout
http://jsfiddle.net/fxLcy/1/ - this is the demo without setTimeout. All elements on right place, but i really need that delayed animation =/
I want to place 6 cards per row via css transition and setTimeout. The point is, that i cant use increment for my left and top parameters inside setTimeout, because this thing just summarizes all my increments and sets elements onto final place.
var self = $(this);
if (increment % 6 === 0 && increment !== 0) {
topIncrement++;
leftIncrement = 0;
};
setTimeout(function() {
self.css({'left' : 10 + leftIncrement * (resizedWidth + 20),
'top' : $("#controlPanel").height() + 10 + topIncrement * (resizedHeight + 20)});
}, increment * 500)
leftIncrement++;
increment++;
So the issue is the variable is being shared accross the timeouts, you want to the javascript to close on each x and y position (you want each tmeout to take a snapshot of the x/y values - javascript closure).
So taking your above code and changing the setTimeout to the following I believe did the trick (please see updated fiddle)
var valuex = 10 + leftIncrement * (resizedWidth + 20);
var valuey = $("#controlPanel").height() + 10 + topIncrement * (resizedHeight + 20)
setTimeout(function() {
self.css({'left' : valuex,
'top' : valuey});
}, increment * 500)
I'm trying to workout an efficient way to cycle though in 25% increments the background image of an element, but when it gets to 100% it would go back to 0% on the next increment.
I can do something like this:
var currentPos = $('.ele1').css('background-position');
var elementPositions = currentPos.split(' ');
var x = Number(elementPositions[0].replace(/[^0-9-]/g, ''));
//var y = Number(elementPositions[1].replace(/[^0-9-]/g, ''));
// only want to do the x axis
x = (x == 100) ? 0 : x += 25;
$('.ele1').css('background-position', x + "%" + " 0");
But I don't like the fact I have to call the element twice. Is there a more efficient way to increment a % with jQuery and have it reset back to 0% after 100%?
I did think to do it with CSS .classes. But I don't really want to be restricted to what's in my style sheet.
You can pass a callback function to jQuery's .css() method:
$('.ele1').css('background-position', function (i, value) {
var x = parseInt(value, 10);
return (x == 100 ? 0 : x + 25) + "%" + " 0";
});
If you're calling this from within a loop/timer/event/whatever, you should cache the $('.ele1') object.