i think you can put the onload function in the <head> element and
that'll get rid of the flicker problem
i.e. instead of this in the body
<script>
window.onload = function()
{
new Effect.Appear('entryimage',{duration: 4.0, from: 0.0, to: 1.0})
}
</script>
you can do
<head onload="new Effect.Appear('entryimage',{duration: 4.0, from:
0.0, to: 1.0})">
blah blah blah
</head>
On Mon, Mar 31, 2008 at 8:04 PM, HomeAutoM8 <[EMAIL PROTECTED]> wrote:
>
> =================================================
> Mon-03-31-2008, 11:04pm U.S.EDT
>
> Hello,
> I'm trying to get a website entry page to work properly, while
> learning Scriptaculous effects and javascript at the same time. I
> wanted to use a couple of effects to add a little flash-style
> animation. I managed to get the initial Appear to work but with a
> problem: the image that's supposed to fade in flashes quickly for
> about 1/10 of a second, then proceeds to appear slowly as intended.
>
> Goal:
> --1---- Basically the page is supposed to open w/black background
> (CSS) and a small 135x102px display of a larger image file which
> appears gradually (Effect.Appear).
> --2---- There is a link established between the image and the site's
> main homepage, there is also a link established between the phrase
> "CLICK TO ENTER" and the same main homepage.
> --3---- When a visitor(s) clicks on the image or the phrase, the
> image enlarges (Effect.Scale) on the screen to five times its original
> display size, then slowly fades away (Effect.Fade),then they are
> redirected to the homepage.These 2 effects run in series and the link
> takes effect before the effects finish.
> --4---- In case javascript is not browser-enabled, the link will still
> be made if for any reason the effects don't work or do not complete
> their procedure.
>
> I'm a newbie at this, but have antied up with 30-40 hours of web
> tutorials, advice forums, library books (incl: Prototype &
> Scriptaculous In Action) plus lots and lots of trial and error with
> this page's code, and a little banging my head against the wall. I
> hoping the solution is easier than the drywall dent repairs next to my
> computer. I understand the javascript concepts (I think) but most of
> the info I've seen does not include the Scriptaculous effects actually
> inserted into a page's XHTML code with external links (demo pages just
> lead to "#"). Tutorials/books show what parameters/options are
> available. Some of the basics==like whether the <script> goes before
> the DIV its controling or after it, or in the pages <head> and not in
> the <body>==are probably too simple to include in the tutorials with
> the assumption that one already knows those coding strategies.
>
> I'm hoping to learn how easy it is to use these cool effects. Thanks-
> in-advance for any ideas or solutions... and being patient with such
> elementary questions,
>
> HomeAutoM8
>
> PS: sorry for such a long post, I just think more info/details is
> better than less.
>
> The page's code is appended below
> ========================================================
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
>
> <head>
> <title>TESTENTRYPAGE</title>
> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
>
> <script type="text/javascript"
> src="taculousjavascripts/prototype.js">
> </script>
>
> <script type="text/javascript"
> src="taculousjavascripts/scriptaculous.js?load=effects">
> </script>
>
> <link rel="stylesheet" href="CSS/websitestylesheet.css" />
>
> <script>
> window.onload = function()
> {
> new Effect.Appear('entryimage',{duration: 4.0, from: 0.0, to: 1.0})
> }
> </script>
> </head>
>
> <body>
> <p><p><p><p><p><p>
> <center>
> <div id="entryimage">
> <a href="homepage.html"><img style="
> float: none;
> border-style: none;
> width="135"
> height="102"
> src="images/Explosion1026x770x180.jpg"
> alt="Please Click To Enter"/>
>
> <center>
> <a href="homepage.html"
> style="
> font-weight: bold;
> text-decoration: none;
> font-size: .50em;
> color: #E9B9B1;
> a hover: #FF0000;
> "
> >CLICK TO ENTER</a>
> </div>
>
> <script>
> <a href="homepage.html" onclick="new Effect.Scale( 'entryimage', 500,
> { scaleFromCenter: true }); return false;"></a>
> </script>
>
> </body>
> </html>
>
> ========================================================
> >
>
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
