I'm designing a dynamic web page that loads contents by AJAX, like the wall of facebook, first to the top last to the bottom. However, i don't want to change the scrolled content. For example, when new contents are loaded page is driven down, but i want a script to fix scrolled content on screen. How can I do this? Help me please.
Update
Okey, I've found the key function it is scrollBy(x,y); function of the window object. however now i want to use it with jquery animation how can i animate this function?
I don't really know if this is what you want, but i think u can record the event's clientY attribute or pageY as in jquery, & then using jquery or simple JS scroll down to the value that you had stored.
var w = $('#selector').width();
$('#selector').append(data).scrollTop(w);
i have not tested it but it has the basics on that :)
Related
Would someone be able to help me out recoding some of the aos.js script? Long story short, I'm trying to get aos to work within an iFrame. I'm using iframeResizer.js and I'm able send the height of the viewport from the parent page to the iFrame. I'm also able to send the scroll offset. The next bit I need to figure out is how to use this data within aos.js. So far I've managed to change anything within aos.js that was previously using the height and scroll position of the window to instead use the height and scroll position of the parent page, which looks promising. Where previously all aos animations were playing as soon as the page loaded, now they sit waiting for a scroll event to trigger. The thing is though, there's some code within aos.js that I just can't get my head around in order to rewrite it to trigger the scroll off a callback from iframeResizer.js. I've been trying to get these scroll based animations running within an iFrame for what seems like an eternity so any help would be greatly appreciated.
So, from what I can see, there's a line in aos.js with 3 event listeners the last of which is a scroll event. It looks like this though with some strange parameters in brackets that I've never seen before.
window.addEventListener("scroll", (0, u.default)(function() {}
I've tried writing my own function but I just don't get what what the (0, u.default) part is or how to use it. The whole aos.js script is way above my level of JavaScript unfortunately. If any one can advise me how I could trigger that same event listener I would very much appreciate it!
Another option I've been trying is to fake the scroll event...as in, every time the scroll position changes and gets sent from the parent into my iframe could I fake a scroll event...but I haven't had any luck. Is that even possible I wonder?
I think that's enough information for now as but if anyone is willing to help and would like more please just shout.
Thanks
I'm making a website at http://harrisonprograms.com.
The design side of it is different to most sites, it also uses php and ajax to dynamically and asynchronously add comments, blog posts etc.
I use javascript to position the footer at the bottom of the page so when the page div extends it moves the footer further down the page by using the setTimeout function. However, this causes graphical glitches when scrolling up and down the page and if I set the time lower the footer lags.
So I want to know if there is any possible way I can monitor when the div has been resized to activate this function without using setTimeout to prevent these graphical glitches.
Yes, you can use jQuery's resize event.
$(window).resize(function() {
// resize your div here
});
Thanks for all the help everyone but I found a a library that does what I need without graphical errors by Ben Alman check it out here if anyone needs help with this http://benalman.com/projects/jquery-resize-plugin/
Lets say I had a website full of pictures posted vertically. As a scroll down, I want to use javascript/jquery to load in their description (and have the previous description hide). How would I go about doing this?
Please let me know. Thanks.
An example would be this page here.
https://stackoverflow.com/about
As you scroll, many jquery events take place.
Using something like scroll to etc that you can then find the co-ordinates / location and then perform the script you require etc
Could try something like the jquery appear plugin
It fires when the element comes into view.
Could do it manually as well, when scrolling, check all the container elements holding your hidden description to see if they fall within the viewable browser and show their description elements if so.
I am displaying 10 wordpress post titles in a list followed by a "Load more" button that loads the next 10 results.
How would I automatically trigger that button (let's make it a javascript event) when reaching the end of the scrollable parent of that list?
Is it possible to detect the position of the scrollbar, or the visibility of the last list item on the screen? what is the most failprove method?
Thanks you for your tips and tricks guys!
P.S. I do not work with jQuery so no need to suggest solutions that are using it :).
You can check how far down a page/element is scrolled by listening on the scroll event listener myElm.addEventListener('scroll',scrolled,false); with a function like that defined here https://stackoverflow.com/a/4638434/1615483 (which does not actually rely on jQuery)
I have a short question for you. Could anybody help me figure out why after an Ajax request, the page scroll is changing back to the top? I think it's about JQuery. I can't find too much info on the web, so I ask for your help. This is the test page where I'm doing that. Try changing and see what is happening. Thank you so much!
www.*.ca/test/script.php
Got the answear. Thank's
I just ran into this situation with some embedded pagination and I came up with a trick for dealing with it. On page load I grab the calculated pixel height of the content div and then set that fixed height back onto itself. This keeps the div at a fixed size while the page contents are destroyed and replaced.
var height=$('#content').height();
$('#content').height(height);
Or more briefly:
$('#content').height($('#content').height());
Because the page momentarily becomes shorter, so the scrolling position cannot remain where it was or else the page would be scrolled past its contents.