Inline Javascript causing jQuery Cycle plugin to stop

Question

I am new to jquery and Javascript and I am running into a problem which I hope somebody here will be able to solve. I have setup a jquery Cycle plugin to display some content in a div. Now I also have certain links load some different content in another div. Upon load, the cycle works fine, but when I click any of the links and load the content in the other div, this cycle stops working. Please do note that I am using an inline javascript in the hrefs of the links. And that is creating the conflict. My code:

<script type="text/javascript">     
   $(document).ready(function() {
   $(".paras").cycle({
        fx: 'fade',
        speed: 200,
        timeout: 1000,
        next:   '.tnext',
        prev:   '.tprev',
        cleartype: '1'
        })

        content(1); /* To load content 1 on page load */

    });

    function content(i){
        if (i == 1) {/* Code to load content in BIG DIV from external HTML */}
        if (i == 2) {/* Code to load content in BIG DIV from external HTML */}
        if (i == 3) {/* Code to load content in BIG DIV from external HTML */}
    }
</script>

<ul>
   <li><a class="home" href="javascript:content(1)">Home</a></li>
   <li><a class="work" href="javascript:content(2)">Work</a></li>
   <li><a class="about" href="javascript:content(3)">About</a></li>
</ul>

<div>
/* This is the big div */
</div>

<div class="paras">
/* This is the small div. Content loaded using jquery cycle. Stops cycling when content loaded in BIG DIV  */
</div>

Can anyone suggest how to keep Cycle working while also keeping the inline javascript intact? Or do you suggest something better.

Answer 1

Not sure without knowing more about the Cycle plugin, but try changing the three hrefs to "#", then move the inline action to an onclick, like so:

<script type="text/javascript"> 

$(document).ready(function() {
    $(".paras").cycle({
        fx: 'fade',
        speed: 200,
        timeout: 1000,
        next:   '.tnext',
        prev:   '.tprev',
        cleartype: '1'
    });

    content(1); /* To load content 1 on page load */

});

function content(i){
    if (i == 1) {/* Code to load content in BIG DIV from external HTML */}
    if (i == 2) {/* Code to load content in BIG DIV from external HTML */}
    if (i == 3) {/* Code to load content in BIG DIV from external HTML */}
    return false;
}
</script>

<ul>
   <li><a class="home" href="#" onclick="return content(1);">Home</a></li>
   <li><a class="work" href="#" onclick="return content(2);">Work</a></li>
   <li><a class="about" href="#" onclick="return content(3);">About</a></li>
</ul>

<div>
    /* This is the big div */
</div>

<div class="paras">
    /* This is the small div. Content loaded using jquery cycle. Stops cycling when    content loaded in BIG DIV  */
</div>

Even better would be to kill the onclicks and apply the listener dynamically; you already have unique classnames, so you don't need the 1,2,3. Even though that is not relevant to your problem, here is how to do it that way:

<script type="text/javascript"> 

$(document).ready(function() {
    $("#paras").cycle({
        fx: 'fade',
        speed: 200,
        timeout: 1000,
        next:   '.tnext',
        prev:   '.tprev',
        cleartype: '1'
    });

    content("home"); /* To load content 1 on page load */


    $('#contentlist li').click(function() {
        content(this.attr('id'));
    });

});


function content(elId){

    if (elId == 'home') {/* Code to load content in BIG DIV from external HTML */}
    else if (elId == 'work') {/* Code to load content in BIG DIV from external HTML */}
    else if (elId == 'about') {/* Code to load content in BIG DIV from external HTML */}
    return false;
}
</script>

<ul id="contentlist">
   <li><a id="home" href="#">Home</a></li>
   <li><a id="work" href="#">Work</a></li>
   <li><a id="about" href="#">About</a></li>
</ul>

<div>
    /* This is the big div */
</div>

<div id="paras">
    /* This is the small div. Content loaded using jquery cycle. Stops cycling when    content loaded in BIG DIV  */
</div>

I also updated the classNames to IDs. This is not necessary, but you are effectively using classes as unique identifiers anyway, and that is what an ID is for; it is also more efficient to select using it.

Finally, I suggest you also consider replacing the "#" with URLs for non-JavaScript visitors (esp. search engines).