Develop Reference

Replace element after amount of page refreshes

Today, I was thinking if a javascript is possible to replace an element after refreshing the page 10 times specifically. I would really need this to replace an element after amount of page refreshes to make it static. I was trying to code it but all, I coded so far is to replace it after clicking on the element 3 times. And localStorage logs it and creates a key so the webserver remembers the change. All, I want is the element to replace its code with urls code after 10 refreshes on the page.
var count = parseInt(localStorage.getItem("count"), 10) || 0;
function loadMyPage() {
if (count >= 3)
$("#id-2").load("yoinkexecutor2.html");
}
}
$(document).ready( function () {
loadMyPage();
$("#id-2").on("click", function() {
localStorage.setItem("count", count += 1);
loadMyPage();
});
});

Ok, I updated the fiddle to work when the fiddle is reloaded. Don't worry too much about my mockHtmlReq function as it's just to mock a request for HTML content, similar to .load().
The only thing I changed was inside the $(document).ready()
$(document).ready( function () {
loadMyPage();
localStorage.setItem("count", count += 1);
});
Basically what happens is everytime the page reloads we are just incrementing up our count value stored in localStorage.

create custom event in javascript and trigger it

Here is my problem,i have one google ad that expand on click and return when hit close button..but according to changed conditions what i want is to show expand first and close automatically after certain time and when ever it expanded it should close after certain time..i have done this with jquery but it is refreshing the page for the first time can anyone one help..add is made by using google web designer
here is my jquery code i am sure it wont refresh page abut again it is doing it that's why I was thinking of making custom javascript event and trigger it (core javascript)
<script>
var $j = jQuery.noConflict();
setTimeout(function clo(){
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
},10000);
// above function to clpse it first time after 10 second
(function(){
$j('.banner').click(function(){
$j('#expanded-page').removeClass('ed');
var cl_chk = $j('#expanded-page').hasClass('ed')
if(!cl_chk){
setTimeout(function clo(){
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
},10000)
}
})
})()
//this function is for closeing that expando ad after its expanded
</script>
here is the url demo:
demo link asian paints ad

dont know if this can help
jQuery.noConflict() // no need to declare a global variable for jQuery ...
(function ($j) { // ... cause you can pass it here
// i like to declare things once and for all....
var closeAfter10 = function () {
setTimeout(function clo() {
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
}, 10000);
}
//this will attach the event and start the countdown when all contents on the page are loaded
$j(window).load(function() {
$j('.banner').click(function () {
$j('#expanded-page').removeClass('ed');
var cl_chk = $j('#expanded-page').hasClass('ed')
if (!cl_chk) {
closeAfter10(); // ... so i can use them this way ...
}
});
closeAfter10(); // ... here another use of that thing
);
})(jQuery);

script tag executed twice when called from an animated div

i have a countdown() function defined in a static js file, main.js:
function countdown() {
var tID = window.setInterval( function() {
var t = $("#countdown").html();
$('#countdown').html(--t);
if (t <= 0) {
window.clearInterval(tID);
$("a.about").trigger("click");
}
}, 1000 );
}
I also have the following within the page content:
<div id="content">
<p>Sorry, but no page was found here. Redirecting you to the home page in <span id="countdown">25</span></p>
<script type="text/javascript">
countdown();
</script>
</div>
#content is initially hidden and is displayed using jQuery (after being loaded with AJAX). for some reason this causes the <script> block to execute twice - once when the content is display:none, and once while the jQuery show function is being called. Thus my timer counts down by 2s at a time. (actually 1 at a time but 2 iterations happen almost concurrently.) if instead of animating the display of the div I simply execute $('#container').css('display','block');, the code correctly creates a single interval. Can anyone explain this?
I have an example demonstrated in jsFiddle here

Copied your code into jsfiddle - this might help
http://jsfiddle.net/rJHKQ/4/
Because your html element has display set to none, when your change the display of it, it's redrawing to display - causing your method to be hit again.
Also edited your example and updated it: (moved your code out of the div)
http://jsfiddle.net/NpKvr/

Call a function only once

I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears.
The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.
How can I do this?
This is the script I'm using for now:
$(document).ready(function(){
$("div#mask").click(function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});
Thank you!

You can try using a simple counter.
// count how many times click event is triggered
var eventsFired = 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
}
});
});
To persist this you will need to set a cookie. (e.g. $.cookie() if you use that plugin).
// example using $.cookie plugin
var eventsFired = ($.cookie('eventsFired') != null)
? $.cookie('eventsFired')
: 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
$.cookie('eventsFired', eventsFired);
}
});
});
To delete the cookie later on:
$.cookie('eventsFired', null);

Just point to an empty function once it has been called.
var myFunc = function(){
myFunc = function(){}; // kill it
console.log('Done once!'); // your stuff here
};

Web pages are stateless in that they don't hold states between page refreshes. When you reload the page it has no clue what has happened in the past.
Cookies to the rescue! You can use Javascript (and jQuery has some nice plugins to make it easier) to store variables on the client's browser. Store a cookie when the mask is clicked, so that when the page is next loaded it never shows.

this code with will work perfect for you and it is the standard way provided by jquery to bind events that you want to execute only once
$(document).ready(function(){
$("div#mask").one('click', function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});

Javascript/Ajax help required

I want to create a photo gallery element which has a play button and the next/previous navigation...
I can do the next and previous by using ajax load...and i do not want to preload the data for play functionality..the only way i can think of is using ajax call in a timer for play functionality...but again..calls will happen in an infinite manner till the person navigates away...is there any better way that i can do >>>??? can i jus make one ajax call to get the html of each and put in array and iterate..if so how do i go about it >>??? or is there a better solution for this??

get all image urls from 1 ajax call and store it in a array and dynamically set image src using javascript over a time. But without using preloading the flicker may occur

Here is a simple approach.
//Global variable
var imgList;
var imgPntr = 0;
//AJAX function
function getImagesUrl()
{
//Some code here
//On success
return arrayOfUrl;
}
// call this to prepare the images
function prepareImages()
{
var temp = getImagesUrl();
for(var i = 0; i 0) {
imgPntr--;
//Load this image in your gallery
loadImage(imgList[imgPntr]);
} else {
//Either rotate to end or alert the user end or disable prev button
}
}
// Call on press play
function play()
{
// Use setTime out and call showNext() until end
}