AVeryNiceWeb

[Javascript] Fade In Text or Images After Page Load

[Javascript] Fade In Text or Images After Page Load

Postby admin » Thu May 18, 2017 1:21 pm

The following code contains JQuery. If this code doesn't perform as expected, you may have to use the new jquery version. Instructions for that are posted at the bottom of this article.

Copy and paste this after the <body> of the HTML:
Code: Select all
<div class="hidden">
    <p><img src='http://i.imgur.com/EJ3W1KM.jpg'></p>
</div>


Copy and paste this CSS between the <head></head> of the HTML:
Code: Select all
<style>
div.hidden {
    display: none
}
</style>


Copy and paste this javascript between the <head></head> of the HTML:
Code: Select all
<SCRIPT LANGUAGE="JavaScript">
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$(document).ready(function () {
    $('div.hidden').fadeIn(5000).removeClass('hidden');
});});
</SCRIPT>


You can adjust the delay of the fade in by changing the (.fadeIn(5000)) part of the jquery code from 5000 to whatever but keep in mind that the longer the value the longer the fade as well.

Another method to accomplish installing this code is by creating a .js and a .css files.

Create a text file and call it something.css (e.g. css.css).
Copy and paste this code into it:
Code: Select all
div.hidden {
    display: none;
}


Next, create a text file and call it something.js (e.g. js.js).
Copy and paste this code into it:
Code: Select all
    javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$(document).ready(function () {
    $('div.hidden').fadeIn(50000).removeClass('hidden');
});});


It's here where you'll adjust your delay time (.fadeIn(N)).

Upload both files to your root directory or sub directory. For this example, let's say I uploaded both files to a sub directory called "test".
Now indicate what needs to be faded in. For our example we'll use the same div example.

Paste this code to the body of your html or php page:
Code: Select all
<script src="/test/js.js"></script>
<div class="hidden">
    <p><img src='http://i.imgur.com/EJ3W1KM.jpg'></p>
</div>


Then paste this before the </head>:
Code: Select all
<link rel="stylesheet" href="/test/css.css" type="text/css" media="screen" /><link rel='stylesheet' media='all' />


That's it. A functional way to fade in objects with time delay.

A working example can be found here:
http://jsfiddle.net/arunpjohny/2nzHT/
The AVNW Support Team
http://www.AVeryNiceWeb.com

If you wish to add visual documentation (screenshots), make a donation and we'll let you know when the post has been updated


And, if our post has provided you with great information, there are a few ways you can show your appreciation:
  1. Like us on Facebook.- Our account had recently a hacking problem on FB and we were forced to create a new one. We lost all our posts & likes. :(
  2. Send us a testimonial.- Testimonials thanking for our good team work can be valuable to us and may encourage others to seek our support.
  3. Post a review.- Posting a good review about this site could also compel others to seek our advice & support.

Thank You!
User avatar
admin
Site Admin
 
Posts: 427
Joined: Mon Jan 13, 2014 3:18 am
Location: New York City

Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest