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.
Related
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.
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 have a thumbnail gallery, a div that show only 3 thumbnails at once, user can mouse drag left or right to show more.
current fiddle: http://jsfiddle.net/31ua6jL3/2/
What i want to achieve:
-All the 6 box to align in one line, but only show the left 3 first. If outside the div, the right 3 will be hidden
-When i drag box out of the div, the box will be hidden
<div class="container">
<div class="image_holder">
<div class="drag">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</div>
I have some trouble with this, and i don't want to use a plugin. Can somebody guide me on the right track?
i'm trying to do something like http://www.pikachoose.com/, u can see that it contain 5 thumbnails, what i want to do is more than 10 thumbnails in 1 line but only 5 visible, and user can mouse drag to slide to view through the other thumbnails.
First what you need to do is add the following style inside .image_holder
overflow : hidden;
What overflow decides is when the contents inside a box overflows it, how should it react. Using hidden we've decided to make the contents hide inside the box.
Problem in your code :
Now as you've specified the width of .image_holder to 300px when it's inner elements will have cumulative width more then it's own width they will break down to bottom left.
Solution :
So to make all these elements get hidden when they overflow the .image_holder you have to keep another div that holds all the elements with a high range of width. Fortunately you have that div which is .drag. Just give it a bigger width,
.drag{
width : 1000px;
}
Now this .drag div will flow inside the .image_holder and as it's width is a big value all elements will be in one row and they also will flow inside .image_holder div as you expected.
Here's a working fiddle : jsFiddle
References :
CSS overflow Property
I have a div with a nested div that are larger. The overflow-x is set to auto, such a scroll bare appears. I would like to make such that if the user scrolls(with the mouse wheel) within the div, the scrollbar scrolls horizontal.
<div id="outer" style="width:1000px;overflow-x:auto">
<div id="inner" style="width:2000px"></div>
</div>
What kind of javascript is needed for this. Remember that the scrollbar comes automatic, not looking for a solution with javascript changing left/right positions.
Why changing scrollLeft doesn't fit you?
document.getElementById('outer').addEventListener('mousewheel', function(e) {
this.scrollLeft -= (e.wheelDelta);
e.preventDefault();
}, false);