I would assume you just add class="fade" to the div, unless the Rails version of the FAT library differs. On 4/27/05, Matthew Margolis <mrmargolis-63mtpxcE9Cs@public.gmane.org> wrote:> > How would I cause a div to have the yellow fade effect applied when the > page loads? I know how to do it when someone clicks a link but I want > to do it on page load. > > Basically what code do I need to add to make the ''note<%=note.id%>'' div > fade on load? > > <html> > <head> > <%= javascript_include_tag "prototype" %> > </head> > <body> > <div id="note<%=note.id%>"> > some text > </div> > </body> > </html> > > Thank you, > Matt Margolis > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
How would I cause a div to have the yellow fade effect applied when the
page loads? I know how to do it when someone clicks a link but I want
to do it on page load.
Basically what code do I need to add to make the
''note<%=note.id%>'' div
fade on load?
<html>
<head>
<%= javascript_include_tag "prototype" %>
</head>
<body>
<div id="note<%=note.id%>">
some text
</div>
</body>
</html>
Thank you,
Matt Margolis
Somewhere in <head>:
<script language="JavaScript">
document.onload = function() {
Effect.YellowFade($(''note<%=note.id%>''));
}
</script>
To have the effect applied to all tags with class ''fade'' is a
little
harder, as iirc there isn''t any way to easily get all elements with a
named class.
On 28/04/05, Matthew Margolis <mrmargolis-63mtpxcE9Cs@public.gmane.org>
wrote:> How would I cause a div to have the yellow fade effect applied when the
> page loads? I know how to do it when someone clicks a link but I want
> to do it on page load.
>
> Basically what code do I need to add to make the
''note<%=note.id%>'' div
> fade on load?
>
> <html>
> <head>
> <%= javascript_include_tag "prototype" %>
> </head>
> <body>
> <div id="note<%=note.id%>">
> some text
> </div>
> </body>
> </html>
>
> Thank you,
> Matt Margolis
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
--
Phillip Hutchings
http://www.sitharus.com/
sitharus-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org /
sitharus-QrR4M9swfipWk0Htik3J/w@public.gmane.org
Doesn''t seem to work. I am trying to use the highlight effect (yellow fade) in prototype.js I just don''t know how to make it happen when the page loads. -Matt Margolis Ramin wrote:> I would assume you just add class="fade" to the div, unless the Rails > version of the FAT library differs. > > On 4/27/05, *Matthew Margolis* < mrmargolis-63mtpxcE9Cs@public.gmane.org > <mailto:mrmargolis-63mtpxcE9Cs@public.gmane.org>> wrote: > > How would I cause a div to have the yellow fade effect applied > when the > page loads? I know how to do it when someone clicks a link but I want > to do it on page load. > > Basically what code do I need to add to make the > ''note<%=note.id%>'' div > fade on load? > > <html> > <head> > <%= javascript_include_tag "prototype" %> > </head> > <body> > <div id="note<%=note.id%>"> > some text > </div> > </body> > </html> > > Thank you, > Matt Margolis > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org <mailto:Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org> > http://lists.rubyonrails.org/mailman/listinfo/rails > > > > > -- > - Ramin > http://www.getintothis.com/blog > >------------------------------------------------------------------------ > >_______________________________________________ >Rails mailing list >Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >http://lists.rubyonrails.org/mailman/listinfo/rails > >
On Apr 27, 2005, at 9:42 PM, Phillip Hutchings wrote:> Somewhere in <head>: > > <script language="JavaScript"> > document.onload = function() { > Effect.YellowFade($(''note<%=note.id%>'')); > } > </script> > > To have the effect applied to all tags with class ''fade'' is a little > harder, as iirc there isn''t any way to easily get all elements with a > named class.The rails prototype.js file adds a getElementsByClassName function to document, so it''s actually pretty simple if you''re using rails: document.onload = function() { elements = getElementsByClassName(''fade'') for(x = 0; x < elements.length; x++ ) { new Effect.Highlight(elements[x]) } } Or something like that. :) - Jamis
Okay, so I''m trying to get this yellow fade technique to work but
I''m
not understanding something here. If I do as is suggested below using
<script src="/javascripts/prototype.js"
type="text/javascript"></
script>
<script language="JavaScript">
document.onLoad = function() {
elements = getElementsByClassName(''fade'')
for(x = 0; x < elements.length; x++ ) {
new Effect.Highlight(elements[x])
}
document.getElementById(''hide'').style.display =
"none"
}
</script>
...nothing happens, like document.onload is not getting called.
However if i use
<script src="/javascripts/prototype.js"
type="text/javascript"></
script>
<script language="JavaScript">
function init() {
elements = getElementsByClassName(''fade'')
for(x = 0; x < elements.length; x++ ) {
new Effect.Highlight(elements[x])
}
document.getElementById(''hide'').style.display =
"none"
}
</script>
...
<body onload="init();">
things work... I *think* the first example should work as was
suggested, but maybe there''s something I''m not getting here.
Any
suggestions?
On Apr 27, 2005, at 10:28 PM, Jamis Buck wrote:
> On Apr 27, 2005, at 9:42 PM, Phillip Hutchings wrote:
>
>
>> Somewhere in <head>:
>>
>> <script language="JavaScript">
>> document.onload = function() {
>> Effect.YellowFade($(''note<%=note.id%>''));
>> }
>> </script>
>>
>> To have the effect applied to all tags with class
''fade'' is a little
>> harder, as iirc there isn''t any way to easily get all elements
with a
>> named class.
>>
>
> The rails prototype.js file adds a getElementsByClassName function
> to document, so it''s actually pretty simple if you''re
using rails:
>
> document.onload = function() {
> elements = getElementsByClassName(''fade'')
> for(x = 0; x < elements.length; x++ ) {
> new Effect.Highlight(elements[x])
> }
> }
>
> Or something like that. :)
>
> - Jamis
>
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
>
I''ve never used document.onLoad like you have here - but have had nothing but success with <body onload="init()"> - so I''d suggest the later. Is there a reason why you want to use document.onLoad? sam On 5/4/05, Craig Beck <craigbeck-sUNYKzuJffo33s2pWanAEQ@public.gmane.org> wrote:> Okay, so I''m trying to get this yellow fade technique to work but I''m > not understanding something here. If I do as is suggested below using > > <script src="/javascripts/prototype.js" type="text/javascript"></ > script> > <script language="JavaScript"> > document.onLoad = function() { > elements = getElementsByClassName(''fade'') > for(x = 0; x < elements.length; x++ ) { > new Effect.Highlight(elements[x]) > } > document.getElementById(''hide'').style.display = "none" > } > </script> > > ...nothing happens, like document.onload is not getting called. > However if i use > > <script src="/javascripts/prototype.js" type="text/javascript"></ > script> > <script language="JavaScript"> > function init() { > elements = getElementsByClassName(''fade'') > for(x = 0; x < elements.length; x++ ) { > new Effect.Highlight(elements[x]) > } > document.getElementById(''hide'').style.display = "none" > } > </script> > ... > <body onload="init();"> > > things work... I *think* the first example should work as was > suggested, but maybe there''s something I''m not getting here. Any > suggestions? > > On Apr 27, 2005, at 10:28 PM, Jamis Buck wrote: >-- sam http://www.magpiebrain.com/
It''s window.onload = funcRef and not "document.onload". See http://www.mozilla.org/docs/dom/domref/dom_window_ref63.html -- Thomas Am 04.05.2005 um 12:56 schrieb Sam Newman:> I''ve never used document.onLoad like you have here - but have had > nothing but success with <body onload="init()"> - so I''d suggest the > later. Is there a reason why you want to use document.onLoad? > > sam > > On 5/4/05, Craig Beck <craigbeck-sUNYKzuJffo33s2pWanAEQ@public.gmane.org> wrote: > >> Okay, so I''m trying to get this yellow fade technique to work but I''m >> not understanding something here. If I do as is suggested below using >> >> <script src="/javascripts/prototype.js" type="text/ >> javascript"></ >> script> >> <script language="JavaScript"> >> document.onLoad = function() { >> elements = getElementsByClassName(''fade'') >> for(x = 0; x < elements.length; x++ ) { >> new Effect.Highlight(elements[x]) >> } >> document.getElementById(''hide'').style.display = "none" >> } >> </script> >> >> ...nothing happens, like document.onload is not getting called. >> However if i use >> >> <script src="/javascripts/prototype.js" type="text/ >> javascript"></ >> script> >> <script language="JavaScript"> >> function init() { >> elements = getElementsByClassName(''fade'') >> for(x = 0; x < elements.length; x++ ) { >> new Effect.Highlight(elements[x]) >> } >> document.getElementById(''hide'').style.display = "none" >> } >> </script> >> ... >> <body onload="init();"> >> >> things work... I *think* the first example should work as was >> suggested, but maybe there''s something I''m not getting here. Any >> suggestions? >> >> On Apr 27, 2005, at 10:28 PM, Jamis Buck wrote: >> >> > > > -- > sam > http://www.magpiebrain.com/ > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
Issue with that is that anything else you have in onload would be killed...
I suggest using:
//
// Body onload utility (supports multiple onload functions)
//
var g_safe_onload = new Array();
function add_onload( f )
{
if ( IEmac && IE4 ) // IE 4.5 blows out on testing window.onload
{
window.onload = safe_onload;
g_safe_onload[ g_safe_onload.length ] = f;
}
else if ( window.onload )
{
if ( window.onload != safe_onload )
{
g_safe_onload[ 0 ] = window.onload;
window.onload = safe_onload;
}
g_safe_onload[ g_safe_onload.length ] = f;
}
else
window.onload = f;
}
function safe_onload()
{
for ( var i = 0; i < g_safe_onload.length; i++ )
g_safe_onload[ i ]();
}
then you can do...
add_onload( enable_order );
add_onload( swapStates );
add_onload( initialSelected );
or similiar w/o worry and they will be called in the order they are added with a
call to add_onload
the parameter to add_onload is the function name...
Thomas Fuchs wrote:
> It''s
>
> window.onload = funcRef
>
> and not "document.onload".
>
> See http://www.mozilla.org/docs/dom/domref/dom_window_ref63.html
>
> --
> Thomas
>
> Am 04.05.2005 um 12:56 schrieb Sam Newman:
>
>> I''ve never used document.onLoad like you have here - but have
had
>> nothing but success with <body onload="init()"> - so
I''d suggest the
>> later. Is there a reason why you want to use document.onLoad?
>>
>> sam
>>
>> On 5/4/05, Craig Beck
<craigbeck-sUNYKzuJffo33s2pWanAEQ@public.gmane.org> wrote:
>>
>>> Okay, so I''m trying to get this yellow fade technique to
work but I''m
>>> not understanding something here. If I do as is suggested below
using
>>>
>>> <script src="/javascripts/prototype.js"
type="text/ javascript"></
>>> script>
>>> <script language="JavaScript">
>>> document.onLoad = function() {
>>> elements =
getElementsByClassName(''fade'')
>>> for(x = 0; x < elements.length; x++ ) {
>>> new Effect.Highlight(elements[x])
>>> }
>>>
document.getElementById(''hide'').style.display =
"none"
>>> }
>>> </script>
>>>
>>> ...nothing happens, like document.onload is not getting called.
>>> However if i use
>>>
>>> <script src="/javascripts/prototype.js"
type="text/ javascript"></
>>> script>
>>> <script language="JavaScript">
>>> function init() {
>>> elements =
getElementsByClassName(''fade'')
>>> for(x = 0; x < elements.length; x++ ) {
>>> new Effect.Highlight(elements[x])
>>> }
>>>
document.getElementById(''hide'').style.display =
"none"
>>> }
>>> </script>
>>> ...
>>> <body onload="init();">
>>>
>>> things work... I *think* the first example should work as was
>>> suggested, but maybe there''s something I''m not
getting here. Any
>>> suggestions?
>>>
>>> On Apr 27, 2005, at 10:28 PM, Jamis Buck wrote:
>>>
>>>
>>
>>
>> --
>> sam
>> http://www.magpiebrain.com/
>> _______________________________________________
>> Rails mailing list
>> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails
>>
>
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
_______________________________________________
Rails mailing list
Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails
If you don''t need to support ancient browers, you can have a look at
attachEvent (Internet Explorer) and addEventListener (DOM 2 spec);
these will allow exactly this sort of thing
without having to reinvent the wheel... :)
prototype.js will probably get didicated Event handler attach support
soon (i''ve already submitted a patch for this).
It goes like this:
Event = {
KEY_BACKSPACE: 8,
KEY_TAB: 9,
KEY_RETURN: 13,
KEY_ESC: 27,
KEY_LEFT: 37,
KEY_UP: 38,
KEY_RIGHT: 39,
KEY_DOWN: 40,
KEY_DELETE: 46,
element: function(event) {
return event.srcElement || event.currentTarget;
},
stop: function(event) {
if(event.preventDefault)
{ event.preventDefault(); event.stopPropagation(); }
else
event.returnValue = false;
},
getParentNodeOrSelfByName: function(event, nodeName) {
element = Event.element(event);
while(element.nodeName != nodeName && element.parentNode)
element = element.parentNode;
return element;
},
observeKeypress: function(element, observer) { /*
special handling needed */
if(navigator.appVersion.indexOf(''AppleWebKit'')>0)
{ $(element).addEventListener("keydown",observer,false);
return; }
if($(element).addEventListener) $(element).addEventListener
("keypress",observer,false)
else if($(element).attachEvent) $(element).attachEvent
("onkeydown",observer);
},
add: function(element, name, observer) {
if($(element).addEventListener) $(element).addEventListener
(name,observer,false)
else if($(element).attachEvent) $(element).attachEvent("on" +
name,observer);
},
observeBlur: function(element, observer) {
Event.add(element, "blur", observer);
},
observeClick: function(element, observer) {
Event.add(element, "click", observer);
},
observeHover: function(element, observer) {
Event.add(element, "mouseover", observer);
},
observeMousedown: function(element, observer) {
Event.add(element, "mousedown", observer);
},
observeMouseup: function(element, observer) {
Event.add(element, "mouseup", observer);
},
observeMousemove: function(element, observer) {
Event.add(element, "mousemove", observer);
}
}
For the "load" event, it''s a bit more special: you can use
something
like this (untested):
observeLoad: function(observer) {
if( window.addEventListener ) {
window.addEventListener( ''load'', observer, false );
} else if( document.addEventListener ) {
document.addEventListener(''load'' , observer, false );
} else if( window.attachEvent ) {
window.attachEvent( ''onload'', observer );
}
}
This should work with most browsers out there, except for really,
really ancient ones.
--
Thomas
Am 04.05.2005 um 13:44 schrieb Sean T Allen:
> Issue with that is that anything else you have in onload would be
> killed...
>
> I suggest using:
>
> //
> // Body onload utility (supports multiple onload functions)
> //
>
> var g_safe_onload = new Array();
>
> function add_onload( f )
> {
> if ( IEmac && IE4 ) // IE 4.5 blows out on testing
window.onload
> {
> window.onload = safe_onload;
> g_safe_onload[ g_safe_onload.length ] = f;
> }
> else if ( window.onload )
> {
> if ( window.onload != safe_onload )
> {
> g_safe_onload[ 0 ] = window.onload;
> window.onload = safe_onload;
> }
>
> g_safe_onload[ g_safe_onload.length ] = f;
> }
> else
> window.onload = f;
> }
>
> function safe_onload()
> {
> for ( var i = 0; i < g_safe_onload.length; i++ )
> g_safe_onload[ i ]();
> }
>
> then you can do...
>
> add_onload( enable_order );
> add_onload( swapStates );
> add_onload( initialSelected );
>
> or similiar w/o worry and they will be called in the order they are
> added with a call to add_onload
>
> the parameter to add_onload is the function name...
>
>
>
> Thomas Fuchs wrote:
>
>
>> It''s
>>
>> window.onload = funcRef
>>
>> and not "document.onload".
>>
>> See http://www.mozilla.org/docs/dom/domref/dom_window_ref63.html
>>
>> --
>> Thomas
>>
>> Am 04.05.2005 um 12:56 schrieb Sam Newman:
>>
>>
>>> I''ve never used document.onLoad like you have here - but
have had
>>> nothing but success with <body onload="init()"> -
so I''d suggest the
>>> later. Is there a reason why you want to use document.onLoad?
>>>
>>> sam
>>>
>>> On 5/4/05, Craig Beck
<craigbeck-sUNYKzuJffo33s2pWanAEQ@public.gmane.org> wrote:
>>>
>>>
>>>> Okay, so I''m trying to get this yellow fade technique
to work
>>>> but I''m
>>>> not understanding something here. If I do as is suggested below
>>>> using
>>>>
>>>> <script src="/javascripts/prototype.js"
type="text/
>>>> javascript"></
>>>> script>
>>>> <script language="JavaScript">
>>>> document.onLoad = function() {
>>>> elements =
getElementsByClassName(''fade'')
>>>> for(x = 0; x < elements.length; x++ ) {
>>>> new Effect.Highlight(elements[x])
>>>> }
>>>>
document.getElementById(''hide'').style.display =
"none"
>>>> }
>>>> </script>
>>>>
>>>> ...nothing happens, like document.onload is not getting called.
>>>> However if i use
>>>>
>>>> <script src="/javascripts/prototype.js"
type="text/
>>>> javascript"></
>>>> script>
>>>> <script language="JavaScript">
>>>> function init() {
>>>> elements =
getElementsByClassName(''fade'')
>>>> for(x = 0; x < elements.length; x++ ) {
>>>> new Effect.Highlight(elements[x])
>>>> }
>>>>
document.getElementById(''hide'').style.display =
"none"
>>>> }
>>>> </script>
>>>> ...
>>>> <body onload="init();">
>>>>
>>>> things work... I *think* the first example should work as was
>>>> suggested, but maybe there''s something I''m
not getting here. Any
>>>> suggestions?
>>>>
>>>> On Apr 27, 2005, at 10:28 PM, Jamis Buck wrote:
>>>>
>>>>
>>>>
>>>
>>>
>>> --
>>> sam
>>> http://www.magpiebrain.com/
>>> _______________________________________________
>>> Rails mailing list
>>> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>>> http://lists.rubyonrails.org/mailman/listinfo/rails
>>>
>>>
>>
>> _______________________________________________
>> Rails mailing list
>> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails
>>
>>
>
>
> <sean.vcf>
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
_______________________________________________
Rails mailing list
Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails
Just because that was one of the examples given, I thought I''d try it as it was... but i guess it was not correct. I''m fairly new to javascript, so the Rails javascript support is a good learning tool. Seeing some of the other suggested initialization techniques, how do you set this up -- do you put it in your application layout, or do you write a helper function to insert the proper javascript to your pages that need it? On May 4, 2005, at 3:56 AM, Sam Newman wrote:> I''ve never used document.onLoad like you have here - but have had > nothing but success with <body onload="init()"> - so I''d suggest the > later. Is there a reason why you want to use document.onLoad? > > sam > > On 5/4/05, Craig Beck <craigbeck-sUNYKzuJffo33s2pWanAEQ@public.gmane.org> wrote: > >> Okay, so I''m trying to get this yellow fade technique to work but I''m >> not understanding something here. If I do as is suggested below using >> >> <script src="/javascripts/prototype.js" type="text/ >> javascript"></ >> script> >> <script language="JavaScript"> >> document.onLoad = function() { >> elements = getElementsByClassName(''fade'') >> for(x = 0; x < elements.length; x++ ) { >> new Effect.Highlight(elements[x]) >> } >> document.getElementById(''hide'').style.display = "none" >> } >> </script> >> >> ...nothing happens, like document.onload is not getting called. >> However if i use >> >> <script src="/javascripts/prototype.js" type="text/ >> javascript"></ >> script> >> <script language="JavaScript"> >> function init() { >> elements = getElementsByClassName(''fade'') >> for(x = 0; x < elements.length; x++ ) { >> new Effect.Highlight(elements[x]) >> } >> document.getElementById(''hide'').style.display = "none" >> } >> </script> >> ... >> <body onload="init();"> >> >> things work... I *think* the first example should work as was >> suggested, but maybe there''s something I''m not getting here. Any >> suggestions? >> >> On Apr 27, 2005, at 10:28 PM, Jamis Buck wrote: >> >> > > > -- > sam > http://www.magpiebrain.com/ > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >