CSS JavaScript Code Snippets

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

This script allows a user to read a volume of text, without having to scroll the page and without having to load different pages. This makes for easier maintenance as only one page needs to be updated, yet the content is visible to search engines. Very useful for large amounts of text.

This script and CSS combination allows you to define the dimensions, information richness, and appearance of your content objects for set ranges of screen sizes. A news site, for example, could have one layout and appearance for wide screens, one for medium-sized screens, and another for PDAs. Images could shrink or even disappear according to the screen size, columns could come and go as needed to maintain readability, and you can achieve a more efficient use of the available space for each screen size.

Adaptive Layout Date: 12 May 2006 Category: CSS techniques Intro: After liquid layout and zoom layout, adaptive layout may be the next big thing Summary: The base for this layout…

Provide your visitors with a method for toggling the text and background colors of your page or certain sections within it. Though simple, this script has a lot of potential and could be greatly expanded. Heavily commented.

Internet Explorer for Windows does not support the <abbr> element that should be used for proper markup of abbreviations. The solution is based on one simple fact: even though IE ignores the element itself, other elements nested in the <abbr> work fine. This script wraps the content of the <abbr> with <span>, set its title and class attribute and the <abbr> tag behaves like it should.

Loads a style sheet depending on the user’s screen resolution. This updated version allows for browser window size to govern text size and background image size for high-resolution displays.

This script permits rounded corners to be applied to DIV elements. The corners and associated edges are added to the initial DIV dimensions. There may be as many applications on a page as needed.

When the page loads, this script will detect whether you are using Microsoft Internet Explorer or another browser. It will then load the appropriate style sheet.

Use JavaScript and CSS to hide/show elements on a page thus saving screen space.

Use this script to warn your visitors that your page is loading. Short but effective.

Add hidden comments within the text of an article. The user can view them by clicking on the marked words. Click again and they are hidden once more.

This script produces a fading effect in a text box. The text can include any type of HTML and CSS styling. It can also be used with graphics. Small but powerful!