I recently added some JavaScript functionality to my portfolio website in the form of a "fade in" animation. I had to run it through trial and error in order to troubleshoot the problems I was having with it. I started out using a button system with a non jQuery solution using just JavaScript. I soon found out that it was very buggy, and so I ended up going with the jQuery solution after all. This syntax was a lot cleaner and simpler than the straight JavaScript I was using before.
Above: JavaScript fadeIn() syntax
This syntax appears at the end of the html because I wanted the function to operate after everything else had a chance to load. This reduces flickers and ticks on the screen which something I had trouble with before using the jQuery. I linked the latest jQuery library I felt comfortable with which was v1.6.3 and it seemed to work out great.
Above: jQuery library link, and CSS for JS users and non-users
I had to use two different styles for JavaScript users and non users in order for my page to show up in all browsers. This doesn't punish the user that doesn't have JavaScript enabled and I found that it is a cross-compatible solution to the problem. Here are the style commands, and yes they are pretty simple but still required.
Above: CSS for JS users
Above: CSS for non JS users
So basically I wrapped the body material in a "div tag" and I set the id="main-content". This allowed me to hide it without messing with the "body tag". The result is a smooth fade in animation that uses a jQuery library for the heavy lifting. I highly recommend using the jQuery method for animation and adding general functionality to your site.
No comments:
Post a Comment