Centering Animated Divs - javascript

I have this jfiddle that I found that I modified a little bit to my liking. The problem is that I can not get the alignment correct. My goal is to have the five columns centered when they are all collapsed and have them centered when one is expanded.
http://jsfiddle.net/422MP/
#mainContainer
{
margin:0 auto;
width: 500px;
height: 100%;
overflow: hidden;
}
.sidebar
{
float: left;
height: 300px;
width: 20%;
/* left: 565px;*/
border: 2px red dashed;
/*position: relative;i*/
overflow: hidden;
margin:0 0px 0 10px;
}
** EDIT ** To be a little clearer, it seems that when one div is expanded it is centered. When they are all closed, they are aligned toward the left.
Thanks!

Demo here: http://jsfiddle.net/422MP/34/
It's a lot easier when you have fixed widths for your elements, which is what I did. But the javascript is much cleaner as well.
To center the elements, you simply get rid of the float: left style, which will wreak havoc with center alignment, and set the text-align of the container to center.

All of the sidebars are float: left and the javascript is actually making them width: 10% when they are closed, which means that they only end up occupying the left half of the container. The div containing all of the sidebars is actually centered. You probably want to alter the JS to leave them at 20% and widen the containing div when one opens.

Related

Expand current div on hover and shrink others

I'm working on a project in school where I want some sort of slideshow on the webpage. I've gotten to a place where I'm not sure how to proceed. Here is what I got so far:
body {
background-color: #252525;
}
#wrapper {
width: 90%;
margin: 0 auto;
padding: 2%;
}
#images {
width: 100%;
height: 300px;
text-align: center;
overflow: auto;
}
#container-1 {
display: inline-block;
background-color: #fff;
width: 100px;
height: 300px;
transition: .5s ease-in-out;
}
#container-1:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
.container {
width: 100px;
height: 300px;
background-color: #fff;
display: inline-block;
transition: .5s ease-in-out;
}
.container:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
<div id="wrapper">
<div id="images">
<div id="container-1"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>
What I want this to do is for whenever I hover one of these images (or divs if you will), it will expand and show the whole image. There are two images, one clipped, and one that is the whole image. (Maybe thats a bad thing?)
The class container is just temporary to get an image of how it will look and give the other divs a background color. In #container-1:hover, the width is not the exact one I'm going to use. It might differ from the images I'm using.
Also if I don't use overflow: auto; the other divs will be pushed below the others, which is something I don't want.
The code in a way works as I want it. The only problem I got really is that when I hover one of the divs, it will push the other ones to the side, creating a conflict. Is there a way to make that not happen? Maybe a way to reduce the width of the other divs when the current div is being hovered on?
I just recently started with JavaScript so I'm nowhere close experienced with it, but I'm open for suggestions, but we are not allowed to use jQuery or anything like that sadly.
Here is a fiddle of it: jsfiddle
Your problem is that when one of the elements is hovered and expands, the sum of all elements exceeds the width of the container, and the one or two last elements are pushed below the others (into the next line).
To avoid that using only CSS, you have to choose width values where three default elements and one expanded (hovered) elements together don't exceed 100% of the container, like in this fiddle:
https://jsfiddle.net/kju94h1n/
To make non-hovered elements narrower when another element is hovered would require Javascript.

How to make a fixed div/nav resize with the div it's inside of?

I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/
When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/
I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle

Sticking side menu to top

I've been looking into sticking a "div" to the top of the screen when you scroll past it, or making the div scroll with the page when it reaches the top of the screen.
The issue i get when i try this matter is that changing to position: fixed; using either jquery or the simple css, removes the float from the element.
My layout look somewhat like this: http://jsfiddle.net/ThSXm/33/ <-- updated
So when the float is removed, the id="content" get's overlapped by the sidemenu, making the sidemenu bigger and out of place.
I need a solution where you dont have to alter the position of the elements or if there is some fix i can make on the content div so it wont get overlapped when changing the positions.
Update
Sandeeproop managed to help me with the positioning, but the scroll matter is still a issue.
As i mentioned in the comment for this question, the div has to scroll/stick to the top of the screen when the div is close to the top or reaches the top (and preferably stop once the div reaches the footer or is close to reaching the footer), because there are more divs (header/slideshow etc) before we reach the side menu, and you wont see the menu if you just use position: fixed.
Any thoughts?
/update
Looking forward to some answers!
//Jim
If i understand you question correctly.
Please check this fiddle.
#nav {
width: 136px;
position: fixed;
background: #FF0000;
margin-left: 1em;
margin-top: 1em;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 170px;
margin-top: 1em;
}
You can set fixed margin-top values for nav and content elements.
Something like that http://jsfiddle.net/ThSXm/26/
#nav {
width: 15%;
height: 100%;
float: left;
background: #FF0000;
margin-left: 1em;
margin-top: 60px;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 1em;
margin-top: 60px;
}
I guess what you are looking for is "position: sticky".
This is not yet supported by many browsers, but here is a pollyfill for it
http://philipwalton.github.io/polyfill/demos/position-sticky/
Have you considered a solution where you use position:absolute on the element?
Have it being absolute untill you need it to stick and then change it to fixed.
Here is a simple fiddle:
http://jsfiddle.net/dXe97/
if ($(this).scrollTop() > boxTop) {
$box.css({
'position':'fixed',
'top': 0
});
}else{
$box.css({
'position':'absolute',
'top': 150
});
};
The .box element is absolute positioned, but when you scroll down passed the element, it is changed to fixed and its top value is set to 0, and back again when you scroll up.

div position absolute... overflow-y:auto and then vertical scrollbar covers some of the content

I have a div with absolute position
inside some other divs.
http://jsfiddle.net/d8GYk/
<div style="position: absolute;
display: block;
outline: 0px;
margin: 0px;
padding: 0px;
top: 0;
text-align: left;
font-size: 11px;
font-family: arial;
cursor: default;
border: 1px solid rgb(170, 170, 170);
overflow-x: hidden; white-space: pre;
overflow-y: auto;
left: 0px;
height: 132px;"><div>a a END</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div></div>
As you can see the first div is not completely visible
That's because the vertical scroll bar covers it.
If I set overflow-y:scroll. The problem goes away.
However I don't want to do it because this div is autogenerated (via javascript) and in many cases I don't need the vertical scroll bar (for example if the list has one or two or three items)
Can somebody suggest how to resolve this problem ?
if the scrollbar may or may not show, use a content container with a wrapper that may or may not scroll. html:
<div class="container">
<div class="entries">
<div>ab a</div>
<div>ab</div>
...
</div>
</div>
and css:
.container {
height: 100px;
overflow-y: auto;
}
.entries div {
white-space: pre;
}
Demonstrator: http://jsfiddle.net/gFrbM
That said, if you absolute need pre white space handling, AND your lines are very long, you'll either need to turn on scroll for both directions, not just y, and that's a good indication that the way you're trying to present content is not a good way to go about it. The UX will be poor for your users, and depending on the content you're listing in these entry divs, there will be much better ways to show that data.
Du you really need "white-space: pre;"?
If you remove this part i think it is going to work
Use a margin-right for each div inside the container:
.container div{margin:0 20px 0 0}
http://jsfiddle.net/Karzin/d8GYk/2/
Add this to css
{padding-right: 20px;}
Reason: The border of the scroll is covering your div text. you need to give some space for the same.
http://jsfiddle.net/d8GYk/3/

How to make Wrapper div contain only non-overflowing divs

I have a div containing divs with content.
The outer div has a dynamic width (e.g. 80%).
The inner divs have a fixed width (e.g. 100px).
The problem is that i want to show only so much inner div's so that no inner div "overflows" / "is cut" as in figure 1.
I also want to "distribute" the "free" space as margin between the inner divs equally distributed, as shown in figure 2.
I hope somebody understands my problem, and knows how to realize this with css and as less javascript as possible :)
P.S.: If it is easy to do, would it be possible to have the first and the last div have a max. margin to the outer borders ?
Started this before you edited your question with more info, but I believe that the one missing piece you're after is the text-align: justify in the 'outer'.
.outer{
background: red;
width: 80%;
overflow: hidden;
height: 48px;
text-align: justify;
}
.inner{
background: blue;
width: 100px;
height: 40px;
margin: 4px;
display: inline-block;
}​
Here's a fiddle.
Not entirely sure what you mean by max-margin, but it sounds like that could be achieved by giving the container a fixed padding on the left and right.

Categories

Resources