Modifying a vertical jquery content box to scroll horizontally
I have been looking for a scrolling content box that loads the content (in my case, thumbnails) dynamically via ajax (instead of embedding it in the initial html). I found this one: http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/ that does exactly what I want, except it scrolls vertically. I really need a horizontal scroll. I only know enough javascript to be dangerous so all the tweaks I've tried to modify it haven't made it work.
I like this code because it just uses the jquery library, not an additional js addons.
$('document').ready(function(){
updatestatus();
scrollalert();
});
function updatestatus(){
//Show number of loaded items
var totalItems=$('#content p').length;
$('#status').text('Loaded '+totalItems+' Items');
}
function scrollalert(){
var scrolltop=$('#scrollbox').attr('scrollTop');
var scrollheight=$('#scrollbox').attr('scrollHeight');
var windowheight=$('#scrollbox').attr('clientHeight');
var scrolloffset=20;
if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
{
//fetch new items
$('#status').text(开发者_StackOverflow中文版'Loading more items...');
$.get('new-items.html', '', function(newitems){
$('#content').append(newitems);
updatestatus();
});
}
setTimeout('scrollalert();', 1500);
}
Any suggestions for modifying it to scroll horizontally?
The idea is to make the overflow hidden on y axxis (so the scroll is horizontal, not vertical), and then rearange the items in the <div id="content">
with float:left
and proper width/height so that they pop-up in a horizontal fashion.
Keep old css rules and add those:
#scrollbox {
overflow: auto;
overflow-y: hidden;
}
#content p {
width: 20px;
float: left;
margin-left: 20px;
}
You will also need to modify the condition if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
so that it triggers when horizontal scroll is on the right edge.
精彩评论