Results 1 to 6 of 6

Thread: Swith Content: Changing background-color

  1. #1
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Swith Content: Changing background-color

    1) Script Title: Switch Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tchcontent.htm

    3) Describe problem:

    In addition to changing the text color in the content header when it is active, I would like to be able to change the background-color.

    I have styled the content headers with CSS, as below, so that they appear as tabs:

    span.handcursor {
    padding:2px 4px;
    background:#eeeeee;
    border:1px solid #ccc;
    margin-right:3px;
    }

    If I wanted to alter the background to, say, #9999cc when the header was active, how would I go about that?

    I am challenged to say the least when it comes to JavaScript, so my attempts to make this happen by adding some stuff to the script have thus far been unsuccessful.

    I would welcome any suggestions as to how to make this happen.

  2. #2
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry about the terrible spelling in my post title - in my defence it is after 2am here and my brain is addled trying to make this work

  3. #3
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    Read this:
    PLEASE: Include the URL to your problematic webpage that you want help with.
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  4. #4
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your reply, but I'm afraid I cannot link to the page - it's not available to link to as it's on an intranet.

    I am using the vanilla script anyway, the only changes I have made are in the CSS, so I'm not really sure that a link would help much anyway.

  5. #5
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Take a look at this demo: http://phphost.smackum.com/dd/switchcontent.html

    In the css, simply make a reference to the class name (in this case, switchgroup1 and switchgroup2).

    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  6. #6
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, that would probably have done it, but I worked it out a different way, which I am posting here in case it's of use to anyone.

    What I did was add stuff to the script itself relating to background. I used the way color was handled as an example. So, I found this:

    switchcontent.prototype.setColor=function(openColor, closeColor){ //PUBLIC: Set open/ closing color of switch header. Optional
    this.colorOpen=openColor
    this.colorClosed=closeColor
    }


    And added this below it:

    switchcontent.prototype.setBackground=function(openBackground, closeBackground){ //PUBLIC: Set open/ closing background of switch header. Optional
    this.backgroundOpen=openBackground
    this.backgroundClosed=closeBackground
    }


    And so on for every instance of 'color' in the script.

    Then on the page I inserted this line into the javascript:

    reg.setBackground('#bf7360', '#eeeeee')

    It works like a charm and I am a happy (if extremely tired) bunny.

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
  •