I have some divs and I want that when I get the screen bigger(CTRL +) , the scrollbar appears at the bottom of the page and the divs STAY inline block. I have the code here(http://fiddle.jshell.net/JNzFp/) and as you can see when you get the screen bigger , scrollbar appears under the divs and I want it to display on the bottom of the full screen not under the divs, and ALSO I don't want vertical scrollbar.
Use this CSS overflow:hidden
http://fiddle.jshell.net/zCxhK/
Below is a demo of the different overflow properties.
UPDATE: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Scroll bar appears in #menu div because you have used overflow: auto in its css. Use hidden instead of auto for not allowing scrollbar to appear below the divs
UPDATE- For that you have to make your menu div 100% of the body
DEMO
CSS -
#menu{
white-space:nowrap;
overflow:auto;
width:100%;
/*height:40px;*/
height: 100%;
margin:auto;
padding:0 0 12;
background:url(file:///C:/Users/Windows7/Desktop/imgbg.jpg) repeat 0 0 #f8f8f8;
border:1 solid;
border-width:0 1 1;...
Related
I have a div called list which is getting its content from database.
I have set the vertical scroller such that whenever its height exceeds 100px,it will use scroll bar.
Now my problem is when the content of the list gets empty or less than 100px,it is setting to same height of 100px .I want the height of div dynamically as per the content of it and at the same time use vertical scroll bar whenever its height crosses 100px.
#list {
height: 100px;
width: 1100px;
overflow-x: hidden;
overflow-y: auto;
}
Any help will be highly apreciated
Use max-height:100px instead of height:100px.
You can see the difference here: jsFiddle example. Chop the text down to see the div shrink.
height:auto;
max-height:100px;
I've created a jQuery dropdown menu that shows DIVs on hover, but I cannot force the dropdown DIVs to have a 100% width across the page.
CSS:
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:200; /* This sets the width of the dropdown DIV */
height:210px;
padding:30px;
display:none;
}
Take a look at the JS Fiddle to view the full code & expand the preview section to see the problem.
Thanks!
That is because if you set the div's width 100%, it is taking the 100% of its parent's width (the corresponding li).
One solution for this is to set the div's position fixed so that it takes the width of the page when its width is set 100%.
ul.oe_menu div{
position:fixed;
top:103px;
left:0px;
background:#fff;
width:100%;
height:210px;
display:none;
}
This way you will have to remove the left:n from the divs. JS Fiddle here.
To make the transition look more natural, you can consider doing .slideUp(200) [JS Fiddle here] or .animate({"opacity":0},{complete:function(){$(this).css("opacity","1")}}); [JS Fiddle here] asmouseleave.
Hope this helps.
You can try setting the div width to the width of the window; (given that you're hiding overflow-x on the body anyway).
var winWidth = $(window).width();
$this.children('div').css({zIndex:'9999',width:winWidth}).stop(true,true)....
Have a look here to see;
http://jsfiddle.net/cs3p5/
Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}
I have created a hr tag with below style
hr{
/* margin:5%; */
height:10px;
display:block;
}
here is the fiddle
It is displayed properly. Occupying 100% width of the screen. But if I change the margin Dynamically through JavaScript Console. It is overflowing from screen. How can I make this auto adjustable based on margins.
Instead of:
document.getElementById('a').style.margin= "5%";
Try this:
document.getElementById('a').style.margin= "5px";
I've got a fixed position menu at the top of my page, inside it is a div with the menu items and a .container class in order to center and limit the width. I can't seem to figure out how to limit my drop down menu to stay with in the .container class width limits. It keeps going off towards the right and will be cut off depending on page widths. Any help is really appreciated.
http://jsfiddle.net/rKaPN/47/
http://jsfiddle.net/rKaPN/51/
Changed:
//fixed so submenu will be relative to menuitem
.menu ul li{
padding:0;
float:left;
position:relative;
}
//if a rightmenu, float right instead of left
li.menu-right.drop-down ul{
display:block !important;
position:absolute;
right:0;
}
You'll probably need to make sure that your .container is using a percentage based width.
Your menu is floating to the right of the container... so if the container is set to 500px, but your browser is 400px, your menu is going to get cut off.