CSS Scripts | JavaScriptSource

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
    Drew Diller Dec 12, 2008

    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
    Benoit Asselin Oct 12, 2007

    Use this script when you want to use the DOM to include a cascading style sheet. Very simple to implement.

  • ShadedBorder
    Steffen Rusitschka Sep 5, 2007

    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
    Timothy Groves Jun 4, 2007

    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
    Patrick Hunlock Feb 21, 2007

    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
    Vic Phillips Feb 9, 2007

    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
    Micah Atwell Jan 10, 2007

    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
    Marc Dobbelsteen Dec 27, 2006

    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
    Sep 25, 2006

    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
    Pascal Vyncke Sep 23, 2006

    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
    Corneliu Rusu Jun 14, 2006

    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
    Anton Peck May 30, 2006

    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
    Tim Tran Mar 23, 2006

    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
    Cameron Cooke Mar 13, 2006

    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
    James Kennedy Feb 24, 2006

    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
    Ilya Lyubinskiy Jan 25, 2006

    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
    Thai Phong Oct 31, 2005

    This script makes it easy to highlight different areas of your page. The colors are chosen at random.

  • Style Sheets by Resolution 3
    Oct 19, 2005

    This script determines the user's screen resolution and loads an appropriate style sheet. Short and effective!

  • Easy Drop Down Container
    Jeff Manning Jul 15, 2005

    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
    Bob Pearson Jul 5, 2005

    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
    Jun 8, 2005

    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
    Robert Paulson May 25, 2005

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

  • Page Organizer 2
    Chris Armstrong May 18, 2005

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

  • Drag and Drop 2
    May 6, 2005

    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
    Marek Prokop Mar 18, 2005

    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.