Hey All,
I have a set of four splash images embedded on a page that I want to
have fade in on top of each other about 10 seconds apart.
I just set up a really primitive page with four images and wrote a four
loop to apply an effect on each one. I''m having a problem.. on OSX in
FF and Safari the images come in as predicted. On IE and FF on PC the
even images are appearing below the stage out of the z-index order.
Any idea why?
You can see the page here:
http://www.sumocreations.com/demo/irvine-retail/tmp_index.html
The image HTML looks like this:
<div id="splash">
<img id="slide_image_0" style="z-index: 200; display:
none;"src="assets/images/splash/tmp_home.jpg"
width="768" height="457"
alt="Isc Home" />
<img id="slide_image_1" style="z-index: 201; display:
none;"
src="assets/images/splash/tmp_home_b.jpg" width="768"
height="457"
alt="Tmp Home B"/>
<img id="slide_image_2" style="z-index: 202; display:
none;"
src="assets/images/splash/isc_home.jpg" width="768"
height="457"
alt="Tmp Home B"/>
<img id="slide_image_3" style="z-index: 203; display:
none;"
src="assets/images/splash/isc_home_b.jpg" width="768"
height="457"
alt="Tmp Home B"/>
</div>
The JS looks like this:
<script type="text/javascript">
// <![CDATA[
//
$(''image_1'').setStyle({z-index:''100'',display:''block''});
var count = 3;
new Effect.Appear(''slide_image_0'',{delay:1, duration:1});
for(i=1;i<count+1;i++) {
new Effect.Appear(''slide_image_''+i,{delay:10*i,
duration:1.5});
}
// ]]>
</script>
Also, ideally I''d like to convert this into a function that restarts
once the last image is reached and also I''d like to convert that into a
function that I could call onload for the html body. I''m not very
experienced in javascript so any help in this area would be much
appreciated. Thanks!
Thanks,
Jim Jeffers
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Hi Jim,
take a look at: http://amvest.develop.intermax.nl/ and its JS:
http://amvest.develop.intermax.nl//js/default.js
It does most of what your describing, and works well for me in IE,
safari and FF (plus it restarts, can be stopped, started and you can
skip to any image you want to in the sequence).
Hope it can serve as some inspiration to solve your problem,
-- Chris Chabot
Jim J. wrote:>
> Hey All,
>
> I have a set of four splash images embedded on a page that I want to
> have fade in on top of each other about 10 seconds apart.
>
> I just set up a really primitive page with four images and wrote a four
> loop to apply an effect on each one. I''m having a problem.. on
OSX in
> FF and Safari the images come in as predicted. On IE and FF on PC the
> even images are appearing below the stage out of the z-index order.
> Any idea why?
>
> You can see the page here:
> http://www.sumocreations.com/demo/irvine-retail/tmp_index.html
>
> The image HTML looks like this:
>
> <div id="splash">
> <img id="slide_image_0" style="z-index:
200; display:
> none;"src="assets/images/splash/tmp_home.jpg"
width="768" height="457"
> alt="Isc Home" />
> <img id="slide_image_1" style="z-index:
201; display:
> none;"
> src="assets/images/splash/tmp_home_b.jpg" width="768"
height="457"
> alt="Tmp Home B"/>
> <img id="slide_image_2" style="z-index:
202; display:
> none;"
> src="assets/images/splash/isc_home.jpg" width="768"
height="457"
> alt="Tmp Home B"/>
> <img id="slide_image_3" style="z-index:
203; display:
> none;"
> src="assets/images/splash/isc_home_b.jpg" width="768"
height="457"
> alt="Tmp Home B"/>
> </div>
>
> The JS looks like this:
>
> <script type="text/javascript">
> // <![CDATA[
> //
>
$(''image_1'').setStyle({z-index:''100'',display:''block''});
> var count = 3;
> new
Effect.Appear(''slide_image_0'',{delay:1, duration:1});
> for(i=1;i<count+1;i++) {
> new
Effect.Appear(''slide_image_''+i,{delay:10*i,
> duration:1.5});
> }
> // ]]>
> </script>
>
> Also, ideally I''d like to convert this into a function that
restarts
> once the last image is reached and also I''d like to convert that
into a
> function that I could call onload for the html body. I''m not very
> experienced in javascript so any help in this area would be much
> appreciated. Thanks!
>
> Thanks,
> Jim Jeffers
>
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Is that green beer on the second image? :) Best, Thomas Am 27.12.2006 um 12:25 schrieb Chris Chabot:> take a look at: http://amvest.develop.intermax.nl/ and its JS: > http://amvest.develop.intermax.nl//js/default.js--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 Thomas Fuchs wrote:> Is that green beer on the second image? :)sweeet :)) A search for "green beer" on Google images returns lotta martian beer results ;-) Less sweet would be to get your own face green from too many any-color beer. Ouch :)) cheers - -- Marius Feraru -----BEGIN PGP SIGNATURE----- iD8DBQFFlJAstZHp/AYZiNkRAh/JAKCP9f3aa96LoxTawamL63tSBea4BwCg3voO tWS7OeuvaqtijiB3CXRcNCE=05/2 -----END PGP SIGNATURE----- --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---