www.webdeveloper.com
Results 1 to 9 of 9

Thread: Using JavaScript to show selected link in custom menu.

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    5

    Using JavaScript to show selected link in custom menu.

    Hello friends,

    I will try my best to set up my issue, so that my question can be understood!

    I am developing a webstore on a DotNetNuke site, using a prebuilt webstore module called Smith Cart.

    This module software allows a user to set up multiple stores on a "parent-child" relationship, and to have multiple "categories" in each store (and gives each category a unique CategoryID).

    The software allows passing the CategoryID in the querystring of a URL, to navigate directly to that category.

    For my example, I have two unique pages on my website, each with the store module running on them.

    www.test.com/guitars

    www.test.com/drums

    Each page has two categories. Soo all categories between pages would be Guitars1(categoryid=1), Guitars2(categoryid=2); Drums1(categoryid=3), Drums2(categoryid=4);

    Both pages have the exact same navigation on the left hand side. The menu structure is as follows.

    link 1 = www.test.com/guitars.aspx

    link 2 = www.test.com/guitars.aspx?categoryid=1

    link 3 = www.test.com/guitars.aspx?categoryid=2

    link 4 = www.test.com/drums.aspx

    link 5 = www.test.com/drums.aspx?categoryid=3

    link 6 = www.test.com/drums.aspx?categoryid=4


    Now for the problem. I wish for my navigation to show which link is currently selected. This is easy to do for links 1 and 4, as they are unique pages on my site. I can simply change their css class on the page. However, I need links 2,3,5,6 to do the same.

    Now for the question. How can I make it so that if a user clicks a link that just passes the CategoryID into the querystring, it's css class is changed? I have fiddled around with javascript's "onclick", in attempt to do this, but no luck so far.



    Hope this made sense. Any help would be appreciated!

    Thanks,
    Alex

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>...</title>
    <head>
    <style type="text/css">
    a.not_hl{margin-left:none;color:#000;}
    a.hl{margin-left:30px;color:Darkorange;}
    #menu{position:absolute;top:20px;left:20px;text-align:left;}
    </style>
    </head>
    <body>
    <center>
    <div id="menu">
    <a href="guitars.htm">guitars.htm</a><br />
    <a href="guitars.htm?categoryid=1">guitars.htm?categoryid=1</a><br />
    <a href="guitars.htm?categoryid=2">guitars.htm?categoryid=2</a><br />
    <a href="guitars.htm?categoryid=3">guitars.htm?categoryid=3</a><br />
    <a href="guitars.htm?categoryid=4">guitars.htm?categoryid=4</a>
    </div>
    <div id="content">GUITARS</div>
    </center>
    <script type="text/javascript">
    function hliteMenu(){
    var l=location.href,
    lnk=document.getElementById('menu').getElementsByTagName('a'),
    ismain=(l.indexOf('?')!=-1)?false:true,
    str=l.substring(l.indexOf('?')+1,l.length);
    if(!ismain){for(var i=0;i<lnk.length;i++){if(lnk[i].href.indexOf(str)!=-1){lnk[i].className='hl';}else{lnk[i].className='not_hl';}}}
    else{for(var i=0;i<lnk.length;i++){if(lnk[i].href.indexOf('?')==-1){lnk[i].className='hl';}else{lnk[i].className='not_hl';}}}
    }
    hliteMenu();
    </script>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    May 2012
    Posts
    5
    Excellent. Thanks for the reply!

    I was successfully able to implement your bit of Javascript, and it works GREAT on simple text links!

    The only issue is that my menu is structured in a <ul>. For each <a> link in my menu I have set the css to display:block.

    The fact that the links are in a <ul> seems to have no effect, and the script still works fine. However, the css class I wish to change the link to is a block element with a background image.

    I inspected the link with firebug, and it seems that the script is still working, but the only css style that is taking is the line-height style.

    Any suggestions? Thanks so much for your help!
    Alex

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    would be much better to see your html first
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    May 2012
    Posts
    5
    Here is one menu. There are two separate classes, one for a main category item, and one for a sub-category items. I think the script would have to differentiate between if a main category item or subcategory item was picked, then change the class of the link based on the choice.

    So I believe the classes would have to be:
    .categorylist
    .subcategorylist
    .currentcategory
    .currentsubcategory


    At current. This is my markup. The top <ul> has a class of .currentcategory , as it is the url of the page the user is on, so I was able to make it a sort of "primary selected link".


    My HTML

    HTML Code:
    <ul class="currentcategory">
        <li><a href="/Guitar/Electric/SolidBody">Solid Body</a></li>
    </ul>
    <ul class="subcategorylist">
        <li><a href="/Guitar/Electric/SolidBody.aspx?categoryid=7">7-String</a></li>
        <li><a href="/Guitar/Electric/SolidBody.aspx?categoryid=8">8-String</a></li>
        <li><a href="/Guitar/Electric/SolidBody.aspx?cetegoryid=9">Junior Electric</a></li>
        <li><a href="/StarterPacks.aspx?categoryid=619">Starter Packs</a></li>
    </ul>
    <ul class="categorylist">
        <li><a href="/Guitar/Electric/SemiHollowBody">Semi-Hollow Body</a></li>
        <li><a href="/Guitar/Electric/HollowBody">Hollow Body</a></li>
        <li><a href="/Guitar/Electric/LeftHanded">Left Handed</a></li>
    </ul>
    <ul style="padding-top: 34px;" class="categorylist">
        <li><a href="/Guitar/Electric/SolidBody">Related Products</a></li>
    </ul>
    <ul class="subcategorylist">
        <li><a href="/Guitar/Electric/SolidBody.aspx?categoryid=20">Amps</a></li>
        <li><a href="/Guitar/Electric/SolidBody.aspx?categoryid=21">Effects Pedals</a></li>
        <li><a href="/Guitar/Electric/SolidBody.aspx?cetegoryid=22">Cases</a></li>
        <li><a href="/StarterPacks.aspx?categoryid=23">Accessories</a></li>
    </ul>

    My CSS

    .categorylist, .brandlist, .currentcategory
    {line-height:33px;}

    .categorylist li, .brandlist li, .subcategorylist li, .currentcategory li
    {list-style-type:none;}

    .categorylist a, .brandlist a
    {display:block; width:186px; height:34px; font-size:12px; font-weight:bold; text-decoration:none; color:#bdbdbd;}

    .categorylist a
    {border-top:1px solid #323232; border-bottom:1px solid #1b1b1b; background:url('images/CategoryNotCurrent.jpg') no-repeat; text-indent: 5px; }

    .currentcategory a
    {display:block; width:186px; height:34px; font-size:12px; font-weight:bold; text-decoration:none; color:#fff; border-top:1px solid #323232; border-bottom:1px solid #1b1b1b; background:url('images/CategoryCurrent.jpg') no-repeat; text-indent: 5px; }

    .categorylist a:hover
    {background:url('images/CategoryCurrent.jpg') no-repeat; color:#fff; border-top:1px solid #3f3f3f;}

    .subcategorylist a
    {display:block; width:186px; height:25px; font-size:11px; text-decoration:none; color:#bdbdbd; background:url('images/sub-category-not-current.jpg') no-repeat;
    text-indent: 75px; line-height:24px;}

    .subcategorylist a:hover
    {background:url('images/sub-category-current.jpg') no-repeat; color:#fff;}

    .brandlist a:hover
    {color:#fff; border-left:5px solid #fff;}
    Last edited by alexman03; 05-14-2012 at 08:56 AM.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    try this code

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>...</title>
    <head>
    <style type="text/css">
    body{background-color:#777}
    .categorylist, .brandlist, .currentcategory{line-height:33px;} 
    .categorylist li, .brandlist li, .subcategorylist li, .currentcategory li{list-style-type:none;}
    .categorylist a, .brandlist a{display:block; width:186px; height:34px; font-size:12px; font-weight:bold; text-decoration:none; color:#bdbdbd;}
    .categorylist a{border-top:1px solid #323232; border-bottom:1px solid #1b1b1b; background:url('images/CategoryNotCurrent.jpg') no-repeat; text-indent: 5px; }
    /* 2 styles for menu highlighting*/
    .currentcategory{display:block; width:186px; height:34px; font-size:18px; font-weight:bold; text-decoration:none; color:#fff; border-top:1px solid #323232; border-bottom:1px solid #1b1b1b; background:url('images/CategoryCurrent.jpg') no-repeat; text-indent: 5px; background-color:Salmon; }
    .currentsubcategory{display:block; width:186px; height:34px; font-size:18px; font-weight:bold; text-decoration:none; color:#fff; border-top:1px solid #323232; border-bottom:1px solid #1b1b1b; background:url('images/CategoryCurrent.jpg') no-repeat; text-indent: 5px;  background-color:Yellow;}
    
    .categorylist a:hover{background:url('images/CategoryCurrent.jpg') no-repeat; color:#fff; border-top:1px solid #3f3f3f;}
    .subcategorylist a{display:block; width:186px; height:25px; font-size:11px; text-decoration:none; color:#bdbdbd; background:url('images/sub-category-not-current.jpg') no-repeat;text-indent: 75px; line-height:24px;}
    .subcategorylist a:hover{background:url('images/sub-category-current.jpg') no-repeat; color:#fff;}
    .brandlist a:hover{color:#fff; border-left:5px solid #fff;}
    </style>
    </head>
    <body>
    <div id="menu">
    <ul class="categorylist">
        <li><a href="SolidBody.htm">Solid Body</a></li>
    </ul>
    <ul class="subcategorylist">
        <li><a href="SolidBody.htm?categoryid=7">7-String</a></li>
        <li><a href="SolidBody.htm?categoryid=8">8-String</a></li>
        <li><a href="SolidBody.htm?categoryid=9">Junior Electric</a></li>
        <li><a href="SolidBody.htm?categoryid=619">Starter Packs</a></li>
    </ul>
    <ul class="categorylist">
        <li><a href="SemiHollowBody.htm">Semi-Hollow Body</a></li>
        <li><a href="HollowBody.htm">Hollow Body</a></li>
        <li><a href="LeftHanded.htm">Left Handed</a></li>
    </ul>
    <ul style="padding-top: 34px;" class="categorylist">
        <li><a href="RelatedProducts.htm">Related Products</a></li>
    </ul>
    <ul class="subcategorylist">
        <li><a href="SolidBody.htm?categoryid=20">Amps</a></li>
        <li><a href="SolidBody.htm?categoryid=21">Effects Pedals</a></li>
        <li><a href="SolidBody.htm?categoryid=22">Cases</a></li>
        <li><a href="SolidBody.htm?categoryid=23">Accessories</a></li>
    </ul>
    </div>
    <script type="text/javascript">
    function hliteMenu(){
    var l=location.href,
    ismain=(l.indexOf('categoryid=')!=-1)?false:true,
    a=document.getElementById('menu').getElementsByTagName('a'),
    str=(!ismain)?(str=l.substring(l.indexOf('?')+1,l.length)):(l.substring(l.lastIndexOf('/')+1,l.lastIndexOf('.')));
    
    if(!ismain){
    for(var i=0;i<a.length;i++){
    if(a[i].parentNode.parentNode.className!='subcategorylist'){continue;}
    if(a[i].href.indexOf(str)!=-1){a[i].parentNode.className='currentsubcategory';}
    else{a[i].parentNode.className='';}
    }
    }
    // if main
    else{
    for(var i=0;i<a.length;i++){
    if(a[i].parentNode.parentNode.className!='categorylist'){continue;}
    if(a[i].href.indexOf(str)!=-1){a[i].parentNode.className='currentcategory';}
    else{a[i].parentNode.className='';}
    }
    }
    }
    hliteMenu();
    </script>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    May 2012
    Posts
    5
    Thanks for the update Padonak,

    I've changed the script on my page skin, and made sure that the elements are using the correct naming convention.


    The script is partially "working" on my menu. However, when I inspect the CSS of a selected element in firebug, it looks like the element has been given two css classes, instead of just changing the class. The styles for "currentcategorylist" are crossed out, and the styles for "categorylist" are overwriting them. When I look at the crossed out list of styles for "currentcategorylist" I do not see the crossed out style for "background:url". Possibly it is not loading it.

    Also, when you first load the page it seems that some of the elements are loading the "currentcategorylist" class, but after one menu selection, they all go back to their original class.

    If you wish to view this, the URL is:
    http://temp.yandasmpa.com/Drums/Accessories


    Thanks so much for helping me with this! Improving my JS is quickly becoming my top study priority!

    Alex
    Last edited by alexman03; 05-15-2012 at 02:43 PM.

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    this script won't work with that page.. there are more than one menu and some links has the same href. it needs another solution than mine
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  9. #9
    Join Date
    May 2012
    Posts
    5
    Thanks for trying Padonak. I'll try to do some research of my own on the subject as well.

    Does anyone else have any ideas?

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles