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
addRowfunction. 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
HTML
Script
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:
CSS (same as before)
HTML
Script