Slideshow works on page, but fails when loaded into div using jQuery

[spirit]

Hello

I have a Nivo slider that works fine on this page

Slideshow page

...but it fails when I load it into this page using jQuery's .load function

Project List

(Click on any of the project links to load the content)

I can't see what the problem is and I'm hoping someone might be able to help please?

Might it be a conflict between nivo slider and the jquery script that controls the open/close and loading the content?

Here's that code:

http://www.spiritlevel.co.uk/content...dropcontent.js

thanks

[spirit]

Still no luck getting it working but have had an idea...

The Nivo slider is initiated by this code

    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

which executes when the projects page loads - but at that point, none of the slideshows have loaded yet (slideshows only load when a projects link is clicked on) - might that be the problem? If so how would I fix it?

thanks

[spirit]

Anyone??

Just to be clear, I am importing the slideshow page (or part of it) on which the slideshow works, into the projects page using .load, after which it doesn't.

Would reall y appreciate any help getting this to work.

thanks

[centered effect]

A few guesses would be

1) To try and use the Jquery live function with the window.load() method since you are bringing the HTML in via another load on click of the h3/a. Checking the generated source, the HTML is being pulled in correctly but the pictures are not showing...
2) Try # 1 with removing the JS from the testcontent.html page. Why would this need to be run twice?
3) Did you try this without the slider effect? Just loading in the data based on the h3/a click? Did the pictures get loaded?

again, just guesses

[spirit]

A few guesses would be

1) To try and use the Jquery live function with the window.load() method since you are bringing the HTML in via another load on click of the h3/a. Checking the generated source, the HTML is being pulled in correctly but the pictures are not showing...
2) Try # 1 with removing the JS from the testcontent.html page. Why would this need to be run twice?
3) Did you try this without the slider effect? Just loading in the data based on the h3/a click? Did the pictures get loaded?

again, just guesses

Thank you for taking the time to try and help

1. I am practically a beginner at jQuery and until now, I have never even heard of the live function. I tried looking it up but it, and everything it referenced, went completely over my head I am afraid...would you mind providing a code example to show what you mean?

2. The reason I left the window load function in testcontent1.html is I want that page to also work on it's own so I can have direct links to projects. The js should not actually be running twice anyway as in the testcontent1.html page the js is placed outside the element which is being imported (#content .work)

3. Yes - importing just pictures without the slider works fine - I have updated my demo links so that project 3 now brings in just the text & images.

thanks again.

[centered effect]

1. It binds an event (like load) for future events (ala ajax) .live() – jQuery API

$(window).live('load', function() {
$('#slider').nivoslider-something-from-memory();
});

2. No, I meant taking away all JS, period. Your only loading the content/work divs, so the idea is nothing needs to run... until it is loaded in.... see above

3. Odd, for me only the 3rd link works in the demo....

[spirit]

1. In index.html, I replaced my window load js with this

    <script type="text/javascript">
    $(window).live('load', function() {
        $('#slider').nivoSlider();
    });
    </script>

- unfortunately doesn't seem to have made any difference

2. I tried removing all js from the imported file (see link2) - again, no difference.

3. Yes - I made a new testcontent file for link 3 and stripped out the slider markup so that is the only one that you would have seen images in - in links 1 and 2 you should just be seeing a big white div open with some lorem ipsum text and a small loader running in it (which is the slideshow not working)

To clarify, each link now brings in a different content file:
link1 brings in the original testcontent1.html with all js and slider markup
link2 brings in testcontent2.html with the slider markup but no js
link3 brings in testcontent3.html with all the js but no slider markup (so images work)

Like i say I am a novice, but my gut feeling is it has something to do with the fact that my original slider initialise code basically did something that said when the window loads, find the #slider div and run nivoslider. However, when the window loads, there is no #slider div and no nivoslider to run as it hasn't been imported yet.

What I might need therefore is something that changes this so that when this code runs in dropcontent.js,

    content_holder.load(this + " #content .work");

then it should go to #slider and run nivoslider...

but I'm not sure how to go about doing that ...

Is the live method you suggested a way of keeping this code running so that it waits for #slider .nivoslider to appear and then runs it when it does?

[centered effect]

Google & stackoverflow are our friends.....

Index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Project List</title>

         <link rel="shortcut icon" href="" />

        <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/sliderstyle.css" type="text/css" media="screen" />

        <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />


          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
          <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript" src="js/dropcontent.js"></script>
    </head>
    <body>
        <div id="content">
            <div class="work">
                   <h3>
                       <img src="images/arrow_open.gif" alt="&gt;" />
                       <a href="content1.html">Project 1</a>
                   </h3>
                <div class="pictures"></div>
            </div>
            <div class="work">
                   <h3>
                       <img src="images/arrow_open.gif" alt="&gt;" />
                       <a href="content2.html">Project 2</a>
                   </h3>
                <div class="pictures"></div>
            </div>
            <div class="work">
                   <h3>
                       <img src="images/arrow_open.gif" alt="&gt;" />
                       <a href="content3.html">Project 3</a>
                   </h3>
                <div class="pictures"></div>
            </div>                
        </div>
    </body>
</html> 

Content Pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <div id="ajaxContent">
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
            <div id="slider-wrapper">
                <div id="slider" class="nivoSlider">
                    <img src="http://www.sitepoint.com/forums/images/toystory.jpg" alt="" />
                    <img src="http://www.sitepoint.com/forums/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                    <img src="http://www.sitepoint.com/forums/images/walle.jpg" alt="" />
                    <img src="http://www.sitepoint.com/forums/images/nemo.jpg" alt="" title="#htmlcaption" />
                </div>
            </div>
        </div>
    </body>
</html> 

dropcontent.js:

jQuery(function($) {
    // Adds the open and close effect for anchor links showing work.
    $('.work a').click(function(event) {
        event.preventDefault();

        var parent = $(this).parents(".work");
        var content_holder = parent.children(".pictures");

        if (parent.hasClass("selected_work")) {
            close_other();
            return;
        }

        close_other();

        parent.addClass("selected_work");
        // Centered Effect updated
        content_holder.load(this + " #ajaxContent", function() {
            $(this).find('#slider').nivoSlider();
         });

        $('.selected_work img').attr("src", "http://www.sitepoint.com/forums/images/arrow_close.gif");
    });


    function close_other() {
        var selected_work = $('.selected_work');

        selected_work.children('.pictures').empty();    
        $('.selected_work img').attr("src", "http://www.sitepoint.com/forums/images/arrow_open.gif");
        selected_work.removeClass("selected_work")
    }

}); 

sorry about the live method, I thought that would work....

[spirit]

It works! What a great surprise to wake up to - thank you!

After writing my last post I had actually tried bringing the nivoslider initialise script into dropcontent.js - I got it in the right place but without the (this).find part in your code that was required to make it work...

Thank you so much for taking the time to help me out, I really appreciate it. And special thanks for finding the solution!