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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bold text for active link in Java tree-menu ??

    Hey guys,

    First post here and I got a question:
    I've made the website wrcc.dri.edu/monitor/WWDT/ and I am trying to get the simple tree menu (http://www.dynamicdrive.com/dynamicindex1/navigate1.htm) to show BOLD text when the user clicks on a variable and/or region. Basically, I want the current variable and region (which is saved in cookies via PHP) to be BOLD text in the tree menu. How can this be done? Let me know what other info you guys need to help me out here. I'm kind of stumped.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Code:
    #wus li a:active {font-weight:bold}

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That goes in the CSS file I'm assuming. What is that #wus ?? You mean #ww ?

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Those images are broken

  • #5
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Sorry that is me! Got the wrong container
    #wus is the li containg the link to Western US.

    I assume that it these link: Western US, Arizona etc., that you want to apply the effect on.

    In that case:
    Code:
    #region a:active {font-weight:bold}
    which you just insert into you stylesheet;

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lerura, I applied what you said to what I need it for, which happens to be the variables more so than the regions. It is still not working...

    Please see the website (http://www.wrcc.dri.edu/monitor/WWDT/index.php) for the HTML code and I have posted the CSS below:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	background-color: #7D4A2C;
    	margin-top: 0px;
    	height:100%;
    }
    
    div{
    	height:auto;
    }
    
    #pagehomeindex {
    		text-align: center; margin-left: 30px; margin-right:30px;
    }
    #aboutpage {
    	padding-left:30px; padding-right: 30px; text-align:justify;
    }
    
    
    #content {
    	background: url("images/pgshad.jpg") repeat-y scroll left top transparent;
    	font-size: 16px;
    	width:1024px;
    	margin:auto;
    	min-height:700px;
    }
    
    #header {
    	margin: 0;
    	padding: 0;
    	width: 100%	
    }
    
    #logo  {
    	text-align:right;
    	border:medium none;
    	padding-right:20px;
    	padding-top: 10px;
    }
    
    #menu {
    	background: url("images/bg_brwn_tab.jpg") repeat-x scroll center top;
    	height:26px;
    	width: 1006px;
    	margin:auto;
    }
    
    #page{
    	background:none repeat scroll 0 0 #FFFFFF;
    	display:block;
    	margin:auto;
    	text-align:left;
    	width: 1000px;	
    }
    
    #pagehome{
    	margin:auto;
    	width: 1006px;
    	text-align:center;
    }
    
    #pageabout{
    	margin:auto;
    	width: 1006px;
    	text-align:center;
    }
    
    #tabs  {
    	float:left;
    	height:26px;
    	margin:0;
    	padding:0;
    	width:1006px;
    }
    
    #tabs li {
    	display: inline;
    	float:left;
    	height:auto;
    	width:190px;
    	margin: auto;
    }
    
    #tabs a {
    	border-right: 1px solid #FFF;
    	color: #130f0e;
    	display: block;
    	font: bold 19px/26px arial; 
    	text-align: center;
    	width: 190px;
    	text-decoration: none;
    }
    
    a{
    	color: #000;
    	text-decoration:none;
    }
    
    #vertical_menu{
    	font-size:15px;
    }
    
    #footer {
    	font-size:12px;
    	color:#000;
    	text-align:center;
    	clear:left;
    }
    
    html{
    	height:100%;
    }
    
    #dlbtn{
    	width:167px;
    	height:42px;
    	background-image: url(images/databtnblank.png);
    	margin:auto;
    	margin-left:220px;
    }
    
    #dlbtnarc{
    	width:167px;
    	height:42px;
    	background-image: url(images/databtnblank.png);
    	margin:auto;
    	margin-left:220px;
    }
    
    #dlbtnhvr{
    	position:absolute;
    	margin-top: 8px;
    	margin-left: 15px;
    	font-size:20px;
    }
    
    #pdsi{
    	a:active {font-weight:bold};
    }
    
    #pzi{
    	a:active {font-weight:bold};
    }
    
    #scp{
    	a:active {font-weight:bold};
    }
    
    
    #spi1{
    	a:active {font-weight:bold};
    }
    #spi2{
    	a:active {font-weight:bold};
    }
    #sp3{
    	a:active {font-weight:bold};
    }
    #spi4{
    	a:active {font-weight:bold};
    }
    #spi5{
    	a:active {font-weight:bold};
    }
    #spi6{
    	a:active {font-weight:bold};
    }
    #spi7{
    	a:active {font-weight:bold};
    }
    #spi8{
    	a:active {font-weight:bold};
    }
    #spi9{
    	a:active {font-weight:bold};
    }
    #spi10{
    	a:active {font-weight:bold};
    }
    #spi11{
    	a:active {font-weight:bold};
    }
    #spi12{
    	a:active {font-weight:bold};
    }
    #spi15{
    	a:active {font-weight:bold};
    }
    #spi18{
    	a:active {font-weight:bold};
    }
    #spi24{
    	a:active {font-weight:bold};
    }
    #spi30{
    	a:active {font-weight:bold};
    }
    #spi36{
    	a:active {font-weight:bold};
    }
    #spi48{
    	a:active {font-weight:bold};
    }
    #spi60{
    	a:active {font-weight:bold};
    }
    #spi72{
    	a:active {font-weight:bold};
    }
    #lfm{
    	a:active {font-weight:bold};
    }
    #l2m{
    	a:active {font-weight:bold};
    }
    #l3m{
    	a:active {font-weight:bold};
    }
    #l4m{
    	a:active {font-weight:bold};
    }
    #l5m{
    	a:active {font-weight:bold};
    }
    #l6m{
    	a:active {font-weight:bold};
    }
    #l7m{
    	a:active {font-weight:bold};
    }
    #l8m{
    	a:active {font-weight:bold};
    }
    #l9m{
    	a:active {font-weight:bold};
    }
    #l10m{
    	a:active {font-weight:bold};
    }
    #l11m{
    	a:active {font-weight:bold};
    }
    #l12m{
    	a:active {font-weight:bold};
    }
    
    .hvr:link {color:#000}
    .hvr:visited {text-decoration: none}
    .hvr:active {color:#000}
    .hvr:hover {color:#7D4A2C}
    
    
    
    /*#dlbtn:hover{
    	background-image: url(images/databtnhover.png);
    }*/

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I fixed the problem with my last post but now when I click on the link it goes bold for .5 seconds and then returns to being regular weight... Check it out for yourself. What's causing this ?

  • #8
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Code:
    #pdsi{
    	a:active {font-weight:bold};
    }
    
    #pzi{
    	a:active {font-weight:bold};
    }
    
    #scp{
    	a:active {font-weight:bold};
    }
    
    
    #spi1{
    	a:active {font-weight:bold};
    }
    #spi2{
    	a:active {font-weight:bold};
    }
    #sp3{
    	a:active {font-weight:bold};
    }
    #spi4{
    	a:active {font-weight:bold};
    }
    #spi5{
    	a:active {font-weight:bold};
    }
    #spi6{
    	a:active {font-weight:bold};
    }
    #spi7{
    	a:active {font-weight:bold};
    }
    #spi8{
    	a:active {font-weight:bold};
    }
    #spi9{
    	a:active {font-weight:bold};
    }
    #spi10{
    	a:active {font-weight:bold};
    }
    #spi11{
    	a:active {font-weight:bold};
    }
    #spi12{
    	a:active {font-weight:bold};
    }
    #spi15{
    	a:active {font-weight:bold};
    }
    #spi18{
    	a:active {font-weight:bold};
    }
    #spi24{
    	a:active {font-weight:bold};
    }
    #spi30{
    	a:active {font-weight:bold};
    }
    #spi36{
    	a:active {font-weight:bold};
    }
    #spi48{
    	a:active {font-weight:bold};
    }
    #spi60{
    	a:active {font-weight:bold};
    }
    #spi72{
    	a:active {font-weight:bold};
    }
    #lfm{
    	a:active {font-weight:bold};
    }
    #l2m{
    	a:active {font-weight:bold};
    }
    #l3m{
    	a:active {font-weight:bold};
    }
    #l4m{
    	a:active {font-weight:bold};
    }
    #l5m{
    	a:active {font-weight:bold};
    }
    #l6m{
    	a:active {font-weight:bold};
    }
    #l7m{
    	a:active {font-weight:bold};
    }
    #l8m{
    	a:active {font-weight:bold};
    }
    #l9m{
    	a:active {font-weight:bold};
    }
    #l10m{
    	a:active {font-weight:bold};
    }
    #l11m{
    	a:active {font-weight:bold};
    }
    #l12m{
    	a:active {font-weight:bold};
    }
    you cannot put a selector inside the property brackets.
    All of the above mensioned must be changed to this syntax:

    Code:
    #pdsi a:active {font-weight:bold;}
    
    #pzi a:active {font-weight:bold;}
    
    #scp a:active {font-weight:bold;}
    
    #spi1 a:active {font-weight:bold;}
    
    etc.
    or
    Code:
    #pdsi a:active {
      font-weight:bold;
    }
    
    #pzi a:active {
      font-weight:bold;
    }
    
    #scp a:active {
      font-weight:bold;
    }
    
    #spi1 a:active {
      font-weight:bold;
    }
    
    etc.
    Notice that I have moved the semi-colon insde the brackets.
    semicolon are in CSS used to separate/end properties e.g.
    Code:
    span {color:blue;padding:5px;text-decoration:overline;}
    , and NOT to end rules.
    Using them to end rules is a syntax error, which may cause som browsers to discard the entire stylesheet.

  • #9
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lerura,

    I did what you said, see my code below please, but the bold weight doesnt hold. It is only bold for the amount of time I click on the mouse. E.g. Hold down left click and it stays bold, let go of left click and it goes back to normal font weight. What's going on here?

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	background-color: #7D4A2C;
    	margin-top: 0px;
    	height:100%;
    }
    
    div{
    	height:auto;
    }
    
    #pagehomeindex {
    		text-align: center; margin-left: 30px; margin-right:30px;
    }
    #aboutpage {
    	padding-left:30px; padding-right: 30px; text-align:justify;
    }
    
    
    #content {
    	background: url("images/pgshad.jpg") repeat-y scroll left top transparent;
    	font-size: 16px;
    	width:1024px;
    	margin:auto;
    	min-height:700px;
    }
    
    #header {
    	margin: 0;
    	padding: 0;
    	width: 100%	
    }
    
    #logo  {
    	text-align:right;
    	border:medium none;
    	padding-right:20px;
    	padding-top: 10px;
    }
    
    #menu {
    	background: url("images/bg_brwn_tab.jpg") repeat-x scroll center top;
    	height:26px;
    	width: 1006px;
    	margin:auto;
    }
    
    #page{
    	background:none repeat scroll 0 0 #FFFFFF;
    	display:block;
    	margin:auto;
    	text-align:left;
    	width: 1000px;	
    }
    
    #pagehome{
    	margin:auto;
    	width: 1006px;
    	text-align:center;
    }
    
    #pageabout{
    	margin:auto;
    	width: 1006px;
    	text-align:center;
    }
    
    #tabs  {
    	float:left;
    	height:26px;
    	margin:0;
    	padding:0;
    	width:1006px;
    }
    
    #tabs li {
    	display: inline;
    	float:left;
    	height:auto;
    	width:190px;
    	margin: auto;
    }
    
    #tabs a {
    	border-right: 1px solid #FFF;
    	color: #130f0e;
    	display: block;
    	font: bold 19px/26px arial; 
    	text-align: center;
    	width: 190px;
    	text-decoration: none;
    }
    
    a{
    	color: #000;
    	text-decoration:none;
    }
    
    #vertical_menu{
    	font-size:15px;
    }
    
    #footer {
    	font-size:12px;
    	color:#000;
    	text-align:center;
    	clear:left;
    }
    
    html{
    	height:100%;
    }
    
    #dlbtn{
    	width:167px;
    	height:42px;
    	background-image: url(images/databtnblank.png);
    	margin:auto;
    	margin-left:220px;
    }
    
    #dlbtnarc{
    	width:167px;
    	height:42px;
    	background-image: url(images/databtnblank.png);
    	margin:auto;
    	margin-left:220px;
    }
    
    #dlbtnhvr{
    	position:absolute;
    	margin-top: 8px;
    	margin-left: 15px;
    	font-size:20px;
    }
    
    #pdsi a:active {font-weight:bold;}
    #pzi a:active {font-weight:bold;}
    #scp a:active {font-weight:bold;}
    #spi1   a:active {font-weight:bold;}
    #spi2	a:active {font-weight:bold;}
    #spi3	a:active {font-weight:bold;}
    #spi4	a:active {font-weight:bold;}
    #spi5	a:active {font-weight:bold;}
    #spi6	a:active {font-weight:bold;}
    #spi7	a:active {font-weight:bold;}
    #spi8	a:active {font-weight:bold;}
    #spi9	a:active {font-weight:bold;}
    #spi10	a:active {font-weight:bold;}
    #spi11	a:active {font-weight:bold;}
    #spi12	a:active {font-weight:bold;}
    #spi15	a:active {font-weight:bold;}
    #spi18	a:active {font-weight:bold;}
    #spi24	a:active {font-weight:bold;}
    #spi30	a:active {font-weight:bold;}
    #spi36	a:active {font-weight:bold;}
    #spi48	a:active {font-weight:bold;}
    #spi60	a:active {font-weight:bold;}
    #spi72	a:active {font-weight:bold;}
    #lfmta	a:active {font-weight:bold;}
    #l2mta	a:active {font-weight:bold;}
    #l3mta	a:active {font-weight:bold;}
    #l4mta	a:active {font-weight:bold;}
    #l5mta	a:active {font-weight:bold;}
    #l6mta	a:active {font-weight:bold;}
    #l7mta	a:active {font-weight:bold;}
    #l8mta	a:active {font-weight:bold;}
    #l9mta	a:active {font-weight:bold;}
    #l10mta	a:active {font-weight:bold;}
    #l11mta	a:active {font-weight:bold;}
    #l12mta	a:active {font-weight:bold;}
    #lfmtp	a:active {font-weight:bold;}
    #l2mtp	a:active {font-weight:bold;}
    #l3mtp	a:active {font-weight:bold;}
    #l4mtp	a:active {font-weight:bold;}
    #l5mtp	a:active {font-weight:bold;}
    #l6mtp	a:active {font-weight:bold;}
    #l7mtp	a:active {font-weight:bold;}
    #l8mtp	a:active {font-weight:bold;}
    #l9mtp	a:active {font-weight:bold;}
    #l10mtp	a:active {font-weight:bold;}
    #l11mtp	a:active {font-weight:bold;}
    #l12mtp	a:active {font-weight:bold;}
    #lfmpa	a:active {font-weight:bold;}
    #l2mpa	a:active {font-weight:bold;}
    #l3mpa	a:active {font-weight:bold;}
    #l4mpa	a:active {font-weight:bold;}
    #l5mpa	a:active {font-weight:bold;}
    #l6mpa	a:active {font-weight:bold;}
    #l7mpa	a:active {font-weight:bold;}
    #l8mpa	a:active {font-weight:bold;}
    #l9mpa	a:active {font-weight:bold;}
    #l10mpa	a:active {font-weight:bold;}
    #l11mpa	a:active {font-weight:bold;}
    #l12mpa	a:active {font-weight:bold;}
    #lfmpp	a:active {font-weight:bold;}
    #l2mpp	a:active {font-weight:bold;}
    #l3mpp	a:active {font-weight:bold;}
    #l4mpp	a:active {font-weight:bold;}
    #l5mpp	a:active {font-weight:bold;}
    #l6mpp	a:active {font-weight:bold;}
    #l7mpp	a:active {font-weight:bold;}
    #l8mpp	a:active {font-weight:bold;}
    #l9mpp	a:active {font-weight:bold;}
    #l10mpp	a:active {font-weight:bold;}
    #l11mpp	a:active {font-weight:bold;}
    #l12mpp	a:active {font-weight:bold;}
    
    .hvr:link {color:#000}
    .hvr:visited {text-decoration: none}
    .hvr:active {color:#000}
    .hvr:hover {color:#7D4A2C}
    
    
    
    /*#dlbtn:hover{
    	background-image: url(images/databtnhover.png);
    }*/
    Last edited by ajoros; 06-19-2012 at 12:23 AM.

  • #10
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    :active is only meant to be applied when the link is active (when you are clicking it)
    As soon as you are finished clicking it, it is no longer active, thus it returns to the default style.

    To make it stay bold you can either set the :visited too, which will apply for the link if it have been used.
    Code:
    #pdsi a:active, #pdsi a:visited {font-weight:bold;}
    or you can use javascript to change it's class.
    <a href="somepage.htm" class="NotInUse" onclick="this.className='InUse';">click me</a>

    depending on your need, it can be necessary to create a function to reset the other link to NotInUse.

  • #11
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lerura,

    Is there an IRC channel where I can get help on this too?
    I think I understand what you're getting at. Just not sure where to start.

    Thanks

  • #12
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    looking deeper on your page it shows up that you have defined a rule for each li, which are a direct parents of the link.

    And also that you are trying to cover several id's within one rule.
    eg.
    Code:
    #1fm {...}
    which you want to cover all id's starting with 1fm.
    but it only covers a div with that exact id.
    an id-starts-with rule is written
    Code:
     [id^=1fm] {...}
    but I have figured out what you need:

    You don't need all these rules.
    they can be replaced with a single rule:

    Code:
    #treemenu a:active, .Active {font-weight:bold}
    When you click a link the whole page is reloaded, so everything you apply to the element
    will be forgotten.

    To make the current page being highlighted in bold:
    Code:
    (function(){
    $('#treemenu').find('a').each(function{
    if (this.href==("index.php"+location.search)){
    this.addClass('Active');
    }
    });
    This will make a check on every link in the treemenu, and highlight the one that matches the current location.href
    Last edited by Lerura; 06-19-2012 at 02:11 AM.

  • #13
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added this into my index.php code in the <HEAD>:
    Code:
    <script type="text/javascript">
    (function(){
    $("treemenu1").find('a').each(function{
    if (this.href==("index.php"+location.search)){
    this.addClass('Active');
    }
    });
    </script>
    And I added what you said to the main.css page:
    Code:
    #treemenu1 a:active, .Active {font-weight:bold}
    But it still only goes bold with i CLICK DOWN on the mouse. Once I release the mouse click is goes back to normal font weight. It is not staying bold for the active page. Why?

    You can check the website too and view the code. *sigh*

  • #14
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    I can see that you have added
    Code:
    $(document).ready
    and an extra set of
    Code:
    })
    the $(document).ready makes no difference to the code that I provided as
    (function(){ is short for $(document).ready(function(){

    But the extra set of }) does"
    You now have a set of closing bracket more than you have opening brackets.

    remove this extra set and the code should work.
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    $("treemenu1").find('a').each(function{
    if (this.href==("index.php"+location.search)){
    this.addClass('Active');
    }
    })
    });
    </script>
    Last edited by Lerura; 06-19-2012 at 02:33 AM.

  • #15
    New Coder
    Join Date
    Jun 2012
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I pasted exactly what you have written and still no luck...

    Code:
    (function(){
    $('#treemenu1').find('a').each(function{
    if (this.href==("index.php"+location.search)){
    this.addClass('Active');
    }
    });
    and the CSS code is
    Code:
    #treemenu1 a:active, .Active {font-weight:bold}
    NOTE: The change from TREEMENU to TREEMENU1 ... as the ul id="treemenu1"


  •  
    Page 1 of 2 12 LastLast

    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
    •