Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Probably a very easy question but for the following code, I want the selected button to remain selected with the same colors as mouse over after clicking on it. Currently it turns red and font change color only when mouse is over it but I want it to remain that way when the user is visiting the clicked page. Please advise.
    HTML Code:
    <style type="text/css">
    #preload
    {
    display: none;
    visibility: hidden;
    }
    
    
    <style type="text/css">
    .menu{
    width:100px;
    }
    .menu a{
    display:block;
    width:175px;
    height:50px;
    valign: center;
    margin:-15px 1000px 0px 0px;
    background:url(http://www.roboticmagazine.com/pictures/button1.png) no-repeat 0 0;
    line-height:30px;
    font-family:Arial ;
    font-size:12px;
    font-weight: bold;
    color:white;
    text-align:center;
    text-decoration:none;
    }
    .menu a:visited{
    color:#black;
    }
    .menu a:hover{
    color:black;
    background:url(http://www.roboticmagazine.com/pictures/button2.png) no-repeat 0 0;
    }
    
    .menu a:active{color:#ffffff;}
    
    </style>
    
    
    <div id="preload">
    <img src="http://www.roboticmagazine.com/pictures/button1.png">
    <img src="http://www.roboticmagazine.com/pictures/button2.png">
    </div>
    
    
    <div class="sidebuttons">
    <div class="menu">
    </br>
    
    <a href="http://www.roboticmagazine.com/domestic.php">DOMESTIC ROBOTS</a>
    <a href="http://www.roboticmagazine.com/androids.php">HUMANOIDS/ANDROIDS</a>
    <a href="http://www.roboticmagazine.com/industrial.php">INDUSTRIAL ROBOTS</a>
    <a href="http://www.roboticmagazine.com/medical.php">MEDICAL ROBOTS</a>
    <a href="http://www.roboticmagazine.com/military.php">DEFENSE & VEHICLES</a>
    <a href="http://www.robotbuy.com/parts_interm.php">PARTS</a>
    <a href="http://www.roboticmagazine.com/software.php">SOFTWARE</a>
    <a href="http://www.roboticmagazine.com/toys.php">TOYS</a>
    <a href="http://www.roboticmagazine.com/robot_of_week.php">ROBOT OF THE WEEK</a>
    <a href="http://www.roboticmagazine.com/various.php">VARIOUS ROBOT TYPES</a>
    
    
    </div>
    </div>
    and the side buttons css code is irrelevant, it is just for positioning.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    You need to use PHP scripting to do that.

    First, make a class where it has the correct "look" when the class is selected.
    Example:

    .selected{
    color:black;
    background:url(http://www.roboticmagazine.com/pictures/button2.png) no-repeat 0 0;
    }

    Then you can test it ...
    <div class="selected">INDUSTRIAL ROBOTS</div>

    Next, you need to use PHP to look at the current URL and
    determine if it should use that class or not.

    That's where I can't go any further.
    Is your page .php or .html?
    Do you know how to use PHP?


  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Yeah his whole site is php. That's one solution.

    Probably a very easy question
    Not really...

    The other is a css solution where you would put a style rule in each page relevant to that page only. Here is a page I found that will save me some typing.

  5. #4
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    thanks for the aswers. mlseim yes, my site is php. mlseim where do i put those codes you wrote exactly? I especially didnt understand the div you wrote and where to put it. I mean do I do that for every button and how do they fit in to the rest of the code?

    aeroweb, the page you referred has a lot in it, so I am lost a little in there and not sure exactly how to fit all that into my code, but that probably because of my lack of coding knowledge and thanks anyway...

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    See the example below.

    You can make a safe copy of what you have now and replace it with this to
    see how it works. I only did it for the first 2 links. Normally, the "navigation"
    menu would be in a script all by itself, and you would use PHP Include to insert
    it into each page. But this way is OK too.

    Note, the added "selected" class in the CSS portion. You should also have your
    CSS in it's own file so every page uses the same CSS stylesheet.

    PHP Code:
    <style type="text/css">
    #preload
    {
    display: none;
    visibility: hidden;
    }


    <style type="text/css">
    .menu{
    width:100px;
    }
    .menu a{
    display:block;
    width:175px;
    height:50px;
    valign: center;
    margin:-15px 1000px 0px 0px;
    background:url(http://www.roboticmagazine.com/pictures/button1.png) no-repeat 0 0;
    line-height:30px;
    font-family:Arial ;
    font-size:12px;
    font-weight: bold;
    color:white;
    text-align:center;
    text-decoration:none;
    }
    .menu a:visited{
    color:#black;
    }
    .menu a:hover{
    color:black;
    background:url(http://www.roboticmagazine.com/pictures/button2.png) no-repeat 0 0;
    }
    .selected{
    display:block;
    width:175px;
    height:50px;
    valign: center;
    margin:-15px 1000px 0px 0px;
    line-height:30px;
    font-family:Arial ;
    font-size:12px;
    font-weight: bold;
    text-align:center;
    text-decoration:none;
    color:black;
    background:url(http://www.roboticmagazine.com/pictures/button2.png) no-repeat 0 0;
    }

    .menu a:active{color:#ffffff;}

    </style>


    <div id="preload">
    <img src="http://www.roboticmagazine.com/pictures/button1.png">
    <img src="http://www.roboticmagazine.com/pictures/button2.png">
    </div>


    <div class="sidebuttons">
    <div class="menu">
    </br>

    <?php
    // Read the URL of the current page.
    $url substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);

    // For each link, display one or the other ...
    if($url == "domestic.php"){
    echo
    "
    <div class='selected'>DOMESTIC ROBOTS</div>
    "
    ;
    }else{
    echo
    "
    <a href='http://www.roboticmagazine.com/domestic.php'>DOMESTIC ROBOTS</a>
    "
    ;
    }

    if(
    $url == "androids.php"){
    echo
    "
    <div class='selected'>HUMANOIDS/ANDROIDS</div>
    "
    ;
    }else{
    echo
    "
    <a href='http://www.roboticmagazine.com/androids.php'>HUMANOIDS/ANDROIDS</a>
    "
    ;
    }

    // etc. etc.
    ?>

    <a href="http://www.roboticmagazine.com/industrial.php">INDUSTRIAL ROBOTS</a>
    <a href="http://www.roboticmagazine.com/medical.php">MEDICAL ROBOTS</a>
    <a href="http://www.roboticmagazine.com/military.php">DEFENSE & VEHICLES</a>
    <a href="http://www.robotbuy.com/parts_interm.php">PARTS</a>
    <a href="http://www.roboticmagazine.com/software.php">SOFTWARE</a>
    <a href="http://www.roboticmagazine.com/toys.php">TOYS</a>
    <a href="http://www.roboticmagazine.com/robot_of_week.php">ROBOT OF THE WEEK</a>
    <a href="http://www.roboticmagazine.com/various.php">VARIOUS ROBOT TYPES</a>


    </div>
    </div>



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com