Hi all, I try to use Element.show and hide on mouseover and mouseout event. css: span.usercontrol { display: none; } <span class="usercontrol" id="hidden" > Hidden </span> <span onmouseover="Element.show(''hidden'')" onmouseout="Element.hide(''hidden'')" > text </span> This doesn''t work when I define the css in an external file (as described below). When I define the css on the element <span style="display:none" id="hidden" > Hidden </span> the code works Someone has an idea why? Regards, Stijn --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
its to do with how the various styles are prioritised. CSS (external files) have a higher priority than inline styles, and the Show() method, uses inline style, so nothing happens. You should use inline style on your element if you are planning on unhiding it. *Or* load the page with the element shown and hide it onload (which will momentarily show your object depending on how big the page is) Gareth On 8/12/07, Tarscher <tarscher-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > Hi all, > > I try to use Element.show and hide on mouseover and mouseout event. > css: > span.usercontrol > { > display: none; > } > > <span class="usercontrol" id="hidden" > > Hidden > </span> > <span onmouseover="Element.show(''hidden'')" > onmouseout="Element.hide(''hidden'')" > > text > </span> > > This doesn''t work when I define the css in an external file (as > described below). When I define the css on the element > <span style="display:none" id="hidden" > > Hidden > </span> > the code works > > Someone has an idea why? > > Regards, > Stijn > > > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Close, but the other way around. Inline styles have a higher priority than styles defined in a CSS block (either in page head or external file). Element.hide() adds "display:none" to the element, hiding it, no matter what its class/style rules might otherwise dictate. Element.show() removes the display style from the element, so it would default to its otherwise inherited/styled value. In this case, it reverts to the display style of the "usercontrol" class, which hides the element. TAG On Aug 11, 2007, at 7:48 PM, Gareth Evans wrote:> its to do with how the various styles are prioritised. > > CSS (external files) have a higher priority than inline styles, and > the Show() method, uses inline style, so nothing happens. > You should use inline style on your element if you are planning on > unhiding it. > > *Or* load the page with the element shown and hide it onload (which > will momentarily show your object depending on how big the page is) > > Gareth > > > On 8/12/07, Tarscher <tarscher-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > Hi all, > > I try to use Element.show and hide on mouseover and mouseout event. > css: > span.usercontrol > { > display: none; > } > > <span class="usercontrol" id="hidden" > > Hidden > </span> > <span onmouseover="Element.show(''hidden'')" > onmouseout=" Element.hide(''hidden'')" > > text > </span> > > This doesn''t work when I define the css in an external file (as > described below). When I define the css on the element > <span style="display:none" id="hidden" > > Hidden > </span> > the code works > > Someone has an idea why? > > Regards, > Stijn > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Oops, For some reason I thought that show applied a style. I stand humbly corrected. Either way, my initial statement was correct :) Gareth On 8/13/07, Tom Gregory <tomg-PGZyUNKar/Q@public.gmane.org> wrote:> > Close, but the other way around. Inline styles have a higher priority than > styles defined in a CSS block (either in page head or external file). > > Element.hide() adds "display:none" to the element, hiding it, no matter > what its class/style rules might otherwise dictate. > > > Element.show() removes the display style from the element, so it would > default to its otherwise inherited/styled value. In this case, it reverts to > the display style of the "usercontrol" class, which hides the element. > > > > > TAG > > > On Aug 11, 2007, at 7:48 PM, Gareth Evans wrote: > > its to do with how the various styles are prioritised. > CSS (external files) have a higher priority than inline styles, and the > Show() method, uses inline style, so nothing happens. > You should use inline style on your element if you are planning on > unhiding it. > *Or* load the page with the element shown and hide it onload (which will > momentarily show your object depending on how big the page is) > Gareth > > > On 8/12/07, Tarscher <tarscher-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > Hi all, > > > > I try to use Element.show and hide on mouseover and mouseout event. > > css: > > span.usercontrol > > { > > display: none; > > } > > > > <span class="usercontrol" id="hidden" > > > Hidden > > </span> > > <span onmouseover="Element.show(''hidden'')" > > onmouseout=" Element.hide(''hidden'')" > > > text > > </span> > > > > This doesn''t work when I define the css in an external file (as > > described below). When I define the css on the element > > <span style="display:none" id="hidden" > > > Hidden > > </span> > > the code works > > > > Someone has an idea why? > > > > Regards, > > Stijn > > > > > > > > > > > > > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---