How would I place the page content of the following example - http://jsfiddle.net/cq8dC/ to the right side of the nav sidebar, rather than behind it?
Update the style. Add style padding-left: 255px; to .horizontal
.horizontal
{
display: inline-block;
padding-left: 255px;
vertical-align: top;
white-space: normal;
width: 100%;
}
DEMO
jsFiddle Demo
First, you should add a container to your content. I've called it #Content.
Then I've added these stylings to the CSS:
body {
overflow: hidden;
}
#Content {
left: 240px;
right: 0;
top: 0;
bottom: 0;
position: fixed;
overflow: scroll;
}
This makes the #Content take the resting place in the page and be scrollable on its own.
Also I've updated the JavaScript
The root is now the #Content element and I'm using position() instead of offset(). I'm doing this because position() Get the current coordinates of the first element in the set of matched elements, relative to the offset parent (from the documentation).
Related
I'm building an app in Webkit for Android using HTML and CSS. I have fixed position header and sometimes fixed position footer(based on the module). When the content is more, I don't want the scrollbar to overlay the fixed header. Hiding it behind the header will also work. How can I achieve this without fixing height for the wrapper or using height: calc(); CSS for the wrapper?
I want app scrollbar to be like this:
Instead, it is like this now:
Here is the sample code:
.header {
position: fixed;
background-color: red;
left: 0;
top: 0;
width: 100%;
z-index: 999;
height: 60px;
}
.wrapper {
padding-top: 60px;
min-height: 100%;
height: auto;
}
.footer {
position: fixed;
background-color: grey;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
jsfiddle
You said that you don't want to fixe the .wrapperheight, but I think, you should fixe it, because there is no way to hide this scrollbar behind the div header element.
.wrapper {
margin-top: 60px;
min-height: 100%;
height: 320px;
overflow-y: auto;
}
Demo: http://jsfiddle.net/9hy6ybsz/4/
I'm not sure if my solution gonna work for you. You need to setup the height of your div="wrapper" and add CSS property overflow-y:
height: calc(100% - (60px + 50px));
Example, where 60px is the header height and 50px is the footer height
.wrapper {
margin-top: 60px;
overflow: auto;
background: yellow;
height: calc(100% - (60px + 50px));
display:block;
}
Working JSFiddle -> http://jsfiddle.net/9hy6ybsz/1/
Create a new div tag , which acts as a parent tag.
and apply scroll for it.
then create the header div and maintain Fixed position.so you can get the scroll over the fixed DIV!
I know that a an element with position:fixed acts like its parent element with position:relative (Or no position specified) doesn't exist, and that's my concern. I've seen the very same question being asked here on StackOverflow, but not the very same problem.
I have a wrapper, an element with relative position, and an element with a fixed position inside the relative element. The element with fixed position should expand the element with relative position as you scroll the page, but what's happening is that when you scroll the page, the element with fixed position will go out of the main container, instead of expanding. How can I make the main element push the container element bellow, instead of getting an offset?
Fiddle
http://jsfiddle.net/T2PL5/515/
Here my code:
CSS
body {
background: #ccc;
}
.wrapper {
margin: 0 auto;
height: 600px;
width: 650px;
background: green;
}
.sidebar {
background-color: #ddd;
float: left;
width: 300px;
height: 350px;
position: relative;
}
.main {
background-color: yellow;
width: 200px;
height: 100px;
position: fixed;
margin: auto;
}
HTML
<div class="wrapper">wrapper
<div class="sidebar"> Sidebar
<div class="main">main</div>
</div>
</div>
I'm coding an image overlay w/ jQuery, and I got it working (somewhat). If you hover over the first image, it successfully appears; however, if you hover over the second one, it doesn't even work. I don't even know what the problem is! I think it has to do with unique IDs or whatever. I tried classes, and it didn't work.
Here is the fiddle :: http://jsfiddle.net/PFWcz/7/
$(document).ready(function () {
$('.overlay-link').mouseover(function () {
$(this).find('.overlay').fadeIn(200);
}).mouseleave(function () {
$(this).find('.overlay').fadeOut(200);
});
});
There are a few issues. As esqew pointed out, you're using the same IDs, which must be unique.
Addressing that, you'll still see the "same" overlay in your fiddle (http://jsfiddle.net/PFWcz/7/), but it's actually not - you're just now seeing a positioning issue.
Take a look at this fiddle:
http://jsfiddle.net/PFWcz/10/
You'll notice that when you hover over the first image, the red overlay is "1", and when you hover over the second image, the overlay is "2".
Previously (with the "helloooooo" text), the red overlays appeared the same (because of the content and positioning)...
Address the ID and position issues, and it should work.
Here's a fiddle demonstrating fixed position and ID:
http://jsfiddle.net/PFWcz/16/
The main changes is giving the container (<div>) positioning:
div {
float: left;
margin: 30px;
position: relative;
}
Also, I removed offsets (left, top) and floats, applying those to the parent container. A quick, simple fix.
You need to make your overlay-link elements your containers from which child elements inherit positions.
<a class="overlay-link">
<img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/>
<span class="overlay"><i>hellllllllooooooo</i></span>
</a>
Your overlay-link class needs to have position: relative and will define the position and size of it and its children:
.overlay-link {
position: relative;
display: block;
width: 292px;
height: 219px;
margin: 30px;
}
Any child inside needs to have position: absolute and its width and height set to 100% of the container:
img {
position: absolute;
border-radius: 2px;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.overlay {
background-color: rgba(223, 71, 71,0.70);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 2px;
display: none;
text-align:center;
}
Now when you hover over an element, it will create the overlay over that element and not the other one as you were experiencing earlier.
Jsfiddle: http://jsfiddle.net/PFWcz/14/
You're using the same id, which must be unique. Use the class attribute.
As some of the answered already said there is issue with the id's, I don't want to repeat. Since you have a multiple place where you want to show some text on rollover, using class would be a better solution/way to go ahead with.
Here is the change I did in the fiddle:
.overlay-link { /*This class is added. Since an absolute positioned element places itself relative to its parent who is either a relative positioned element or an absolute positioned element. I made the parent of the .overlay div relative.*/
position: relative;
background-color: #ff0;
}
.overlay {
position: absolute;
background-color: rgba(223, 71, 71,0.70);
left: -322px; /*Positioning the .overlay element based on its parents left*/
width: 292px;
height: 219px;
border-radius: 2px;
top: 30px;
display: none;
text-align:center;
}
.overlay i { /*There is no .shot element in the DOM. I replaced it by .overlay*/
background-color: #df4747;
border-radius: 999px;
padding: 10px;
width: 60px;
height: 60px;
color: #fff;
font-size: 30px;
top: 80px;
left: 116px;
position: absolute;
display: block;
}
This is based on my understanding. Let me know if it works.
Here, this is what you want
Fiddle: http://jsfiddle.net/D33Yk/
$(window).on('load',function () {
$('.overlay-link').mouseover(function(){
var overlay = $(this).children('.overlay');
var img = $(this).children('img');
$(overlay).css('left',$(img).offset().left);
$(overlay).css('top',$(img).offset().top);
$(overlay).css('width',$(img).width());
$(overlay).css('height',$(img).height());
$(overlay).fadeIn(200);
}).mouseleave(function(){
$(this).children('.overlay').fadeOut(200);
});
});
Because you had the overlay positioned absolutely in CSS, both overlays always covered the first image. I now set the left, top, width and height in JS, so the overlays cover their respective image.
I also changed this in CSS:
.overlay {
display: none;
position: absolute;
background-color: rgba(223, 71, 71,0.70);
border-radius: 2px;
text-align:center;
}
removed the top, left, width, height
...and this in HTML (I changed both, but I only show one since they are identical):
<div>
<a class="overlay-link">
<img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/>
<span class="overlay"><i>hellllllllooooooo</i></span>
</a>
</div>
changed all the id's to classes, and removed id where it was not necessary
I am using Bootstrap 3 dropdown-menu inside a dynamically generated container. The dropdown-menu appears behind the newly generated elements. See image reference.
container item position: relative; z-index: 1;
dropdown-menu position: absolute; z-index: 10000;
I also did test btn-group with a higher z-index and it did not work.
Here is a working fiddle http://jsfiddle.net/sGem8/
You don't need to add z-index property.. Simply remove it and it will work..
i.e.
#container > li {
display: block;
border-radius: 3px;
position: relative;
padding: 15px;
background: #ecf0f1;
margin-bottom: 15px;
}
Working Fiddle
I have faced the same issue.
Inside the main container which had all the nav-items, I had every outermost div items as position: relative
Only the dropdown menu had position: absolute
To make the dropdown appear above all items, add
.dropdown{
position: absolute;
z-index : 999; //some high value
}
and other items in the container have
.outer-divs{
position: relative;
z-index: 1; //some low value
}
If you still find your dropdown to behave not as expected,
try setting the div item that opens the dropdown when clicked to
.dropdown-container{
position :static;
}
Most people will find the last trick to be the most valuable.
Hope this helps.
Modify the below css in your styles
#container > li {
display: block;
border-radius: 3px;
position: relative;
/* z-index: 0; */
padding: 15px;
background: #ecf0f1;
margin-bottom: 15px;
}
Is it possible to use overflow: scroll on a div that has height set to auto?
I have a div with an unordered list inside of it. The amount of items in the list is variable so there is no way I can use a fixed height. The div that contains the unordered list is where the scrollbars need to be, here is my code:
#page {
height: auto; /* default */
overflow-y: scroll;
overflow-x: hidden;
}
As stated, the unordered list is contained within the #page div. The height of the page is assigned by the unordered list's value. Is there a way to make overflow: scroll work on a div with variable height like this or must I use JavaScript to do this?
Thanks
One way of approaching this design...
Suppose that you have the following HTML:
<div class="main">
<div class="inner">
<ul>
<li>Some list items...</li>
...
</ul>
</div>
</div>
The .main block is fitted to the page, for example, by absolute positioning:
.main {
border: 2px dashed blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
The .inner block holds the navigation list that can cause scrolling:
.inner {
border: 2px dotted red;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
overflow-y: scroll;
}
In this example, I constrain the height of the .inner block to fit within .main,
and set overflow-y: scroll, which creates a scroll bar contained within the edges
of the container block.
You may have to adapt this to your mobile platform, but the concept should still apply.
Demo fiddle: http://jsfiddle.net/audetwebdesign/ac4xT/
Simply put, if it has variable height (auto), it will never have overflow in the y axis (vertically), because the div will always grow to fit its contents.
overflow: scroll will force it to present a scrollbar, but it will always be disabled, because the contents will never extend beyond the displayed pane.
If you want vertical scrolling, you have to define a height, either in px, %, or em.
If you do height: 100%, the div will fill the height of the page, and scroll content that extends beyond the window's viewport height.
If you have a header area, try something like this:
body {
margin: 0;
}
#header {
position: absolute;
width: 100%;
height: 40%;
background-color: #ccc;
}
#body {
position: absolute;
top: 40%;
width: 100%;
height: 60%;
overflow-y: auto;
background-color: #eee;
}
<body>
<div id="header">
<p>Header</p>
</div>
<div id="body">
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
</div>
</body>
For a fixed-height header (per the comments), use absolute positioning with a top and botom value to position the scrollable div below it:
body {
margin: 0;
}
#header {
position: absolute;
width: 100%;
height: 60px;
background-color: #ccc;
}
#body {
position: absolute;
top: 60px;
bottom: 0px;
width: 100%;
overflow-y: auto;
background-color: #eee;
}
<body>
<div id="header">
<p>Header</p>
</div>
<div id="body">
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
</div>
</body>
Why not use max-height on the div?
max-height sets the maximum height to which an element can expand. I suppose what you want is the div to never go out of the screen. So you can set a max-height and then overflow: auto;