Help with Jquery active navigation

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
PhpExile
Forum Newbie
Posts: 17
Joined: Wed Mar 05, 2014 12:45 pm

Help with Jquery active navigation

Post 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.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Help with Jquery active navigation

Post 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.
(#10850)
PhpExile
Forum Newbie
Posts: 17
Joined: Wed Mar 05, 2014 12:45 pm

Re: Help with Jquery active navigation

Post by PhpExile »

There isn't. The only jQuery I have targeting the a tag is what i posted.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with Jquery active navigation

Post 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
PhpExile
Forum Newbie
Posts: 17
Joined: Wed Mar 05, 2014 12:45 pm

Re: Help with Jquery active navigation

Post 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.
PhpExile
Forum Newbie
Posts: 17
Joined: Wed Mar 05, 2014 12:45 pm

Re: Help with Jquery active navigation

Post by PhpExile »

It is making the clicked tab active but once the page refreshes its back to the default active.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with Jquery active navigation

Post 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
PhpExile
Forum Newbie
Posts: 17
Joined: Wed Mar 05, 2014 12:45 pm

Re: Help with Jquery active navigation

Post 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.
Post Reply