I want to disable scroll-bar functionality for chrome and don't want to hide the scroll-bar by giving overflow:hidden.
The scroll-bar should be visible
I want something like this: http://prntscr.com/ai5y9k
Any help would be great!!
use overflow: auto
that will display a scroll bar only when necessary (i.e. the content is higer than the window)
Closest you will get to, is to enforce the body to be no larger than the window then tell the scroll bar to always be present.
body {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
overflow:scroll;}
Related
I have a small menu that I always want to be in the bottom right corner.
Now normally this would be no issue with
#element {
position:fixed;
bottom:0;
right:0;
}
but I am using the zoomooz plug in to zoom into several elements on the page.
When this happens, the menu elemnt stays where it originally was.
The plugin uses transform to perform the zoom:
transform: translate(-1358.83px, 577.585px) rotate(0rad) skewX(0rad) scale(3.33879, 3.33879); transform-origin: 1280px 667px 0px;
What can I do to keep the menu element in the bottom right corner even when the plugin zooms?
Like other pages, the main div is always a way in which occupies the entire screen seen by the User, and when he scroll down he can see another div: example1 , example2
No matter if you resize the screen, the main div will always occupy the total space seen by the User.
To test It I try this code below:
<div style="background:yellow; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
This is my Section!
</div>
With him I can see a large yellow background with a text occupying the entire area of my browser. Assuming I would like to add another div below this, how could I do that? Is possible with css or I will need javascript?
You can do it without javascript with only pure CSS.
With vh units, you can specify a margin-top on the next container like this :
#content { margin-top: 100vh;}
The advantage of this method is that it is fully responsive, no matter how you resize it (height or width).
See it here
If you check your div more correctly, this code:
top: 0; bottom: 0; right: 0;
Is what causes your div to occupy the whole screen because there isn't any space between the div since you set all of them at 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 have an absolute positioned div that I need to get to to fill the entire document for a background to a modal window.
I can get it to fill the window but when there is a scroll bar it doesnt fill the area that is currently visible.
This is my current code:
position:absolute;
top:0;
left:0;
height:100%;
min-height:100%;
By the way I can get it to fill the document horizontally.
Give the div position:fixed and top,bottom,left,right 0
See here:
http://jsfiddle.net/sQLPr/
edit - removed the following line
and it's parent (probably body)
position:relative
div.covered {position: fixed; top:0; left:0; bottom:0; right:0;}
test it here: http://jsfiddle.net/meo/kGUYG/2/
Position absolute is gonna scroll when you scroll the page unless you find a JS solution. You need to use position fixed so the element does not scroll when the content does.
Put it in a table with 100% width and that's all
I'm trying to make modal window for my website, I have a problem with overlay or modal div I'm not sure what is the problem.
The thing is everything except modal window shouldn't be clickable, but for some reason my navigation <ul><li> tags are visible and clickable. Here is css of my modal window :
element.style {
display:block;
left:50%;
margin-left:-210px; //generated with javascript
margin-top:-85px; //generated with javascript
position:fixed;
top:50%;
width:450px;
z-index:100;
}
Here is the css of my background overlay :
element.style {
height:1436px; //generated with javascript
left:0;
opacity:.75;
position:absolute;
top:0;
width:100%;
z-index:105;
}
What am I doing wrong ? thank you
Check the z-index property of your li tags (or the underlying ul) and either set it below 100, or set the z-index of your modal window and overlay so it's higher than that of the lis.
It appears you have the values of your z-index backwards. The higher the number, the closer it is. Your background is set to 105 but the elements on top are set to 100.