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 20
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Help with active state on Navigation

    Hello all,

    I just took over a custom CMS which was built by a former employee at my company. The entire CMS is PHP Driven and never leaves index.php. There are simple IF Statements that tell it to pull content out of the database via it's ID.

    The problem here is that I cannot figure out how to make the navigation stay active on the current page, because you never leave index.php.

    For example,

    The homepage is: index.php
    The about page is: index.php?id=26
    The careers page is: index.php?id=28

    Any idea on how I can pull this off? I figure an onClick or something, but I suck at Javascript, my main strength is PHP and I cannot find a way to do this in PHP.


    Here is the code on how the navigation is created. It is setup to be dynamic, so if you create a page in the custom CMS, it'll populate automatically.

    Code:
    <div id="nav-bar">
    	<ul class="main-nav">
               <li><a href="index.php">Home</a></li>
                <?  
    		$query=mysql_query("SELECT * from section");
    		while($row=mysql_fetch_assoc($query)){ 
    	    ?>
                    
    	<li><a href="index.php?id=<? echo $row['id']; ?>">
            <? echo $row['section']; ?></a></li>
    
            <? } } ?>
    
    	<li><a href="index.php?id=projects">Projects</a></li>
             <li><a href="index.php?id=news">News</a></li>
    	</ul>
    		</div>
    Any help is greatly appreciated, the deadline for the project is Friday!

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,852
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Seems like you could solve this with PHP only?

    Get the current URL query string with PHP, and in your while loop:

    PHP Code:
            while($row=mysql_fetch_assoc($query)){ 
            ?>
                    
        <li><a href="index.php?id=<? echo $row['id']; ?>">
            <? echo $row['section']; ?></a></li>

            <? } } ?>
    ...check if the current $row['id'] equals the current id in the query string. If they are equal, do whatever you need to do to mark that link as 'active'. (I imagine there is some CSS styling involved there -- generated by PHP in your while loop.)
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • Users who have thanked chump2877 for this post:

    mroy360 (06-01-2012)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hey! Got it working, thanks for the help.

    I'm now running into an issue with getting my side navigation working. I got the main nav working because I could use the ID in the URL and do a REQUEST on it.

    However, the side navigation populates the main content div by doing an onClick, thus the URL never changes and I cannot pull from it.

    Ideally, I have an id row which isn't being passed into the URL. The "section_id" URL is, however I cannot use this in my REQUEST because all section ID's are the same for all the links in that section.

    Here is the code to help:

    Code:
    <ul class="list2">
      <?
                 while($row3=mysql_fetch_assoc($query3)){
    ?>
       <li><?
            echo "<a href='#' onclick='setMain(".$row3['id'].");'>".$row3['name']."</a></li>";
          }
            ?>   
            <? if($section==26){
       ?>
              <li><a href='index.php?id=32'>Random Link</a></li>
                        <li><a href='index.php?id=33'>Random Link 2</a></li>
       <? }?>
             <? if($section==32 || $section==33){
       ?>
               <li><a href='index.php?id=project2'>Project Portfolio</a></li>
           <? }?>
            </ul>
    I'm working on this right now, so I'll let you know if I come up with a solution. I'm trying to pass the "id" into the URL, rather then the section ID so I can determine which link is really active.

    The URL stays the same for every 3rd tier interior page, "www.blah.com.php5-22.dfw1-1.websitetestlink.com/blah/index.php?id=26

    id=26, is really my "section_id" column in my table. All 3rd tier pages "History, Management Team, Capabilities, ect." all of section_id = 26. So I cannot use the REQUEST on it or they all become active.

    I need to use the auto incrementing ID.

    And to just give you more insight on how this works, here is the echo that pulls the content with the onClick:

    Code:
            <div id="main_content">   
             <? if(isset($_GET['retrieve'])){
                ?> <script>setMain(<? echo $_GET['retrieve']; ?>);</script> <?
             }
             ?>
           
             <? echo $row2['content']; ?>
            </div>

    Thanks, I got it working with CSS Focus, but when you click anywhere on the page, the link deactivates .

    #side_nav li a:focus
    {
    color: white !important;
    background: #860038 !important;
    }

    Image of my table to help:

    Last edited by mroy360; 05-31-2012 at 09:55 PM.

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,852
    Thanks
    22
    Thanked 157 Times in 148 Posts
    PHP Code:
      <?
                 
    while($row3=mysql_fetch_assoc($query3)){
    ?>
       <li><?
            
    echo "<a href='#' onclick='setMain(".$row3['id'].");'>".$row3['name']."</a></li>";
          }
            
    ?>
    PHP Code:
            while($row=mysql_fetch_assoc($query)){  
            ?> 
                     
        <li><a href="index.php?id=<? echo $row['id']; ?>"> 
            <? echo $row['section']; ?></a></li> 

            <? } } ?>
    Are you saying that $query3 is not the same as $query? So the IDs being pulled by $query3 are not the same as the IDs being pulled by $query?

    If the queries are the same and the IDs are the same, then the solution is the same.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Yeah this just isn't working, may not be doing this right...

    The way I got the main navigation working was by doing the following:

    Code:
    <li <?php echo $_REQUEST['id']==$row['id']?' class="active"':'' ?>><a href="index.php?id=<? echo $row['id']; ?>">
            <? echo $row['section']; ?></a></li>
    However, for the side navigation as stated above, the ID never changes in the URL. It's using some weird onClick Javascript to pull the content so I cannot do the same method.

    For example:

    All 3rd tier interior pages on "About Us" have the same exact URL:
    http://www.blah.com.php5-22.dfw1-1.w...dex.php?id=26#

    id=26 doesn't change for all 8 3rd tier interior pages. ID 26 is actually the About Us page ID.

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,852
    Thanks
    22
    Thanked 157 Times in 148 Posts
    So you can have your JS function setMain() here:

    Code:
    onclick='setMain(".$row3['id'].")
    ...alter the active link status in the side navigation...Some additional code inside setMain() can manipulate the DOM and highlight the active link that way...

    For example:
    Code:
    // in link markup
    
    onclick='setMain(".$row3['id'].", this)'
    
    // then in setMain()
    
    function setMain(id, linkObject)
    {
          // existing function code
          // ......
          linkObject.style.color = "red";
    }
    Last edited by chump2877; 06-01-2012 at 07:24 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • Users who have thanked chump2877 for this post:

    mroy360 (06-01-2012)

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts
    We just had a sub-contractor come in for about 30 minutes and he almost got it working, this is what he did:

    Code:
    <li>
    <?
    echo "<a href='#' id=\"".$i."\" onclick='$(this).css(\"background\", \"blue\"); 
    setMain(".$row3['id']."); selected = $(this).attr(\"id\");  '>".$row3['name']."</a></li>";
    }
    ?>
    This almost works, what it does is highlight the link you clicked in blue on the side navigation, however it stays lit up and as you click more, they all stay lit up. So I need to find a way to deselect and have only 1 active.

    I tried your method, it highlights the link text in red. However they all stay lit up and don't deactivate when you click a different one, like the current issue with what the sub-contractor did.
    Last edited by mroy360; 06-01-2012 at 08:19 PM.

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,852
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Let's say your side navigation resides in a <div> element with id "sideNav", i.e.:

    Code:
    <div id="sideNav">
       <a>link</a>
       <a>link</a>
       <a>link</a>
    </div>
    Then you could employ something like the following:

    Code:
    function setMain(id, linkObject)
    {
          // existing function code
          // ......
          $("#sideNav a").each(function(){
                $(this).css('color', 'blue');  // whatever default color is for inactive link
          });
          linkObject.style.color = "red";
    }
    Last edited by chump2877; 06-01-2012 at 08:30 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • Users who have thanked chump2877 for this post:

    mroy360 (06-01-2012)

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hey,

    So that worked, however now the links do not work hehe.

    Code:
     <script type="text/javascript">
     function setMain(id, linkObject)
    {
          // existing function code
          // ......
          $("#side_nav a").each(function(){
                $(this).css('color', 'black');  // whatever default color is for inactive link
          });
          linkObject.style.color = "red";
    }
     </script> 
    
    			<?
                while($row3=mysql_fetch_assoc($query3)){
    			?>
    				
    				<li>
    				<?
            			echo "<a href='#' onclick='setMain(".$row3['id'].", this);'>".$row3['name']."</a></li>";
       				 }
            		?>
    Source code if this helps:

    Code:
    <script type="text/javascript">
     function setMain(id, linkObject)
    {
          // existing function code
          // ......
          $("#side_nav a").each(function(){
                $(this).css('color', 'black');  // whatever default color is for inactive link
          });
          linkObject.style.color = "red";
    }
     </script> 
    
    							
    				<li>
    				<a href='#' onclick='setMain(89, this);'>History</a></li>				
    				<li>
    				<a href='#' onclick='setMain(69, this);'>Mission</a></li>				
    				<li>
    				<a href='#' onclick='setMain(70, this);'>Vision and Values</a></li>				
    				<li>
    				<a href='#' onclick='setMain(72, this);'>Management Team</a></li>				
    				<li>
    				<a href='#' onclick='setMain(75, this);'>Safety and Quality</a></li>
    Perhaps there is now an issue of how the content is being pulled?
    This is how the content gets pulled:
    Code:
            <div id="main_content">	
    			<? if(isset($_GET['retrieve'])){
    				?> <script>setMain(<? echo $_GET['retrieve']; ?>);</script> <?
    			}
    			?>
            
             <? echo $row2['content']; ?>
            </div>
            	<div id="side_nav">
    Thanks for your help in this by the way, def giving some +reputation!
    Last edited by mroy360; 06-01-2012 at 08:48 PM.

  • #10
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,852
    Thanks
    22
    Thanked 157 Times in 148 Posts
    If linkObject isn't defined in the function call here:

    Code:
    <script>setMain(<? echo $_GET['retrieve']; ?>);</script>
    Then perhaps you need to change the side navigation active link conditionally depending on how many arguments setMain() takes:

    Code:
    <script type="text/javascript">
     function setMain(id, linkObject)
    {
          // existing function code
          // ......
          if (linkObject != undefined)
          { 
               $("#side_nav a").each(function(){
                     $(this).css('color', 'black');  // whatever default color is for inactive link
               });
               linkObject.style.color = "red";
           }
    }
     </script>
    You might be getting a JS exception which is causing none of the JS to work. (Because linkObject isnt defined for some of your function calls.)

    Edit: It would really help if you could post the full source code.
    Last edited by chump2877; 06-01-2012 at 09:13 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #11
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hmm..no luck..

    Starting to hate this side nav heh

    The Browser generated Source Code for the About Us Page:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title></title>
    
    		
    <meta charset="utf-8">
    
    <link rel="stylesheet" href="" type="text/css" media="screen">
    	<meta charset="utf-8">	
      
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    
    	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
    	<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    	<script type="text/javascript" src="js/functions.js"></script>
        <!-- PrettyPhoto --> 
    	<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
    	<script type="text/javascript" src="js/prettyPhoto.js"></script>
    
    	<!-- Masonry Javascript File --> 
    	<script type="text/javascript" src="js/masonry.js"></script>
    	
    	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 
    	 <script type="text/javascript" src="js/jquery.ie6blocker.js"></script> 
    
    </head>
    <body>
    
    
    
    	<div id="top">
    		<div class="right">
    			<ul>
    
    						</ul>
    		</div>
    		
    		<div class="left">
    			<a href="index.php"><img src="images/logo2.png"/></a><div class="slogan" style="float: right; color: #75263b; "></div>
    			
    		</div>
    		
    	</div>
    	
    		<div id="nav-bar">
    			
    				<ul class="main-nav">
                     <li><a href="index.php">Home;</a></li>
                                
    					<li  class="active"><a href="index.php?id=26">
            About</a></li>
                        
    
    				                
    					<li><a href="index.php?id=28">
            Careers</a></li>
                        
    
    				                
    					<li ><a href="index.php?id=30">
            Contact</a></li>
                        
    
    							<li ><a href="index.php?id=projects">Projects</a></li>
                <li ><a href="index.php?id=news">News</a></li>	
    			</ul>
    		</div>	
    	<div id="content-out" class="shadow">
    	<div id="content">
    	<div id="content">
    		        
            <!-- Start Page Content -->
            <div id="main_content">	
    			        
             <div class="page_heading">
    	<h2>
    		About Blah</h2>
    </div>
    <div class="large_left_column">
    	<div class="menus">
    		<p>
    			Blah blah content<br />
    			<br />
    			<img class="intphoto" src="images/interior-1.jpg" style="border: 2px solid grey" /><br />
    			<br />
    			Blah offers the ultimate flexibility for customers interested in the EPC project approach:</p>
    
    	</div>
    </div>
    <!-- end menu left -->        </div>
            	<div id="side_nav">
                <ul class="list2">
    
    <script type="text/javascript">
     function setMain(id, linkObject)
    {
          // existing function code
          // ......
          if (linkObject != undefined)
          { 
               $("#side_nav a").each(function(){
                     $(this).css('color', 'black');  // whatever default color is for inactive link
               });
               linkObject.style.color = "red";
           }
    }
     </script>
    
    							
    				<li>
    				<a href='#' onclick='setMain(89, this);'>History</a></li>				
    				<li>
    				<a href='#' onclick='setMain(69, this);'>Mission</a></li>				
    				<li>
    				<a href='#' onclick='setMain(70, this);'>Vision and Values</a></li>				
    				<li>
    				<a href='#' onclick='setMain(72, this);'>Management Team</a></li>				
    				<li>
    				<a href='#' onclick='setMain(75, this);'>Safety and Quality</a></li>	 
                      
    	
    					
    					                           
                             
                                                     
                </ul>
    			<div id="contactform">
    						
    			<p>
    							<h3>Contact Us</h3>
    													
    					            <form method="post" action="index.php?id=26">
                                        <p><label>Name</label><br />
                                            <input type="text" name="name" size="34" class="text_field" />
                                        </p>
                                        <p>
                                            <label>Email</label><br />
                
                                            <input type="text" name="email" size="34" class="text_field" />
                                            
                                        </p>
    									                                    <p>
                                            <label>Company</label><br />
                
                                            <input type="text" name="company" id="company" size="34" class="text_field" />
                                            
                                        </p>
                                            <p>
                                            <label>Phone</label><br />
                                            <input type="text" name="phone" id="phone" size="34" class="text_field" />
                                            
                                        </p>
                                        <p>
                                            <label>Message</label><br />
                
                                            <textarea class="text_field" rows="10" cols="12" name="message" id="message"></textarea><input type="submit" id="submit" name="contact" class="button" value="Send Message" />
                                        </p>
                                        </form>
                </div></div>
    
    	
         		</div>
    		<!-- End Page Content -->
    		
    	</div>
    
    
    	  </div>
      
      		<div id="footer">
    			<div class="inner-foot">
    
    				
    			</div>
    			
    		</div>
      
    </body>
    </html>

    PS: Did you want the browser generated source code or the actual code for the page?
    Last edited by mroy360; 06-01-2012 at 09:22 PM.

  • #12
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,852
    Thanks
    22
    Thanked 157 Times in 148 Posts
    You could also try this:

    Code:
    <script type="text/javascript">
     function setMain(id, linkObject)
    {
          // existing function code
          // ......
          if (linkObject)  // or if (linkObject != null)
          { 
               $("#side_nav a").each(function(){
                     $(this).css('color', 'black');  // whatever default color is for inactive link
               });
               linkObject.style.color = "red";
           }
    }
     </script>
    Last edited by chump2877; 06-01-2012 at 09:19 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #13
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts
    This?

    Code:
    <script type="text/javascript">
     function setMain(id, linkObject)
    {
          // existing function code
          // ......
          if (linkObject != null)
          { 
               $("#side_nav a").each(function(){
                     $(this).css('color', 'black');  // whatever default color is for inactive link
               });
               linkObject.style.color = "red";
           }
    }
     </script>

    No dice

  • #14
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,852
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Running the browser generated source code (in Chrome) works fine for me?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #15
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hmm, how is that possible? All the content needs to be pulled from a database.

    The links are becoming active, just like I need them to. However, the links no longer pull the content and update the page. Thus, the links are no longer working. In Firefox, Chrome and IE.

    I think we had some confusion, your solution worked perfect. However, it broke the prior feature which pulled in the content for the link.
    Last edited by mroy360; 06-01-2012 at 09:48 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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