question about jquery nav
Permalink
Hey guys im working with concrete for the first time, and i wish i had started with it eons ago, anyway im working on creating a custom nav it uses jquery in my static page i had used it on previously.
I got the basic functionality working by making an auto-nav style but its ignoring the jquery i have in the view.php is there anything special i have to do to get this to work I know that concrete has jquery included in it somewhere, but for the moment i just tested by copying my own jquer lib into the auto-nav style folder I made.
any help would be great.
I got the basic functionality working by making an auto-nav style but its ignoring the jquery i have in the view.php is there anything special i have to do to get this to work I know that concrete has jquery included in it somewhere, but for the moment i just tested by copying my own jquer lib into the auto-nav style folder I made.
any help would be great.
thanks ill give that a shot, i think my main issue is im not sure what to call to include the JavaScript into the file as it has no header its just a straight php file to augment auto-nav.
so far it populates the links on the nav bar just fine, but dosent seem to populate sub links, im working a nice pop down menu with sub page links
or do you think this kinda thing is better to create as a block instead of just augmenting the auto-nav
basically im replicateing this
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html...
here is the js that makes the nave work the way i want.
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
so far it populates the links on the nav bar just fine, but dosent seem to populate sub links, im working a nice pop down menu with sub page links
or do you think this kinda thing is better to create as a block instead of just augmenting the auto-nav
basically im replicateing this
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html...
here is the js that makes the nave work the way i want.
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
If the sublinks aren't showing up, you need to check if it's because the html isn't being outputted or if the javascript isn't showing it. If the former, make sure you're using the default template for the autonav block (not 'header nav' or 'breadcrumb'). Also make sure you've set the autonav block to show subpages. Sometimes I get a weird bug in c5 where it doesn't show sub-pages unless you choose to show "all" (not just "relevant subpages").
You can check whether or not the sub-menu html is being outputted by using Firebug or by viewing the page source.
If the html is being outputted properly, then check that the javascript code is referring to the various elements with the same id's and classes as the html that's actually being output. For example, in the javascript code you posted, it looks like it's expecting classes called "topnav" and "subnav", but I believe the default autonav template uses different names. So you need to either change the javascript, or change the template so they match.
Hope this helps.
-Jordan
You can check whether or not the sub-menu html is being outputted by using Firebug or by viewing the page source.
If the html is being outputted properly, then check that the javascript code is referring to the various elements with the same id's and classes as the html that's actually being output. For example, in the javascript code you posted, it looks like it's expecting classes called "topnav" and "subnav", but I believe the default autonav template uses different names. So you need to either change the javascript, or change the template so they match.
Hope this helps.
-Jordan
Oh, and as for how to include the javascript, I would put it in its own javascript file inside your theme's directory, then in your theme's <head> element (probably inside the "header.php" file in the "elements" folder), put in the call to that javascript file, like this:
<script src="<?php print $this->getThemePath(); ?>/myjavascriptfile.js"></script>
Well ive done some experimenting, with odd results i added a call to a copy of jquery i stuck in the theme folder and the nav bar works, but only if i have that local copy of it referenced, This makes no sense to me since jquery is auto loaded by default with C5 to my understanding
Any thoughts....
Any thoughts....
Figured out what was going on, i was calling header required after i was calling all my additional scripts, i perpended that to the mix and now everything is working fine.
This may not be the cause of your problem, but it is the first thing to try to fix it. If it's still not working, could you post some code with more details about what exactly isn't working?
Also, do you know about the Firebug extension for Firefox? This is an essential tool for tracking down javascript issues -- it lets you set breakpoints in the code, shows you variables, lets you try out different calls in a console, etc.
Good luck!
-Jordan