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
});
Related
Can't get this plugin to work for me: https://github.com/morr/jquery.appear
Using Ajax to refer to plugin from this CDN: http://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js
What am I doing wrong? I want an alert when div id #footer is in viewport.
$.ajax({
url: '//cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js',
dataType: 'script',
cache: true,
success: function() {
$("#footer").appear(function() {
alert('I see a footer!');
});
}
});
Using the demo page of the plugin I achieved to make it work.
First make the footer element able to fire 'appear' event when it becomes visible on the viewport:
$("#footer").appear();
Then listen for the event like this:
$("body").on("appear", "#footer", function() {
// Do something...
});
Code snippet:
$.ajax({
url: '//cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js',
dataType: 'script',
cache: true,
success: function() {
$("#footer").appear();
$("body").on("appear", "#footer", function() {
alert('I see a footer!');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height: 300px">Scroll down</div>
<div id="footer">Footer</div>
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);
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
});
});
I'm trying to use scrolltop method and event.preventDefault is not working properly.
What I'm experiencing is that the page scrolls UP first then scrolls down.
It seems that The onclick causes the page to resubmit or something... (ajax post??)
I have following code
button (trigger)
<a id="nextset" class='nextbtn' >Next Step</a>
event
jQuery('#nextset').click(function (event) {
event.preventDefault();
movenext('set');
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 2000);
});
functions
function getfav(obj) {
var myParams = "{ 'proattr':'" + obj + "'}";
jQuery.ajax({
type: "POST",
url: "project.aspx/getproject",
data: myParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () { jQuery('#wait').show(); },
complete: function () { jQuery('#wait').hide(); },
success: function (msg) {
GetProjectPic(msg.d, obj); //creates DOM and insert in div
Initbtns();// dynamic btns initialization
}
});
}
function movenext(obj) {
//other codes to hide/show DOM
getfav(nextobj);
}
If I add return faulse; in onclick event, the button doesn't work.
Any idea what's causing the scrolling to the top?
UPDATE:
It was caused by code block inside movenext function.
jQuery('[id^="favdiv"]').empty();
nothing to do with event.preventDefault.
The strange thing is that the screen scrolls much more than hidden div height ("favdiv") which causes up and down screen effect. I'm not sure how to prevent it...
UPDATE2
I searched jquery empty method and found this.
jquery "empty" changes the scrollbar
You can avoid the default behaviour by using the following snippet:
<a id="nextset" class="nextbtn" href="javascript:void(0);">Next Step</a>
Did you by any chance try putting "return false" at the end of your click event?
jQuery('#nextset').click(function (event) {
movenext('set');
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 2000);
event.preventDefault();
return false;
});
I end up writing something like this. still it goes up a bit but at least page doesn't jump
jQuery('#favdiv' + obj).fadeOut('fast', function () {
jQuery('#favdiv' + obj).remove();
});
setTimeout(function () {
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 1500);
}, 500);
I would like to simulate an animation jQTouch in this function:
$(function(){
$('#form').submit( function(e){
$.get('/result.php', function(data) {
document.getElementById("result").innerHTML=data;
});
CODE?!?
});
The function retrieves the data and writes it to the div "result", I would that after writing data, make an animation '.slideup' from #home to #result.
You can use jQT.goTo(Page, Animation) to transit to another "page" with a specified animation, e.g.
$('#form').submit(function(e) {
$.get('/result.php', function(data) {
$("result").html(data);
jQT.goTo('#result', 'slideup');
});
});
Here's the documentation: https://github.com/senchalabs/jQTouch/wiki/functions.