Auto Slider / Scroller to display dynamic content

Question

Can any one tell me how can i implement a auto slider/scroller in my web page. The slider should show dynamic data from a database. (Ex : Hot jobs tab in the plipl.com site's home page (www.plipl.com) . Is there any easy way to do this with jQuery ?

Answer 1

yes. this is easy. grab your data from the database. lets say its a list of HotJob objects, each object containing some String fields. Convert each object to a JSON object (which is a hash). Make a list of these JSON objects. use your web framework X to print out the JSON.

Use jquery's getJSON to grab the JSON object. Iterate over each HotJob and write out the information.

Google for "jquery json scroller" and find something that supports JSON out of the box. this does: http://www.logicbox.net/jquery/simplyscroll/flickr.html sure, its images, but you can modify it to support text.

Answer 2

jCarousel is a jQuery carousel plugin that supports dynamic content. Although there are no JSON-driven examples on his website, it is easy enough to implement using jQuery's default AJAX functionality.

This is the most robust and customizable carousel I have found thus far for jQuery.

Answer 3

Or if you don't want to use plugins you could use jQuery's AJAX functionality to load in the data, have a div with overflow:hidden and populate it with the data loaded in, only showing a section at a time.

You could then use the setInterval() function to change the $("#container").scrollTop(xx) to move the next set of information into view at a set interval. You could scroll it in or have it popup suddenly, up to you but fairly easy using jQuery.

Answer 4

The following is nothing special, just quickly tried it. There's 2 div's that it continously switches between, hopefully give you a head start. You could use the same idea and load content into div's via AJAX.

Code snippet:

css:

div{width:100px;height:100px;}
#container{overflow:hidden;border:1px solid black;}
#left{background:red;float:left;}
#right{background:green;float:right;}

jScript:

$(function() {
    //Call scrollContent function every 3secs
var timerUp = setInterval(scrollContent, 3000);

function scrollContent(){
    //Toggle top between 100 and 0
    var top = $("#container").scrollTop() == 0 ? 100 : 0;
    $("#container").scrollTop(top);
}

});

markup:

<div id="container">
        <div id="left">
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
            </ul>
        </div>
        <div id="right">
            <ul>
                <li>Five</li>
                <li>Six</li>
                <li>Seven</li>
                <li>Eight</li>
            </ul>
        </div>
    </div>