I have a div with id notifications in the home page. I don't want the div to be load when the page loads for the first time, I want it to load after 1 min. Is there any way in javascript or jquery to do what I want?
I'm not sure how you want to actually add your div into the DOM, but you can use setTimeout to delay for a minute. From the docs:
Calls a function or executes a code snippet after specified delay.
So something like this:
function appendDiv() {
... append code here...
}
timeoutID = window.setTimeout(appendDiv, 60000);
Sure :) in my example i use jQuery:
<div style="display:none" id="notifications"></div>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$.get('/notifications.php', function(result) {
// build your notifications here
// ...
$('#notifications').show();
}, 'json');
}, 60000);
});
</script>
Using jQuery's load function:
setTimeout(function() {
$('#myDiv').load('divcontents.html');
}, 60 * 1000);
divcontents.html can be dynamically generated on the server.
if the notification should not be in the DOM at all for the first minute, use following code:
$(document).ready(function(){
setTimeout( function(){
$("<div>")
.html( "your notification message/markup" )
.attr({ id : 'notification', ... })
.appendTo( "body" /* or any other DOM element */ );
}, 60*1000);
})
Related
I've got a script that looks to see how many records are "unread" for notifications. When I use the following code the page will load then number when the page loads:
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
But I'm trying to make it update every 5 secs so I searched around and found this but it's not working. I'm trying to figure out how to get it operational. Here is the Javascript code:
//TRYING TO GET TO UPDATE EVERY 5 SECONDS
window.setInterval(function(){
function(){
$("#notes_number").load("getnumber.php");
}
}, 5000);
//THIS IS WHAT HAPPENS WHEN A PARTICULAR BUTTON IS PRESSED
function toggleDiv(divId) {
$("#"+divId).show();
//GET THE NOTIFICATIONS
$(document).ready(function(){
$("#myContent").load("getnotes.php?page=<? echo $page; ?>");
});
//RESET THE NUMBER OF NOTIFICATIONS UNREAD
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
}
I was putting the code to do inside 2 functions. The code should be:
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
You've got an extra function declaration in here - it won't ever execute:
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
IMO, you shouldn't use setInterval like that. The response order isn't guaranteed, you should use setTimeout inside the callback to guarantee you get a response before sending the next request off:
function getNotes() {
$("#notes_number").load("getnumber.php", function() {
setTimeout(getNotes, 5000);
});
}
getNotes();
Replace following chunk of code
window.setInterval(function(){
function(){
$("#notes_number").load("getnumber.php");
}
}, 5000);
with
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
I need a certain div refreshed on the page every 3 seconds. This div contains other divs inside it.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
setInterval(function()
{
$('#gamewrapper2').load('find.php #gamewrapper2');
}, 3000);
;
This code works but only if the page visited is domain/find.php and it doesn't work for domain/find.php?id=1000001
Maybe i don't understand something but shouldn't this function load take the block #gamewrapper2 from find.php and paste it into the block #gamewrapper2 of the current page?
Do you just need to keep the query string on find.php? Something like:
setInterval(function(){
$('#gamewrapper2').load(window.location.pathname + window.location.search + ' #gamewrapper2');
}, 3000);
You can try the following to pass variables into the php document:
setInterval(function()
{
$('#gamewrapper2').load('find.php #gamewrapper2', {id: 1000001});
}, 3000);
}
Additionally, you can provide a function callback when it has completed loading to perform some task...
setInterval(function()
{
$('#gamewrapper2').load('find.php #gamewrapper2', {id: 1000001}, function(){
alert("find.php has been loaded.");
});
}, 3000);
}
.load() method
You should probably use $_POST['id'] to get the value from find.php.
http://jsfiddle.net/doktormolle/dNXVx/
How can I make this animate automatically?
I'm new to all this so any help is much appreciated!
function fx(o)
{
var $o=$(o);
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('position','relative');
$('span',$o).stop().css({position:'relative',
opacity:0,
fontSize:84,
top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
}).animate({opacity:1,fontSize:12,top:0,left:0},1000);
}
I think you want the animate function to be called without click.. if that is the case you can call the function directly or use a timer for an effect. See below,
Change the span like below,
<span id="animateMe">click here</span>
And this script below the fx inside document ready,
Direct Call:
$(function() {
fx('#animateMe');
});
Timer (after 2 secs)
$(function() {
setTimeout(function () {
fx('#animateMe');
}, 2000); //2000 milli seconds = 2 secs
});
http://jsfiddle.net/dNXVx/483/
I'd like to perform a function on only one page of my site where the body has an ID of #modulePage16460412. I have the script below that is not working.
<script type="text/javascript">
if($('#modulePage16460412').length > 0 ) {
$(function()
{
$(window).bind('load',
function(e)
{
window.setTimeout(function()
{
$.colorbox({opacity:0.3, href:"/storage/support/colorbox/offer.html"});
}, /*timeout->*/ 2000);
});
});
}
</script>
Would it also be possible to only execute the function the first time they visit the page and not execute again if they come back to that page?
Any help would be appreciated.
You can just put the function on the body load selecting it with the ID specified... if no element exists with this ID then the function will never fire.
$('#modulePage16460412').load(function() { // this will not be called unless an element with that ID has loaded into the DOM
// ... your code here.
});
and to touch on the 'single execution' part (this really should be a new question... but ohh well) you can use localStorage to persist the setting.
http://jsfiddle.net/rlemon/ET9Zg/
in your case something like
if( !getData('someKey') ) {
// ok so they have not been here.
setData('someKey', 1); // now set the data so this won't get hit again.
}
You need to put the condition inside $(function(){ so that the body tag is actually loaded before the JavaScript queries the (unloaded) DOM for the existence of the ID.
$(function(){
if($('#modulePage16460412').length) {
...
}
});
your defining a function, but not calling anywhere.
so put everything inside some function and call.
and also replace this if($('#modulePage16460412').length > 0 ) with if($('#modulePage16460412')), because when jquery couldnt find element with id : #modulePage16460412, it will return empty array. empty_array.length = 0, so it will always be true.
$('document').ready(function(){
if($('#modulePage16460412')) {
$(function()
{
$(window).bind('load',
function(e)
{
window.setTimeout(function()
{
$.colorbox({opacity:0.3, href:"/storage/support/colorbox/offer.html"});
}, /*timeout->*/ 2000);
});
});
}
});
Perhaps a simpler approach?
$( document ).ready( function() { // runs code only after DOM ready
if ( $( '#modulePage16460412' ).length > 0 ) { // runs code only if id found
window.setTimeout( function() {
$.colorbox( { opacity:0.3, href:"/storage/support/colorbox/offer.html" } );
}, 2000 );
}
} );
Hello how can I edit my following code to reload automatically the content of a specified div?
My code below reloads a file called form.php and I would like to be replaced with a div.
<style>
.loading {
height:24px;
background: url('http://b.static.ak.fbcdn.net/rsrc.php/v1/yb/r/GsNJNwuI-UM.gif') 50% 50% no-repeat;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js'></script>
<script language='JavaScript'>
setInterval( 'SANAjax();', 10000 ); ///////// 10 seconds
$(function()
{
SANAjax = function()
{
$('#reservationdetails')
.empty()
.addClass('loading')
.load('form.php', function()
{
$('#reservationdetails').removeClass('loading')
});
}
});
</script>
Thank you!
Reorder your code:
$(function() {
var SANAjax = function(){
$('#reservationdetails').empty().addClass('loading')
.load('form.php', function() {
$(this).removeClass('loading')
});
}
setInterval(SANAjax, 10000 );
});
I assumed that #reservationdetails is the div you want to load the responce in.
There is no need to pass a string to setInterval. Always pass function reference to it (same for setTimeout).
Felix Kling's answer is correct.
Also worth noting: it is very bad practice to use setInterval in this manner, as you are unsure if .load will return within the 10 seconds you specified. (Think, for example, of mobile devices.) Even if it did return in 9 seconds, it would then be only one second before you fired off the next request. Better to do a setTimeout in the callback, like so:
$(function () {
function loadReservationDetails() {
$('#reservationdetails')
.empty()
.addClass('loading')
.load('form.php', function () {
$(this).removeClass('loading');
setTimeout(loadReservationDetails, 10000);
});
}
loadReservationDetails();
});