CSS Scripts
These scripts all deal with JavaScript and its use with Cascading Style Sheets. Questions about scripts here should be posted to The JavaScript Forum.
-
DD_roundies
Create rounded corners, without the use of images. Target designated classes and ids. Very easy to implement. Script is heavily commented for complete understanding.
-
Include CSS Stylesheet by DOM
Use this script when you want to use the DOM to include a cascading style sheet. Very simple to implement.
-
ShadedBorder
This script creates rounded corners with a drop shadow without using images. You can use different formats on the same page. Highly customizable. Non-obtrusive.
-
Javascript / CSS Crossfader
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!
-
CSS Toolbox
Three functions, one to return a CSS style object, one to create a new CSS rule, and one to delete a CSS style object. Dynamically create, change, and delete stylesheets. Easy to use and heavily commented.
-
Rounded Corners 2
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.
-
Style Switcher
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.
-
Switchy McLayout
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.
-
addNewStyleSheetByFullCSS
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.
-
Change Style
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.
-
Inline Comments
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.
-
Automatic Coloured Rows
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!
-
Fixed Layer Manager
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.
-
curvyCorners
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.
-
Text Sections
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.
-
Tab View
A combination of CSS and JavaScript that allows switching between several pages without loading them from server. The script emulates the behavior of tabbed controls in Windows applications.
-
Colorful Object onMouseOver
This script makes it easy to highlight different areas of your page. The colors are chosen at random.
-
Style Sheets by Resolution 3
This script determines the user's screen resolution and loads an appropriate style sheet. Short and effective!
-
Easy Drop Down Container
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.
-
Style Sheets by Resolution 2
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.
-
Style Sheet Switcher
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.
-
Pre-Loading Message
Use this script to warn your visitors that your page is loading. Short but effective.
-
Page Organizer 2
Use JavaScript and CSS to hide/show elements on a page thus saving screen space.
-
Drag and Drop 2
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!
-
Styling abbr in IE
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.
