First of all, I really don't know much about JavaScript or jQuery, so sorry in advance for any stupid thing I could say :)
I have a div with a set height of which the content loads on page load using AJAX. My objective is to have it scrolled to the bottom on page load.
I've found a few answers on how to do this online, but none of these worked for a div of which the content is set with jQuery :/
Any ideas ?
OK ! Was going to upload my code when I found what the problem was :
The said div was inside another div, on which I had set height: 750px and overflow: auto, which worked perfectly as it was, but made jQuery unable to determine the height and scroll overflow of the child div. Fixed it, all works now !
Thanks for your time :)
You could add the below code after the ready function:
$('html, body').animate({scrollTop: $("#yourid").offset().top }, 1000);
Related
Firstly, skrollr has proved very helpful, thanks to those responsible.
I have tried to add the skrollr-body tag around all elements apart from the fixed background, which I think I have done correctly, so it works on mobile, but it is cropping the top of the page and i can't tell why.
Page without Skrollr-body (how I want it to look) - http://olivershilling.co.uk/demo.html
Page with Skrollr-body (causing the problem) - http://olivershilling.co.uk/demo-2.html
Any ideas? I may just disable it for small screens otherwise.
Thanks a lot
I've had the same issue, the way I got around it is by setting the #skrollr-body element height to 100% using javascript after the DOM is loaded.
Here's my code:
$(document).ready(function(){
$("#skrollr-body").css("height", "100%");
});
Hope this works for you.
I've been searching for this for quite a long time:
I want the users to scroll down immediately on the page, so that the header image is hidden (because of the scroll down). The reason being too small displays.
It should however be visible on the front page, as well if you scroll up too much, to be some kind of a goodie.
Currently i'm using anchored links on all of the subpages, like contact/#menu. But that does neither look good, nor is it SEO friendly.
Is there some way to scroll down with pure css? I don't wanna use js if not neccessary (though I would know how to do it that way).
Margin and padding on body or html won't help me there I'm afraid.
The website I'm talking about btw is http://www.poessnitzberg.at/kontakt/#menu
Thanks!
Let me start off by giving you an easy jQuery way of doing it:
$('html, body').animate({
scrollTop: $("#menu").offset().top
},1000);
You could combine this with $(window).load or $(document).ready to immediately fire once the page loads or the document is ready.
As for pure CSS, I do not know of any really viable ways. If there are, I think they'd be more complicated then using this piece of jQuery.
I have a page in which I have a fixed footer that scrolls with the page, however on the page there is a Javascript slideshow, as the slideshow loads in a new image, it loads it over the fixed footer.
The page in question is this one: http://mysterybox.co/signalnoise/. Scroll down to see problem.
Screenshot of the offending effect:
Can anyone give me any advice? I thought I may be able to fix it with a z-index but that didn't work.
add z-index: 2; to #footerwidth
EDIT:
same goes for #headerwidth
EDIT2:
per ThinkingStiff's suggestion, you may also consider replacing the margin-bottom attribute of the footer with a padding-bottom attribute.
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.
I have a problem with adding dynamic content to a webpage.
The javascript loads some html and swap the divholder's innerhtml. Basically is a
$("#mydiv").load("some.html");
My problem is that when you get a huge page, it created a huge scrollbar, then, after swaping the html for a smaller html, the scrollbars aren't being resized.
eg: http://jode.com.br/joe/scrollbarerror.png
Using firebug, you can see that the highlighted content is the window but the scrollheight is just a lot bigger than the contents of it
It is happening on firefox and ie, but not in chrome. Using chrome, hte scrollbars are updated to only scroll content
any help?
My solution right now is create a div that holds all the content. The div's scrollbar is being updated to the right size when the content changes.
THen I used the method:
html, body {
height: 100%;
}
#MainContentHolder {
height: 100%;
}
with this, the maincontentholder got the right scrollbars and is being updated correctly.
many thanks who tried to help!
Jonathan
I guess the bug is because of your height:100% on the body tag.
Why do you need it ? You shouldn't do that :) Try removing it and tell us if the bug's still here.