We Keep Coding

jquery, time out another jquery function if a user clicks a div?

I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks

function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d

Refresh a certain div

Can anyone give me advice on how to make a div refresh.
I'm making a chess game and I want the div to load every time the other player posts data into the database. My game is almost finished the thing is, when you move a piece, Player 2 wont see the move that Player 1 made, when Player 2 refreshes the browser he/she can now see that the Player 1 has moved a piece.
How can I achieve this automatically?
I'm using jQuery and Ajax.

something like:
<script type="text/javascript">
window.onload = setupRefresh;
var interval = 1000;
function setupRefresh() {
setTimeout("refreshPage();", interval); // milliseconds
}
function refreshPage() {
//get game state using ajax and update div
}
this will refresh every second (== 1000ms, change to what you want/need), you need to implement the stuff in refreshPage()

Try this,Auto Load and Refresh Div every 10 Seconds with jQuery.
cant answer more without showing what you already done?

Hope something like this might help you... :)
$(document).ready(function(){
setInterval(targetDiv, 1000);
});
function targetDiv(){
$.ajax({
url: "/refresh_your_div_function",
//Other code u need to perform
}).done(function() {
//Your code
});
}

Automatic scroll the page to a div after 5 seconds

I'm new in javascript, now I'm trying to do that, as the title, I've a page which has a div at the top that is as big as the page with a video in it, followed by several sections like this:
<div id="first" style="height:100%; width:100%"></div>
<section id="second" style="height:100%; width:100%"></section>
<section id="third" style="height:100%; width:100%"></section>
Now I need 5 seconds after the page is loaded to scroll automatically the page to #second.
I've tried many ways but have failed and haven't found nothing that works properly.
Thanks

I'm feeling generous, so I'll just give you the code this time.
$(window).load(function () {
//normally you'd wait for document.ready, but you'd likely to want to wait
//for images to load in case they reflow the page
$('body').delay(5000) //wait 5 seconds
.animate({
//animate jQuery's custom "scrollTop" style
//grab the value as the offset of #second from the top of the page
'scrollTop': $('#second').offset().top
}, 300); //animate over 300ms, change this to however long you want it to animate for
});

Use this at the end of your codes
setTimeout(function(){window.location.hash = '#second';},5000);
Note that those height:100%; are wrong.

You could use
window.location.hash = '#second';
This will set the focus. I'll leave you to put in some work on a timer solution.
Also, I would discourage any forcing of the user to focus on a particular div. This is not a very good UX practice and can lead to chasing users off your site, especially because they may not understand why the page is scrolling up.

$(function () {
setTimeout(function () { goToSecondTab(); }, 5000);
function goToSecondTab() {
window.location.hash = '#second';
}
});

Add HTML to this line in zzzzBov's script to make it work properly in FF:
$('html, body').delay(5000) //wait 5 seconds

Code being multiplied and all instances are running

My website works in a way so that any links clicked do not load a new page but however trigger a .load() event into a div named "content".
Everything has been nice and dandy but now I have run into a small problem.
On one of the content pages, I have the following code:
$('.count').each(function () {
$this = $(this);
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});
The code works... it works very well. But when I load that same page again, it seems like the code is running twice because the seconds are going down by 2 at a time. Then when I load it again, it's going down by 3 seconds at a time. Another load, and it goes down by 4 seconds at a time. I load it a couple more times and it goes down faster then I can read.
I tried giving the .count divs their own unique id's (the .remain div is nested inside the .count div), even when pages are subsequently loaded the id is still entirely different and this did not fix my problem. I also tried putting clearInterval(countdown) right before the function but that just made it stop working entirely. Any suggestions?
And yes I know the countdown doesn't currently stop when it reaches 0.

Try this:
var countdown;
$('.count').each(function () {
$this = $(this);
if (!countdown)
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});

Best way to rotate html on a page

I need to be able to rotate between five distinct pieces of html in my webpage every 8 seconds.
What's the best way to do this? JQuery or native JS is fine.

There are definitely a lot of plugins for that.
But here's some basic structure you could use if you want to do it yourself:
// assuming all your divs have the class `rotating-content`:
$(document).ready(function() {
var divs = $('.rotating-content').hide();
var curr_div = divs.first().show();
function nextcontent() {
// hide current div, then move the next one or the first div, and show it
curr_div = curr_div.hide().next().add(divs.first()).first().show();
setTimeout(nextcontent, 5000); // 5 seconds
}
setTimeout(nextcontent, 5000);
});

You mean like a slideshow? You can use jQuery Cycle plugin from malsup,
here's an example: http://jsfiddle.net/JKirchartz/zLekb/ (none of this extra stuff is necessary, this is just an example I've been recycling)
if you want it to change every 8 seconds change timeout to 8000 (it's measured in milliseconds)