Page 1 of 1

Help with Jquery active navigation

Posted: Wed Mar 12, 2014 1:26 pm
by PhpExile
I have a jQuery script that is firing but it keeps resetting once the page is refreshed. I have searched and searched for a good tutorial for this and cannot find one. There are alot of bad ones out there. Here is what I am working with:

Navigation:

Code: Select all

<li><a class="nav_btns active" href="?main">Home</a></li>
<li><a class="nav_btns" href="?demo">Demo</a></li>
<li><a class="nav_btns" href="?videos">Videos</a></li>
<li><a class="nav_btns" href="?pics">Pictures</a></li>
<li><a class="nav_btns" href="?price">Pricing</a></li>
<li><a class="nav_btns" href="?faq">FAQ</a></li>
<li><a class="nav_btns" href="?aboutus">About Us</a></li>
<li><a class="nav_btns" href="?contactus">Contact Us</a></li>
Jquery Script:

Code: Select all

<script type="text/javascript">

$(document).ready(function() {
    
	$('a.nav_btns').click(function() {
		
		$('a.nav_btns').removeClass("active");
		$(this).addClass("active");
            
	});
		
});

</script>
Here is where I initialize Jquery:

Code: Select all

echo $Sys->Content->meta(); <---- included below
echo $Sys->head();

//Load Jquery scripts

$Sys->Template->load(TEMP. 'main' . php_ext); <--- this is the script that changes the active class to the link that was clicked

echo $Sys->Content->wrapper(); <-- the ul nav is called here so the script is before the navigation
Finally, This is the scripts that are called:

Code: Select all

<script type="text/javascript" src="core/js/jquery.min.js"></script>
<script type="text/javascript" src="core/js/custom.min.js"></script>
 <script type="text/javascript" src="core/js/colorbox.js"></script>
<script type="text/javascript" src="core/js/tiny_mce/tiny_mce.js"></script>
The jQuery is doing what it is supposed to do. It removes all active classes and adds active to the correct clicked link but then it resets back to the home. What am I doing wrong? Thanks in advance.

Re: Help with Jquery active navigation

Posted: Wed Mar 12, 2014 3:42 pm
by Christopher
Have you looked at the actual HTML output of the script to see if there are some other javascript/jQuery calls that are resetting the elements? It is difficult to tell from the PHP code for your script.

Re: Help with Jquery active navigation

Posted: Wed Mar 12, 2014 5:56 pm
by PhpExile
There isn't. The only jQuery I have targeting the a tag is what i posted.

Re: Help with Jquery active navigation

Posted: Wed Mar 12, 2014 6:29 pm
by Celauran
Looks like you're setting ?main active by default on page load then only changing the active class when a link is clicked. The link loads the new page, which brings us back to the initial state of ?main being active. Why not set active to match your query string when you load the page? You can do so in PHP with $_SERVER['QUERY_STRING'] or in JS with window.location.search

Re: Help with Jquery active navigation

Posted: Wed Mar 12, 2014 6:42 pm
by PhpExile

Code: Select all


<div id="nav">
	 <ul>
				
		<li><a class="nav_btns active" href="?main">Home</a></li>
		<li><a class="nav_btns" href="?demo">Demo</a></li>
		<li><a class="nav_btns" href="?videos">Videos</a></li>
		<li><a class="nav_btns" href="?pics">Pictures</a></li>
		<li><a class="nav_btns" href="?price">Pricing</a></li>
		<li><a class="nav_btns" href="?faq">FAQ</a></li>
		<li><a class="nav_btns" href="?aboutus">About Us</a></li>
		<li><a class="nav_btns" href="?contactus">Contact Us</a></li>
		
	 </ul>
				  
</div>

<div id="mbody">

      <?php if(isset($_GET['main']) || empty($_GET)) { echo $Sys->Template->load('main' . php_ext); } ?>
      <?php if(isset($_GET['demo'])) { echo $Sys->Template->load('demo' . php_ext); } ?>
      <?php if(isset($_GET['videos'])) { echo $Sys->Template->load('videos' . php_ext); } ?>
      <?php if(isset($_GET['pics'])) { echo $Sys->Template->load('pictures' . php_ext); } ?>
      <?php if(isset($_GET['price'])) { echo $Sys->Template->load('packages' . php_ext); } ?>
      <?php if(isset($_GET['faq'])) { echo $Sys->Template->load('faq' . php_ext); } ?>
      <?php if(isset($_GET['aboutus'])) { echo $Sys->Template->load('about' . php_ext); } ?>
      <?php if(isset($_GET['contactus'])) { echo $Sys->Template->load('contact' . php_ext); } ?>   

</div>

This is what loads the pages.

Re: Help with Jquery active navigation

Posted: Wed Mar 12, 2014 8:00 pm
by PhpExile
It is making the clicked tab active but once the page refreshes its back to the default active.

Re: Help with Jquery active navigation

Posted: Wed Mar 12, 2014 8:22 pm
by Celauran
Yes, I know. That's what I just said. It's because you've got 'active' hardcoded into the first entry. Instead, try to determine the active page programmatically and set the active link that way.

Code: Select all

<li><a class="nav_btns <?= ($_SERVER['QUERY_STRING'] == 'main') ? 'active' : ''; ?>" href="?main">Home</a></li>
for example

Re: Help with Jquery active navigation

Posted: Wed Mar 12, 2014 10:03 pm
by PhpExile

Code: Select all

<li><a class="<?php if($_SERVER['QUERY_STRING'] == 'main' || empty($_GET)) { echo 'active'; } ?>" href="?main">Home</a></li>
        <li><a class="<?php if($_SERVER['QUERY_STRING'] == 'demo') { echo 'active'; } ?>" href="?demo">Demo</a></li>
        <li><a class="<?php if($_SERVER['QUERY_STRING'] == 'videos') { echo 'active'; } ?>" href="?videos">Videos</a></li>
        <li><a class="<?php if($_SERVER['QUERY_STRING'] == 'pics') { echo 'active'; } ?>" href="?pics">Pictures</a></li>
        <li><a class="<?php if($_SERVER['QUERY_STRING'] == 'price') { echo 'active'; } ?>" href="?price">Pricing</a></li>
        <li><a class="<?php if($_SERVER['QUERY_STRING'] == 'faq') { echo 'active'; } ?>" href="?faq">FAQ</a></li>
        <li><a class="<?php if($_SERVER['QUERY_STRING'] == 'aboutus') { echo 'active'; } ?>" href="?aboutus">About Us</a></li>
        <li><a class="<?php if($_SERVER['QUERY_STRING'] == 'contactus') { echo 'active'; } ?>" href="?contactus">Contact Us</a></li>
Had to do it like this but thank you it works. Didn't even know there was a query string in the $_SERVER heh.