SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still no luck getting it working but have had an idea...

    The Nivo slider is initiated by this code
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    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.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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....

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. In index.html, I replaced my window load js with this

    Code:
        <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,

    Code:
        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?

  8. #8
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Google & stackoverflow are our friends.....

    Index.html:
    PHP Code:
    <!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:
    PHP Code:
    <!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 laudantiumtotam rem aperiameaque 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:
    PHP Code:
    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....

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •