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

    Highlight specific Menu-Item possible?

    Hi,

    I want to highlight a single menu-item in my sidebar when there's a campaign.
    The menu is generated dynamically and this cannot be solved on this level, so I am wondering, if I can select and highlight via CSS by name of the menu-entry ('Membership').

    Any ideas?

  • #2
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    has no one any idea?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 655 Times in 654 Posts
    Is it the same menu-item highlighted when there's a campaign?

    How do you tell people that there is a campaign? When you do that, change the CSS for the menu-item if it is always the same.

    Does that help?

  • #4
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi sunfighter,

    I cannot change the menu generation-code, else I would assign an ID and highlight this via CSS.

    Can I include a CSS path to find any menu-entry with the name 'Memership' and highlight it? Is this possible?

    I also want to highlight the current selected menu item in the menu dynamically, too.

    Code:
    #navi #menue .current-menu-item > a,
    #navi #menue .current-menu-ancestor > a,
    #navi #menue .current_page_item > a,
    #navi  #menue .current_page_ancestor > a,
    #Rahmen #Navigation .current-menu-item > a,
    #Rahmen #Navigation .current-menu-ancestor > a,
    #Rahmen #Navigation .current_page_item > a,
    #Rahmen #Navigation .current_page_ancestor > a {
      font-weight: bold;
      color: yellow;
    }
    Code:
    <div id="navi">
      <ul id="menue">
       <li class="document"><a class="" href="/index.php?tpl=page&id=18&lng=en">Home</a></li>
       <li class="folder"><a class="" href="/index.php?tpl=page&id=19&lng=en">Medicine ↘</a>    <ul style="display:none;">   <li class="document"><a class="" href="/index.php?tpl=page&id=21&lng=en">Medical Uses</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=35&lng=en">Side effects</a></li>
       <li class="document"><a class="" href="/index.php?tpl=studylist&id=36&lng=en">Studies and Case Reports</a></li>
        </ul>
      </li>   <li class="folder"><a class="" href="/index.php?tpl=page&id=37&lng=en">Science ↘</a>    <ul style="display:none;">   <li class="document"><a class="" href="/index.php?tpl=deflist&id=38&lng=en">Definitions</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=39&lng=en">List of Clinical Studies</a></li>
       <li><a class=""  href="/studies/study.php">Database of Clinical Studies</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=244&lng=en">Review on Clinical Studies 2005-2009</a></li>
        </ul>
      </li>   <li class="folder"><a class="" href="/index.php?tpl=page&id=41&lng=en">Laws and Politics ↘</a>    <ul style="display:none;">   <li class="document"><a class="" href="/index.php?tpl=page&id=236&lng=en">Overview English</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=245&lng=en">Canada</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=42&lng=en">Finland</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=43&lng=en">France</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=44&lng=en">Germany / Deutschland</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=45&lng=en">Israel</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=46&lng=en">New Zealand</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=47&lng=en">Spain / España</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=48&lng=en">Sweden</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=235&lng=en">The Netherlands / Nederland</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=234&lng=en">UK</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=49&lng=en">United States of America</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=246&lng=en">Übersicht deutsch</a></li>
        </ul>
      </li>   <li class="folder"><a class="" href="/index.php?tpl=page&id=50&lng=en">Archive ↘</a>    <ul style="display:none;">   <li><a class=""  href="/english/bulletin/bulletin.php">Bulletin</a></li>
        </ul>
      </li>   <li class="document"><a class="" href="/index.php?tpl=faqlist&id=53&lng=en">FAQ</a></li>
       <li class="document"><a class="" href="/index.php?tpl=ukpage&id=252&lng=en">UK</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=69&lng=en">Links</a></li>
       <li class="folder"><a class="" href="/index.php?tpl=page&id=72&lng=en">About us ↘</a>    <ul style="display:none;">   <li class="document"><a class="" href="/index.php?tpl=page&id=73&lng=en">Introduction</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=74&lng=en">Board of Directors</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=75&lng=en">Statutes</a></li>
        </ul>
      </li>   <li class="document"><a class="a" href="/index.php?tpl=page&id=76&lng=en">Membership</a></li>
       <li class="document"><a class="" href="/index.php?tpl=page&id=77&lng=en">Imprint</a></li>
      </ul>
    </div>
    
    <div id="Rahmen">
    		<ul id="Navigation">
       <li><a class="" href="/index.php?tpl=page&id=1&lng=en">Newsletter</a>    <ul>   <li><a class=""  href="/english/bulletin/bulletin.php">Bulletin</a></li>
       <li><a class=""  href="/english/subscribe.htm" target="_blank">Subscribe &#x21a6;</a></li>
        </ul>
       <li><a class="" href="/index.php?tpl=page&id=7&lng=en">About the Journal</a></li>
       <li><a class="" href="/index.php?tpl=page&id=8&lng=en">For Authors</a></li>
       <li><a class="" href="/index.php?tpl=journallist&id=9&lng=en">Journals</a></li>
        </ul>
      </li>   <li><a class="" href="/index.php?tpl=page&id=10&lng=en">Conference</a>    <ul>   <li><a class=""  href="http://www.conference.com/" target="_blank">2011 &#x21a6;</a></li>
       <li><a class="" href="/index.php?tpl=archivlist&id=12&lng=en">Former</a></li>
        		</ul><li><a href="#">Language</a>
        			<ul>
        				<li><a href="/index.php?lng=en">English</a></li>
        				<li><a href="/index.php?lng=de">Deutsch</a></li>
        				<li><a href="/index.php?lng=fr">Fran&ccedil;ais</a></li>
        				<li><a href="/index.php?lng=nl">Nederlands</a></li>
        				<li><a href="/index.php?lng=es">Espa&ntilde;ol</a></li>
        				<li><a href="/index.php?lng=po">Portugu&ecirc;s</a></li>
    
        			</ul>
        		</li>	
      </ul>
    </div>
    It does not work.
    Last edited by Transformer; 04-05-2012 at 12:55 PM.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 655 Times in 654 Posts
    I am going to give you a jquery solution to this and leave the rest up to you.
    I assume the second code block you gave me above is from view-source and therefore correct. I also assume that the menu is not rendered the same way all the time, so I just can't count down to the <li> that says Membership. But I think I can assume that the target for this anchor is unique and that clicking Membership will take you to the same screen every time.

    If true, I can use the href attribute to find and change Membership using jquery.
    When you write the code to declare a campaign you have to also write this.
    Code:
    <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>  /* this is where mine is - your maybe someplace else */
    <script type="text/javascript">
    $(document).ready(function() {
    	$('[href="/index.php?tpl=page&id=76&lng=en"]').css("color", "red");
    });
    </script>
    To test it put it in the head of you page, the word Membership in your side-bar menu should be red.

    You work out the highlight effect you want.

  • Users who have thanked sunfighter for this post:

    Transformer (04-05-2012)

  • #6
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi sunfighter,

    all your assumtions wre correct. Thank you.

    Very elegant, I have not thought of this aproach, thanks!
    And even better, the menu-items in each language all have the same ID-number, so

    Code:
    [href="/index.php?tpl=page&id=76"]
    should mark all URLs with this prefix. I learned about jQuery-selectors, but have not found anything to match all URLs prefixed with the membership-URL.

  • #7
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    found it, the
    Code:
     "href^="
    is used for common prefix-matching.

    For others:
    Code:
    $(document).ready( function() {
      $('[href^="/index.php?tpl=page&id=76&"]').css({'color': 'yellow', 'font-weight': 'bold'}); /* All 'Membership'-links. */
      $('[href^="/index.php?tpl=page&id=1&"]').css({'color': 'yellow', 'font-weight': 'bold'}); /* All 'Newsletter'-links. */
    
      $('a[Rundbrief]').css("color", "yellow"); /* German special case. */
    //  '<a class="" href="#">Rundbrief</a>'
    
    });  // end document.ready()
    Now I have two questions left:

    How can I select this link by it's displayed linkname?
    Code:
    <div id="Rahmen">
      <ul id="Navigation">
        <li><a class=""  href="#">Rundbrief</a>
    This does not work:
    Code:
      $('a[Rundbrief]').css("color", "yellow"); /* German special case. */
    and the issue to display the currently opened menu-item via CSS only (or also via jQuery)

    Code:
    #navi #menue .current-menu-item > a,
    #navi #menue .current-menu-ancestor > a,
    #navi #menue .current_page_item > a,
    #navi  #menue .current_page_ancestor > a,
    #Rahmen #Navigation .current-menu-item > a,
    #Rahmen #Navigation .current-menu-ancestor > a,
    #Rahmen #Navigation .current_page_item > a,
    #Rahmen #Navigation .current_page_ancestor > a {
      font-weight: bold;
      color: yellow;
    }

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 655 Times in 654 Posts
    How can I select this link by it's displayed linkname?
    Code:
    Code:
    <div id="Rahmen">
      <ul id="Navigation">
        <li><a class=""  href="#">Rundbrief</a>
    If it's where you say it's at this will get it.
    Code:
    $('div#Rahmen ul#Navigation [href^="#"]').css({'color': 'yellow', 'font-weight': 'bold'});
    If more then one link has href="#" it wont.

    I can not help with the #navi #menue stuff.

  • #9
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, yes, the '#' is used for several URLs throughout the site, so many links turned up bold.

    I got a tip on another forum. For now, I can change the display of the Newsletter/'Rundbrief' quickly via Javascript. The website later needs better HTML/CSS-generation in the first place, so the IDs and classes can be addressed with CSS alone. But for now or if anybody has a similar task:

    Code:
    function highlightRundbrief () {
     links = document.getElementsByTagName('a');
      for (i=0; i<links.length; i++) {
       if (links[i].innerHTML == 'Rundbrief') {
         links[i].style.color = 'yellow';
         links[i].style.fontWeight = 'bold';
         break;
       } // endif
      } // end for i
    
    }
    then called from within jQuery document.ready().

    Code:
    $(document).ready( function() {
      highlightRundbrief();
    });  // end document.ready()

  • #10
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for the support!

    For reference: I also posted here and interlink the threads:
    http://www.webdeveloper.com/forum/sh...d.php?t=258978


  •  

    LinkBacks (?)


    Tags for this Thread

    Posting Permissions

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