Develop Reference

How to make overflow-y operate independently of overflow-x

I'm working on some CSS for a navigation bar, and I need to use a max-height and overflow-y: scroll for the dropdown in order to make sure it will fit on the page. However, whenever I set the overflow-y property to scroll, it seems to automatically enforce that overflow-x must also be set to scroll, and as a result, submenus become hidden.
See the jsfiddle below for a working example
https://jsfiddle.net/5eyveyfz/
EDIT: I should clarify the use of my fiddle. The issue arises when you hover over the menu item titled "SubMenu 1" which shows the submenu in question. The expected behavior is that this submenu is visible without a scrollbar, but instead its behaving as though overflow-x was set to scroll

Changing these values will show the dropdown directly below the submenu heading:
#menu > ul {
overflow-y:scroll;
overflow-x:hidden;
max-height:300px;
}
.submenu {
position:relative;
display: none;
left:0;
top:0;
}
If you want to keep the left position you will need to make the container wider or change it to display:inline-block; without a width set for it to adjust to the size of the content.

While it is not doing this in your fiddle - is it possible the data you are populating in your actual build is forcing the table to overflow its width?
If so, change the container to overflow-x:hidden; in order to prevent the horizontal scroll bar.

loading indicator autocomplete

I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.

Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}

:active and :hover both active at the same time, padding stacks

I've got an issue with one of my designs at the moment, i'm creating a hover button using the :hover CSS element and then ensuring that it stays the same using the :active element.
However, both the :hover and :active have padding specified in their respective CSS rules which creates an issue when you click on the button whilst still hovering over it - the padding stacks and the button is completely misplaced.
What can I do to avoid this?

Is this what you mean (click the div to see hover/active).
HTML:
<div class="a">Some content</div>
CSS:
.a{
display:block;
padding:5px;
}
.a:hover{
padding:5px;
background:red;
}
.a:active{
padding:5px;
background:blue;
}
Example: http://jsfiddle.net/justincook/JsWCF/

Highlight DIV and dim the rest on mouseover

I have a page full of DIVs which contain images.
When I mouse over an image I can highlight it or add a shadow to accent it easily by adding class etc but is there a way to dim every other image instead.
DIVs are loaded into DOM and I would like the DIV currently hovered over to retain 100% or 1 opacity and the rest of the DIVs on the page to fade to say 70% or 0.7 when one DIV is highlighted.
Is this possible?

CSS only:
jsBin demo
#parent:hover > div{ opacity:0.6; } /* Fade ALL OUT on parent hover */
#parent > div:hover{ opacity:1; } /* Fade in hovered one */

$('div').hover(function() {
$('div').css({opacity: '0.7'});
$(this).css({opacity: '1'});
}, function() {
$('div').css({opacity: '1'})}
);
I think this should work.

What you can do is use a new div as a 'mask'.
You'd have your image div, with z-index:1; for example.
And you also have another div with opacity:50%; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2;. This black div has to be hidden when the page loads (display:none;).
Using javascript, when you mouseover the image div, the white div should change to z-index:3;, and the black div should change to display:block; or similar.
ADDENDUM:
If you don't want an overlay div, but only want to make the other images opaque, the javascript just needs to change the opacity (you can manage these opacities in classes, and then just use JS to switch between them).

The easiest way to do this is probably:
1) Make a translucent overlay that covers the whole page.
2) Clone your DIV and position it on top of the overlay.

Making drop-down navigation menus not affect other element positioning

was wondering if there was a better way to handle what I'm trying to do. I've made a basic drop-down navigation menu where the menu bars are li and class elements with a set height with the overflow property set to hidden, which then animate in height to reveal the 'drop down' portion of the animation when hovered over with the mouse. I found however that other web page elements (like main content) would then be pushed around and re-positioned when the menu elements collided with them. I stop-gap fixed this by making the affected elements absolute positioning, but I can't help but feel there's a better, more effective way of fixing this.
Is there any way to make it so the navigation elements for lack of better word get 'ignored' positioning-wise?
Here it is in practice - the first 'article' area has been made to be absolute positioned - http://gamearticlesite.bbdesigns.ca/index.html
the code:
Jquery
//When mouse rolls over
$("li.extend").mouseover(function(){
$(this).stop().animate({height:'250px'},{queue:false, duration:500})
});
//When mouse is removed
$("li.extend").mouseout(function(){
$(this).stop().animate({height:'35px'},{queue:false, duration:500})
});
CSS:
#headerNav ul{
list-style-type: none;
color:#efefef;
margin:0;
margin-left:75px;
padding:0;
}
#headerNav ul li{
width:125px;
height:35px;
float:left;
color:#efefef;
text-align:center;
margin-left:10px;
margin-right:10px;
overflow:hidden;
}

The correct answer was that yes, Absolute Positioning is the way to solve this, but to use it on the navigation menu. In the example posted, on the ul element, not the individual li elements that would animate as that could cause issues with positioning of the li elements within the ul element.
Setting the position to position:absolute for the ul and giving a z-index property to make sure it's 'on top' of the elements it clashes with made everything work out just fine.

Use
float:left
or
position:absolute