Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong><a href="http://jsbin.com/upaxiz/3/edit" rel="nofollow">jsBin demo</a></strong></p> <p>CSS:</p> <pre><code>#girl{ position:absolute; top:0px; } #content{ position:absolute; top:20px; left:300px; width:400px; } #girl_wrapper{ position:absolute; top:0px; overflow:hidden; } </code></pre> <p>HTML:</p> <pre><code>&lt;div id="girl"&gt; &lt;img src="http://bandonrandon.com/wp-content/themes/BR2011/images/xmas/brooke_xmas.png" class="active" /&gt; &lt;/div&gt; &lt;div id="content"&gt; Cras volutpat mattis ullamcorper. Mauris sit amet sapien non quam convallis fermentum. Nunc mauris est, dapibus in imperdiet commodo, egestas et est. Sed tortor enim, adipiscing in consectetur quis, luc... more and more IPSUM ... &lt;/div&gt; </code></pre> <p>jQuery:</p> <pre><code>var girlW = $('#girl').width(); $('#girl').click(function() { var winH = $(window).height(); $(this) .wrap('&lt;div id="girl_wrapper" style="height:'+winH+'px; width: '+girlW+'px"/&gt;') .animate({top: winH}, 1500 ) ; return false; }); </code></pre> <hr> <p>I had the idea to (at click) wrap your DIV with image into a absolute positioned element that will dynamically set it's width and height depending on the <code>window height</code> and <code>girl image width</code>, but with overflow hidden. <br>Doing so, the girl animation will happen INSIDE that element.</p> <p>After the animation is done I would suggest to <code>.remove()</code> that wrapper (If you don't need any more the <em>girl</em> element) anyway, to prevent that div disallow clicks to possible future elements underneath.</p> <p>Ask if you have questions!</p> <p>Happy coding/designing! </p>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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