We Keep Coding

Why Is My Function Alternating Between Working and Then Not Javascript

This is my very first ever question asked here, so I do apologise in advance if I am not following correct guidelines.
Basically what I'm trying to do is to manually code side-section navigating in Javascript. The navigating itself is working just fine, one can click either left or right and the sections will scroll left and right endlessly in a carousel. But when I try to set the previous pages scrollTop back to 0 once the user has moved off the section I run into problems.
If I scroll through each section and scroll a bit of the way down on each, when I return to the first page and cycle through them again, they seem to alternate as to whether their scrollTop was actually set to 0.
HTML body:
<div class="Arrow" id="arrowLeft"></div>
<div class="Arrow" id="arrowRight"></div>
<section class="Page" id="page1"><div class="PageContent"></div></section>
<section class="Page" id="page2"><div class="PageContent"></div></section>
<section class="Page" id="page3"><div class="PageContent"></div></section>
<section class="Page" id="page4"><div class="PageContent"></div></section>
<section class="Page" id="page5"><div class="PageContent"></div></section>
<section class="Page" id="page6"><div class="PageContent"></div></section>
<section class="Page" id="page7"><div class="PageContent"></div></section>
<section class="Page" id="page8"><div class="PageContent"></div></section>
<script src="JavaScript/scroller.js"></script>
Javascript:
//initialising variables and populating arrays
var currentPage = 0;
var previousPage = 0;
var pages = document.getElementsByClassName("Page");
var sections = [];
for (i=0;i<pages.length;i++) {
sections.push(pages[i]);
}
var pageOffSets = [0, 100, 200, 300, 400, -300, -200, -100];
var zOffSets = [0,-1,-2,-3,-4,-3,-2,-1];
for (i = 0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
//Navigate function
function slidePage(direction) {
previousPage = currentPage;
if (direction=="right") {
currentPage+=1;
if (currentPage>7) {
currentPage = 0;
}
var hold = sections.shift();
sections.push(hold);
for (i=0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
}
if (direction=="left") {
currentPage-=1;
if (currentPage<0) {
currentPage = 7;
}
var hold = sections.pop();
sections.unshift(hold);
for (i=0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
}
//!!!
//This is the part that is supposed to set the scrollTop back to 0
//!!!
setTimeout(function(){
sections[previousPage].scrollTop = 0;
}, 1000);
}
//Event listeners for when the user clicks
document.getElementById("arrowLeft").addEventListener("click", function(){
slidePage("left");
});
document.getElementById("arrowRight").addEventListener("click", function(){
slidePage("right");
});
I would really appreciate if someone could point out what I'm doing wrong.
Edit:
Here is the CSS if you need it:
body {
overflow-x: hidden;
overflow-y: scroll;
}
section {
width: 100vw;
height: 100vh;
position: fixed;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
overflow: scroll;
}
.Arrow {
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
background-color: black;
top: 48%;
}
.Arrow:hover {
cursor: pointer;
}
#arrowRight {
right: 0;
}
#page1 {
background-color: #c81996;
}
#page2 {
background-color: #64324b;
}
#page3 {
background-color: #1996c8;
}
#page4 {
background-color: #324b64;
}
#page5 {
background-color: #96c819;
}
#page6 {
background-color: #4b6432;
}
#page7 {
background-color: #f0fa1e;
}
#page8 {
background-color: #fa1ef0;
}
.PageContent {
height: 8000px;
width: 90vw;
margin: 5vw;
background-image: -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: linear-gradient(red, yellow);
position: absolute;
}

There are two problems:
You are rotating the sections array inside your function, so the previousPage index is no longer correct once your anonymous function is fired.
The previousPage variable referenced when setting scrollTop after the timeout can change before the timeout elapses.
The simplest fix would be to rotate pageOffSets and zOffSets arrays instead:
if (direction == "right") {
currentPage++;
if (currentPage >= sections.length) {
currentPage = 0;
}
// rotate pageOffsets
{
var x = pageOffSets.pop();
pageOffSets.unshift(x);
}
// rotate zOffsets
{
var x = zOffSets.pop();
zOffSets.unshift(x);
}
for (i=0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
} else {
currentPage--;
if (currentPage < 0) {
currentPage = sections.length - 1;
}
// rotate pageOffsets
{
var x = pageOffSets.shift();
pageOffSets.push(x);
}
// rotate zOffSets
{
var x = zOffSets.shift();
zOffSets.push(x);
}
for (i=0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
}
And you need to capture a copy of the previousPage variable:
// capture a copy of the index so that it doesn't change
var prev = previousPage;
setTimeout(function() {
sections[prev].scrollTop = 0;
}, 500);

How to reset a webpage with a button

I am having trouble with some programming that I want to perform..
On my page there is a button called "resetButton" and it is invisible button in the middle of the page. It is using: z-index: 100 to be place in front of the images that appear behind it to appear to have the effect that you are actually clicking the image to perform the action.
This buttons functionality is to reset the entire race, including: the stoplight switching back to red, the winner image going away, and the two participants in the race begin again at the starting position.
I feel as I am just overthinking this problem and cannot figure it out and would appreciate being led in the right direction.
// script to show and hide winner
function showFish() {
document.getElementById('bluefishwin').style.visibility = "visible";
}
function showTurtle() {
document.getElementById('turtlewins').style.visibility = "visible";
}
function showFishText() {
document.getElementById('fishwins').style.visibility = "visible";
}
function showTurtleText() {
document.getElementById('turtlewinss').style.visibility = "visible";
}
// script to call both functions to start race
function letsRace() {
startTimer();
myMove();
}
// script for stoplight
function displayNextImage() {
document.getElementById("stoplight").src = images[1];
}
function startTimer() {
setInterval(displayNextImage);
}
var images = [],
x = -1;
images[0] = "http://www.drivingtesttips.biz/images/traffic-light-red.jpg";
images[1] = "http://www.drivingtesttips.biz/images/traffic-lights-green.jpg";
// script for race
function myMove() {
var elemBluefish = document.getElementById("bluefish");
var elemTurtle = document.getElementById("turtle");
var posBluefish = 0;
var posTurtle = 0;
var id = setInterval(frame, 5);
function frame() {
if (posBluefish >= 1150 && posTurtle >= 1150) {
clearInterval(id);
return;
}
if (posBluefish < 1140) {
posBluefish += Math.round(Math.random() * 5);
if (posBluefish > 1140) {
posBluefish = 1140;
}
elemBluefish.style.left = posBluefish + 'px';
}
if (posTurtle < 1140) {
posTurtle += Math.round(Math.random() * 5);
if (posTurtle > 1140) {
posTurtle = 1140;
}
elemTurtle.style.left = posTurtle + 'px';
}
if (posBluefish >= 1140 || posTurtle >= 1140) {
clearInterval(id);
if (posBluefish >= 1140 && posTurtle < 1140) {
showFish();
showFishText();
} else if (posBluefish < 1140 && posTurtle >= 1140) {
showTurtle();
showTurtleText();
} else {
window.alert("Tie");
}
return;
}
}
}
#racePrompt {
position: absolute;
left: 10pc;
font-size: 20px;
}
.raceButton {
position: absolute;
width: 5pc;
right: 82pc;
height: 10pc;
z-index: 100;
background: transparent;
border: none !important;
font-size: 0;
}
body {
overflow: hidden;
}
#myStoplight {
position: absolute;
width: 10pc;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
left: .5pc;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#stoplight {
position: absolute;
width: 10pc;
}
#bluefishwin {
position: absolute;
right: 31pc;
top: 12pc;
visibility: hidden;
}
#turtlewins {
position: absolute;
width: 20pc;
right: 35pc;
top: 15pc;
visibility: hidden;
}
#fishwins {
font-size: 3pc;
position: absolute;
right: 35pc;
top: 25pc;
visibility: hidden;
}
#turtlewinss {
font-size: 3pc;
position: absolute;
right: 34pc;
top: 26pc;
visibility: hidden;
}
<input type="button" onclick="letsRace()" class="raceButton">
<img id="stoplight" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg" />
<p id="fishwins">The Fish Wins!</p>
<p id="turtlewinss">The Turtle Wins!</p>
<p id="racePrompt">Click anywhere on the light to start the race!</p>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<img id="bluefishwin" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtlewins" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<div id="container">
<div id="animate"></div>
Any ideas on how to create a function so when I call it with an onClick I can reset everything back to as if I just rendered the page, similar to hitting the refresh button on the web browser.

Well, this practically impossible.
In order to make this work you would have to move state out of the DOM.
To do that, you must specified the Model of you application and just let the UI to render around it. You can imagine it like this:
var ui = createDOM(state)
body.innerHTML = ''
body.appendChild(ui)
//and you state might look like
var state = {
players: [{id: 'turle', winner: true}]
}
//in createDOM fn
function createDOM(state) {
var turtleWinnerDiv = document.createElement('div')
if (state.players[0].winner) {
turtleWinnerDiv.style.visibility = 'visible'
}
return turtleWinnerDiv
}
This is like "nic" way of doing this.
Uglier one might be something like this:
// save original app DOM
var defaultHTML = document.body.innerHTML
// at the end
document.body.innerHTML = defaultHTML
// voila App is back to default state

Make simple js fiddle animation start on button click instead of page load.

I found this rather cool Js fiddle and have been editing the animation a bit and think its something I can use on a current project. However im not the best with Javascript. All I really need to know to accomplish the rest of my goal is how to make the animation not start until you click a button.
Here is the animation for the js fiddle.
http://jsfiddle.net/apipkin/qUTwQ/
Here is the css.
#o {
width: 200px;
height: 400px;
position: relative;
border-bottom: 1px solid blue;}
.bubble {
border: 1px solid
#f40009; display: block;
position: absolute;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
The rest is in the JS fiddle.
Thanks fo any help!

You can simply wrap it in a function and call that function on click.
DEMO
Create a button:
<button id="btn">Click</button>
And this js:
document.getElementById('btn').addEventListener('click', startAnimation);
function startAnimation() {
YUI().use('node', 'anim', 'anim-node-plugin', function(Y) {
var o = Y.one('#o'),
oW = o.get('offsetWidth'),
oH = o.get('offsetHeight'),
max = 12,
min = 4,
bubbles = 20,
timerDelay = 4000;
function makeBubble() {
var b = Y.Node.create('<span class="bubble"></span>');
b.plug(Y.Plugin.NodeFX, {
duration: 7,
easing: Y.Easing.easeOut,
to: {
top: 0,
opacity: 0
},
on: {
end: function() {
Y.later(10000, this, function(){
animBubble(this.get('node'));
});
}
}
});
o.append(b);
animBubble(b);
}
function animBubble(b) {
var v = Math.floor(Math.random() * (max - min)) + min;
b.setStyles({
height: v + 'px',
width: v + 'px',
borderRadius: v + 'px',
top: (oH + 2) + 'px',
opacity: 1
});
b.setStyle('left', Math.floor(Math.random() * (oW - v)));
b.fx.set('duration', Math.floor(Math.random() * 2 + 3));
b.fx.set('to.top', Math.floor(Math.random() * (oH / 2)));
b.fx.run();
}
for (i = 0; i < bubbles; i++) {
Y.later(Math.random() * timerDelay, this, function() {
makeBubble();
});
}
});
}

change color of items one by one

I wrote a script that creates a set of smaller circles arranged in a circle, which are added to the DOM one by one with a loop. After first loop is done (so I would expected this to be when i == 54) I would like to start another loop, starting from the first circle in a list and one by one changing the color of the circles from grey to red.
This is my code:
var i = 1;
var appendCircle = function loop() {
setTimeout(function() {
var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
var $container = $(".circles-wrapper .circles");
$container.append($circle);
i++;
if (i < 55) {
loop();
}
}, 20);
// this is the problem because this change color of all small circles at once.
if (i == 54) {
setTimeout(function() {
$(".circle").each(function() {
$(this).css({
"background": "blue"
});
})
}, 20);
}
};
setTimeout(appendCircle, 100);
.circles-wrapper {
position: absolute;
top: 39%;
left: 51%;
}
.circles {
position: relative;
transform: rotateY(48deg);
}
.circle {
width: .2em;
height: .2em;
margin: -.2em;
border-radius: 50%;
background: #ceced0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
<div class="circles"></div>
</div>

You're giving each circle the class "circle"+index so all you have to do is loop through each index and change the background color of each element. What I did was used the same loop function and after i reached 55 I took the mod 55 of it and used that to select the circle. Code and snippet below.
I also noticed that some circles overlap. if you generate 50 circles then there won't be any overlap. I wrote the code below to reflect this.
var i = 1;
var appendCircle = function loop() {
setTimeout(function() {
if (i < 51) {
var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
var $container = $(".circles-wrapper .circles");
$container.append($circle);
}
else{
var circleIndex = (i % 51)+1;
$(".circle"+circleIndex).css("background-color", "blue");
}
if(i<109){
loop();
}
i++;
}, 20);
};
setTimeout(appendCircle, 100);
.circles-wrapper {
position: absolute;
top: 39%;
left: 51%;
}
.circles {
position: relative;
transform: rotateY(48deg);
}
.circle {
width: .2em;
height: .2em;
margin: -.2em;
border-radius: 50%;
background: #ceced0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
<div class="circles"></div>
</div>

After your first pass you probably want to find the circle created and modify those. You are giving them a class of circle + i so you can easily find them. Check the code snip. I added a third pass just because.
var i = 1,
CIRCLE_COUNT = 52;
var appendCircle = function loop() {
setTimeout(function() {
i++;
// first pass
if (i < CIRCLE_COUNT * 1) {
var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
var $container = $(".circles-wrapper .circles");
$container.append($circle);
}
// second pass
else if (i < CIRCLE_COUNT * 2) {
$(".circle" + (i % CIRCLE_COUNT+1)).css('background', 'blue');
}
// third pass
else if (i < CIRCLE_COUNT * 3) {
$(".circle" + (i % CIRCLE_COUNT+1)).remove();
}
// keep looping?
if (i <= CIRCLE_COUNT * 3)
loop();
}, 20);
};
setTimeout(appendCircle, 100);
.circles-wrapper {
position: absolute;
top: 39%;
left: 51%;
}
.circles {
position: relative;
transform: rotateY(48deg);
}
.circle {
width: .2em;
height: .2em;
margin: -.2em;
border-radius: 50%;
background: #ceced0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
<div class="circles"></div>
</div>

something like this? i put a timeout function in your .each() in order to make a delay between each iteration of the loop when you change the color of the circles to blue
var i = 1;
var appendCircle = function loop() {
setTimeout(function() {
var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
var $container = $(".circles-wrapper .circles");
$container.append($circle);
i++;
if (i < 55) {
loop();
}
}, 20);
// this is the problem because this change color of all small circles at once.
if (i == 54) {
var time = 50;
$(".circle").each(function() {
var $this = $(this)
setTimeout(function(){
$this.css({
"background": "blue"
});
}, time)
time += 50;
});
}
};
setTimeout(appendCircle, 100);
.circles-wrapper {
position: absolute;
top: 39%;
left: 51%;
}
.circles {
position: relative;
transform: rotateY(48deg);
}
.circle {
width: .2em;
height: .2em;
margin: -.2em;
border-radius: 50%;
background: #ceced0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
<div class="circles"></div>
</div>

You need to change the CSS of just one element, then start a timeout to change the next one.
var i = 1;
var appendCircle = function loop() {
setTimeout(function() {
var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>";
var $container = $(".circles-wrapper .circles");
$container.append($circle);
i++;
if (i < 55) {
loop();
}
}, 20);
var j = 0;
function changeColor() {
$(".circle").eq(j).css("background", "blue");
j++;
if (j >= $(".circle").length) {
clearInterval(changeInterval);
}
}
if (i == 53) {
setInterval(changeColor, 20);
}
}
setTimeout(appendCircle, 100);
.circles-wrapper {
position: absolute;
top: 39%;
left: 51%;
}
.circles {
position: relative;
transform: rotateY(48deg);
}
.circle {
width: .2em;
height: .2em;
margin: -.2em;
border-radius: 50%;
background: #ceced0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circles-wrapper">
<div class="circles"></div>
</div>

jQuery has features that make animations like this reasonably trivial, though you need to understand several methods.
jQuery's .delay(), .promise(), .then() and javascript's Array.prototype.reduce() can be exploited as follows :
var appendCircles = function($container) {
//create and append hidden circles
for(var i=0; i<50; i++) {
$("<div class='circle'></div>").css('transform', 'rotate(' + 7.2 * i + 'deg) translate(3em)').hide().appendTo($container);
}
//find the freshly appended hidden circles
var $circles = $container.find(".circle");
//initial delay
$circles.eq(0).delay(100).promise()
.then(function() {
//show the circles, one by one
return $circles.get().reduce(function(promise, el) {
return promise.then(function() {
return $(el).show().delay(20).promise();
});
}, $.when());//$when() is a resolved promise that gets the built promise chain started
})
.then(function() {
//make circles blue, one by one
return $circles.get().reduce(function(promise, el) {
return promise.then(function() {
return $(el).css('backgroundColor', 'blue').delay(20).promise();
});
}, $.when());//$when() is a resolved promise that gets the built promise chain started
});
};
appendCircles($(".circles"));
codepen
.reduce() probably needs some explanation. $circles.get() returns an array and .reduce(...) is used to build a promise chain equivalent to initialPromise.then(...).then(...).then(...). This trick is performed twice, in sequence, to give the initial "show" effect followed by the color-change effect.
This suite of methods is worth learning if you want to make custom animation sequences with jQuery.

Javascript-Jquery-Ajax ticker message is truncated

In the following JavaScript code, when I pass the message is too big that spans more than one screen width, message is being truncated. I have put the alert statements and found out that the whole message is coming from web method to javascript code, but while displaying it, it is truncating the messsage. Since I am novice to JavaScript (this code is concoction of code bits I got from the web), any help is greatly appreciated. Thank you in advance for your help.
$(document).ready(function() {
//initialize ul;
$("#scroller").html("");
var tkhtml = '';
var successReq = false;
$.ajax({
type: "POST",
url: "GetDataFromWebMethod.aspx/GetDataForTicker",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
var y = msg.d;
var x = y.split('~');
alert(x.length);
if (x != '') {
for (n = 0; n < x.length; n++) {
tkhtml = tkhtml + '<li>' + x[n] + '</li>';
}
alert(tkhtml);
$("#scroller").html(tkhtml);
successReq = true;
}
},
error: function(msg) {
alert("Entered Failure");
}
});
var successReq = false;
var interval = setInterval(function() {
if (successReq) {
clearInterval(interval);
javacode();
}
}, 100);
function javacode() {
var speed = 2;
var items, scroller = $('#scroller');
var width = 0;
scroller.children().each(function() {
width += $(this).outerWidth(true);
});
scroller.css('width', width);
scroll();
function scroll() {
items = scroller.children();
var scrollWidth = items.eq(0).outerWidth();
scroller.animate({ 'left': 0 - scrollWidth }, scrollWidth * 100 / speed, 'linear', changeFirst);
}
function changeFirst() {
scroller.append(items.eq(0).remove()).css('left', 0); scroll();
}
}
});
My css is:
<style type="text/css">
#scroller { height: 100%; margin: 0; padding: 0; line-height: 30px; position: relative; }
#scroller li { float: left; height: 30px; padding: 0 0 0 10px; list-style-position: inside; }
#scrollerWrapper { height: 30px; margin: 30px; overflow: hidden; border: 1px #333 solid; background: #F2F2F2; }
</style>

Sounds to me like you have your #scroller set to width:100%, assuming your body or html is set as such it'll truncate to the window width. You should try width:auto
edit::
Ok, so each li is float:left, that takes it out of the standard flow of the document. Try using display:inline or display:inline-block