I have a div that is 100% height, 70% viewport height, and overflow:scroll.
Now I want to create an overlaying div which touch devices can use to scroll the whole page instead of the div.
I created a div with position:absolute and full page height. If Android users drag on this div, the whole page scrolls, like expected. However, on iOS7 the underlying div is scrolled, like the touch event goes right trough the div.
JSFiddle
.scrollDiv{
width:100%;
height:200px;
overflow-y:scroll;
border:solid 1px #f00;
-webkit-overflow-scrolling: touch;
}
.pageScroller{
position:absolute;
right:0;
top:0;
bottom:0;
width:50%;
background-color: rgba(0,0,0,0.7);
}
If you use iOS7 and drag on the page div over the scrolling div, the scrolling div is scrolled instead of the page.
Does anybody know a solution for this?
On your .pageScroller scroller element, add the overflow-y: scroll; and -webkit-overflow-scrolling: touch; attributes, together with a postive z-index. That prevents the scroll action to reach the "layer" beneath.
.pageScroller{
position:absolute;
right:0;
top:0;
bottom:0;
width:50%;
z-index: 1;
background-color: rgba(0,0,0,0.7);
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
}
Check this JSfiddle: http://jsfiddle.net/R9Ut6/
Related
I want to make a gallery in HTML/CSS/jQuery. I have a bunch of thumbnails that all represent different images of varying sizes and orientations. When the thumbnail is clicked, I want the image to slide down from the top of the screen. The image should be as large as possible but still fitting in the window, taking into account margins and the like.
I have gotten all this to work properly in the past. However, now I want to add a caption below the image.
My solution was this. I have a div container that is fixed and is positioned with top:-96% and bottom:100% When a thumbnail is clicked, jQuery moves that to top:2% and bottom:2%
Previously I had a border that surrounded the image. Now I want to make that border actually part of a div instead, so that the border can go around the caption which should be below the image and centered, and said image.
Nothing I am doing is working, however. The image will not fit into the viewport, and will always be its max size no matter what I change the percent to.
I'm completely lost, I have no idea how to make this all work out. If you need code, I can give it to you, but as I said, it doesn't work. Thank you all in advance.
EDIT: Added code
HTML:
<div id=imgHoverCont>
<div id=imgBg>
<img id=imgHover src="" alt="">
<div id=commentHover></div>
</div>
</div>
CSS:
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
}
#imgHover{
display:block;
height:100%;
width:auto;
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;
max-height:100%;
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}
JS: Thumbnails are stored in an array of objects with their ID and their source.
for(let i in thumbnails){
$(thumbnails[i].id).on("click",function(livingHell){
return function(){
$("#imgHover").attr("src",thumbnails[livingHell].src)
$("#imgHoverCont").css("display","block");
$("#commentHover").html(thumbnails[livingHell].comment);
$("#imgHoverCont").animate({bottom:"2%",top:"2%"},1000);
}
}(i));
};
I've made some changes to your CSS
if I understood your question it works like expected, look here: https://jsfiddle.net/cratgjks/
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
width:100%; /*new rule*/
}
#imgHover{
display:block;
height:100%;
width:100%;/*changed rule*/
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;/*changed rule*/
max-height:100%;
width:1500px
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}
I have a black rectangle I wish to extend the full left to right horizontal viewpoint. Problem is, I have a DIV container (980px) I can't change (long story - basically restriction of the software I'm using).
style="position:fixed; left:0%; width:100%; height:300px"
This works, but I'm left with a fixed rectangle I don't want. Absolute positioning extends to a maximum of 980px (governing DIV container). Any suggestions? JS?
Any information you can provide would be extremely appreciated.
Within your stylesheet you will need to change the parent div ( the 980px div ) to have position: static
#parentDiv{
width:960px;
position:static;
}
#fullWidth{
position:absolute;
width:100%;
height:300px;
background: #000;
left:0;
}
I have a div that slide from the left 100% once you press a button. In that div it will display my menu for the site. The issue I am having is when on a small browser size the content gets covered and you are unable to see the rest of the links.
My div #slidingMenu has a fixed positioning and I gave the div an overflow-y:scroll. Once I added that code I did have the ability to scroll. But the problem was #slidingMenu now slides out displaying a white bar (scrollbar). Is there a way to have the main scrollbar of the browser control my menu in #slidingMenu when I scroll?
Here is the css and the file http://jsfiddle.net/bC5zh/6/
#footer{
background-color:#999;
width:100%;
height:50px;
position:absolute;
top:100%;
margin-top:-50px;
line-height:50px;
}
#toggle{
color:#FFF;
margin-left:50px;
cursor:pointer;
}
#slidingMenu{
position:fixed;
background-color:#999;
width:100%;
height:100%;
top:0;
left:-100%;
overflow-y:scroll;
}
You would use
overflow-y:auto;
To remove the scrollbar but allow for scrolling when inner content is overflowing, updated fiddle
For a smoother scroll on WebKit mobile devices you can use
-webkit-overflow-scrolling: touch;
Which mimics default iOS scrolling reference
Try adding in your css
#slidingMenu::-webkit-scrollbar {
display: none;
}
this will hide the scrollbar giving you the ability to still scroll on the site.
I was curious if there was a way to remove an element from the page flow similar to position:fixed;, such that the page won't scroll.
Example - currently even though it goes beyond the screen it doesn't increase the size of the document, but if position is changed to absolute / relative it will.
I would like for the position to be absolute (although relative will work), yet not increase the document size.
I'm looking for ways to do this be it html/css work around, JavaScript, or jquery (even browser-specific solutions).
Depending what else you have on the page, this might do the trick.
body {
height:100%;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}
If you want other elements to overflow the body, use this code.
<div class="wrapper">
<nav></nav>
</div>
body {
height:100%;
}
.wrapper {
position:absolute;
top:0;
bottom:0;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}
The whole navigation bar along with its JavaScript settings can be found here
http://jsfiddle.net/DyJzg/3/
right now it stays at the top of the page, but i am wonder whether it could be made floating on top even when you scroll down the page. Thanks.
I think you need to use position:fixed
nav {
position:fixed;
top:0;
width:100%;
}
here is modified jsfiddle
if your element is 'nav' or your element class is '.nav' use this piece of css code:
nav, .nav{
position:fixed;
top:0;
width:your_custom_with;
height: your_custom_height
}
note: check this article of css positioning for more details:
http://www.w3schools.com/css/css_positioning.asp
Just off the top of my head, the following should do it..
.nav{
display:block;
position:absolute;
top:0;
left:0;
right:0;
width:100%;
}