Skip navigation
Currently Being Moderated

Any way to make "active" pseudo-class sticky?

Aug 13, 2012 8:16 AM

Here's how I do my "on-clicks" via CSS :

 

a#button1, a#button2, a#button3 {

    display:block;

    float:left;

    width:50px;

    height:50px;

}

 

a#button1 { background:url(button1.png) 0 0 no-repeat }

a#button1:active { background-position:-55px 0 }

 

a#button2 { background:url(button2.png) 0 0 no-repeat }

a#button2:active { background-position:-55px 0 }

 

a#button3 { background:url(button3.png) 0 0 no-repeat }

a#button3:active { background-position:-55px 0 }


These buttons hide/unhide divs, and I'd like my menu to keep the active state visible after letting go of the mouse button. As an indicator of what div we're at.

 

What's the best way to do this? Note : It's obviously important that when a new button lights up, the previously lit one goes back to its regular state.

 
Replies
  • Currently Being Moderated
    Aug 13, 2012 9:07 AM   in reply to jyeager11

    No, except as you were advied the last time you posted this question

    http://forums.adobe.com/thread/1046364

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2012 10:52 AM   in reply to jyeager11

    The psudo class :active simply is not for what you are attempting. Here's an example I've created using CSS and HTML only for a menu where the "on" state stays when you click an item. Normally you would use a javascript link highlighter for that type of thing. You can tear apart and change it to your needs if you're interested...

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>

    <style type="text/css">

    b {
    margin:0;
    padding:0;
    }
    .rtb { /* background and rounded edges of entire nav area */
    margin:auto;
    position:relative;
    height:28px;
    width:376px;
    background-color:#099;
    border:1px solid black;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    padding:0 20px;
    clear:both;
    box-shadow:5px 5px 10px 10px #CCC;
    }
    .rtb input[type="radio"] { /* Hides the standard radio button from view */
        position:relative;
    display:none;
    }
    .rtb label { /* Sets attributes for the label of each radio button, which is still displayed */
        position:relative;
    display:block;
    float:left;
    top:0px;
    height:20px;
    width:70px;
        background-color:#06C;
        padding:4px 11px;
        font-family:Arial;
        font-size:16px;
    border-left:1px solid #06C;
    border-right:1px solid #06C;
    }
    .rtb input[type="radio"]:checked + label { /* Sets the radio button label checked state (when a radio button is checked) */
        background-color:#bbb;
    border-left:1px solid black;
    border-right:1px solid black;
    }
    .rtb input[type="radio"] + label b { /* Makes all rb label information panels (inside the b tag inside the label) invisible */
    display:none;
    }
    .rtb input[type="radio"]:checked + label b { /* Sets the rb label information (b tag) checked state (when radio button is checked) */
    position:relative;
    top:5px;
    width:350px;
    display:block;
    font-weight:normal;
    padding:10px;
    border-radius:10px;
    border:1px solid black;
    background-color:white;
    margin-top:10px;
    box-shadow:5px 5px 10px 10px #CCC;

    }
    .btn1 { /* sets button 1 attributes */
    position:relative;
    width:276px;
    }
    .btn2 { /* sets button 2 attributes */
    position:relative;
    left:-94px;
    width:276px;
    }
    .btn3 { /* sets button 3 attributes */
    position:relative;
    left:-188px;
    width:276px;
    }
    .btn4 { /* sets button 4 attributes */
    position:relative;
    left:-282px;
    width:276px;
    }
    </style>

    </head>

    <body>

        <div class="rtb">

          
           
    <input type="radio" id="radio1" name="radios" value="all" checked="checked" />

            <label for="radio1">Look<b class="btn1">I have gone ahead and created a way</b></label>

           
           
    <input type="radio" id="radio2" name="radios" value="false" />

            <label for="radio2">Open<b class="btn2">to display separate text boxes, on click using all CSS</b></label>

       
           
    <input type="radio" id="radio3" name="radios" value="true" />

            <label for="radio3">Test<b class="btn3">no javascript was <a href="http://www.google.com" target="_blank">harmed</a>, er, written in the making of this menu</b></label>

           
           
    <input type="radio" id="radio4" name="radios" value="true" />

            <label for="radio4">Like<b class="btn4">And it validates as XHTML 1.0 and CSS</b></label>

           
       
    </div>

    </body>

    </html>

     

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 5:38 AM   in reply to jyeager11

    Here's something that may work a little better for you. It's a simple javascript class switcher. Just make the active menu and inactive menu CSS do what you like. Then make sure to add the starting CSS class to the links in your page (for the "just loaded" states of each)...

     

    <!DOCTYPE html>

    <html>

    <head>

    <script>

    function changeClass(elClass) {
      var divsLength =  document.getElementsByClassName("menu").length;
      for (i = 0; i
    < divsLength; i++) {

        document.getElementsByClassName("menu")[i].className = "inactive menu";
      }
      elClass.className = "active menu";  
    }
    </script>

    <meta charset=utf-8 />

    <title>JS Bin</title>

    <style>


               .inactive {
    color:red;
    background-color:white;
    height:20px;
    width:200px;
    vertical-align:middle;
    font-family:Verdana, Geneva, sans-serif;
    clear:both;
     
    }
                .active {
    color:white;
    background-color:black;
    font-weight:bold;
    height:30px;
    width:200px;
    vertical-align:middle;
    font-family:Verdana, Geneva, sans-serif;
    clear:both;
     
    }
    </style>

    </head>

    <body>

      <p><a class="active menu" onClick="changeClass(this)">

    Option 1
    </a></p>

      <p><a class="inactive menu" onClick="changeClass(this)">

    Option 2
    </a></p>

      <p><a class="inactive menu" onClick="changeClass(this)">

    Option 3
    </a></p>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 11:58 AM   in reply to jyeager11

    I'll post a version that allows you to make as many buttons als you like, but changing it to accomplish what you want is pretty basic as far as CSS goes. You really should take some time to get the hang of how to create and work with cascading style sheets, I suggest the tutorials on this site:

     

     

    http://www.w3schools.com

     

     

    In the example below, I only changed the active background color, but you could change any and all of the CSS to fit your needs.

     

     

    <!DOCTYPE html>

    <html>

        <head>

            <script>

    function changeClass(elClass) {

      var divsLength =  document.getElementsByClassName("menu").length;

      for (i = 0; i < divsLength; i++) {

        document.getElementsByClassName("menu")[i].className = "inactive menu";

      }

      elClass.className = "active menu";  

    }

    </script>

    <meta charset=utf-8 />

    <title>Sticky Selection</title>

     

    <style>

    p.button1 .inactive {

        color:red;

        background-color:white;

        height:20px;

        width:200px;

        vertical-align:middle;

        font-family:Verdana, Geneva, sans-serif;

        clear:both;

    }

    p.button1 .active {

        color:white;

        background-color:black;

        font-weight:bold;

        height:30px;

        width:200px;

        vertical-align:middle;

        font-family:Verdana, Geneva, sans-serif;

        clear:both;

    }

    p.button2 .inactive {

        color:red;

        background-color:white;

        height:20px;

        width:200px;

        vertical-align:middle;

        font-family:Verdana, Geneva, sans-serif;

        clear:both;

    }

    p.button2 .active {

        color:white;

        background-color:orange;

        font-weight:bold;

        height:30px;

        width:200px;

        vertical-align:middle;

        font-family:Verdana, Geneva, sans-serif;

        clear:both;

    }

    p.button3 .inactive {

        color:red;

        background-color:white;

        height:20px;

        width:200px;

        vertical-align:middle;

        font-family:Verdana, Geneva, sans-serif;

        clear:both;

    }

    p.button3 .active {

        color:white;

        background-color:purple;

        font-weight:bold;

        height:30px;

        width:200px;

        vertical-align:middle;

        font-family:Verdana, Geneva, sans-serif;

        clear:both;

    }

            </style>

            </head>

        <body>

              <p class="button1"><a class="inactive menu" onclick="changeClass(this)">Option 1</a></p>

              <p class="button2"><a class="inactive menu" onclick="changeClass(this)">Option 2</a></p>

            <p class="button3"><a class="inactive menu" onclick="changeClass(this)">Option 3</a></p>

        </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 12:39 PM   in reply to jyeager11

    Could you post a link to a test page to show what you have so far?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 1:03 PM   in reply to jyeager11

    :active represents only the period of time in which an element is being "actively" clicked in the same way that :hover represents the time in which an element is being "hovered" over. Neither of these can be "made sticky" but you can use other CSS definitions to create the appearance that they are (which is what I gave you).

     

    There's really nothing more I can do for you if you continue to try to get :active to work in a way that it cannot work.

     

    You should be adapting your show/hide elements to the active-link code I supplied, not the other way around.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 1:21 PM   in reply to jyeager11

    What specific side-effects are you seeing with the <p> tag?

     

    Are you forgetting to remove the margin from the <p> in your CSS and getting the margin separation?

     

    try this...

     

    p.button1, p.button2, p.button3 {

         margin:0;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 15, 2012 9:29 AM   in reply to jyeager11

    The original post example is broken CSS that can't possibly work and shows exactly zero HTML markup information.

     

    The margin CSS I posted in my last response removes the "carriage return" effect of a <p>.

     

    I am using <p> as a block element (display:block) so you can use the background-image property and have a separate image in the active class from the inactive class. I only used the <a> tags to get the mouse pointer to switch to the finger when you mouse over. You can use any tag you like, you just don't get the automatic mouse switch when you add onclick to a non-a-tag.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 15, 2012 10:04 AM   in reply to jyeager11

    I'm sorry you can't figure it out. I really am, and I wish you luck on your future endeavors.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points