healthbasics Posted June 15, 2010 Share Posted June 15, 2010 My website used to highlight the current link in a dark color (similar to the mouseover or maybe even the same) but when I made some updates to allow external links more easily and to correct a problem with global variables someone here recommended I change the highlighting stopped working. Anyone know how I can turn it back on? Menu list code: <? $_menu = array('index.php?page=home' => 'Philosophy & Focus', 'index.php?page=biography' => 'Biography', 'index.php?page=consultations' => 'Consultations', 'index.php?page=classes' => 'Classes', 'index.php?page=client_comments' => 'Client Comments', 'index.php?page=calendar' => 'Calendar', 'http://shop.healthbasics.net/collections/health-basics' => 'Products', 'http://www.healthbasics.net/blog/' => 'Blog', 'index.php?page=recommended_reading' => 'Recommended Reading', 'index.php?page=recommended_viewing' => 'Recommended Viewing', 'index.php?page=links_resources' => 'Links & Resources', ); And here is how it gets called from index.php: include "menu.inc.php"; function menu($_menu){ $str = ''; foreach($_menu as $url => $name){ $sel = ($_GET['page'] == $url ) ? ' id="selected" ' : ''; $str .= "<li ". $sel ."><a href=" . $url . " >" . $name . "</a>\n"; } echo $str; } Thanks. Quote Link to comment Share on other sites More sharing options...
gwolgamott Posted June 15, 2010 Share Posted June 15, 2010 what styles were you using? Were you I assume using css to highlight your links with a mouseover I mean? Show us what your old link code looked like..... Below is why there is no highlighting. You have no class associated with the link code or styles. Show me your old code and I'll tell you what you need to change. "<li ". $sel ."><a href=" . $url . " >" . $name . "</a>\n" Quote Link to comment Share on other sites More sharing options...
healthbasics Posted June 15, 2010 Author Share Posted June 15, 2010 what styles are you using? Below is my style.css - would that answer your question? body { font : normal 12px/1.6em Arial, Helvetica, sans-serif; color : #2a3845; margin : 0; padding : 0; background-color: #7b7b7b; background-image: url(../img/bg_main.jpg); background-repeat: repeat-x; background-position: top; } p { margin : 0;padding : 0;} a:visited, a:link {color : #a43b55;text-decoration : underline;background:none;} a:hover {color : #a43b55;text-decoration : none;background:none; cursor:pointer;} h1 { color : #7a2e40; margin: 0px 0px 10px 0px; padding-bottom : 10px; border-bottom : 1px solid #efece7; font-family: quicksand; font-size: 17px; font-style: normal; font-weight: normal; font-variant: normal; } h2 { color : #7a2e40; margin : 20px 0 10px; padding-bottom : 10px; border-bottom : 1px solid #efece7; font-family: quicksand; font-size: 17px; font-style: normal; font-weight: normal; font-variant: normal; } h3 { color : #7a2e40; padding-bottom : 10px; border-bottom : 1px solid #efece7; margin-top: 20px; margin-right: 0; margin-bottom: 10px; margin-left: 0; font-family: quicksand; font-size: 14px; font-weight: bold; } h4 { color : #7a2e40; padding-bottom : 10px; margin-top: 20px; margin-right: 0; margin-bottom: 10px; margin-left: 0; font-family: quicksand; font-size: 14px; font-weight: bold; } #year a { border:none; text-decoration:none; font-size:14px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #a43b55; } #year a:hover { color: #777; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #a43b55; } ul {padding:0;margin:0 0 0 17px;list-style: square url(../img/bullet.gif);} .box { border : 1px solid #f0e9eb; padding : 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #fff; background-image: url(../img/bg_box.jpg); background-repeat: repeat-x; background-position: top; -box-shadow: 0px 0px 5px #dbdbdb; -webkit-box-shadow: 0px 0px 5px #dbdbdb; -moz-box-shadow: 0px 0px 5px #dbdbdb; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .box2 { border : 1px solid #f0e9eb; width: 370px; margin-left: 150px; margin-top: -20px; margin-bottom: 25px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #fff; background-image: url(../img/bg_box.jpg); background-repeat: repeat-x; background-position: top; -box-shadow: 0px 0px 5px #dbdbdb; -webkit-box-shadow: 0px 0px 5px #dbdbdb; -moz-box-shadow: 0px 0px 5px #dbdbdb; } #wrapper { width : 950px; border-left : 1px solid #f0e9eb; border-right : 1px solid #f0e9eb; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: #FFFFFF; -box-shadow: 0px 0px 20px #545454; -webkit-box-shadow: 0px 0px 20px #545454; -moz-box-shadow: 0px 0px 20px #545454; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-bottom-right-radius: 15px; } #header { margin-top: 0; margin-right: 0px; margin-bottom: 0; margin-left: 0px; } #bg {height : 36px;background : url(img/bg.gif) repeat-x;} #nav { padding : 10px 20px; text-align : right; color : #fdfdfd; background-image: url(../img/bg_header2.jpg); background-repeat: repeat-x; background-position: top; -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; } #nav a:visited, #nav a:link { text-decoration : none; color : #ededed; } #nav a:hover {text-decoration : underline;color : #fdfdfd;} #main-content {margin : 0 auto;} #logo { margin-bottom : 45px; margin-top: 5px; margin-left: -15px; } .logotxt1 { color : #fa7393; margin : 10px 0 0 15px; font-family: quicksand; font-size: 20px; font-style: normal; font-weight: normal; font-variant: normal; } .logotxt2 {font : normal 20px quicksand, serif;color : #7a2e40; } .logotxt3 { color : #7a2e40; font-family: quicksand, serif; font-size: 9px; font-style: normal; font-weight: normal; font-variant: normal; vertical-align: super; } #left-column { width : 600px; float : left; padding-top: 0; padding-right: 5px; padding-bottom: 30px; padding-left: 30px; } #right-column {width : 300px;float : right;} .crd a:visited, .crd a:link, .crd a:hover{text-decoration : none;color : #2a3845;cursor: text;} #footer { border-top : 1px solid #f0e9eb; clear : both; padding-top: 20px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px; height: 70px; background-image: url(../img/bg_footer.jpg); background-repeat: repeat-x; background-position: top; } #footer_copy { float:left; margin-top:24px; } #footer_links { float:right; margin-right:20px; } #footer_links img { border:none; } .sidebar img { border:none; } #main-image { text-align : center; margin-top: 15px; padding: 4px; -box-shadow: 0px 0px 5px #dbdbdb; -webkit-box-shadow: 0px 0px 5px #dbdbdb; -moz-box-shadow: 0px 0px 5px #dbdbdb; -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 240px; width: 240px; margin-left: 30px; } .sidebar {width : 218px;margin : 0 auto;padding : 10px 25px;background : url(img/shadow.jpg) no-repeat top;} @font-face { font-family: quicksand; src: url('../css/quicksand.otf'); } @font-face { font-family: quicksand; font-weight: bold; src: url('../css/quicksand.otf'); } #menu{ list-style: none; width: 220px; float: left; margin-top: 2em; margin-bottom: 2em; margin-left: 0px; } #menu li{ padding: 0; margin: 0; list-style-image: none; list-style-type: none; } #menu a{ display: block; color: #666666; background-color: #eeeeee; font-weight: lighter; text-decoration: none; width: 207px; padding-top: 0.4em; padding-right: 0.3em; padding-bottom: 0.4em; padding-left: 0.8em; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; list-style-image: none; list-style-type: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; background-image: url(../img/bg_menu.jpg); background-repeat: repeat-x; } #menu a:hover{ color: #fff; background-color: #333333; font-weight: lighter; -box-shadow: 0px 0px 7px #696969; -webkit-box-shadow: 0px 0px 7px #696969; -moz-box-shadow: 0px 0px 7px #696969; background-image: url(../img/bg_menu_hover.jpg); background-repeat: repeat-x; background-position: top; border:none; } #selected { font-weight: lighter; border:none; } #selected a { color: #fff; background-color: #585858; font-weight: lighter; -box-shadow: 0px 0px 7px #696969; -webkit-box-shadow: 0px 0px 7px #696969; -moz-box-shadow: 0px 0px 7px #696969; background-image: url(../img/bg_menu_selected.jpg); background-repeat: repeat-x; background-position: top; border:none; } #easyTooltip{ border:1px solid #a1a1a1; color:#fff; box-shadow: 0px 0px 6px #333333; -webkit-box-shadow: 0px 0px 6px #333333; -moz-box-shadow: 0px 0px 6px #333333; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 9px; padding-left: 10px; background-color: #5e5e5e; background-image: url(../lib/easytooltip/bg.gif); background-repeat: repeat-x; } strong { font-size: 13px; color: #a43b55; } Quote Link to comment Share on other sites More sharing options...
gwolgamott Posted June 15, 2010 Share Posted June 15, 2010 I don't right away pick out your highlight... but you can do a rollover hightlight with you styles like so... add something like this to your style code: a.five:link { text-align:center; color:#003366; font-size:0.7em; font-weight:bold; text-decoration:none; } a.five:visited { text-align:center; color:#003366; font-size:0.7em; font-weight:bold; text-decoration:none; } a.five:hover { text-align:center; color:#FFFFFF; font-size:0.7em; font-weight:bold; text-decoration:underline;} a.five:active { text-align:center; color:#003366; font-size:0.7em; font-weight:bold; } Then change this line in your code here: $str .= "<li ". $sel ."><a href=" . $url . " >" . $name . "</a>\n"; to this: $str .= "<li ". $sel ."><a class="five" href=" . $url . " >" . $name . "</a>\n"; Quote Link to comment Share on other sites More sharing options...
gwolgamott Posted June 15, 2010 Share Posted June 15, 2010 TYPO that won't work.... I mean change it to this: $str .= "<li ". $sel ."><a class='five' href=" . $url . " >" . $name . "</a>\n"; Quote Link to comment Share on other sites More sharing options...
healthbasics Posted June 15, 2010 Author Share Posted June 15, 2010 The mouseover highlight already works just fine (and always did). The highlight for the current page used to work until I made some changes given here today to allow easier linking to external sites on the menu. I am trying to get it back to the point where the button for the page you are currently viewing would be highlighted. ANy idea how to do that? I tried swaping the line of code you recommended but it resulted in the page not loading at all. It would just be completley blank when I visited the home page. Quote Link to comment Share on other sites More sharing options...
healthbasics Posted June 15, 2010 Author Share Posted June 15, 2010 TYPO that won't work.... I mean change it to this: $str .= "<li ". $sel ."><a class='five' href=" . $url . " >" . $name . "</a>\n"; This has no discernible change in behavior that I can see Quote Link to comment Share on other sites More sharing options...
jbrown84 Posted June 15, 2010 Share Posted June 15, 2010 Maybe I missed it, but are you closing the <li> tag? I would think that line should be more like $str .= "<li ". $sel ."><a class='five' href=" . $url . " >" . $name . "</a></li>"; You are already setting the id of the <li> element to "selected" which is defined in your stylesheet, so make sure it is closing properly. Just to check, view the source in your browser for a page and look for the <li> of the current page to see if "id='selected'" is in there. Quote Link to comment Share on other sites More sharing options...
healthbasics Posted June 15, 2010 Author Share Posted June 15, 2010 Again I'm not seeing any difference in the way the site behaves when I use that line instead of the one that was there. I am also not finding the term 'selected' anywhere in the source. Quote Link to comment Share on other sites More sharing options...
jbrown84 Posted June 15, 2010 Share Posted June 15, 2010 Ok that means the ternary operator right above it ($sel = .... ) isn't behaving as expected and now I see why. It is checking to see if the value of "page" parameter is equal to the URL in your array, which it isn't because URL in your array contains the whole string ('index.php?page=.....') instead of just the page. I would suggest restructuring your array or changing $_GET['page'] to something that would check for the full URL. Quote Link to comment Share on other sites More sharing options...
hcdarkmage Posted June 15, 2010 Share Posted June 15, 2010 foreach($_menu as $url => $name){ $sel = ($_GET['page'] == $url ) ? ' id="selected" ' : ''; //<--- Here is your 'select' script. $str .= "<li ". $sel ."><a href=" . $url . " >" . $name . "</a>\n"; } I'm not sure if this helps, but this is the line that calls the 'selected' part of your css file. As for why it isn't highlighted anymore, when we changed the conditions of the menu, we changed the conditions of what it was looking for. Let me see if I can find a solution, or if someone else can find the solution. Quote Link to comment Share on other sites More sharing options...
healthbasics Posted June 15, 2010 Author Share Posted June 15, 2010 Great, thanks for your help. Now that the formating of the site is back to normal it's not so urgent but I would like to fix it if I can. Quote Link to comment Share on other sites More sharing options...
hcdarkmage Posted June 15, 2010 Share Posted June 15, 2010 Try this. Change $sel = ($_GET['page'] == $url ) ? ' id="selected" ' : ''; to $sel = ("index.php?page=".$_GET['page'] == $url ) ? 'id="selected" ' : ''; I hope my syntax is right. If not, I'm sure someone will correct it. Quote Link to comment Share on other sites More sharing options...
healthbasics Posted June 15, 2010 Author Share Posted June 15, 2010 Great success! you guys are batting 1,000 today! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.