I've made a modal, and I am hiding the scroll bar on the body so the user can only scroll the modal content.
Issue is that when I set overflow-y:hidden the body scrolls to top, but I want the page position to be preserved.
<body>
Long content
</body>
scrollY is at 1000
<body style="overflow-y:hidden">
Long content
</body>
scrollY goes to 0
I've toyed with the idea of storing the current scrollY position and scrolling back there once overflow-y is revoked. But its not the effect I desired.
Does anyone else have a better solution?
Assuming this is a true modal, and that you are preventing further actions to the main content until it is actioned (closed), why not add your content to a div and place a mask over the div, which would prevent interactions until it it closed. E.g.
<body>
<div class='content'>
Long content
</div>
<div class="modal-mask">
<div class="modal">Modal content</div>
</div>
</body>
Give the modal mask absolute positioning and covering the screen, then position your modal where appropriate.
Related
I'm trying to fix a div but only when I'm scrolling down.
I have this template :
<div>
<div class="header">Title</div> // A header that will not be fixed
<div class="sticky">Navbar</div> // A div that will be fixed when scrolling down
<div class="content">...</div> // The rest of the page
</div>
So the idea is that, when opening the page I have the 3 div displayed in the same order as the code (so header then sticky then content).
And when I scroll down, the sticky is fixed while I navigate the content.
I've tried to put a listener on scroll but I don't see how I can put a {position: fixed} only when scrolled and nothing when I return to initial position.
I am using this slimscroll library to display a better looking scroll bar for some divs on my page. I noticed that if I set the height of my scrollbar class to a fixed value (i.e. '500px', '80vh' etc.) then if the content does not overflow, the scrollbar will not be present and if it does, then it will appear. It works great.
However this solution doesn't work well because I need the div that encompasses the scrollbar to take up 100% of the parent div. However when I do that, the scrollbar will appear even if the content does not overflow the container.
Does anyone know a solution where I can set the height of the scrollbar to be 100% and have it behave so that it only appear when content overflows the parent container?
HTML
<div class="s12 m12 l12 row-90 m-b-0 rail-row">
<div class="card-scroll m-r-10">
<ul class="top-list">
///adds a series of divs based on data from back end
{{#each ins in selectedInstruction}}
<li>{{> Print_job printJobArgs ins true true}}</li>
{{/each}}
</ul>
</div>
</div>
JS
$('.card-scroll').slimScroll({
size: '8px',
height: '100%',
});
$(".slimScrollBar").hide()
When the page gets loaded, slimscroll encompasses the div with the class 'card-scroll' in a div and adds html to make its scrollbar appear.
I am using .load() to refresh the contents of a div every 5 seconds.
When the div updates, the whole page will scroll back up to the top. Is there any way to prevent this from happening?
<body>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<div main-title>Title</div>
<paper-button class="custom white" raised>Log Out</paper-button>
</app-toolbar>
</app-header>
<div id="loadcards"></div>
</body>
$("#loadcards").load("getGraph.php");
$(document).ready(function(){
setInterval(function(){
$("#loadcards").load("getGraph.php");
},5000);
});
Your page scrolls back to the top when you reload because your browser very briefly does not have any content for your div. This causes the content of your page to become too small to require a scrollbar, but when the content is reapplied it might grow large enough to require a scrollbar yet again.
Option 1
You could set the Y offset to the top of your page everytime before the reload is called, then scroll back to that offset whenever the page finishes reloading (or at least as far down as possible if the page is smaller than before).
You can obtain the current offset from the top of the window with the following code:
var offsetY = $(window).scrollTop();
If you want to scroll back to where you were before, you can do so by calling the following:
$('html, body').animate({
scrollTop: $(this).offset().top
}, 300);
This will gradually scroll, but you can set 300 to 0 if you want it to scroll instantly.
Depending on the efficiency with which your page loads, you'll probably still see a jump in the page contents.
Option 2
You can alternatively put your entire DIV inside a container with a fixed height, and reload the contents inside. You should set at least a min-height on the container div.
<div style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
Set SOME_VALUE to whatever comes closest to your actual page size. This should prevent the page jump as well, but will cause your page to have a minimal height even when the actual contents are smaller.
Option 3
The most advanced solution would be to use a container DIV and set the height to whatever the LoadPage height is just before you reload. This way it will only reset AFTER you reload your page.
<div id="cardscontainer" style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
With the following changes to your JS:
setInterval(function(){
$("#loadcards").load("getGraph.php");
$('#cardscontainer').height($('#loadcards').height());
},5000);
EDIT: I swapped the 2 functions inside the SetInterval callback function because it would result in weird behaviour if the LoadCards DIV would be smaller than before.
I want a layout the was showed in the following demo
http://jsfiddle.net/EX6qV/2/
<div class='container'>
<div class='one'> One </div>
<div class='two'>Two</div>
</div>
Here the div one has position:fixed. I want to scroll the fixed div (One) if scrolling happens.
Due to the fixed position the div sticks at that position hence it overlaps with div two if scroll happens on zooming a page.
Is the any jquery methods to overcome this problem.
I have a DIV in the center of my page which has margin-left and margin-right both set to auto. I want to be able to enlarge or shrink that DIV. Unfortunately when I do so, the position of it on the screen does not change, meaning that it is no longer centered.
<div id="content" style="margin-left:auto;margin-right:auto;width:240px">
<p>Lots of text</p>
</div>
Meanwhile elsewhere:
$("#content").width(480);
At this point, I get my div no longer centered, but overbalanced to the right. Similarly if I set the width smaller than 240, it then becomes too far to the left.
How do I ensure that my margins actually adjust when the width changes? Needs to work in all modern browsers.
The div ist still centered. Just the text is aligned left.
Try this:
<div id="content" style="margin-left:auto;margin-right:auto;width:240px;border:1px solid red;text-align:center">
<p>Click here</p>
$('p').click(function(){$("#content").width(480)})
-
http://jsfiddle.net/nvzaw/1/
I have posted an answer to a similar problem (about window resize) here
Maybe this helps you!