I am trying to create a push animation, where one element 'pushes' the other. Something like this:
I finally got it implemented, thanks to this answer. But now I have another problem. I want #slider, leftBox, and rightBox to have a height based on its content. I don't want to set a fixed height to it.
If I remove their heights, and because their heights will be based on its content, I cannot assign a fixed margin-top to #buttons, so I will also have to remove margin for #buttons. Now that I had to remove all that, the #slider is hidden.
Also, I don't want #buttons in #wrapper, I want it in its own div places elsewhere.
How can I have a push animation like the above GIF, with the height being dynamic?
JSFiddle
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
position: relative;
}
#leftBox,
#rightBox {
width: 400px;
display: inline-block;
position: absolute;
}
#rightBox {
left: 400px;
}
#slider {
position: absolute;
width: 800px;
}
#buttons {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
<br/>See you
</div>
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
I'm pretty sure i managed to get what you want.
I have two JSFiddles for you, the first one is supported by all (decent) browsers, while the second one probably fits what you want better but is only supported in all browsers except for internet explorer.
The first one:
http://jsfiddle.net/Ljmxe5cx/
#leftBox,
#rightBox {
width: 400px;
float: left;
}
#slider {
width: 800px;
}
The boxes do not fill the container completely height-wise but as i said this should have wider support.
The second one: http://jsfiddle.net/hr8nzde8/
#leftBox,
#rightBox {
width: 400px;
}
#slider {
width: 800px;
display:flex;
}
The boxes do fill the containers completely in this version, this should also just generally cause less trouble if you decide to change some CSS for the boxes themselves
Related
I'm trying to make something where I need to duplicate all the entries (multiple times) and then later I would like to make it spin and land on a colour slowly, etc. I'm now just getting stuck at duplicating the colours, how can I make it so the new colours are overflowing, without doubling the width?
I want it so that the colours go out of the wrapper div. Now they are just distributing themselves.
Any ideas?
$(document).on("click", ".duplicate", function() {
var $wrapper = $('.wrapper .inner');
$wrapper.find('.color').each(function() {
$wrapper.append($(this).clone());
});
});
.wrapper {
width: 75%;
margin: 12px auto;
height: 26px;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
.wrapper .color {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
</div>
<button class='duplicate'>
Duplicate
</button>
In order to have two items in the same position in document flow you need to wrap them in a parent with position:relative and give one of them position:absolute; top:0;left:0. Also note that if your element doesn't have any content, you might need to define it's height and width. To make it same size as parent, you can give it top:0;bottom:0;left:0;right:0;.
Here's a demo started from your fiddle. You might want to inspect DOM after you press "Duplicate". I made it revert to original, so you can do it multiple times.
But do note your question is currently unclear. I'm afraid you lost me at "to make it spin and land on a colour slowly". It's truly poetic, but won't get you very far on SO...
I guess you are simply over complicating this. All what you need is a reapeated linear-gradient like this:
.wrapper {
width: 75%;
margin: 12px auto;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 25px;
display: flex;
border-radius: 6px;
overflow: hidden;
}
.wrapper .color {
width: 100%;
height: 100%;
}
.new {
margin-top:5px;
height:25px;
border-radius: 6px;
background-image:linear-gradient(to right,red,red 54%,purple 54%, purple 80%,orange 0);
background-size:100% 100%;
animation:change 5s linear infinite alternate;
}
#keyframes change {
from {
background-position:0 0;
}
to {
background-position:-1000px 0;
}
}
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
<div class="new"></div>
</div>
I am using a `.toggle("slide") function to try and get a piece of text I have to appear as if each letter is sliding in. Unfortunately, it looks as if the text is flying in instead. I tried to squeeze the margins in tight, so that it would start at a closer place, but it still looks as if it is flying in from the left side.
Is there a better way to do this, so it looks as if the letters are sliding in without "flying in"?
$("#home-learn").toggle("slide");
#blue {
background-color: #0085A1;
width: 100%;
height: 300px;
}
#home-learn {
color: #FFF;
display: none;
text-align: center;
position: relative;
margin: 0 40%;
top: 50%;
font-size: 2.3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blue">
<div id="home-learn">Learn more...</div>
</div>
For the effect you want, put a div inside your container. Make the div position absolute, make it 100% the height and width of the container, and make it the same background color as the main background. Make the div's z index higher than the container so the div sits over the text like a curtain. Then use toggle() to slide the curtain to the right exposing the text underneath.
Note that this uses jQuery UI, without it, you can't make toggle() slide to the right like this needs.(at least to my knowledge you cant). If you dont want to use jquery UI, you could use .animate() instead of toggle()
$("#curtain-div").toggle("slide", {
direction: "right"
}, 3000);
#blue {
background-color: #0085A1;
position: relative;
width: 100%;
height: 300px;
}
#home-learn {
color: #FFF;
text-align: center;
position: relative;
top: 50%;
font-size: 2.3em;
}
#curtain-div {
width: 100%;
height: 100%;
position: absolute;
background-color: #0085A1;
top: 0;
left: 0;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="blue">
<div id="home-learn">
<div id="curtain-div"></div>
Learn more...
</div>
</div>
I have this layout
body, html {
height: 90%;
}
#content{
width: 100%;
height: 100%;
}
#sidebar {
position: relative;
width: 200px;
float: left;
height: 100%;
background-color: green;
}
#sidebar-content {
height: 120px;
background-color: blue;
}
#sidebar-footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background-color: black;
}
#main {
position: relative;
overflow: hidden;
background-color: red;
}
#main-content {
height: 750px;
}
<div id="content">
<div id="sidebar">
<div id="sidebar-content">
</div>
<div id="sidebar-footer">
</div>
</div>
<div id="main">
<div id="main-content">
</div>
</div>
</div>
I need the sidebar to occupy all height available if it's height lower than the #main's. Setting the sidebar position to absolute solves this, but adding even more bugs, is there a solution for the relatively positioned child to get all the parent's height without specifying height of the parent in pixels?
As you can see in the fiddle, if #main exceeding the sidebar's width the sidebar is shorter, but it need to fill all the height.
CSS Flexbox does indeed solve your problem, and is the perfect answer if you don't have to support older browsers.
Basically, just adding display: flex to the container will sort this out for you.
Browsers support flexbox in a variety of ways, make sure you check the compiled CSS of that Pen to get all the browser pre-fixes and such.
Link to CodePen
You may be able to use a combination of css properties to achieve what you are looking for. The main reason you were running into trouble with the position:absolute was due to your float:left.
Have a glance through this and you may find some of the positioning and width declarations useful in your implementation:
body,
html {
height: 90%;
}
#content {
width: 100%;
height: 100%;
position: relative;
background: lightgray;
}
#sidebar {
position: absolute;
width: 200px;
height: 100%;
top: 0;
left: 0;
background-color: green;
z-index: 8;
}
#sidebar-content {
height: 120px;
background-color: blue;
}
#sidebar-footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background-color: black;
}
#main {
overflow: hidden;
background-color: red;
height: 100%;
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
z-index: 10;
}
#main-content {}
<div id="content">
<div id="sidebar">
<div id="sidebar-content">
</div>
<div id="sidebar-footer">
</div>
</div>
<div id="main">
<div id="main-content">this is the main content
</div>
</div>
</div>
I guess jQuery solution will help you solve your problem :) Try this This will allow to have the #sidebar to have same height as the container. Hope this helps :) Happy coding.
jQuery:
$(document).ready(function(){
var wrapH = $('#content').outerHeight();
$('#sidebar').css("height", wrapH);
});
Edited:
JS Fiddle Link
$(document).ready(function(){
var wrapH = $('#main').outerHeight();
$('#sidebar').css("height", wrapH);
});
Just change the content to main. Hope this solves the issue. This will make the sidebar height be the same as the main height.
I have two divs. I want the left div to hide and show automatically according to the window size, i.e. I want it to be responsive.
On the other hand, I want to hide/show the left div manually if necessary. I added a black separator in the middle. When the separator is clicked the left div hides and the right div takes the whole width.
Until now, everything is ok.
BUT. When I hide/show the left div manually, it ceases to react to the responsive code.
Please check this JSFiddle and lend me some help.
Thank you very much.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ffee99;
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.separator {
border-left: 3px solid #000000;
border-right: 3px solid #000000;
width: 0px;
height: 100%;
position: absolute;
top: 0px;
left: 300px;
z-index: 100;
}
.div2 {
background-color: #99eeff;
width: calc(100% - 300px);
height: 100%;
position: absolute;
top: 0px;
left: 300px;
}
#media screen and (max-width: 500px) {
.div {
display: none;
}
.separator {
left: 0px;
}
.div2 {
width: 100%;
left: 0;
}
}
</style>
<script>
$(function() {
function hideLeftDiv() {
$('.div1').hide();
$('.div2').css('width', '100%').css('left', 0);
$('.separator').css('left', '0px');
}
function showLeftDiv() {
$('.div1').show();
$('.div2').css('width', 'calc(100% - 300px)').css('left', '300px');
$('.separator').css('left', '300px');
}
$('.separator').click(function() {
$('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="separator"></div>
<div class="div2"></div>
</body>
</html>
Have a play with having two classes for identifying whether something is hidden or not i.e. desktop and mobile. You can then check whether its actually hidden with is(':hidden') and respond accordingly.
Check this fiddle for a quick demo http://fiddle.jshell.net/tmx3p6ts/31/
Read this: getbootstrap.com/css/#grid You can use the grid system to make a page like you have, but when the screen is getting to small, you can getbootstrap.com/css/#responsive-utilities use this link to know when to hide things.
So to help you maybe a step in the right direction:
<div class="container">
<div class="col-sm-4 hidden-xs">
This is the left div.
</div>
<div class="col-sm-8 col-sm-12">
This is the left div.
</div>
</div>
Something like this should work. Check out this fiddle: Fiddle with bootstrap
You can adjust the classes to any style you want.
if i mouseover on my nick in stackoverflow on top page that show me new menu with * activity
* privileges
* logout etc. how can i make it? i maked something:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">
#ONE {
background-color: #888;
width: 500px;
height: 500px;
}
#TWO {
background-color: blue;
width: 50px;
height: 50px;
}
#THREE {
background-color: yellow;
width: 200px;
height: 200px;
display: none;
}
#four {
background-color: red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
$(document).ready(
function()
{
$("#TWO").click(
function()
{
$("#THREE").toggle();
});
});
</script>
<div id="ONE">
<div id="TWO">
</div>
<div id="four">
</div>
<div id="THREE">
</div>
</div>
sample image: http://img231.imageshack.us/img231/3885/threej.png
default
click for blue div
how can i it make?
If I understand correctly, you're asking how to make the yellow div appear up beside the blue one, as you have it in the third mockup? If that's the case, then:
You'll want to read up on CSS Positioning. In a nutshell, to make the yellow div sit over everything like that, it needs to take position: absolute; It'll be positioned in relation to it's nearest ancestor that has positioning, so set #ONE to position: relative;
So:
#ONE {
position: relative;
}
#THREE {
position: absolute;
left: 100%;
top: 25%;
}
This will make the top-left of #THREE shift to the far right of and a quarter of the way down #ONE. The absolute positioning also takes it out of the flow of the document, allowing it to overlap other elements.
If you want to position elements on top of each other, use position: relative or absolute. If you want it to stick to a position on your window regardless of if you scroll, use fixed.
After defining the position, you can define top, right, bottom and left to position it where you want. To simulate the 3rd image in your example, you could add:
position:relative;
top: -220px;
left:50px;
to your #THREE elements CSS, like here:
http://jsfiddle.net/niklasvh/Axjgf/