Jquery Superfish issue
Permalink 1 user found helpful
Hey Guys,
Has anybody had issues getting Jquery Superfish to work in Concrete5? When I add the superfish tag to my js file it breaks the C5 header editor.
Here is the superfish tag that I add to my js file:
$('.navbar nav').superfish();
Has anybody had issues getting Jquery Superfish to work in Concrete5? When I add the superfish tag to my js file it breaks the C5 header editor.
Here is the superfish tag that I add to my js file:
$('.navbar nav').superfish();
The selector '.navbar nav' looks wrong. I have not seen the html generated for your site, but I suspect '.navbar .nav' (note '.nav' to select elements with the 'nav' class that are descendants of elements of the 'navbar' class).
Hey JohntheFish,
Thanks for the quick response. The selector works fine in my html code, but it breaks the C5 editor when I add the below code to my js file. Is there away to only show this code when the site is not in edit mode?
// ---------------------------------------------------------
// Superfish
// ---------------------------------------------------------
$('.navbar nav').superfish({
delay:500,
animation:{opacity:'show', height:'show'},
speed: 'fast',
autoArrows: false,
smoothHeight: true,
dropShadows:false
});
here my html:
<section class="navbar">
<nav class="span6 pull-right">
<ul class="nav visible-desktop">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Our Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Our Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</section>
Thanks for the quick response. The selector works fine in my html code, but it breaks the C5 editor when I add the below code to my js file. Is there away to only show this code when the site is not in edit mode?
// ---------------------------------------------------------
// Superfish
// ---------------------------------------------------------
$('.navbar nav').superfish({
delay:500,
animation:{opacity:'show', height:'show'},
speed: 'fast',
autoArrows: false,
smoothHeight: true,
dropShadows:false
});
here my html:
<section class="navbar">
<nav class="span6 pull-right">
<ul class="nav visible-desktop">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Our Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Our Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</section>
Seeing the code, first off, I can confirm you selector looks correct, so my comment about .nav above does not apply.
In JavaScript, you can test on the global
In php, you can test on the current page/collection
Or if $c is not in scope
Before doing any of the above, maybe find out more about why it breaks by using the developer console (chrome) or firebug.
One other thought, JavaScript is usually best executed from within a jQuery ready handler or at least from within a closure, rather than as global code. That is good practice regardless of whether it has anything to do with your problem.
In JavaScript, you can test on the global
if (CCM_EDIT_MODE){ //.... }
In php, you can test on the current page/collection
if ($c->isEditMode()){ //.... }
Or if $c is not in scope
$page = Page::getCurrentPage(); if ($page->isEditMode()){ //.... }
Before doing any of the above, maybe find out more about why it breaks by using the developer console (chrome) or firebug.
One other thought, JavaScript is usually best executed from within a jQuery ready handler or at least from within a closure, rather than as global code. That is good practice regardless of whether it has anything to do with your problem.
Hey JohntheFish,
Thanks for your help. I got the superfish plugin to working now.
Curtis Allen
Thanks for your help. I got the superfish plugin to working now.
Curtis Allen
Can you elaborate what your problem was and how you fixed it?
Bill
Bill
