Results 1 to 3 of 3

Thread: looking for a minimal js styleswitcher script with cookies

  1. #1
    Join Date
    Jun 2006
    Location
    Birmingham
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Arrow looking for a minimal js styleswitcher script with cookies

    looking for a minimal js styleswitcher script with cookies.

    i've found one but it's 5 years out of date and i dont think it works as intended.

    i need to use javascript or some other client-side script because i'm not yet confident with server-side scripting security.

    any suggestions please.

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    See my post in the thread, style switching not work on IE, but works on everything else for an implementation. Include session.js before stylesheet-switcher.js.

    The two scripts create one object each: Session and StylesheetSwitcher. The latter is the one you're most interested in, and possesses two methods: use and usePreferred. The former takes one argument, which is a string that identifies the alternate style sheet to switch to. The latter can be used to revert to the original, preferred style sheet.

    Both methods return true upon successful completion. You could use this return value to allow fallback to a server-side mechanism (more on that later):

    HTML Code:
    <a href="?theme=myStyle"
        onclick="return !StylesheetSwitcher.use('myStyle');"
      >Use myStyle</a>
    Be aware that session support doesn't affect this value; if cookies cannot be set client-side, the return value will still be true if the style sheet could be changed. Use the Session.isSupported method to determine this. For example:

    HTML Code:
    <a href="?theme=myStyle"
        onclick="return !Session.isSupported() || !StylesheetSwitcher.use('myStyle');"
      >Use myStyle</a>
    Include your list of alternate style sheets as usual:

    HTML Code:
    <!-- Group 1 -->
    <link rel="stylesheet" type="text/css" href="sheet1a.css" title="title1">
    <link rel="stylesheet" type="text/css" href="sheet1b.css" title="title1">
    <!-- Group 2 -->
    <link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="title2">
    <!-- Group 3 -->
    <link rel="alternate stylesheet" type="text/css" href="sheet3.css" title="title3">
    (though obviously with better, more meaningful title attribute values). You'd then call StylesheetSwitcher.use with the applicable title attribute value as its argument to switch to that style sheet (as shown above).

    i need to use javascript or some other client-side script because i'm not yet confident with server-side scripting security.
    There aren't really any security issues here. Generating a list of alternate style sheets (which a default preferred) can be as simple as:

    PHP Code:
    $alternateStylesheets = array('title1' => array('sheet1a.css''sheet1b.css'),
        
    'title2' => array('sheet2.css'));
    if (isset(
    $_GET['theme']) && array_key_exists($_GET['theme'], $alternateStylesheets)) {
        
    $preferredStylesheet $_GET['theme'];
    } else {
        
    $preferredStylesheet 'title1';
    }

    foreach (
    $alternateStylesheets as $title => $stylesheets) {
        
    $rel 'stylesheet';
        if (
    $title != $preferredStylesheet) {
            
    $rel 'alternate ' $rel;
        }
        foreach (
    $stylesheets as $href) {
            echo 
    '<link rel="' $rel '" type="text/css" href="' $href '" title="'
                
    $title "\">\n";
        }

    The $alternateStylesheets array contains a list of style sheets groups, with group name as key. The value of each element is a list of addresses to style sheets within that group. The code will expect a query string parameter with the name 'theme'. It is doesn't exist, or the value doesn't match a known style sheet group, it will revert to some default ('title1', in this case). You can either add session support, or just pass around that query string value.

    If you elect not to add server-side support, the script I referenced needs to be tweaked so that you can identify whether the code will fail. There's no point in including controls for a feature that won't work - you'll just look silly.

    There are three configurable options in the stylesheet-switcher.js file related to sessions; the variables: sessionName, sessionDuration, and sessionPath. The cookie duration is currently set to seven days, though that can be changed using the Session.makeAge method down to the second. A cookie should never exist for longer than a year. You also probably want to adjust sessionPath to refer to the root directory (assign '/', instead of null) so that the cookie is accessible in all subdirectories.

    Mike

  3. #3
    Join Date
    Jun 2006
    Location
    Birmingham
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Arrow

    thanks for the reply mike. i'll print this out and let you know of any success.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •