We Keep Coding

How to run the animation only once per page?

How can I change the following code to run only once per session, and once per page. The div#edgtf-manon-loading-title appears on every page. So, on the second time the same user/session goes to the same page they went before, the animation would NOT load anymore. Thanks!
function edgtfLoadingTitle() {
var loadingTitle = $('#edgtf-manon-loading-title');
if (loadingTitle.length) {
var fallback = edgtf.body.hasClass('edgtf-ms-explorer') ? true : false;
var done = function() {
edgtfEnableScroll();
edgtf.body.addClass('edgtf-loading-title-done');
$(document).trigger('edgtfTitleDone');
};
var toTop = function() {
loadingTitle
.addClass('edgtf-to-top')
.one(edgtf.transitionEnd, done);
};
edgtfDisableScroll();
loadingTitle.addClass('edgtf-load');
if(fallback) {
toTop();
}
loadingTitle.one(edgtf.animationEnd, toTop);
}
}
Is there a way I can add something like this code below to the original? And where exactly?
var yetVisited = localStorage['visited'];
if (!yetVisited) {
//something here
};

Click on every instance of a certain word in a page using Javascript

Im trying to program something using JQuery that will search a webpage for every instance of a certain word and then click on it. How would I do this?
I currently have something like this:
$(document).ready(function(){
function follow(texttofind, texttoexclude, setinterval){
var buttons = $( "*:contains('"+texttofind+"'):not(:contains('"+texttoexclude+"'))" );
var i = 0;
interval = setInterval(function() {
while(i <= buttons.length) {
i++
buttons[i].scrollIntoView();
buttons[i].click();
}
}, setinterval);
}
follow("text", "200");
});

The value of i is changing every time the while loops.
You can simplify it all by using $.each() instead of while/[i]:
$(document).ready(function() {
function follow(texttofind, texttoexclude, setinterval) {
var buttons = $("*:contains('" + texttofind + "'):not(:contains('" + texttoexclude + "'))");
interval = setInterval(function() {
buttons.each(function(i, button) {
button.scrollIntoView();
button.click();
});
}, setinterval);
}
follow("text", "stop", "2000");
});
See demo here.

Setting and checking localstorage for a certain value, then performing a function based on the data

I'm trying to set local storage from one page("index.html/settest.html"), and check for it on "index.html". If the check comes back with a certain result, it'll execute a function.
I have written some code for this, but it doesn't work. I don't really know why, so I'm hoping to get some assistance here.
Here's what I have on my "settest.html" page. It's really simple -
<script>
window.onload=setlocalstorage() {
localStorage.setItem("one", true);
}
</script>
So the way I understand it, when the page loads, it should set the value of "one" to true in localStorage.
Here's what I have on my "index.html" page -
<script>
window.onload=setInterval(function() {
var one = localStorage.getItem('one') || '';
if (one != 'yes') {
function hideone() {
var elem = document.getElementById("one");
elem.className = "hide";
}
}
}, 1000);
</script>
From what I understand, this should check localStorage every second for "one", and execute the function "hideone" if it comes back yes(or true).
However, when I go to "settest.html", and then visit "index.html", nothing happens. There are no errors in the console, or anything abnormal showing. I just don't get why it won't work.
Thanks in advance, if anyone needs more information or context feel free to ask!
-Mitchyl

You're not defining the window.onload functions correctly. Either:
<script>
window.onload = function() {
localStorage.setItem("one", true);
}
</script>
Or:
<script>
window.onload = loadFunction;
function loadFunction() {
localStorage.setItem("one",true);
}
</script>
And on your other page:
window.onload = function() {
setInterval(function() {
var one = localStorage.getItem('one') || '';
if (one != 'yes') {
function hideone() {
var elem = document.getElementById("one");
elem.className = "hide";
}
}
}, 1000);
};
Additionally, you're setting localStorage.one to true on the first page, and checking if it's yes on the other page. Not sure if this is meant to be or is a mistake.

None of your functions are correctly defined. It looks like you want to do this:
settest.html:
<script>
window.onload=function()
{
localStorage.setItem("one", true);
}
</script>
index.html:
<script>
window.onload = function ()
{
setInterval(function()
{
var one = localStorage.getItem('one') || '';
if (one !== true)
{
var elem = document.getElementById("one");
elem.className = "hide";
}
}, 1000);
}
</script>
Assuming you want it to check every second to see if it needs to set the class on a specific element to 'hide'.

Content slider like a slideshow

I have almost identical content slider like this one:
How could I make it rotate automatically? I have tried different ways but I cant make it work. I have tried putting a click on the link but it doesn't work:
i=1;
function autoplay(){
$('#navPoveznica'+i).click();
i++;
if(i>5){i=0};
setTimeout(autoplay, 2000);
}
And I called the function when DOM was .ready()
I'm really out of ideas, why doesn't this work? Can I select this way?
Should I use the class of the link and .each()?

It worked fine for me. Please check Demo.
Please paste your html,js fully so that we can have a check or set it up in jsfiddle.

What you can do is make an array of all the divs that needs to be slided like
//Define Variables
var divArray = [];
var delay: 6000;
var autoPlay: true;
var totalDivs: 5;
i = 1;
function createDivArray(){
$('#content_slider_container').find("div").each( function () {
divArray.push(this.attr('id'));
});
}
Then Write an AutoPlay Function Like this:
function autoPlay(divArray) {
ContentSlider = setInterval(function play(){
$(divArray).eq(i).slideLeft();
if (i >= totalDivs){
i = 0;
} else {
i++;
}
}
}, options.delay);
and Run the function like
autoPlay(divArray);

jQuery function attr() doesn't always update img src attribute

Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>

A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;

Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.

...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.

Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);