Develop Reference

Preventing divs from clearing inside an animated container

I have a horizontal jQuery animated slider which works great, except as its width begins to decrease, no matter how I set up the <divs> inside they go to newline. I want them to stay on the same line to create this smooth illustion.
Here's what I mean: jsfiddle
How do I prevent them from clearing?

use max-width instead of width:
#container { max-width:500px; height:500px;border:2px dotted maroon; }
.red, .blue, .green { display:inline-block;max-width: 250px; height:50px; margin:0 auto;}
here is the jsfiddle link
UPDATE:
to avoid clear try jsfiddle

How can I smoothly transition in a div on hover? [Tumblr Updates Tab]

I am sure this has been answered before, but I am not sure where to look for it, nor how to really word the question. But basically, I am creating an updates tab for a tumblr theme and I'm curious as to how make a div smoothly transition in while hovering over a parent div, if that makes sense.
Essentially I would like the div to transition in smoothly when I hover over the tab like it does when I click on a tab in my updates tab in my blog. However this tab was created using a tutorial that used a jquery code to create the smooth opening effect, and I don't know anything about jquery or javascript on my own.
I have the general idea of how to make a div show only when you hover over the parent element by using display:none and display:block... but it doesn't transition in smoothly, and as I've read there is no way to do so with CSS.
I have tried playing with height and opacity as well, but while it was a bit smoother, it was a rather messy transition with dealing with text and borders of the div I'm trying to show and hide.
Basically what I am asking is how I can create the same effect in my blog's updates tab that opens and closes when clicking on the tab, but using hover rather than click. I would love for the div to show when I'm hovered over the tab, as well as when my mouse is within the containing div, but close once my mouse leaves the tab. Sorry if that sounds confusing.
Here is the CSS:
#tab{
margin:auto;
}
.tab{
margin-top:0px;
margin-bottom:2px;
margin-left:-5px;
margin-right:-5px;
padding:7px;
border:1px solid #000000;
text-align:center;
}
#tab:hover .contents{
display:block;
}
.contents{
display:none;
margin-top:3px;
margin-bottom:3px;
margin-left:10px;
margin-right:10px;
padding:5px;
border:1px solid #000000;
text-align:center;
font-size:11px;
}
Here is the HTML for that CSS:
<div id="tab">
<div class="tab">Tab</div>
<div class="contents">
Tab Contents.
</div>
</div>
Jquery/ or javascript? From the tutorial from my blog's updates tab:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('slow');
});
});
</script>

You can use CSS3 transition-property to add 'smooth' effect. The only 'problem' with that , it doesnt work on IE9 and earlier versions. You can see example of that: here

You can probably do it like this. Use opacity instead for the display and transition. I added some pointer-event and make it none so once it is hidden, by the opacity, you can't interact it, which act like display: none.
#tab{
margin:auto;
}
.tab{
margin-top:0px;
margin-bottom:2px;
margin-left:-5px;
margin-right:-5px;
padding:7px;
border:1px solid #000000;
text-align:center;
}
#tab:hover .contents{
opacity: 1.0
}
.contents{
opacity: 0.0;
margin-top:3px;
margin-bottom:3px;
margin-left:10px;
margin-right:10px;
padding:5px;
border:1px solid #000000;
text-align:center;
font-size:11px;
transition: opacity 100ms ease-in-out;
pointer-events: none;
}

As an alternative, if the CSS3 transition does not work, you can try this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('slow');
});
$(document).on("hover", ".label", function(){
$(this).next(".inside").slideToggle('slow');
});
});
</script>

css style is not setting back after h:over

In my application i have the following code.
.test>div {
display: none;
}
.test:hover>div {
background-color: red;
display: inline-block;
z-index: 9999;
height: 100px;
}
When I mouseover test a popup will open and mouseout it will hide.
But after mouseover and mouseout the .test:hover>div is still retains and not hides. When i inspect the element, the .test:hover>div is still active even after mouseout of .test.
CSS child selector (>) doesn't work with IE
in the above link, css selector unable to select, but here it select and not applying any other style after that.
This works fine in all the browsers except IE8.

I did an example and display:none is not a good ideia because div is removed from dom. The explanation of mozilla: Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
Then I used background:transparent to element exists, but you can try with visibility.
Here is my HTML:
<div class="test">
<div></div>
</div>
and my css:
.test{
float:left;
position:relative;
width:100px;
height:100px;
border:solid 1px;
}
.test > div{
float:left;
position:relative;
width:50px;
height:50px;
background-color:transparent;
}
.test > div:hover{
background-color:red;
}
and the example working at jsfiddle: https://jsfiddle.net/xukLc5h1/

Growing List Items as Graph

I have a list which list items grow dynamically with JavaScript until 100%. This works.
But I want it to look something like this
So my problem here is. How can I make them grow to the top. I tried with height, but then they grew to the bottom. Also rotating them with CSS doesn’t really work, because the more list items are added the more the list moves to the bottom…
Does anyone have any idea?
Thank you!!

Use absolute positioning for the li-elements. Example:
http://jsfiddle.net/J5pB7/
ul{
height:300px;
border:1px solid #666;
position:relative;
}
li{
display:inline-block;
width:20px;
position:absolute;
bottom:0px;
background-color:green;
}
#a{
height:50%;
margin-left:30px;
}
#b{
margin-left:80px;
height:10%;
}
#c{
margin-left:130px;
height:90%
}

How to create sevenly.org like design using jquery

I have basic knowledge of javascript and jquery . I want to implement design like Sevenly which is like a page/div is move over another but I don't know how to start with that . Let me know if anyone has as idea on how to implement this ?

If the first container has a specific height, then I think the most straight forward solution would be to fix the first container (position:fixed). Then you add a margin-top to the rest to push the rest down so it starts just below the first container:
HTML:
<div id="header">Header</div>
<div id="rest">
<div>Other 1</div>
<div>Other 2</div>
<div>Other 3</div>
</div>
CSS:
div#header{
position:absolute;
position:fixed;
width: 100%;
height:150px;
border: 2px dashed yellow;
background-color: lightyellow;
}
div#rest{
margin-top:150px;
position:relative;
}
div#rest div{
height: 300px;
border: 2px dashed green;
background-color: lightgreen;
}
The position:absolute; is for browsers that don't support fixed. Making it absolute will causes it to behave like fixed, except that it scrolls along with the rest of the page. The position:relative; on the rest is because of z-stacking. fixed-ing the header container causes it to be put in it's own layer on top of everything else; setting the rest to relative puts the rest on top of the header again.
See jsfiddle demo here.
If you don't have a specific height on the header, then you will probably need to use javascript.