Jump to content

The ultimate community for Ruby on Rails developers.


fadeIn() effect in Views

  • Please log in to reply
1 reply to this topic

#1 Rowel



  • 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


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



  • 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
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