Hi all. I have some problems implementing the animate function, and most has to do with de CSS declaration. The following is my html and CSS based on an old demo from Paul OB. I am using this because I need a div vertical aligned in the center:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
height: 100%;
}
/********************
HTML
********************/
body:before {
content:'';
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1;
font-size: 100%;
background: #000;
color: #000;
}
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
z-index: -999;
}
#bg img {
max-width: 100%;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
/********************
WRAPPERS
********************/
#header {
width: 65%;
max-width:1000px;
margin: 0 0 40px 3%;
height: 76px;
position:relative;
z-index:2;
}
#outer {
width: 65%;
max-width:1000px;
margin: -196px 0 0 3%;/* header plus footer height */
height:100%;
text-align:left;
display:table;
position:relative;
z-index:1;
overflow: hidden;
}
#footer {/* footer now sits at bottom of window*/
width: 65%;
max-width:1000px;
margin: 40px 0 0 3%;
background:red;
height:40px;
clear:both;
position:relative;
z-index:2;
}
/* */
#header #logo {
width: 31.5%;
height: 70px;
margin: 3px 0;
float: left;
}
#header #logo img {
max-width: 100%;
}
/* */
#content {
vertical-align:middle;
display:table-cell;
padding:196px 0 0;
}
.table {
display:table;
table-layout:fixed;
width:100%;
}
#content .sidebar {
background:green;
padding:0 10px;
display:table-cell;
*float:left;
width:25%;
vertical-align:top;
position: relative;
z-index: 3;
}
#content .content {
background:blue;
padding:0 10px;
*float:left;
width: 100%;
vertical-align:top;
display: none;
position: relative;
left: -100%;
z-index: 2;
}
</style>
</head>
<body>
</head>
<body>
<div id="header">
<div id="logo"><img src="images/site/logo.png"></div>
</div>
<div id="outer">
<div id="content">
<div class="table">
<div class="sidebar">
<p>start test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>
<div class="content">
<p>start test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>end test content</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content").css("display", "block").animate({left: 0}, 900);
});
</script>
</body>
</html>
Everything is working fine, except with the declaration
.css("display", "block")
I actually have to set that to
.css("display", "table-cell")
to make the sidebar and content divs equal heights, but when I do that the animation isn’t working any longer in the way I need it. It is starting all the way to the right. Just see what happens when you use:
.css("display", "table-cell")
What am I doing wrong?
Thank you in advance!!!