Databases
StackOverflow2013
Postsdbo
POjquery animate function overlapping footer
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery animate function overlapping footer
    primarykey
    data
    text
    <p>I'm currently working on a website and one of the page contains a jQuery animate function that moves a <code>div</code> container as I scroll along the page. This works fine however when I zoom in or make the screen bigger it overlaps with the footer.</p> <p>How can I fix this?</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="../css/css.css" /&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js "&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../js/js.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ //Larger thumbnail preview $("#thumbImages.thumb p").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '170px', height: '170px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("#thumbImages.thumb p a").click(function() { $('#wrapper').append('&lt;span id="imageLoad"&gt;LOADING...&lt;/span&gt;'); $('#imageLoad').fadeIn('normal'); var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }, hideLoader()); return false; function hideLoader() { $('#imageLoad').fadeOut('normal'); } }); }); &lt;/script&gt; &lt;script&gt; $().ready(function() { var $main_view = $("#main_view"); $(window).scroll(function(){ $main_view .stop() .animate({"marginTop": ($(window).scrollTop() - 14) + "px" }, "slow" ); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;h1&gt;Header&lt;/h1&gt; &lt;ul&gt; &lt;li id="nav1"&gt;&lt;a href="../index.html"&gt;Welcome&lt;/a&gt;&lt;/li&gt; &lt;li id="nav1"&gt;&lt;a href="about.html"&gt;Why Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="facilities.html"&gt;Facilities&lt;/a&gt;&lt;/li&gt; &lt;li id="nav1"&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li id="nav1"&gt;&lt;a href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="other.html"&gt; Other &lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="7RepairSteps.html"&gt; Repair Steps&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="scaletrix.html"&gt;Scaletrix&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="reviews.html"&gt;Customer Reviews&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id="nav1"&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="content"&gt; &lt;div id="portfolioImages" style="height:900px;"&gt; &lt;h2&gt;Our Work&lt;/h2&gt; &lt;div class="thumb" id="thumbImages"&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/before1.jpg"&gt;&lt;img class="" src="../images/portfolio/before1.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/before1i.jpg"&gt;&lt;img class="" src="../images/portfolio/before1i.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/after1.jpg"&gt;&lt;img class="" src="../images/portfolio/after1.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/after1i.jpg"&gt;&lt;img class="" src="../images/portfolio/after1i.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/before2.jpg"&gt;&lt;img class="" src="../images/portfolio/before2.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/after2.jpg"&gt;&lt;img class="" src="../images/portfolio/after2.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/before3.jpg"&gt;&lt;img class="" src="../images/portfolio/before3.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/after3.jpg"&gt;&lt;img class="" src="../images/portfolio/after3.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/before4.jpg"&gt;&lt;img class="" src="../images/portfolio/before4.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/after4.jpg"&gt;&lt;img class="" src="../images/portfolio/after4.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/before5.jpg"&gt;&lt;img class="" src="../images/portfolio/before5.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/before5i.jpg"&gt;&lt;img class="" src="../images/portfolio/before5i.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/after5.jpg"&gt;&lt;img class="" src="../images/portfolio/after5.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="z-index: 0;"&gt;&lt;a href="../images/portfolio/after5i.jpg"&gt;&lt;img class="" src="../images/portfolio/after5i.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="border:solid; width:410px; overflow:hidden; float:right"" id="main_view"&gt;&lt;a href="" title="" target=""&gt;&lt;img src="../images/portfolio/before1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="foot" style="position:relative;"&gt; Footer Information &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>#content a:link {color:#686868; text-decoration:none;} #content a:visited {color: #686868; text-decoration:none;} #content a:hover {color: #686868; text-decoration:none; font-weight:bold;} #content a:active {color: #686868; text-decoration:none;} #content a:focus{color: #686868; text-decoration:none;} body { font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; color: #343434; background: #7DC623; margin: 0; padding: 0; } #wrapper { width: 710px; margin: 30px auto; background: #0d0d0d url(../images/header.jpg) no-repeat; padding: 55px 25px 25px 25px; border: 12px solid #2e2e2e; position:relative; } h1 { text-transform: uppercase; text-align: center; margin: 0; padding: 0.3em 0; text-indent:-99999px; } ul { list-style: none; padding: 0; margin: 10px 0 20px 0; background: #2e2e2e url(../images/nav_bar.jpg) repeat-x; display: block; font-size: 0.9em; height:33px; text-transform:capitalize; text-align: center; } ul li { display: block; position: relative; float: left; } li ul { display: none; margin-top: 0; } ul li a { display: block; text-decoration: none; color: #49BDEF; padding: 10px 20px; margin-top: 0; text-align: center; } input{ color: #49BDEF; padding: 10px 20px; margin-top: 0; background: #2e2e2e url(../images/nav_bar.jpg) repeat-x; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #1b1b1b url(../images/nav_bar_o.jpg) repeat-x;} li:hover li a:hover { background: #1e7c9a; } #load { display: none; position: absolute; right: 10px; top: 10px; background: url(../images/ajax-loader.gif); width: 43px; height: 11px; text-indent: -9999em; } #imageLoad { display: none; position: absolute; right: 10px; top: 10px; background: url(../images/loader.gif); width: 43px; height: 11px; text-indent: -9999em; } #content { } h2 { margin: 0; padding: 0.5em 0; color:#568945; font-family:Helvetica, Arial, Sans-serif; } p { margin: 0; padding: 0.4em 0; color:#686868; line-height:1.4em; } #content img.right { float: right; margin: 0 0 8px 8px; } #content img.left { float: left; margin: 0 8px 2px 4px; } #productImage{ width: 193px; height:145px } #productImage:hover{ width: 250px; height:200px; } #sampleImage{ width: 193px; height:145px; border: 1px solid #CCCCCC; } #sampleImage:hover{ width: 250px; height:200px; border: 1px solid #CCCCCC; } #foot { padding: 15px; color: white; text-align: center; margin: 30px 0 0 0; border-top:1px solid #222222; } #searchbox { height: 30px; position: relative; overflow: hidden; border-style: solid; border-color: #0d0d0d; } #searchbox:hover { height: 100%; position: relative; border-style: solid; border-color: #0d0d0d; } #content { } #thumbImages.thumb { float:left; list-style: none; margin: 0; padding: 10px; width: 260px; } #thumbImages.thumb p { margin: 0; padding: 5px; position: relative; width: 110px; float:left; height: 110px; } #thumbImages.thumb p img { width: 100px; height: 100px; border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; -ms-interpolation-mode: bicubic; } #thumbImages.thumb p img.hover { background:none; border: none; } #main_view img { height: 310px; width: 410px; border: none; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USj0k
    1. USAaron Mohammed
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POjquery animate function overlapping footer
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COyou can use http://jsfiddle.net for demo
      singulars
      1. POjquery animate function overlapping footer
      1. USKarSho
    2. CODoes this solve . http://jsfiddle.net/cr8L9/ ...?
      singulars
      1. POjquery animate function overlapping footer
      1. USAnujith
    3. COYES OMG! Thank you so much!! I just had to change $('body').height() - 500 to $('#wrapper').height() - 500....thanks alot A.V
      singulars
      1. POjquery animate function overlapping footer
      1. USAaron Mohammed
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload