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/
Related
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 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;...
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 am using 5 banner images with hover effects and using below code
#banner
{
float:left;
width:99.025%;
padding:0 0 0 10px;
margin:0;
height: 16.714em; /* 234px*/
position:relative;
overflow:hidden;
display:block;
background:url('/pages/images/bottom_wood_repeater.jpg') 0 104px repeat-x;
}
#banner img
{
float:left;
width:19.435%; /*197px;*/
}
#banner a img
{
float:left;
display:block;
}
#banner a:hover img
{
float:left;
position:relative;
top:-16.714em; /* 234px*/
}
Can i use height in percentage instead of em?
height: 16.714em; /* 234px*/
Actually i am creating responsive design and it is creating problem for smaller resolution or for mobile.
Current site : http://new.brandonplanning.com/home
Thanks in Advance :)
Yes and no.
Specifically, you can not do that if the parent element does not have a fixed height. Think about it: if an element could have a height equal to a percentage of its parent's height, then the parent's height would need to be calculated first. But to calculate the parent's height, you need first to calculate the height of its children. But before you calculate the height of this child, you need to calculate the parent's height. You see where this is going.
If the parent does have a fixed height then percentage heights on children are fine.
If the parent does not have a fixed height and you set a percentage height to a child the browser will simply give up and treat the child as having height: auto.
Can i use height in percentage instead of em?
Yes you can. with height:25%; but probably not going to achieve what you want if other properties are being factored in.
Height can be
auto - The browser calculates the height. This is default
length - Defines the height in px, cm, etc.
% - Defines the height in percent of the containing block
If you are still having issues with the layout you can detect if the client is on mobile and present them with a different CSS.
Make sure you are adding the "%" sign to your css you can always use %.
I cannot see why not. As technically it's OK. Did you try using %?
Simply put yes we use height in percentage in css.
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.