Grow your CSS skills. Land your dream job.

Different header

  • # June 5, 2008 at 10:41 am

    I want to do 1 thing. I have 2 cool headers and I want to use it in my web site. I think I can’t use it both on the same time, so I want to do 1 thing: When its 8-21 o’clock i want to use the "day" header and when it’s 21:01 to 7:59 o’clock I want use another ("night") header, so how should I do it? :?:

    P.s I saw somthing like it a long time ago and it was made with Java, Itryed to seached for this example, but i can’t find it :(

    # June 5, 2008 at 12:30 pm

    here you go

    http://stephenminded.com/files/styleswitch/styleswitch.html# think that is what your looking for.

    enjoy

    # June 5, 2008 at 1:45 pm

    I’ve refered this website here before, it’s the best example i’ve seen of this ever :)

    # June 5, 2008 at 2:39 pm

    Thanks guys :)

    # June 5, 2008 at 3:52 pm

    Nodster, where should I put the hreff’s of my morning, afternoon, evening, night styles? I did’t found that :(. So can you help me ?

    /*
    * Switcher to switch the stylesheet based on the referring url. for
    * instance, you can select a custom stylesheet based on if the visitor
    * is coming from google or digg.
    */
    referrerSwitcher : {
    strategy : "stylesheet",
    targetId : "style_target",
    defaultStyle : "referrer.css",
    // Feel free to change this as you wish, the key is a regular expression and
    // the value is the css file to use.
    styles : {‘/digg.com/’ : ‘digg.css’,
    ‘/stephenminded.com/’ : ‘sm.css’},
    getStyle : function () {
    var ref = document.referrer;
    for (var i in this.styles)
    {
    var pattern = new RegExp(i);
    if (pattern.test(ref)) return this.styles;
    }
    return false;
    }
    },

    /*
    * As the name suggests, this does the work of switching the style. It
    * takes a Switcher object which conatains the strategy by which you want
    * to switch the style as well as the function to call which returns the
    * value that the style should be.
    *
    * Details about the switcher object:
    * General structure:
    * var switcher = {
    * strategy : String,
    * defaultStyle : String,
    * target_id : String, (only used when strategy==’stylesheet’)
    * getStyle : Function
    * }
    *
    * Description of fields:
    * switcher.strategy – a string containing either "id" or
    * "stylesheet". When ‘id’ is specified, the script will change
    * the id of the body element to the value returned by getStyle.
    * When ‘stylesheet’ is specified, the script will grab the
    * element whos id is defined in target_id and set the href to
    * the value returned by getStyle.
    * switcher.defaultStyle – a string which represents the style you
    * want set if the getStyle function fails.
    * switcher.targetId – used when strategy is ‘stylesheet’, this is
    * the id of the stylesheet element you wish the script to change.
    * switcher.getStyle – this is the function that decides which
    * style should be set. it should return a string or false if
    * you want to use the value defined in defaultStyle.
    *
    * For an example of the switcher object, look at referrerSwitcher and
    * timeSwitcher above.
    *
    * @param switcher
    */

    P.S sorry for such a long post :oops:

    # June 6, 2008 at 7:37 am

    No prob, unfortunately i haven’t used this but i have had a look at it.

    the link to the ‘how it works’ http://stephenminded.com/posts/stylesheet_switcher

    I believe that the answer to your question is in the first part of the code (however like i say i have never used this),

    "Frodo64" wrote:
    referrerSwitcher : {
    strategy : "stylesheet", //what you are changing stylesheet or ID of element.
    targetId : "style_target", //this is changed to be the ID of the element you wish to change
    defaultStyle : "referrer.css", //

    however i have found a better site (with code) for you. Maybe a bit clearer.

    here it is http://www.katgal.com/2007/03/time-sensitive-css-switcher-change.html.

    this will involve multiple stylesheets.

    sorry i can’t be more help.

    # June 6, 2008 at 11:14 am

    Nodster, thank you very much man :)

    When I tryed to install the latest script, I saw that I can’t do it with WordPress CMS, so I thought that I just need to change the header according the time, so I made a very simple PHP script :P.

    $hour = date(‘H’);

    if ($hour < 8) {
    echo(‘<div id="header_n"> </div>’);
    } elseif ($hour < 21) {
    echo(‘<div id="header_d"> </div>’);
    } elseif ($hour < 24) {
    echo(‘<div id="header_n"> </div>’);
    } else {
    echo(‘<div id="header_d"> </div>’);
    }

    Thats all :P, but really thank you very much man :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".