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.
Related
I am having a weird problem and cannot even diagnose what is causing it. I am working on my professor's website: jurgec.net
The problem is only on the mobile website. If you click one of the links such as "I am an undergraduate student" then scroll down a little bit, and then press back, the website doesn't fully land at the top of the page. You can see a bit of the yellow page at the bottom.
I have a feeling its because each section's height depends on the browser's screen size. And since on mobile chrome, scrolling down causes the URL bar to disappear, it changes browser's height hence ruining the size of the website's sections.
Any help is greatly appreciated!
This is because the back button returns you to the previous "state" of the website you were at. If you scroll down it's going to go to that part where you were when you made the Click.
Does $(document).ready() functions fire after a back button press?? If they do (not sure at the moment) you could do something like this.
$(document).ready(function(){
scroll(0,0)
});
Which if that works shouldn't really affect you because on initial page load you are already at (0,0) so you wouldn't notice any jumping. Not sure if this would work for you, but good luck!
I ues ajax to update the chosen photo.
if sucess,then refresh the page ,and user can see the chosen image (it will have a css border)
But when the page refresh,The position will back to the top.
I want to know how to maintain the position after reload ?
I search many websites and still can't get it .
Please guide me a bit Thank you.
EDIT:
I found the answer here!!
http://www.bkjia.com/Javascript/826924.html
In my App, I am creating the dynamic pages, in which I given the css property to page container as overflow-y:auto. all works fine,
the problem is whenever the page loads, the page height exceeds and the height of the contaienr, the scroll works, but the scroll bar placed in the end of page. so i am seeing the end of the content of the container instead of the top.
is there any way to sort this issue without using script? if so any one suggest me the correct way please?
or do I need to add any special css property in the container?
any one advice me the correct approach please?
Update
This is happening only with Chrome browser. ie and firefox behaves correctly.
try below combination
overflow-y:auto
position:relative
by adjusting position to relative your scroll bar will remains at what you want.
hope it will help for you the same way i am doing this thing its works for me
I'm building a site that uses a jQuery image gallery. You can see an example here.
For some reason, when the gallery changes images, or when you manually change images, the page height seems to be 'flickering' for want of a better word. It seems as though the page height is being increased by the new image, and then very quickly being reduced back to its original height.
Does anyone have any ideas on what's causing this and how to fix it?
As always, any help is appreciated!
Thanks in advance,
Tom
You may try this google code contain with jquery.lightbox-0.5.css
code.google.com/p/imdametadata/source/browse/trunk/guidelines/documents/web/css/jquery.lightbox-0.5.css
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 :)