jquery content slider
I am trying to work on a content slider with effects similar to this website:Monitter
Unlike this website, I don't want to include any real time twitter updates. I just want the content in div's to be loaded in a similar fashion.
I have already looked at various jquery plugins having vertical content slider, but none of them seem to have the desired effect.
Lastly, I am not looking for entire code, but just some little help so that I can start working in the right direction.
Edit: There needs to be a time delay between successive div's so that the user can go through content in each div.
Edit: I think I should clarify with some code sample this time. I apologize for not geeting to this earlier: Here's the sample data in jsondata.php file
<?php
$json = '{
"userdata": [
{
"first":"James",
"last":"Watt",
"email":"jw@abc.edu",
"city":"xyz"
},
{
"first":"Isaac",
"last":"Newton",
"email":"int@def.edu",
"city":"xyz"
},
{
"first":"Albert",
"last":"Einstein",
"email":"ae@ghi.edu",
"city":"xyz"
}
]
}';
echo $json;
?>
Following is the index.html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#loaduserdata").click(function(){
$("#info").empty();
$.getJSON(
"jsondata.php",
function(data){
$.each(data.userdata, function(i,user){
var html = '<div class="entry">';
html开发者_如何学运维 += "<p>"+user.first+"</p>";
html += "<p>"+user.last+"</p>";
html += "<p>"+user.email+"</p>";
html += "<p>"+user.city+"</p>";
html += '</div>';
$(html).appendTo('#info');
});
});
});
});
</script>
</head>
<body>
<a href="#" id="loaduserdata">User Data</a>
<div id="info"></div>
</body>
</html>
Now, clicking on user data will quickly populate all the data in the div with class entry. What I am looking for is populating the data in a style similar to the monitter website, that is, the data should populate slowly with a time delay. This is some sample code. Kindly correct me if I am heading in the wrong direction.
This is how I would do it (demo here)... The actual code is contained in the addRow function. I added a simple "insert date" into the content, you can use ajax to retrieve whatever content.
The rest of the code is for demonstration purposes, mostly because I didn't like the div's going off the screen, so I added a max # of div's per column.
CSS
#wrapper { position: relative; left: 0; top: 0; width: 600px; margin: 0 auto; text-align: center; }
.column { position: relative; float: left; padding: 0; width: 50%; }
.column div { background: #eee; border: #333 1px solid; margin: 5px; padding: 5px; }
.column .top { background: #ccc; }
.newrow { display: none; }
HTML
<input type="button" rel="col1" style="margin: 5px; float: right;" value="Add row to right" />
<input type="button" rel="col0" style="margin: 5px; float: right;" value="Add row to left" />
<input type="button" rel="both" style="margin: 5px; float: right;" value="Add row to both" />
<div id="wrapper">
<div id="col0" class="column"><div class="top">Content added below</div></div>
<div id="col1" class="column"><div class="top">Content added below</div></div>
</div>
Script
$(document).ready(function(){
var maxRows = 10;
$(':button').click(function(){
var el = $(this).attr('rel');
if ( el=="both" ) { el="col1"; addRow("col0"); }
addRow(el);
// remove extra rows
$('#wrapper').find('.column').each(function(){
$(this).find('.row:gt(' + maxRows + ')').remove();
})
});
})
function addRow(el){
// get whatever contents here
var content = (new Date).toString();
// add new row
$('#'+el).find('.top').after('<div class="newrow row">' + content + '</div>')
$('.newrow').fadeIn('slow',function(){ $(this).removeClass('newrow') });
}
Update: Ok, I see you didn't ask for code, but I but this bit together... it should be more along the lines of what you want.
Assuming this json structure:
({
"news": [
{ "id" : "0010", "date" : "Sun Dec 20 2009 12:10:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 10" },
{ "id" : "0009", "date" : "Sun Dec 20 2009 12:09:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 9" },
{ "id" : "0008", "date" : "Sun Dec 20 2009 12:08:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 8" },
{ "id" : "0007", "date" : "Sun Dec 20 2009 12:07:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 7" },
{ "id" : "0006", "date" : "Sun Dec 20 2009 12:06:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 6" },
{ "id" : "0005", "date" : "Sun Dec 20 2009 12:05:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 5" },
{ "id" : "0004", "date" : "Sun Dec 20 2009 12:04:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 4" },
{ "id" : "0003", "date" : "Sun Dec 20 2009 12:03:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 3" },
{ "id" : "0002", "date" : "Sun Dec 20 2009 12:02:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 2" },
{ "id" : "0001", "date" : "Sun Dec 19 2009 12:01:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 1" }
]
})
CSS (same as before)
HTML
<div id="wrapper">
<div class="column"><div class="top">Content added below</div></div>
</div>
Script
$(document).ready(function(){
initData();
})
function initData(){
var o = {
maxRows: 10, // max # of rows to show
updateJSON : 15, // update data every 30 seconds
updateScreen : 1, // update screen every 2 seconds with data
count: 0, // count # of cycles of setTimeout
lastID: -1, // last news ID
debug: false // debug
};
var cycle;
if (o.debug) $('#wrapper').prepend('<div id="debug"></div>')
getData( [] );
function addRow(content){
// update data if this function has cycled 30/2 times - so we only use one settimeout function
o.count++;
if ( o.debug ) $('#debug').html('seconds passed = ' + o.count*o.updateScreen + ', content.length = ' + content.length);
if ( o.count >= o.updateJSON/o.updateScreen ) {
o.count = 0;
getData(content);
}
if ( content.length > 0) {
// remove last array element
var n = content.pop();
// if content length is zero, the set last ID
if (content.length === 0) o.lastID = n[0];
// add new row, rel contains the id - not used by the script, but there if you need it.
$('#wrapper').find('.top').after('<div class="newrow row" rel="' + n[0] + '">' + n[2] + '<br />' + n[1] + '</div>');
$('.newrow').fadeIn('slow', function(){ $(this).removeClass('newrow') });
}
$('#wrapper').find('.row:gt(' + (o.maxRows-1) + ')').remove();
cycle = setTimeout( function(){ addRow(content) } , o.updateScreen * 1000 );
}
function getData(content){
var tmparray = [];
var lastIDfound = false;
$.ajax({
type: "GET",
url: "newsitems.js",
dataType: "json",
success: function(data) {
$.each(data.news, function(news){
if (this.id == o.lastID) lastIDfound = true;
if (!lastIDfound){
// return month day year time (assuming US notation)
var newsDate = this.date.split(' ').slice(1,5);
// get today's month day year
var today = new Date().toString().split(' ').slice(1,4).join(' ');
// show only the time if the date is today
var newsTime = (newsDate.slice(0,3).join(' ') == today ) ? 'posted at ' + newsDate[3] : 'from ' + newsDate.join(' ');
tmparray.push([ this.id, newsTime, this.title ]);
}
});
// if tmparray length is zero, then return
if (tmparray.length === 0) return;
// if last item shown hasn't changed, then return with no new data
if (tmparray[0][0] == o.lastID) return;
// set last ID
if (o.lastID == -1) o.lastID = tmparray[0][0];
clearTimeout(cycle);
if (content.length === 0) {
addRow( tmparray );
} else {
addRow( content.concat( tmparray ) );
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
if (!$('#error').length) $("#wrapper").prepend('<div id="error"></div>');
$('#error').html(errorThrown + '<br />');
}
})
}
}
I'm going to assume that you are loading your data with AJAX (you get the content of the new DIV via AJAX). You could then do something like this:
edit: based on your comment you could use something like this. I haven't tested the code, but the logic is there (just hope I didn't mess something up:)):
var lastAddedTime = null;
function addNewDiv ( response ) {
var timeNow = new Date ().getTime ();
if ( lastAdded === null || ( timeNow - lastAddedTime ) > 5000 ) {
// depending on what response is build your DIV
// it could be HTML or JSON from which you generate HTML
var newDiv = $( response );
newDiv.css ( 'display', 'none' );
newDiv.prependTo ( $( 'selector for your container' ) );
newDiv.fadeIn ( 'slow' );
lastAddedTime = timeNow;
} else {
setTimeout ( function () { addNewDiv ( response ); }, 5001 );
}
}
$.get (
'get_data.php',
{
// your parameters
},
function ( response ) {
addNewDiv ( response );
}
);
5000 milliseconds is 5 seconds, adjust that if you want shorter intervals for updating
加载中,请稍侯......
精彩评论