Javascript toggle bug with SASS 1

Angelegt von suung Fri, 06 Aug 2010 16:09:00 GMT

I found out, what was wracking my mind weeks ago:

 

Consider: I want to toggle the visbility (in css spoken: the display) of a <div>  - container.


in Rails this would work for example like this:

 

in the view


<%= link_to_remote "toggle", :url => toggle_preview_url(:template => template) %>

<div id=:preview">[PREVIEW]</div>

 

and in the controller

render :update do |page|

   page["preview"].toggle

end

 

For this to work, the preview-div should be set on in SASS

display: none

in the beginning

which would be resetted to 'block' by the javascript (in Rails we often we use Prototype, which brings stuff like a toggle(); method)

 

So ... what's special about this?

It does not work. If I skip the display: none step, it works. That means: My preview is visible but get's toggled afterwards,

Now i found out, that when I don't use sass but say

<div style="display:none">

it works.


So i wonder: What is going on here?

Don;t have the time, to figure that out now, but maybe someone can help me.

Trackbacks

Verwenden Sie den folgenden Link zur Rückverlinkung von Ihrer eigenen Seite:
http://praktikanten.brueckenschlaeger.org/trackbacks?article_id=170

Comments

Leave a comment

  1. andi {{count}} days later:

    Actually it seems that’s not a problem with sass, but rather with how display: none works in css.

    At least the prototype api says so:

    http://www.prototypejs.org/api/element/toggle

Comments