CSS JavaScript Code Snippets

These snippets all deal with JavaScript and its use with Cascading Style Sheets.

Results via Envato Market

JavaScript Crossfader Here’s an example of an unobtrusive JavaScript crossfader. Element 1 Quod mazim placerat facer possim assum typi non habent claritatem. Demonstraverunt lectores legere me lius, quod ii legunt…

Add a ‘fisheye’ effect to your text. Move your mouse over the text and watch it change. Implemented using JavaScript and CSS.

Emulate CSS “fixed” positioning, which Internet Explorer lacks. Managed layers will disappear while the user is scrolling and reappear only after scrolling stops — thereby preventing the shearing effect common with other solutions.

Create rounded corners, without the use of images. Target designated classes and ids. Very easy to implement. Script is heavily commented for complete understanding.

Using a combination of CSS and JavaScript, you can move your images all over the page. Just add the class tag to the link’s attributes – it’s that simple!

Click on the arrow to reveal/hide contents. Can be used for a drop down menu or to hide/reveal content on a Web page.

JavaScript-generated rounded corners for any DIV element. Corners are anti-aliased, and support borders of any width and color. Displays nicely with square corners, if JavaScript is turned-off. No images or CSS required.

Let your visitors change the style sheet on your Web site. This script will let your visitors choose between five style sheets, which you can create yourself or use the ones included.

Tired of adding even and odd classes to your tables to distinguish the rows? This script will do it for you automatically. You can even use it with lists!

Have you ever wanted to add a style sheet to your document using the full CSS without having to use addRules and insertRules? While this method is a bit “non-standard”, it’s a pretty nifty approach that can be expanded upon.