================================================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-/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
-~----------~----~----~----~------~----~------~--~---
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
<homeautomashun-/E1597aS9LQAvxtiuMwx3w@public.gmane.org>
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-/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
-~----------~----~----~----~------~----~------~--~---
err what am i saying i mean put the onload on the body element dancing with the stars is distracting On Mon, Mar 31, 2008 at 9:28 PM, David Lam <david.k.lam1-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> 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 <homeautomashun-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> 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-/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 -~----------~----~----~----~------~----~------~--~---
David, thanks for the speed reply and suggestion... was wondering if you''ve had any experience with running multiple effects right after each other. or effects that are followed by going to another page automatically. thanks again HAm8 PS: good luck with that astronomy thing... I know how distracting the heavenly bodies can be...... woops!,... hey wait a minute, yur not talking bout the TV show are you?...... jk ;) =====================================================--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
well, if you want an pretty complicated example... just look at the bottom of the "View Source" at the script.aculo.us homepage ^______^ On Wed, Apr 2, 2008 at 11:22 PM, HomeAutoM8 <homeautomashun-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote:> > David, > thanks for the speed reply and suggestion... was wondering if you''ve > had any experience with running multiple effects right after each > other. or effects that are followed by going to another page > automatically. > > thanks again > HAm8 > > PS: good luck with that astronomy thing... I know how distracting the > heavenly bodies can be...... woops!,... hey wait a minute, yur not > talking bout the TV show are you?...... jk ;) > > > =====================================================> > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---