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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    link stay bold until other clicked

    greetings all

    I would like a link in my menu to stay bold after it is clicked, until another link in the menu is clicked, and that would stay bold, so the user can see which link/page is current.

    Here's my code...

    var staticmenuids=["staticmenu"]

    var staticmenuoffsetY=[]

    function getmenuoffsetY(){
    for (var i=0; i<staticmenuids.length; i++){
    var currentmenu=document.getElementById(staticmenuids[i])
    staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 : parseInt(currentmenu.style.top))
    }
    initstaticmenu()
    }

    function initstaticmenu(){
    var iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
    for (var i=0; i<staticmenuids.length; i++)
    document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px"
    setTimeout("initstaticmenu()", 100)
    }

    if (window.addEventListener)
    window.addEventListener("load", getmenuoffsetY, false)
    else if (window.attachEvent)
    window.attachEvent("onload", getmenuoffsetY)

    </script>


    menu....

    <div id="staticmenu" class="wireframemenu" style="left: 10px; top: 20px">
    <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../admin.html">Admin</a> </li>
    <li><a href="../config.html">Configuration</a></li>
    <li><a href="../import.html">Import / Export </a></li>
    <li><a href="../lists.html">Autoresponder Lists</a></li>
    <li><a href="../que.html">Message Que</a></li>
    </ul></div>


    thanks in advance for the help!!

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    This is javascript, not java.
    This would be easy to do from PHP, but from Javascript I'm not too certain. Offhand I cannot recall if you can get the current page name to compare you're links on.
    The better option would be to simply use CSS for this. Since it appears that you're links are hard coded into each of you're pages, just create a new css class rule to give a bold font-weight. Apply this css class to you're desired link.
    Pretty much how you'd do it in PHP as well, though the additional step would be to determine what page you're on (assuming you're using a dynamic menu thats reused for all pages).
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #3
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    java != javascript

    Code:
    function highlightMenu() {
      var as = document.getElementById('staticmenu').getElementsByTagName('a');
      var url = window.location.href; 
      for ( i = 0; i < as.length; i++ ) {
        if ( as[i].href == url ) {
          as[i].style.fontWeight = 'bold';
        }
      }
    }
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    Nice, code from both angles, one JS build and the other CSS (and PHP with a little JS added in too).
    Oh yeah, I guess I can move this now too
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 


  •  

    Posting Permissions

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