Jquery animation help - javascript

Is it possible to animate two divs widths at the same time (one increasing, one decreasing) so that the parent containers overall width remains exactly the same.
As an example, a container div contains 5 child divs. Teh container div is 1000px wide and 4 of the child divs are 150px wide and another is 400px. I want to be able to animate the 400px div down to 150px and one of the 150px divs up to 400px;
The problem I am getting is that the parent container shrinks and expands as the animation completes - and it happens noticeable.
I am not looking for a plugin or anything for this, simply some advice on the best way of achieving this.
Many thanks in advance for any help.
EDIT:
The main problem is that every div on the right of the one being animated gets pulled to the left and then sent back out when complete.
Here is the code I am using
<style type='text/css'>
.panel-wrapper {
width: 954px;
height: 372px;
background-color: #fff;
position: relative;
overflow: hidden;
}
.panel-wrapper .panel {
margin-right: 1px;
height: 100%;
width: 64px;
float: left;
background-color: #cacaca;
}
#home-panel {
width: 359px;
}
.panel.last {
margin-right: 0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery('.panel').mouseenter(function() {
jQuery('.panel-wrapper .open').stop().animate({width:"64px"},400, 'linear');
jQuery('.panel-wrapper .open').removeClass('open');
jQuery(this).addClass('open');
jQuery(this).stop().animate({width:"359px"},400, 'linear');
});
});
//]]>
</script>
<div class='panel-wrapper'>
<div id='home-panel' class='panel open'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel last'>
</div>
</div>

Set the parent height to a fixed number of pixels will keep it from shrinking or expanding.

Include an empty div of 1000px width after the divs you want to antimate. That should keep the wrapper div from shrinking.

Related

Slide a div from left-right or right left with preserving div size

I want a slide effect on a div from left to right or from right to left as in
$('#div').show('slide', {direction:'left'}, 1000);
being my html is
<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div
But the problem with this approach is that we are hiding the #div initially by setting
#div{
display:none;
}
so that we cannot preserve the width of #div
I have came across another method by making the visibility: hidden as in
$("div").css("visibility", "hidden");
to preserve the width of the div
but this method does not give the sliding effect from left to right or right to left
So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with
preserving the div width"
Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.
$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>
Good luck!
You can wrap your div in another div with overflow:hidden and than you move to right or left the div inside.

bigvideo.js - stack DIVs over and under bigvideo container

So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?
Update, here is an illustration of what I kind of what to achieve:
Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).

How to arrange floating elements vertically

I have 3 fieldsets.
What I would like to make is this layout:
I want the bottom right fieldset to be bottom aligned, so it's bottom would be aligned with the left fieldset.
It should work in different resolutions.
Is there an easy way? or I will have to use javascript to add to it a margin-top dynamically?
code:
<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>
</fieldset>
<div class="rightFieldSets">
<fieldset>test2</fieldset>
<fieldset class="bottomRightFieldSet">test3</fieldset>
</div>
css:
.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}
here is the a link:
http://jsfiddle.net/bbryK/
My solution assumes two things:
The right column has a fixed width.
The left column must always be the highest.
See http://jsfiddle.net/c3AFP/2/
Html structure:
<div class="container">
<div class="right">
<fieldset class="top"></fieldset>
<fieldset class="bottom"></fieldset>
</div>
<fieldset class="left"></fieldset>
</div>
Css styles:
.container {
position: relative;
}
.top, .bottom {
width: 300px;
}
.left {
margin-right: 300px;
}
.right {
float: right;
margin-left: 10px;
}
.bottom {
position: absolute;
bottom: 0;
}
EDIT:
Here is a solution with the right column sized by percentage: http://jsfiddle.net/c3AFP/5/
EDIT 2:
Here is a table based solution which removes the requirement of the left column being the tallest. Using vertical-align you can adjust where the smaller elements should align in relation to the tallest one: http://jsfiddle.net/c3AFP/7/
I'm giving you a start point on fiddle. Please play around, make some code and do share the same.
http://jsfiddle.net/vY462/
#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

Grid of divs that are size of viewport

I want to make a grid of divs that are the size of the viewport. Just to set a few basic variables, lets say I want it to be 7 divs wide and 10 divs high.
Here is a code I have so far to set the div size:
function height() {
var height = $(window).height();
height = parseInt(height) + 'px';
$(".page").css('height',height);
}
$(document).ready(function() {
height();
$(window).bind('resize', height);
});
function width() {
var width = $(window).width();
width = parseInt(width) + 'px';
$(".page").css('width',width);
}
$(document).ready(function() {
width();
$(window).bind('width', width);
});
Right now I just have 2 divs that are stacked on top of each other. One is red and one is black, just so I can see them. I want to be able to put content inside the divs. I also made sure to put
body {
margin: 0px;
}
Later I am going to put some scrolling features with jQuery but for now I just want a way to make the grid.
Edit:
Each individual div is the size of the viewport
Edit:
I used this handy plugin for the scrolling that is much better then a small script at the end of the page
You won't need any javascript for this as it can be easier achieved with just CSS.
HTML
<div id="content1">
Place your content here.
</div>
<div id="content2">
Place your content here.
</div>
<div id="content3">
Place your content here.
</div>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#content1,#content2,#content3 {
min-height: 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
}
EXAMPLE 1
All 3 divs have the size of the browser window and of course they adjust accordingly. Also you can add a anchor link to navigate from tab to tab with again just html/css
Go to Main Element
If a navigation like this is something you would like to have then you can have a look on the
EXAMPLE 2
PS: in the example i have separated the css of the boxes just to put different colors but you can have it as i posted it above.
I've also created another fiddle for you, as my first two versions were missing something...You asked for a couple of divs vertically and a couple horizontally.
EXAMPLE 3
This example has 3x2 divs (6 total) but with the same logic you can make them 7x10.
Please don't hesitate to ask if you don't understand anything in the code.
Also i've added a bit of jQuery to make the scrolling more smooth, which is optional, you can just remove it
JavaScript (don't forget to include jQuery)
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
Hope this helps you
EDIT: You need to include jQuery in your code and also wrap the javascript code with:
$(window).load(function(){
});
I can't tell if you want the div to be the entire size of the screen and then have the overflow scroll - and shoot over to the next panel, or if you want your grid of divs to be the size of the viewport. If it's the second, here is my answer.
fiddle is here:
HTML
<div class="block">01</div>
<div class="block">02</div>
<div class="block">03</div>
<div class="block">04</div>
<div class="block">05</div>
<div class="block">06</div>
<div class="block">07</div>
<div class="block">etc. (to 70)</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
margin: 0;
}
html {
height: 100%;
background-color: orange;
}
body {
height: 100%;
border: 1px solid blue;
}
.block {
width: 14.285714%%; /* 100/7 */
float: left;
height: 10%; /* 100/10 */
border: 1px solid rgba(255,255,255,.5);
}
Now, If that's not what you wanted, maybe this is.
fiddle is here:
HTML
<div id="content1" class="block">
<h2>block 01</h2>
</div>
<div id="content2" class="block">
<h2>block 02</h2>
</div>
<div id="content3" class="block">
<h2>block 03</h2>
</div>
<div id="content4" class="block">
<h2>block 04</h2>
</div>
<div id="content5" class="block">
<h2>block 05</h2>
</div>
<div id="content6" class="block">
<h2>block 06</h2>
</div>
<div id="content7" class="block">
<h2>block 07</h2>
</div>
<div id="content8" class="block">
<h2>block 08</h2>
</div>
<!-- you'll need 70... ? -->
<nav class="global-nav">
01
02
03
04
05
06
07
08
</nav>
CSS ( a little SASS in here for quickness )
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
html {
width: 700%;
/* overflow: hidden; */
/*This would hide the scroll bars but I'm leaving them for you to see */
}
.block {
min-height: 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
width: 100%/7; /* SASS division to be quick*/
float: left;
border: 1px solid red;
}
.global-nav {
position: fixed;
bottom: 0;
left: 0;
}
.global-nav a {
display: block;
color: black;
}

Center div inside 100% width container with dynamic width left and right floats

I want to have 3 divs aligned inside a container div, like this:
[[LEFT] [CENTER] [RIGHT]]
Container div is 100% wide (no fixed width), and center div should remain in center after resizing the container.
Left and Right DIV have no fixed width and need to expand/contract with the container. Center DIV does have a fixed width.
I have this:
<div style="width: 100%">
<div style="float: left; height: 50px;"></div>
<div style="float: right; height: 50px;"></div>
<div style="margin: 0 auto; height: 50px; width: 500px;"></div>
</div>
Problem is, the left and right do not show because there is no set width
Any suggestions?
You can't do that with pure CSS. You need to use JavaScript. In the example below Middle div is fixed at 400px while remaining space is be split between left and right divs. With jQuery you can do
function calc() {
var ww = $(window).width();
var rem = ww - $('.div2').width();
$('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);
Check working example at http://jsfiddle.net/M5Ghx/3/
Another option, if you wanted to avoid using javascript, would be to give the center div an absolute position and create two divs to use as buffers within the left and right divs:
<div style="width: 100%; text-align:center">
<div style="width:50%; height: 50px; float:left">
<div style="width:250px; height: 50px; float:right"></div>
</div>
<div style="margin-right:auto; margin-left:auto; position:absolute; left:0; right:0; width: 500px;height:50px;"></div>
<div style="width:50%; height: 50px; float:right">
<div style="width:250px; height: 50px; float:left"></div>
</div>
</div>
If you only care about Mozilla and WebKit, then you should look in to using the Flexible Box Model:
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
That will solve all your centering issues in pure CSS. Just be sure to read the docs and play around with the different options so that you understand how it works.

Categories

Resources