Develop Reference

Load data on scrolling right

I created a page in which to view data we scroll on right instead of down. Now I tired to load data while scrolling instead of loading the entire page at first. I can work around if it is down scroll. This is the code that I'm working on:
$(document).ready(function() {
var win = $(window);
win.scroll(function() {
if ($(document).height() - win.height() == win.scrollTop())
{
$('#loading').show();
$.ajax({
url: 'load.php',
dataType: 'html',
success: function(html) {
$('#data').append(html);
$('#loading').hide();
}
});
}
});
});
I referred and worked on this code from here. Now i need to load data when I'm scrolling right. I tried taking the difference in width but it is not working. Is there any other work around ?

may be something like this ?
$(document).ready(function() {
$('ul').scroll(function(event) {
if (this.scrollWidth - this.clientWidth - this.scrollLeft < 50) {
$(this).append('<li>data 1</li><li>data 2</li><li>data 3</li><li>data 4</li>')
}
});
});

scrollTop works only partially - it stops after 1-2 cm

For some reason .scrollTop works only partially. It starts scrolling and stops after 1-2 cm. It's a large page and container #topdiv is located at the top part of the page. All other functions - .prepend .hide .close works fine here. Console doesn't show any errors. I tried .scrollTo instead of .scrollTop - the same result.
jQuery(function ($) {
$(document).ready(function () {
$(document).on('submit', '#saverepost', function (e) {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "/script.php",
data: str,
beforeSend: function () {
$('#message').show();
$("#message").html('<img src="/loading.gif" />');
},
success: function (msg) {
$.lbox.close();
$("#message").hide();
$("#posts").prepend(msg);
$("#topdiv").scrollTop(0);
}
});
return false;
});
})
});

If you want to scroll the actual window you don't target a div
$("#topdiv").scrollTop(0);
If you want to scroll the entire page do this
$('html,body').scrollTop(0);

how to scroll to a specific div when a radio button is clicked/changed

I am trying to scroll the page to "#Table_Details" using the scroll plug in. But i can't seem to get it working.
When i click/change the radio(.ModemsSelect) button the page scrolls to the location of the radio button i just clicked instead of scrolling down the page where my table("#table_Details") is located. I am not sure if i am doing this right or what is going on.
$(".ModemsSelect,.ServicesSelect").change(function (e) {
var data = $("#" + this.value).serialize();
var request = $.ajax({
url: "classes/sCart.php?action=add",
type: "POST",
data: data,
dataType: "html",
radioButton: $(this).attr('class')
});
request.success(function (data) {
//$(".in_cart").html("");//clear last item selected
console.log("extra item added to cart");
refreshCart();
if (this.radioButton == "ModemsSelect") {
$.scrollTo($('#Table_Details'));
$("#icon_check_modem").html("");
$("#icon_check_modem").html("<img src=\"../img/check_icon.png\">");
$('.Modem_buttonNext').button("enable");
} else if (this.radioButton == "ServicesSelect") {
$("#icon_check_Installtype").html("");
$("#icon_check_Installtype").html("<img src=\"../img/check_icon.png\">");
$(".install_buttonNext").button("enable");
} else {
}
});
});
Any help is appreciated.
thank you.

working fiddle http://jsfiddle.net/ePstY/
You must replace this:
$.scrollTo($('#Table_Details'));
with this:
$('html, body').animate({scrollTop:$('#Table_Details').position().top}, 'slow');

Try doing it this
$('html, body').animate({
scrollTop: $("#Table_Details").offset().top
}, 2000);
Instead of this:
$.scrollTo($('#Table_Details'));
I got the code from this article: SMOOTHLY SCROLL TO AN ELEMENT WITHOUT A JQUERY PLUGIN
Here's a working fiddle

E prevent default not working

This is the code I am working with: http://jsfiddle.net/qKyNL/12/
$('a').click(function(){
event.preventDefault();
var number = $(this).attr('href');
alert(number);
// AJAX
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
// Fadeout the existing content
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
// Scroll to top
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
// TO DO: Set number as active class
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
// Fade in content
$('#content').fadeTo(500, 1);
}
});
});
I am trying to create a degradable pagination, using Jquery but the problem is that the "e prevent default" doesn't seem to trigger and instead it still follows the link. Could anyone please show me how I can have this link degradable so if Jquery is disabled it still works.

You're not passing in the event object. Try this:
$('a').click(function(event){ // <-- notice 'event' passed to handler
event.preventDefault();

Should be
$('a').click(function(event){
on first line. Note that event is passed as an argument to anonymous function.

No event passing in callback.
Try
$('a').click(function(event){
------------------------------^
event.preventDefault();
}

As the other answers have said you need to pass the event variable to the callback
$('a').click(function(event) {
event.preventDefault();
});
You also need to wrap all of your code in to the ready function jQuery so that the event listeners are assigned only when jQuery is ready to handle them.
$(document).ready(function() {
$('a').click(function(event) {
event.preventDefault();
// the rest of your code
});
});

jQuery force/trick .scroll() to bubble

Is it possible to force or trick the .scroll() event to bubble so I can catch the user scrolling a <div> with overflow: auto; in ajax loaded content? I am loading some HTML via $.ajax and need some way to detect as they are scrolling. According to the W3C scroll should not bubble which is why I assume jQuery doesn't do it. However I am able to catch the $(window).on('scroll', function() { console.log('scrolling'); });
$(window).load(function() {
$.ajax({
url: "/data.html",
dataType: "html",
success: function(data) {
$("#container").html(data);
}
});
});
$(document).ready(function() {
$('#container').on('scroll', '#content', function () {
console.log('scrolling');
});
});
The $('#container') is the container where the loaded $.ajax data is set and the $('#content') is from the loaded HTML from the $.ajax request

The answer is to add a wrapper element via jQuery and then you can attach a scroll event.
$("#container").wrap('<div id="wrapper"></div>');
$("#wrapper").on('scroll', function() {
// do stuff
});