So as the subject says I am attempting to have a div fade out (using Effect.Fade) and then fade back in (using Effect.Appear) with a new message. I figured I could do this pretty simply with a function and some variables but I am running into problems. Currently what it is doing is just popping up with the new message (with no fades) and just locking up and not even displaying the entire page. It is very simply done right now on a test page. The test page is at www.ecpc.us/test.html Any help will be greatly appreciated, thanks in advance. Corey --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Forget to mention the error I am currently throwing is: element.getStyle is not a function http://ecpc.us/js/effects.js Line 568 --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Below is a work test.html (IE7 and FF2.0.02) with prototype1.5.0 and
Scriptaculous1.7.0
The main problem is that you need to allow for some time between
fading out the div, changing it and then fading it in again.
Effectively, EFFECT sets a timer and steps through a series of
processes to change the opacity. EFFECT returns immediately (at as
such the nothing has really happened yet).
Then the text is changed (immediately).
And then the fade in process would have been called (if your code
wasn''t commented).
So, in my code, I Fade as expected, then in 1.01 seconds time, start
the change text and appear process, this is long enough after the fade
out process to be OK.
There are instances where I would like to chain a series of
methods/function calls.
A queue class would be great.
But I think all the classes would need overhauling to support the
queue, to be able to tell the queue that the process is complete.
I don''t think this is a minor task, so the mechanism I''ve
shown is
probably just 1 of many solutions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/global/prototype/prototype.js"
type="text/javascript"></script>
<script src="/global/script.aculo.us/scriptaculous.js"
type="text/javascript"></script>
<style type="text/css">
.altlink {
cursor: pointer;
text-decoration:underline;
color:blue;
}
#div1 {
background-color:black;
color:white;
text-align:center
}
#div2 {
top : 50px;
position : absolute;
}
</style>
<script type="text/javascript">
function fadeOut(newText) {
Effect.Fade(''div1'',{duration:1});
window.setTimeout("$(''div1'').update(''" +
newText +
"'');Effect.Appear(''div1'');", 1010);
}
</script>
<title>Test</title>
</head>
<body>
<div id="div1">Original Message</div>
<div id="div2">
<span class="altlink" onclick="fadeOut(''Hello
World'');">Change to
Hello World</span><br />
<span class="altlink" onclick="fadeOut(''Goodbye
World'');">Change to
Goodbye World</span><br />
original message just disappears, message doesn''t change. On
re-clicking link original message fades in then disappears.
</div>
</body>
</html>
On 10/03/07, JepperCT <JepperCT-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Forget to mention the error I am currently throwing is:
>
> element.getStyle is not a function
> http://ecpc.us/js/effects.js
> Line 568
>
>
> >
>
--
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
You want to use Effect.Queues, which can be used for stuff like that. Also look into Effect.Event. See http://wiki.script.aculo.us/scriptaculous/show/EffectQueues for getting started with this. Best, Thomas Am 12.03.2007 um 12:18 schrieb Richard Quadling:> > Below is a work test.html (IE7 and FF2.0.02) with prototype1.5.0 and > Scriptaculous1.7.0 > > The main problem is that you need to allow for some time between > fading out the div, changing it and then fading it in again. > > Effectively, EFFECT sets a timer and steps through a series of > processes to change the opacity. EFFECT returns immediately (at as > such the nothing has really happened yet). > > Then the text is changed (immediately). > > And then the fade in process would have been called (if your code > wasn''t commented). > > So, in my code, I Fade as expected, then in 1.01 seconds time, start > the change text and appear process, this is long enough after the fade > out process to be OK. > > > There are instances where I would like to chain a series of > methods/function calls. > > A queue class would be great. > > But I think all the classes would need overhauling to support the > queue, to be able to tell the queue that the process is complete. > > I don''t think this is a minor task, so the mechanism I''ve shown is > probably just 1 of many solutions. > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml"> > <head> > <script src="/global/prototype/prototype.js" type="text/ > javascript"></script> > <script src="/global/script.aculo.us/scriptaculous.js" > type="text/javascript"></script> > <style type="text/css"> > .altlink { > cursor: pointer; > text-decoration:underline; > color:blue; > } > #div1 { > background-color:black; > color:white; > text-align:center > } > #div2 { > top : 50px; > position : absolute; > } > </style> > <script type="text/javascript"> > function fadeOut(newText) { > Effect.Fade(''div1'',{duration:1}); > window.setTimeout("$(''div1'').update(''" + newText + > "'');Effect.Appear(''div1'');", 1010); > } > </script> > <title>Test</title> > </head> > <body> > <div id="div1">Original Message</div> > <div id="div2"> > <span class="altlink" onclick="fadeOut(''Hello World'');">Change to > Hello World</span><br /> > <span class="altlink" onclick="fadeOut(''Goodbye World'');">Change to > Goodbye World</span><br /> > original message just disappears, message doesn''t change. On > re-clicking link original message fades in then disappears. > </div> > </body> > </html> > On 10/03/07, JepperCT <JepperCT-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> >> Forget to mention the error I am currently throwing is: >> >> element.getStyle is not a function >> http://ecpc.us/js/effects.js >> Line 568 >> >> >>> >> > > > -- > ----- > Richard Quadling > Zend Certified Engineer : http://zend.com/zce.php? > c=ZEND002498&r=213474731 > "Standing on the shoulders of some very clever giants!" > > >-- Thomas Fuchs wollzelle http://www.wollzelle.com questentier on AIM madrobby on irc.freenode.net http://www.fluxiom.com :: online digital asset management http://script.aculo.us :: Web 2.0 JavaScript http://mir.aculo.us :: Where no web developer has gone before --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---