Show div after 2 seconds of page load - javascript

I am currently trying to show a div 2 seconds after the page is loaded. I can successfully do the reverse by hiding the div two seconds after the page loads. The issue is that nothing occurs and the div stays hidden. How can I properly show a div after two seconds of page load? Extra: mean while the two seconds are running show an ajax loading gif and then fade in the div
<script type = "text/javascript">
$(window).load(function() {
setTimeout(function() {
$("#contentPost").show('fadeIn', {}, 500)
}, 2000);
});
</script>
html/css
<style>
.contentPost { display:none;}
</style>
<div class="contentPost">
<h2>Hi there</h2>
</div>

$(document).ready(function() {
$(".contentPost").delay(2000).fadeIn(500);
});
Will work perfectly.

Ive never seen your show method written like that. Try altering it into use the jquery method fadeIn:
<script>
$(function() {
$("#contentPost").delay(2000).fadeIn(500);
});
</script>
The show method does not accept any arguments and won't work as you want it to.

Related

Auto hide alert messages at OpenCart

I am trying to auto hide the ajax alert messages in OpenCart version 2.3.0.2 but I can't make it work correctly. I added the code below in my template's header file so I can hide the .alert div after 5 seconds:
setTimeout(function() {
$(".alert").hide("slide", { direction: "right" }, 150);
}, 5000);
It works fine but only for the first alert triggered and I have to reload/refresh the page to make the hide script work again !
What am I doing wrong?
tl;dr You have to iterate on the array returned by $(".alert").
See this CodePen
Also, you should not use setTimeout to trigger the callback after DOM has loaded ; jQuery has $(document).ready() for that.
JavaScript
$(document).ready(function(){
$(".alert").each(function(){
$(this).hide();
})
});

Refresh page after everything is loaded every 15 seconds

I would like when my page is refreshed automatically every 15 seconds, everything to be loaded once. I tried this code but it doesn't work.For example when an image is large,I do not want to see the image loading slowly,I want the page to be completely loaded(images, tables) in the background,and then to see all the changes once.Any ideas ? I tried this code but it does not work as I expected.
<script>
function autoRefresh1()
{
window.setTimeout(function(){ document.location.reload(true); }, 15000);
}
</script>
<body onLoad="autoRefresh1();">
After following the links in the comments I came to solution that solves my problem
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(
function() {
setInterval(function() {
$('#table').load("table.html");
}, 15000);
});
</script>
And the div inside the :
<div id="table" align="center"></div>
You can check to see if the page is fully loaded with the Document.readyState.
There are probably many ways to go about doing this, but I would have a CSS box overlay the entire page with a "loading" message. While the loading message is up, I would use a setInterval() to check the document.readyState. When the readystate returns complete, I would clear the initial setInterval(), hide the loading message, which would then reveal the rest of the page.

show loading on jquery refresh

I have this JQuery code that loads a php file into a div every X Seconds
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('dashboard.php');
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div class="container"><h3>Loading Dashboard...</h3></div>
when the loading starts it shows the Loading Dashboard text but then every X seconds it just refreshes the content in the background. how can i show some sort of loading image each time it refreshes?
How about this:
1) at the very top of your setInterval function, before you execute the load, set the background of that container class to be a loading image (or however you want to display it).
2) use the callback function of .load (https://api.jquery.com/load/) to remove that loading image when the load has completed.
Here's a fiddle illustrating the direction you should take...
http://jsfiddle.net/j5sZc/
HTML
<div class="wrapper">
<h3 class="loader">Loading Dashboard...</h3>
<div class="container"></div>
</div>
JS
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
var $loader = $(".loader"), // cache references to loader and container
$container = $(".container");
setInterval(function() {
$loader.show(); // show loader when request is initialized
$container.empty().load('dashboard.php', function(){
$loader.hide(); // hide loader once new content is loaded
});
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});

Gif not running when loading an external page

I Have a huge php table and i want Load it via AJAX to insert a loading gif to the user.
So i'm very noob with this kind of operation and i make a very simple code to do this task.
Here is my code:
$(document).ready(function() {
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
$("#tableDiv").load("regulatoryData.php");
});
This is loading the gif but it is not running, it remains static.
How can i correct it?
Any suggestions?
EDIT: When i drag my image to the browser it animates normally.
EDIT 2: Whit just the
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
The gif works fine but when i add the second part its starts to run and just after it stops and remain freezed until the regulatoryData appears
EDIT 3: Actually i checked that is not the gif that is freezing but the entire browser.
Sorry about my english :/
Add at the beginning of <BODY>
<img src="images/loader.gif" style="display:none" />
As a "pre-loader"
I've found that IE stops animating GIFs when you start loading another page. I've solved that in one of my own projects by adding a timeout that refreshes the image source 50 ms after the other page starts loading by just assigning it the same value again. In your case that would look something like this:
$(document).ready(function() {
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
setTimeout(function() { $("#tableDiv img").attr("src", "images/loader.gif"); }, 50);
$("#tableDiv").load("regulatoryData.php");
});
I would recommend something like the following:
http://jsfiddle.net/NeFaz/1/
Load
<div id="myid">
</div>
$(document).ready(function() {
$("#load").click(function() {
$('#myid').addClass('loading');
$("#myid").load('http://www.confetti.co.uk/shop/', function () {
$('#myid').removeClass('loading');
});
});
});
#myid {
height: 500px;
width: 500px;
}
#myid.loading {
background-image: url('http://koikoikoi.com/wp-content/uploads/2012/07/RESET.gif');
}
This sets the image as a background of the div, but only when a class is applied. We start without this class.
Upon click the load link, we add the loading class to the div and the bg image will display. The function that is used on load fires upon the load finishing, and removes the class from the div therefore removing the image.

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/

Categories

Resources