SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .animate function

    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:

    Code:
    <!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
    Code:
    .css("display", "block")
    I actually have to set that to

    Code:
    .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:

    Code:
    .css("display", "table-cell")
    What am I doing wrong?

    Thank you in advance!!!!!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi donboe,

    What about if you change your JavaScript to this:

    Code JavaScript:
    $(document).ready(function(){
      var h = $(".sidebar").height();
      $(".content").css({"display" : "block", "height" : h}).animate({left: 0}, 900);
    });

    It works on the demo page, maybe that'll do for your live site.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great Pullo, thank you so much
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. I was cheering a bit to early because the content div is different on each page, so the sidebar div actually needs to adjust to the content div, Is there any way to do that? Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Not sure.
    Can you post a link to two pages where the divs are varying height?

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo the links are:

    Link 1 and link 2

    Here you can see what I mean. Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi donboe,

    What I would do is to check which is higher, the sidebar or the content area, and set the height accordingly.

    Try this:

    Code JavaScript:
    $(document).ready(function(){
      var s = $(".sidebar").height();
      var c = $(".content").height()
      var h = (c>s)? c : s;
      if (c>s){h += (h/100)*20;}
      $(".content").css({"display" : "block", "height" : h}).animate({left: 0}, 900);
    });

    The CSS on your page was causing a bit of weird behaviour, so that the content would overflow its container by a small percentage of its height.
    Thats why I added if (c>s){h += (h/100)*20;}

    HTH


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •