I have an absolute DIV with a large top css value. It begins as a hidden DIV and is revealed by slideToggle (jquery) when a button is pressed. This is fine for divs at the top of the page.
If there is a button off the bottom of the window, and needs to be scrolled down to - when it is clicked the hidden DIV appears beside the button because of its large top value - 400px or bigger. However the window goes back to top of page, and you have to scroll back down to view the content.
Can the window be stopped from jumping to top, and have the revealed DIV in the same position, yet dont have to scroll to see it?
I think the question you asked and the answer you want is very similar to this:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
Related
I'm trying to find the right jquery or js plugin to create an effect like this:
I have a long screen capture from a smartphone, is a huge image.
I want to put this image inside a scrolling div placed on top of a smartphone background image to simulate the screen.
I cannot find a way to manage the scrolling: I want to place this image in the middle of the page, and when the user scroll to the "smartphone" the windows scroll stop and my captured image placed inside the vertical scrolling div begin to scroll. At the end the page start to scroll again.
Is there something i can use?
I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.
I have a div whose height is 500px. When I scroll the page down, I would like the div to move as the page scrolls, but I would like it to stop scrolling with the page after the 250px of the div are out of the view. The rest of the page should keep scrolling but the div should act as fixed after it is 250px visible on the page.
Additionally, when I scroll up, I would like the div to remain at 250px invisible until the user has scrolled all the way to the top (with the final 250px remaining) in which case the div should suddenly become a part of the page again and scroll with it.
I am assuming that this can be done only with JavaScript, but how?
OK, using the keywords suggested by Mike Brant up in the comments, my Google search produced some good results. It appears that the functionality I was after is called sticky div, or sticky menu, sticky footer, or likewise.
By looking at the code of those javascripts I was able to understand the concept behind it. Now, it's time to play with it and adjust to my particular needs.
Let me try and make sense. I have a search page that returns lots of search results just like Google. Each of those search results have a trigger (via an icon using onmouseover) to access more info in a popup window that pops up to the right of all the search results, just like google. Here is what I want from the popup window:
No matter if I am looking at the first search result at the top of the page, or the last search result way down at the bottom of the page, I want the popup window to align itself with the top edge of the screen, regardless of where I am vertically on the page (similar to fixed)
BUT, if the popup window happens to contain more data then the vertical screen height allows, instead of the popup window creating scrollbars internally, I want the popup window to scroll right along with everything else on the page (similar to absolute)
The problem is that fixed chops off data that goes below the bottom of the visible browser window height making it inaccesible without internal scrollbars. With absolute, the popup scrolls along with all the other stuff on the page which is great and what I want, but it always appears at the very top of the page, even when I am at the bottom of the page, making it invisible to the user if the results list is very long.
Its like I am trying to combine the two methods in a way. So to summarize:
When I trigger a popup via onmouseover, the popup window should affix itself to top edge always no matter where I am vertically, but if its content is vertically taller than the screen allows, I should be able to scroll the entire page down to see the rest of it. I should not have to use internal scrollbars within the popup window like fixed.
Is this possible and how should I go about it? Thanks!
You're going to need JavaScript.
First, make set the popup divs to position: absolute. This will act like fixed in that it can go anywhere on the page easily through left and top, but it still scrolls with the page.
On link hover, make the JS detect the browser's scroll position (through window.offsetY or $(window).scrollTop() in jQuery). Apply this offset to the popup:
$('.link').on('click', function () {
$('.preview').css('top', $(window).scrollTop());
});
Remember also to tweak the other CSS properties of the popup to suit your needs - however, most of that can be done in CSS; the only JS you really need is for the top property.
Fiddle: http://jsfiddle.net/GWvNx/
I was viewing some Facebook photos. I observed this thing, when you click on an image, it opens as a modal overlay. The background is still hazily visible, the scroll pane is still there, but the scroll bar just disappears. Can anyone tell me how to do it? I mean, setting body's overflow to hidden will make the entire scroll pane disappear. Here the scrollpane is there, but the scrollbar is not..
i think what youre looking for is the osx-like scrollbar that fades out when not being used.
see Lion-like scrollbar with jQuery?