=================================================
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
-~----------~----~----~----~------~----~------~--~---
