Jump to content

The ultimate community for Ruby on Rails developers.


Photo

fadeIn() effect in Views


  • Please log in to reply
1 reply to this topic

#1 Rowel

Rowel

    Controller

  • Members
  • 109 posts

Posted 03 October 2013 - 04:50 PM

I want a fadeIn effect for the webpage. So when a user clicks on a new page, it's a nice transition from an empty page to the page content. 

 

#content-wrapper {
  display: none; 
}

and then in jQuery, I have

$("#content-wrapper").fadeIn(100);

Everything works fine, that is until javascript is disabled.... then the whole page starts out blank and no content appears because the jQuery isn't executed. 

 

What can I do so that if javascript is disabled, the page is still visible  (and there won't be a fade in effect). 



#2 Rowel

Rowel

    Controller

  • Members
  • 109 posts

Posted 03 October 2013 - 05:12 PM   Best Answer

This always happen... whenever I post a question, a few minutes later I find the solution. I think it resets my brain when I put into words the problem I'm having. 

 

To those interested.... modify CSS file to: 

.js #content-wrapper {
  display: none; 
}

add this class to HTML tag. 

<HTML lang="en" class="no-js">
and in your <head> section, add this.
  <script>document.documentElement.className = document.documentElement.className.replace('no-js','js');</script>
 
and of course, before the closing </body> tag
$("#content-wrapper").fadeIn(200);
So now, if the user has javascript disabled, the whole page just displays normally.
 
If they have javascript, the whole page has a fadeIn effect. 





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users