JQuery Cycle issue on Firefox

Question

I have a top navigation that renders fine on safari and chrome and mostly on firefox, except for one page. This page is using the Jquery Cycle plugin - when I disable this, the navigation shows as normal. What's strange is that I'm using the Cycle plugin on other pages and there are no issues on those, just on this one page it decides to hide the navigation and I cannot figure why! Here is my full code --> http://jsfiddle.net/surajkap/4zZPN/

Here are the highlights:

<ul class = "navigation-bar">
        <li><a href="/contact" class = "nav-link">CONTACT</a></li>
        <li><a href="/clients" class = "nav-link">CLIENTS</a></li>
        <li><a href="/personal" class = "nav-link">PERSONAL</a></li>
        <li><a href="/fashion" class = "nav-link">FASHION</a></li>
        <li><a href="/portrait" class = "nav-link">PORTRAITS</a></li>
        <li><a href="/party" class = "nav-link">PARTIES</a></li>
</ul>   

<div class = "slideshow">
    {% for photo in gallery %}
    <div class = "slide">
        <img class = "gallery-image" src ="{{ photo.image.url }}"/>
        <div class = "caption-container">
            {% for client in photo.client.all %}
            <div class = "client">client: {{ client.name }}
                <div class = "slide-nav"></div>
            </div>
            {% endfor %}    
            <span class = "caption">{{ photo.caption }}</span>
        </div>
    </div>
    {% endfor %}    
</div>

CSS...

.navigation-bar {
        width: 100%;
        float: right;
        margin: 0px;
        padding: 0px;
        list-style: none;
        background-color: black;}

and the Jquery...

$(document).ready(function(){
    $(".slideshow")
        .cycle({
        fx: 'scrollHorz',
        next: '.right-arrow',
        prev: '.left-arrow',
        timeout: 0,
        pager: '.slide-nav',
        pagerAnchorBuilder: function paginate(idx, el) {
                    return '<a class="bullet" href="#" >&bull;</a>'

        }
    });
});

Please include the HTML for ".homepage_container". In fact, I suggest setting up a jsFiddle jsfiddle.net — htxryan
Check this fiddle: jsfiddle.net/4zZPN/1 It doesn't look like it's hiding the nav bar. What is the exact issue? — htxryan
I can't replicate the issue on Fiddle. The issue is that on Firefox the nav bar is not showing - I'm seeing the white-header with text ("a party & event photographer") and and then the gallery image below. On Chrome and Safari, the nav bar is rendering fine. The Cycle plugin is causing the issue but I don't know why. — Suraj Kapoor
Do you have a link to a live site I can see? It will be hard to solve if I'm unable to replicate the issue. — htxryan
not at the moment, only have it locally. I'll try and deploy it soon and let you know when it's done. Thanks for your help. — Suraj Kapoor

htxryan htxryan · Accepted Answer · 2013-08-29T21:03:40

Since you didn't share any error output in your console, I can only guess that the javascript you're commenting out is throwing an exception (such that when you un-comment it, things work).

You have some syntax issues -- specifically, you've forgotten semi-colons. Try this:

$(document).ready(function(){
    $(".homepage-container")
        .cycle({
        fx: 'fade',
        speed: 'slow',
        timeout: 3000 // Removed "," (which is not required, but still good practice)
    }); // Added ";"
}); // Added ";"

NOTE: If this is not the issue, please post your full HTML (or create a jsFiddle), and the error output of your console (if any).

JQuery Cycle issue on Firefox

1 Answers