SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    You want what? By when?? Milamber's Avatar
    Join Date
    Jan 2001
    Location
    California
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing Styles Dynamically

    Let's say i have three radio buttons:

    radio1
    radio2
    radio3


    I also have two sections:

    info1
    info2

    and each section has a table with stuff in it.


    Now, here's what I want::

    When someone clicks on radio1, i want both info sections bg color to be set to white.

    When they click on radio2, I want info1 section bg color to become red, and info2 section to become white.

    Finally when they click on radio3, i want info2 bg color to become red, and info1 section bg color to be white.


    Make sense?


    How can I acomplish this, using stylesheets?



    Gracias!
    -Jeff Minard | jrm.cc - Battlefield 2 Stats

  2. #2
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try searching through www.javascriptsource.com

    I remember seeing something like that there.

    I'll look for it in the meantime
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  3. #3
    You want what? By when?? Milamber's Avatar
    Join Date
    Jan 2001
    Location
    California
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    seriously

    does no one know how to do this?
    -Jeff Minard | jrm.cc - Battlefield 2 Stats

  4. #4
    ALT.NET - because we need it silver trophybronze trophy dhtmlgod's Avatar
    Join Date
    Jul 2001
    Location
    Scotland
    Posts
    4,836
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    milamber, i can do it, but im jus going to bed right now (im dying of the fli) so ill do it 2morrow morning

  5. #5
    SitePoint Zealot SlaveToTheMan's Avatar
    Join Date
    Aug 2001
    Location
    Land of OZ
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Member [MOS]'s Avatar
    Join Date
    Jun 2001
    Location
    Madrid, Spain
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With IE4,IE5,IE6,NS6 it's very easy. To change the style properties of a DIV with Javascript, you have to find the right layer, then change the property. There are different ways to follow the DOM to the desired container, so I just check what browser I am working with, and then use two general functions to do this.

    <script language="Javascript" type="text/javascript">
    <!--
    var ns4, ie4, dom;
    ns4 = (document.layers)?true:false;
    ie4 = (document.all && !document.getElementById)?true:false;
    dom = (document.getElementById)?true:false;

    function changeStyle(divname, prop, value)
    {
    var obj;
    if (ns4)
    obj = document.layers[divname];
    if (ie4)
    obj = document.all[divname];
    if (dom)
    obj = document.getElementById(divname);
    if (ns4)
    obj.prop = value
    else
    obj.style.prop = value;

    }
    //-->
    </script>

    'prop' and 'value' may differ from NS4 and IE. You should check http://www.webreference.com/dhtml and http://www.docjavascript.com to learn how to write proper cross-browser DHTML.

    Anyway, in your case you can use the funcion like this, supposing your two sections are <DIV id="info1"> and <DIV id="info2">:

    ...onwhatever = "changeStyle('info1', 'backgroundColor', '#ff0000');"

    for example.

    Hope it helps, I just wrote the function right now, have not tested it.

    (God, I will end up explaining myself better in English than in Spanish )
    Carlos de la Orden
    The higher a man gets, the smaller he looks for people who can't fly.

    www.aspfacil.com, el sitio para programadores ASP


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
  •