Forums

Custom template: how to apply jquery to the right block?

Permalink
I have 2 autonavs on a page. I have a dropdown_menu custom template, that attaches dropdown menu functionality to an element like so (in the view.js):

$(document).ready(function() {
  $('ul.nav').supersubs({ 
    minWidth:    12,    
    maxWidth:    27, 
    extraWidth:  1                           
  }).superfish({
    autoArrows: false,
    dropShadows: false
  });
});


However, as you can see, it attaches this functionality to every ul.nav element on a page. How can I make sure that it only attaches it to the block to which I apply the custom template?
plindelauf
 
JohntheFish replied on at Permalink Reply
JohntheFish
You can do it by indexing through the nav ul's on the page:
$('ul.nav').eq(0).supersubs()...
$('ul.nav').eq(1).supersubs()....


Or by selecting within a content area (depends on your theme and how it identifies content areas, for example, maybe it has a div with id sidebar)
$('#sidebar ul.nav').supersubs()...


For more detailed info on selectors see
http://api.jquery.com/category/selectors/...
plindelauf replied on at Permalink Reply
plindelauf
Thanks for the quick reply, John!

These are indeed possible solutions, however they are not generic solutions, because in the custom template I am then making assumptions about how the page (on which it's used) is laid out. If I was to change the page layout, the custom template would break down. Also, it can then only be used in pages with that particular layout.

Isn't there a proper generic solution for this?
JohntheFish replied on at Permalink Reply
JohntheFish
Ok, not quite clear on your expanded requirement. But here are some ideas.

Add a class to your nav, or its container or an ancestor container, that you can key on. This class could be in a theme, a custom template, or added through C5 block design.
then (if the class is on the ul):
$('ul.nav.main_nav').supersubs()...
$('ul.nav:not(.main_nav)').supersubs()...


If the class is on the parent of the ul:
$('.main_nav>ul.nav').supersubs()...
// not
$('ul.nav:not(.main_nav>ul.nav)').supersubs()...


If the class is on an ancestor container of the ul:
$('.main_nav ul.nav').supersubs()...
// not
$('ul.nav').filter($(this).parents('.main_nav').get()<1  ).supersubs()...
// or mabe
$('ul.nav:not(.main_nav ul.nav)').supersubs()...

The not conditions may take some experimenting/tweaking. These are not selectors I have recently used.

If you can attach a different class to a container for any of the ul.nav elements, then you can avoid the negative tests and make life much easier.
plindelauf replied on at Permalink Reply
plindelauf
John, thanks again for your very detailed answer. The thing is: I know all the jQuery options, but these solutions all depend on how you setup your page. I'm looking for the correct generic solution to implementing a custom template. By this I mean: no matter how a page is laid out, if I have an autonav block and I apply my custom template, it should work for that block and that block only. Concrete5 assigns a unique id to the block, so I should be able to act on that id in my custom template (jQuery) code. But how is this done the right way?

Thanks.

P.S. I see that my example might cause a little confusion, but allow me to elaborate a little more on that example. A generic solution should allow me to apply the custom template to just one of the two autonavs or both, by simply applying the custom template or not applying it.
JohntheFish replied on at Permalink Best Answer Reply
JohntheFish
In that case, maybe you should have a look at the improved AutoNav view as perhttp://www.concrete5.org/community/forums/customizing_c5/new-cleane...

Use this to develop templates with appropriate classes and jQuery supersubs/superfish.

You can then apply these templates (or not) to your various menus. If needed, make one of these templates the default for your AutoNav.

Or if that does not meet your requirement take it further and clone the entire AutoNav block code, rename it MyNav, make one new template for the default view, and one alternate template for the other menu. Use the MyNav block throughout your site.
plindelauf replied on at Permalink Reply
plindelauf
John, thanks again for your insanely fast answer! Your help is much appreciated.

Thanks for pointing out those alternatives. What I understand from this is that the default autonav does not accommodate for the use case I described. I will certainly examine what I can do with the autonav alternatives.