SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Jun 13, 2007, 10:08 #1
- Join Date
- Jun 2004
- Location
- UK
- Posts
- 605
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Scriptaculous fade images in onload
Hi,
Does anyone know how I can get the following three images to fade in once the page has loaded? I can't seem to find out anywhere on the scriptaculous site / Google!
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/JavaScript" src="js/prototype.js"></script> <script type="text/JavaScript" src="js/scriptaculous.js"></script> </head> <body> <img src="img/home_1.jpg" title="" alt="" id="img1" /> <img src="img/home_2.jpg" title="" alt="" id="img2" /> <img src="img/home_3.jpg" title="" alt="" id="img3" /> </body> </html>
Thanks for any pointers...
-
Jun 13, 2007, 17:47 #2
- Join Date
- Jan 2007
- Location
- Belgium
- Posts
- 591
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Use jQuery, it's more compact and you don't even need scriptaculous.
Give your images a classname like 'fading-image' or something. And put this in your stylesheet:
Code CSS:img.fading-image { visibility:hidden; _visibility /**/:/**/visible; /* For IE5.01 so the images are shown */ }
This is all the JavaScript you need:
Code JavaScript:$(window).bind('load', function(){$('img.fading-image').css({visibility:'visible', opacity:0.01}).fadeTo(2000,1)});
You might have a little problem when using this animation on inline images, so I changed a line in jquery so display:block is set for all animations (default in jquery) except for opacity transitions.
Here's the example: http://fish4code.net/opacity/
And you can download my changed, already compressed, version of jquery from http://fish4code.net/opacity/jquery.jsLast edited by hexburner; Jun 13, 2007 at 18:18.
FOR SALE: 1 set of morals, never used, will sell cheap
-
Jun 14, 2007, 04:51 #3
- Join Date
- Jun 2004
- Location
- UK
- Posts
- 605
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks hexburner. An alternative approach, but it works nonetheless. Thanks.
-
Jun 14, 2007, 05:01 #4
- Join Date
- Aug 2006
- Posts
- 41
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
for reference, with scripty:
You'd want to set: style="display:none;" in the html, and then:
Code:Event.observe(window,'load',function() { $$('#img1, #img2, #img3').invoke('appear'); });
-
Jun 14, 2007, 05:55 #5
- Join Date
- Jan 2007
- Location
- Belgium
- Posts
- 591
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you set an element's style to display:none, you'll see that the image is entirely gone. When the page has finished loading (including images), the content at the sides of the images will be pushed aside or down, because at first the image was completely gone. By using visibibility:hidden and a IE5.01 hack you'll always have the space you need, without pushing content out of the way.
FOR SALE: 1 set of morals, never used, will sell cheap
Bookmarks