Jquery and Javascript do strange things. If you look to the code there is a "while" loop. It does 3 loops but only fades the last one (#c2).
Here is my code:
<div style="display:none" id="c0">Element 0</div>
<div style="display:none" id="c1">Element 1</div>
<div style="display:none" id="c2">Element 2</div>
<script>
var count = 0;
var exit = false;
var time = 300;
while(exit == false){
if(document.getElementById("c" + count)){
cual = "#c" + count;
$(document).ready(function(){
$(cual).fadeIn(time);
});
}
else
exit = true;
count++;
time += 100;
}
</script>
The reason you see this is because the cual variable will hold the value #c3 by the time the callbacks execute. Because cual is defined within a global scope, and not the callback scope, it is not bounded to the callback scoe.
There is a workaround for this, by adding an intermediary function, something like this:
function scheduleFade(count) {
var cual = "#c" + count;
$(document).ready(function(){
$(cual).fadeIn(time);
});
}
while(exit == false) {
if(document.getElementById("c" + count)) {
scheduleFade(count);
} else {
exit = true;
}
count++;
time += 100;
}
The script is loaded after the DOM is loaded on the page, so you don't need to use $(document).ready(). I have tested the following script:
var count = 0;
var exit = false;
var time = 300;
while(exit == false){
if(document.getElementById("c" + count)){
cual = "#c" + count;
$(cual).fadeIn(time);
}
else
exit = true;
count++;
time += 100;
}
and it works.
(Update based on comments)
The variable cual is overwritten on each loop, but the code inside the ondocumentready event listener is only executed after the DOM is fully loaded. At this point the variable cual is only set to the name of the third element.
You can create an own visibility scope for that variable to make it available inside the event listener callback:
var count = 0;
var exit = false;
var time = 300;
while(exit == false){
if(document.getElementById("c" + count)){
cual = "#c" + count;
$(document).ready((function() {
var elementToFadeIn = cual;
return function() {
$(elementToFadeIn).fadeIn(time);
}
})());
}
else
exit = true;
count++;
time += 100;
}
Here the variable elementToFadeIn is set inside an immediately-invoked-function, which also returns the event listener callback. That way, the locally defined elementToFadeIn will stay with name passed in on the current loop iteration.
–––––
On the other you are using jQuery, why do need the loop in the first place?
Just include this code at the end of the page (i.e. before the closing BODY tag) and you don't need the ondocumentready event, as all relevant parts of the DOM are loaded right before the closing BODY tag.
var time = 1000;
jQuery( '[id^="c"]' ).fadeIn( time );
Related
I am using setTimeout to run a slideshow. I want to have button to stop it. The markup is:
<h3> Modest Mouse at Fillmore in Miami <h3>
<div>
<img id="photo" src="http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg" alt= "Modest Mouse at Fillmore">
<span>•</span>
<span>•</span>
<span>•</span>
</div>
<button onclick="stopShow();">Stop</button>
The JS is:
var aSlideShowPics = ["http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg",
"http://the305.com/blog/wp-content/uploads/2014/05/modestmoude7.jpg",
"http://the305.com/blog/wp-content/uploads/2014/05/modestmouse8.jpg"
];
// Timer for SlideShow
var i = 0;
function changeSlide() {
var stopShowID;
stopShowID = window.setTimeout(function() {
newPic = aSlideShowPics[i];
$("#photo").attr("src", newPic);
i++;
if (i < aSlideShowPics.length) {
changeSlide(); // recursive call to increment i and change picture in DOM.
} else {
i = 0; // reset loop to keep slideshow going
changeSlide(); // Recursive call on loop end
}
function stopShow() {
window.clearTimeout(stopShowID);
}
}, 3000)
}
changeSlide();
I keep getting a reference error on button click of no stopShow. I've tried putting the clearTimeout function in several places in code but get same error. Perhaps a new set of eyes can see my error. Here is the jsfiddle. Thanks for any input.
Move the stopShow outside of the timeout and outside of changeSlide.
var stopShowID;
function changeSlide() {
stopShowID = window.setTimeout( function(){}, 3000);
}
function stopShow() {
if(stopShowID) {
window.clearTimeout(stopShowID);
stopShowID = null;
}
}
the stopShow() method does not exists at the window level, it only exists within the body of changeSlide(). Directly attach it to window
window.stopShow = function() ...
or pull it out of the closure
var i = 0;
var stopShowId;
function stopShow() {
window.clearTimeout(stopShowID);
}
function changeSlide() {
stopShowID = window.setTimeout(function() {
if (i >= aSlidesShowPics.length - 1)
i = 0;
var newPic = aSlideShowPics[i++];
$("#photo").attr("src", newPic);
changeSlide();
}, 3000);
}
I couldn't launch your jsfidle example, so I update the content of your code, 2 issues raised:
1- Your stopShow was undefined, so I attached it to window scope:
window.stopShow = stopShow;
2- For your ClearTimeout scope issue: your stopShowID variable was inside your function changeSlide: your stopShow was using a local copy. I basically put it as a global variable so both function could have access to it.
var aSlideShowPics = ["http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg",
"http://the305.com/blog/wp-content/uploads/2014/05/modestmoude7.jpg",
"http://the305.com/blog/wp-content/uploads/2014/05/modestmouse8.jpg"
];
// Timer for SlideShow
var stopShowID;
var i = 0;
function stopShow() {
window.clearTimeout(stopShowID);
}
window.stopShow = stopShow;
function changeSlide() {
stopShowID = window.setTimeout(function() {
newPic = aSlideShowPics[i];
$("#photo").attr("src", newPic);
i++;
if (i < aSlideShowPics.length) {
changeSlide(); // recursive call to increment i and change picture in DOM.
} else {
i = 0; // reset loop to keep slideshow going
changeSlide(); // Recursive call on loop end
}
}, 3000)
}
changeSlide();
working jsfiddle:
http://jsfiddle.net/fLw2a4vs/44/
I have 31 images and I want to display them one after another as the background of a div. I only want it to change when the user hovers over the div. My problem right now is that it just flips through all the images really fast. I am attempting to use setTimeout, but it isn't working. How can I make the delay work?
The name of the div is About_Me_Block and the images are called frame1.gif,frame2.gif ...etc
Here is my code:
function changeImg(counter) {
$('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
}
$(document).ready(function() {
var hoverAnimate = []
"use strict";
$('#About_Me_Block').mouseenter(function() {
hoverAnimate[0] = true;
var counter = 0;
while (hoverAnimate[0]) {
console.log(counter);
setTimeout(changeImg(counter), 1000);
counter++;
if (counter === 32)
hoverAnimate[0] = false;
}
});
$('#About_Me_Block').mouseleave(function() {
hoverAnimate[0] = false;
$(this).attr("style", "background-image: url(play.jpeg);");
});
});
setTimeout doesn't wait for the function to end, it works lile threading in other languages.
To achieve a what you want, you need to call setTimeout from the changeImg function.
var counter = 0;
$(document).ready(function() {
var hoverAnimate = []
"use strict";
$('#About_Me_Block').mouseenter(function() {
hoverAnimate[0] = true;
counter = 0;
changeImg();
});
$('#About_Me_Block').mouseleave(function() {
hoverAnimate[0] = false;
$(this).attr("style", "background-image: url(play.jpeg);");
});
});
function changeImg() {
$('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
counter++;
if (counter < 32 && hoverAnimate[0]) {
setTimeout(changeImg, 1000);
} else {
hoverAnimate[0] = false;
}
}
the reason they happen all at once is because while statement doesn't have delay, so all setTimeout will be set up at the same time, thus, calling changeImg all at once.
To solve this problem, you can replace setTimeout with setInterval. Instead of using while, you can just call setInterval like
var counter = 0;
var myTimer = setInterval(changeImg, 1000);
and update counter inside changeImg every time it gets called. After looping, don't forget to
clearInterval(myTimer)
It seems you need to read up on how setTimeout works. It essentially places a reminder to run a function after a given amount of milliseconds have passed. So, when you do setTimeout(changImg(counter), 1000) you are calling changImg(counter) which returns undefined. Therein producing this setTimeout(undefined, 1000) which is why it flips really fast.
So, you can use bind to allow the function to be called later with that parameter built in. Also, make sure you remove the reminders once done with clearTimeout.
function changeImg(counter) {
$('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
}
$(document).ready(function() {
var hoverAnimate = false, id;
function loop(counter) {
if(hoverAnimate || counter < 32) {
changeImg(counter);
id = setTimeout(loop.bind(this, counter++), 1000);
}
}
$('#About_Me_Block').mouseenter(function() {
hoverAnimate = true;
id = setTimeout(loop.bind(this, 0), 1000);
});
$('#About_Me_Block').mouseleave(function() {
hoverAnimate = false;
// Don't want a reminder for a random counter to wake up.
clearTimeout(id);
$(this).attr("style", "background-image: url(play.jpeg);");
});
});
Two methods for timers - setTimeout and SetInterval (single / repeating)
// setInterval is also in milliseconds
var intervalHandle = setInterval(<yourFuncToChangeImage>,5000);
//this handle loop and make example loop stop
yourelement.yourEvent = function() {
clearInterval(intervalHandle);
};
I have this code that I use to append some inputs + a button to delete the added input. I've set a counter to limit the number of added inputs to 5. What I'm trying to reach here is : when I click on the delete button it removes the appended element and decrements the counter
$(function($) {
var i = 1;
$("#btn_add").on("click",addAnotherPool);
function deletePool(){
this.parentNode.remove(this);
i--;
}
function addAnotherPool() {
if (i < 5) {
var html = '<div><input name="srv[]" id="srv_'+i+'" type="text"><button id="btn_del" name="pool_btn_add" onclick="deletePool()">Delete</button></div>';
$("#first_member").append(html);
}
i++;
return false;
}
});
When I run this code I get this error on the console :
Uncaught ReferenceError: deletePool is not defined
Can you please explain to me why this error ? How can I make this work ?
the problem is that deletePool is defined in a function, meaning that it is only a temporary function. you will have to make deletePool take in a argument for the object to delete, than have the html onclick like this:
onclick="deletePool(this)"
here is the deletePool function revised:
function deletePool(elm){
elm.parentNode.remove(elm);
}
There are more than one errors:
var i = 1; // declare global this variable
function deletePool(obj) { // declare global this function and use the this obj passed
obj.parentNode.remove(obj);
i--;
}
$(function () {
$("#btn_add").on("click",addAnotherPool);
function addAnotherPool() {
if (i < 5) {
var html = '<div><input name="srv[]" id="srv_'+i+'" type="text"><button id="btn_del" name="pool_btn_add" onclick="javascript:deletePool(this)">Delete</button></div>';
$("#first_member").append(html);
i++;
}
return false;
}
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div id="first_member">
</div>
<p><br/></p>
<button id="btn_add" onclick="">btn_add</button>
I'm wanting to know how to put a message in every time the timer starts over. And here is my code thus far:
<head>
<script type="text/javascript">
var c=10;
var t;
var timer_is_on=0;
function timedCount() {
document.getElementById('txt').value = c;
c = c - 1;
if (c == 0)
c = 10;
}
function doMining() {
if (!timer_is_on) {
timer_is_on = true;
t = setInterval(function () {
timedCount();
}, 1000);
}
}
</script>
<SPAN STYLE="float:left">
<form>
<input type="button" value="Mining" onClick="doMining()">
<input type="text" id="txt">
</form>
</SPAN>
2 easy steps:
Create a place for your message to show up (i.e. another web element)
In your conditional, when your counter reaches 0, update the message element's value
Here's an example:
<div id='message'></div>
Then, access that element and append your message or modify your method using DOM traversal (preferably using a javascript framework such as dojo or jquery but you can also do it manually):
if (c == 0) {
var _message = document.createTextNode("Timer has finished!");
document.getElementById('message').appendChild(_message);
c = 10;
}
Also, don't put a SPAN around a form. Try a "div" instead. Span's are meant for styling in-line document elements.
Edit: I'm assuming when you say "start over" you mean when the c = 0 or the timer has run 10 times. When it "starts over" could also mean when the method is re-called by the timer (i.e. every 1 second, in which case you'd just put the update code at the top of the function)
You are already catching this event in your "if (c == 0)". Just add the extra code you need there?
You need to better define what it means to start over. Try pulling it out into its own method so you can work with it separately.
<script type="text/javascript">
var c=10;
var t;
var timer_is_on=0;
function timedCount() {
document.getElementById('txt').value = c;
c = c - 1;
if (c == 0)
startOver();
}
function startOver() {
alert("Starting Over, Fool!");
c = 10;
clearTimeout(t);
timer_is_on=0;
doMining();
}
function doMining() {
if (!timer_is_on) {
timer_is_on = true;
t = setInterval(function () {
timedCount();
}, 1000);
}
}
</script>
I'm writing a Firefox extension. The extension replaces certain words on the page with other words. Here's the basic code I'm using:
function startup() {
gBrowser.addEventListener("load", pageLoad, true);
}
function pageLoad(event) {
if (event.originalTarget instanceof HTMLDocument) {
var ht = content.document.body.innerHTML;
ht = ht.replace(/\bthe\b/g,"el");
content.document.body.innerHTML = ht;
}
}
The problem is that this code is causing an endless loop. When I set the innerHTML property of the body, it sends another load event, which causes the endless loop.
How can I modify the page when it loads without causing the page load event to fire again?
You could use the following code to check if it has already been run before.
var loaded = false;
function pageLoad(event) {
if (!loaded) {
if (event.originalTarget instanceof HTMLDocument) {
var ht = content.document.body.innerHTML;
ht = ht.replace(/\bthe\b/g,"el");
content.document.body.innerHTML = ht;
}
loaded = true;
}
}
Alternatively, if you wanted to keep the loaded variable out of global scope, you could use a closure:
var pageLoad = (function () {
var loaded = false;
return function(event) {
if (!loaded) {
if (event.originalTarget instanceof HTMLDocument) {
var ht = content.document.body.innerHTML;
ht = ht.replace(/\bthe\b/g,"el");
content.document.body.innerHTML = ht;
}
loaded = true;
}
}
}();
The outer function gets executed immediately and returns the inner function which will have visibility of the loaded variable due to closure.
Would having a div or span tag immediately inside of your body tag be an option? Then you could just update the innerHTML of that element, and not the entire body...