Basically, I have a scrolling div. I want the div to scroll obviously, but once scrolled all the way to the bottom, if the user continues to scroll, I don't want the page itself to scroll. Basically, when the mouse is in the div, I want the scrolling to be only within the div, and then when the mouse is outside of the div i want the page to scroll. Is there any way of doing this? I'm using jquery for other aspects of the site as well so I have that if it helps.
Well, the only thing i could see happening is that the focus is not set to the div when you move into it, and then loose focus when you move out.
Example JavaScript:
<div onMouseOver="JavaScript:this.focus();" onMouseOut="JavaScript:this.blur();">
Also, be sure that your CSS Class for your Div has the following, in this specific order:
overflow: auto;
overflow-y: scroll;
Related
I am using a fixed overlay div on my page to show additional content when the user clicks on a certain button.
The trouble with this is that on iOS, the content behind tends to scroll rather than the overlay div.
The only effective solution I have found to this is to use jQuery to alter the class of and toggle its position to fixed (and overflow: hidden) whenever the overlay div is selected to appear (and then back again on closing the overlay). E.g.
$(document).ready(function(){
$("#filter-btn, .close-filter").click(function(){
$("body").toggleClass("fix");
});
});
Whilst this works, it also causes the content within the body itself to move up to the top of the page when changing to 'fixed' to the top which is monentarily visible whilst the fixed overlay div fades in.
Is there anyway I can prevent this from happening?
This can generally be solved by setting body height to 100% and overflow:hidden within the css rule for class applied to the body
I am trying to prevent my page from moving when i open a modal which is caused from the scrollbar. Originally the page would keep moving several pixels to the left and not move back each time i opened a new modal. I had to apply this css to solve that problem:
padding-right:0px !important;
margin-right:0px !important;
But now even though the page shifts back, when either the login modal or register modal is open and you press 'Sign up here', or 'Sign in here' from the loginmodal or registermodal, the scrollbar hides and then reappears which shifts the page before moving back to its original position. I experimented briefly and added overflow:scroll to the element, i didn't like the idea of the two scroll bars when the page is below a certain resolution.
So my question is:
How do i stop the scrollbar from hiding and reappearing when opening a modal when another model is already open which causes the page to shift left then back to its original position.
Here is my JSFiddle:
https://jsfiddle.net/w07dx8jk/
EDIT:
Would it be possible to have a blank scrollbar visible when a modal is open to stop it from disappearing which causes the shifting or is there a better method?
Usually, you simply leave the scrollbar visible, so it won't flicker:
html {overflow-y: scroll;}
You need to apply overflow-y: scroll !important to body to prevent the page move, !important is required because Bootstrap applies some of its own CSS to body and you need to override them.
And then apply overflow: hidden to .modal to prevent the double scrollbars.
Demo: https://jsfiddle.net/alan0xd7/w07dx8jk/1/
I would like to know how can I change attributes of a div onClick.
To make myself clear, I want to know how can I make a div that looks like the one on the Mozilla Developer Network site.
When you click the "Mozilla" button, the banner slides down to reveal behind it a hidden div.
I know this hiding thing is based on the z-index of the overlapping slide and the absolute position.
My question is how can I make the div slide position (e.g. top: 0px to top: 150px) and stay there when removing finger from mouse.
Thank you folks.
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.
I have a "loading" div with a GIF, that shows when the page starts to unLoad. It is position:fixed by CSS, and suposed to remain centered. The problem is that depending on where you are in the page when you trigger the event that shows the DIV, the position where it appears changes, the closest to the end of the page you are, more it moves. BUT it doesnt appear if you scroll down, it is like hidden in a non-visible part of the browser =/.
http://img69.imageshack.us/img69/4580/ss1nn.jpg
http://img513.imageshack.us/img513/7783/ss2df.jpg
Hope it is clear enough.
Thanks in advance!
inorder to center an element -- do not use position:fixed use position:relative and add margin: 0 auto; the 0 is the margin-top which you can give as per your needs.