How to fade in a div message on page load with jQuery - javascript

I am trying to display a div message when the page loads using fadein and fadeout after 3 secs but my code does not seem to work, any help please? what am I doing wrong?
HTML
<div id="message" class="jumbotron" style="display:none;">
<p><?php echo $m; ?></p>
</div>
jQuery
$(document).ready(function(){
$('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});

Your code works for me (Here's a fiddle). The issue is either that you haven't included a valid link to the jQuery library, or there is an error that occurs before it gets to the below code that causes it to stop executing.
jQuery
$(document).ready(function(){
$('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});

Are you writing this script on the same page as the div element or does this lies in an external page?
If on external page then try checking if the control even passes to this page or not by simply putting an alert box or not.
If this script is on the same page, then make sure you write this script after the element you defined as if you have written this on the top or before the #message div then the script would run before it even gets loaded on page and you would not see any difference.

Just fade in the message on page load and then set a timeout in order to fade out after 3 seconds
Check the DEMO
EDIT
$('#message').fadeIn()
.queue(function() {
setTimeout(function() {
$('#message').fadeOut();
}, 3000);
$(this).dequeue();
});

$('div#message').fadeIn(3000,function()
{
$(this).delay(3000);
$(this).fadeOut(200);
});
Hope this will work for you.

Related

Html page reloading without refresh

<script>
setInterval(function(){
$.ajaxSetup({ cache: false });
$('#scrip-data').load(location.href + " #scrip-data");
}, 30 * 1000);
</script>
I am trying to reload a div without reloading the page.One thing I noticed the size of the layout getting smaller even the letters. Data I am getting from database. Its working fine except the page render which can be ignored but I want to fix this issue
Any help will be appreciated
It looks like you're trying to reload the html of that Div every 30s.
One thing that might be happening is that the jquery you posted here replaces the target div' (#scrip-data) internals with the loaded html.
What is likely happening is you might have divs inside each other. From the jQuery docs:
"This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded."
So you might have multiple "#scrip-data" divs after this code runs.
To refresh a div, you can do like this
<script>
$(document).ready(function(){
setInterval(function(){
$("#here").load(window.location.href + " #here" );
}, 10000);
});
</script>
<div id="here">dynamic content ?</div>
The div reloads automatically every 10 seconds.

Issues in onload function in jquery

I am working with shopify store.
I have created to show fancy box when entered my website.
This is code i used:
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
</script>
And i used notifIt.js and jquery.js files. Now its working fine, I have taken code from this site http://www.jqueryscript.net/demo/Simple-Easy-jQuery-Notification-Plugin-NotifIt/
Instead of click the text box, i need to show that notification box automatically.
So i changed above script onclick to onload.. but nothing seems to be work
May i know, what is my mistake? Thanks in advance.
Do you want to show your notification on page loading?
If you do, you can use this:
$(document).ready(function() {
not1();
});
Call Your function, directly. It will be called automatically on script tag loading.
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
not1(); //CALLING FUNCTION, It will be called automatically. I hope it would help.
</script>
For reference see Can't apply simple hide function on div

On page load, jquery is running before a certain div has been created

I'm trying to do a .show() on page load, however, the div is not yet loaded
It looks like jquery is running before a certain div has been created.
Wondering how can I solve this ?
my code consists of the following:
<script>
function choose_category(category_id)
{
$('#' + category_id).show(); // this is the part which doesn't work, as on page load the div mentioned later is not yet available.
}
</script>
<script>
function load()
{
choose_category('<?php echo $model->category_id->__toString(); ?>');
}
</script>
<img onload="load();" src="http://media.sociopal.com/ires/images/homepage/status-socio-icon.png" alt="" width="0" height="0" style="display:none;"></img>
The html embeds php code which runs a loop and generates (among other divs) the following div:
<div id='thecategoryid!!' onclick='choose_category("51d552eb2c8751766000016d");return false;' class = 'settings_menu_item'>
<p class='settings_menu_item_text'>Design Channels<i class='icon-chevron-right right'></i></p>
</div>
However, as mentioned, when the page loads (only when the page loads) the .show() does nothing because it looks like the div is not yet created.
If I debug this in chrome and go step-by-step, there is no problem (the div is created on time and the .show() works fine)
Will appreciate your help.
I can see no error in the code you have posted.
It might be that your assumption of what $.show() does is wrong.
$.show simply removes any occurences of "display: hidden;" in the inline styling of the selected element/node.
<div style="color:red; display:none;">
would become
<div style="color:red;">
http://api.jquery.com/show/
Instead of using that inline onload stuff, try this giving your image an id (we'll use img here.
Since you are calling choose_category with an inline click event listener, do not place that function inside $(document).ready as it won't be able to be accessed.
Then, use the following JavaScript:
$(document).ready(function(){
var img = $("#img");
img.load(function(){
load();
});
if (img[0].complete)
img.load();
});
What this is doing:
When the doc is ready, get the image. Attach a load event listener. If the image has already loaded by the time we got here (especially with caches), trigger a load event anyway.
Also note that you shouldn't put special put exclamation points in your id.

.Show() not working in Jquery Mobile

I'm looking to simply hide and image before the page loads and then once the page has loaded to show the image. Problem is when I try to show the image it doesn't show the image at all.
Here is my html code:
<body>
<div id ="splash" data-role="page">
<center>
<div id='class'> <img src="BookBayText.png"></div>
<div id='book'> <img src="Book.png"></div>
</center>
</div>
</body>
Here is my javascript/jquery mobile:
<script type="text/javascript">
$(document).on('pagebeforeshow','#splash',
function()
{
$("#book").hide();
});
$(document).on('pageinit','#splash',
function(){
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
},3000);
//For some reason this line below doesn't run
$("#book").show();
});
</script>
Any ideas why this isn't working??
I managed to get the desired effect I wanted with the following code:
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
$("#book").show();
},2000);
Basically I moved the $("#book").show(); line into the setTimeout function. But it still leaves me a tad lost as to why the code wouldn't show the image outside the function. If anyone with the answer to this could update this answer it would really be appreciated.
kinda similar to this post jQuery mobile popup on pageinit .
Although the post blames a delay in the browser, for me it is still unclear why it does it. I have never experience such behaviour.
I wonder what if you do the following changes:
put your center tag inside a data-role:content,
replace pageinit for pageshow.
search your iem as follows
inside either pageinit or pageshow (not settimeout).
>
var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage
if (elem.length) {
// check height or img width here...
}

wordpress run script once posts have loaded

I have a wordpress theme, which has a dynamic element, sized by javascrip(jquery)t on loading of the post (single post, not listing page)
so:
<div class='some-div'>
<div class='content'>
<?php /* code to load posts */ ?>
</div>
At the moment I get the height of div.content with javascript and apply that height to another div.some-div
The problem is on slow connections the height calculations are done before the content has loaded
So, what I need is to run a javascript function ONLY once the post has finished loading
At the moment Im delaying the function, have the script at the footer, and use the 'defer' attribute, but I still happens
any ideas?
Why don't you try to save first the content of that div into a variable like
var my_js_var = <?php echo $content ?> ;
Then just say with a function to call the resize div function ONLY when the content stored into your div is equal to your 'my_js_var'
//Would be something like:
var my_content = <?php echo $content ?> ; //Downloading the content
//Timer to constantly check if the div is loaded correctly
var timer = window.setTimeout('refresh()',100)
function refresh () {
//if the content of your div is equal to 'my_content' variable
//then call the resize function of the div
//finally clear the timeout [clearTimeout(timer)]
}
Didn't test it out
Tell me if it works..
Best regards
You may run your calculations in the onload event to make sure that the images, texts etc. in your post has finished loading.
<body onload="YourCalculationFunctionHere">
Don't use the .ready() method of jquery for your calculations bacause it will run after the DOM was loaded not after the page(inc images, texts etc.) was loaded.
http://www.w3schools.com/jsref/event_onload.asp
Just to answer incase anyone has the same issue.
I was running the function before the dom had loaded, a simple mistake easily solved.
use
$(function(){
// code here
});
as a short hand for $(document).ready

Categories