Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Current Page Link Not Selected

    Hello,

    I'm not sure if this is the correct place to post this question. If it isn't, please let me know where I should post it.

    I created a simple content slider with each link directed to a section on the same page. The menu I'm using is straightforward:

    <div id="menu">
    <ul>
    <li><a href="#home" class=".current">Home</a></li>
    <li><a href="#about_me">About Me</a></li>
    <li><a href="#IT_consult">IT Consultant</a></li>
    <li><a href="#edu">Education</a></li>
    <li><a href="#leadership">Leadership</a></li>
    <li><a href="#community">Community Involvement</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </div>

    In CSS, I have
    #menu {
    width: 200px;
    margin: 100px 0px 0px 5px;
    float:none;
    }
    #menu ul {
    margin: 0;
    padding: 0px;
    list-style: none;
    line-height: normal;
    }

    #menu li {
    background:url(images/button.png) no-repeat;
    }

    #menu a {
    display: block;
    width: 180px;
    margin: 0px;
    padding: 5px;
    text-decoration: none;
    text-align: left;
    text-transform: capitalize;
    font:Calibri;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    }

    #menu a:hover {
    text-decoration: none;
    color:#999999;
    }

    #menu a:active {
    text-transform: uppercase;
    }

    As you can see in the website here: http://it.gettingtoknowlucy.co.cc/test/index.html, when you click on the menu, the menu text is capitalized, but it doesn't stay capitalized. What I want to do is while on the selected page, I want the menu text to stay capitalized.

    I'm getting quite frustrated with this. Any help is appreciated!

  • #2
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    it does not stay capitalized because a:active only "works" while you click on it. I mean, only when the mouse button stays down.

    For instance, if you press Home in your page and keep the button mouse down while you move the mouse around, its stays capitalized.

    If you move your mouse out of the window (ie to the status bar ou tool bar) it will actually stay capitalized. ^^

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    But answering to your question. I don't its possible doing it only with CSS. There isn't a rule for the "last button pressed" or something.

    You can do that with code, though. Java script or PhP.

    If you want, i can write you the code (its actually very simple!)

  • #4
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    As promised (although you didn't ask) here's the jscript to enable this kind of effect. Might help others with the same problem.

    JSCRIPT:
    Code:
    <script type="text/javascript" language="javascript">
    	<!--  programmed by Tivie
    	function upperme(x)
        {
    	var D = document.getElementById("menu").getElementsByTagName('a');
    	var d_length = document.getElementById("menu").getElementsByTagName('a').length;
    		
    	for(var i=0;i<d_length;i++)
              	{
                 D[i].style.textTransform = 'lowercase';
                 D[i].style.textTransform = 'capitalize';
              	}
    
          document.getElementById(x.id).style.textTransform = 'uppercase';
        }	  
    	// use it freely  -->   
    </script>
    Place it inside <head>.

    I've made some changes to the HTML to run the script.
    Added an id to each link so that it can be accessed via jscript.
    Code:
    <div id="menu">
    <ul>
    <li><a id="l_home" href="#home" class=".current" onclick="upperme(this);">Home</a></li>
    <li><a id="l_about" href="#about_me" onclick="upperme(this);">About Me</a></li>
    <li><a id="l_consult" href="#IT_consult" onclick="upperme(this);">IT Consultant</a></li>
    <li><a id="l_edu" href="#edu" onclick="upperme(this);">Education</a></li>
    <li><a id="l_leader" href="#leadership" onclick="upperme(this);">Leadership</a></li>
    <li><a id="l_com" href="#community" onclick="upperme(this);">Community Involvement</a></li>
    <li><a id="l_contact" href="#contact" onclick="upperme(this);">Contact</a></li>
    </ul>
    </div>
    I've also deleted the a:active part in css (was messing with the effect).


    How it works:

    It's easy. every time you click in the link, the event onclick is risen which, in turn calls the function upperme. the (this) part is the reference to the id of the object ence the need of "id-ing" each link.

    First, the script iterates through every child node of the div "menu" which has the tag <a>, changing its style.textTransform to lowercase and capitalize. This is done so that any previous chnages done to the menu text is undone. Then it actually "uppercases" the corresponding menu item.

    The desired effect is achieved.

    I can't think of any simpler way of doing this. Hope it helps and good luck

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Since you've already got jQuery on this page the following is shorter and far less obtrusive:

    Code:
    <style type="text/css" media="screen">
    .active{text-transform:uppercase}
    </style>
    
    <script type="text/javascript">
    $(function() {
     $("#menu a").click(function(){$("#menu a").removeClass('active');$(this).addClass('active')});
    });
    </script>

  • #6
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tivie, SB65,

    Thank you very much!! I finally got it working!

  • #7
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Since you've already got jQuery on this page the following is shorter and far less obtrusive:

    Code:
    <style type="text/css" media="screen">
    .active{text-transform:uppercase}
    </style>
    
    <script type="text/javascript">
    $(function() {
     $("#menu a").click(function(){$("#menu a").removeClass('active');$(this).addClass('active')});
    });
    </script>
    yes, indeed. But it doesn't work in IE6, does it?

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by Tivie View Post
    yes, indeed. But it doesn't work in IE6, does it?
    It does work in IE6, yes.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •