tomykaira/from_fixed.html

## from_fixed.html
<html>
  <head>
    <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script><script type="text/javascript">
      $(document).ready( function () {
      $("body").click(function() {
    $("#from").effect("transfer", {
        to: "#to"
    },2000);
    $("#from").effect("transfer", {
        to: "#to2"
    },2000);

    // this simple fix kinda works because left/top happen to be 0
    // if you scroll down partially before clicking you'll see it break again

    $(".ui-effects-transfer").css('position', 'fixed');

    // strangely enough try clicking body twice after having scrolled down...
});
});
    </script>
    <style type="text/css" media="screen">
      .boxy {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    background: #abcdef;
}
.ui-effects-transfer {
    background: #abcdef;
    border: 1px dashed #000;
}

#from {
    position: fixed;
    top: 0;
    left: 0;
}

#to2 {
    position: absolute;
    top: 200;
    left: 500;
}

#to {
    position: fixed;
    bottom: 0;
    right: 0;
}

      #bg {
      width: 1000px;
}
    </style>
  </head>
  <body>

<div id="from" class="boxy">Transfer me</div>
<div id="to" class="boxy">To here</div>
<div id="to2" class="boxy">Here is abs</div>

<div id="bg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in volutpat nisl. Suspendisse potenti. Sed dignissim faucibus ante, eu hendrerit mauris pharetra vel. Aliquam mattis, nisl at faucibus fringilla, sapien orci pulvinar mi, interdum rutrum neque urna vel elit. Suspendisse ultrices porttitor libero ut lacinia. Phasellus leo justo, malesuada non iaculis at, feugiat vitae tortor. Donec sit amet urna nec odio pellentesque venenatis sed sit amet nibh. Proin urna nibh, cursus quis condimentum quis, fermentum vitae sem. Mauris luctus, lectus ac placerat eleifend, libero nisi pharetra magna, nec laoreet enim sem non neque. Donec a interdum diam. Ut faucibus quam eget est faucibus quis egestas quam ultrices. Nullam hendrerit libero sed elit semper a iaculis dolor congue. Pellentesque in sem orci. Sed nec nunc blandit felis sagittis imperdiet eu id ante. Phasellus non arcu eget quam suscipit vestibulum in eget lectus. Aliquam erat volutpat.

Nullam id facilisis ligula. Curabitur sagittis iaculis suscipit. Aliquam fringilla tincidunt diam eget condimentum. Sed gravida magna non urna dapibus lobortis. Curabitur bibendum, metus a pharetra suscipit, erat velit dignissim nunc, sed egestas enim elit ut justo. Cras ac risus in nisi fermentum placerat et vel mauris. Sed sed velit sed eros adipiscing dapibus sit amet ac ligula. Integer ligula libero, mattis vel vulputate et, elementum et odio. Morbi dignissim lorem a elit dictum ut pretium nulla luctus. Cras sed ante orci. Ut ut urna risus. Proin ornare purus a nunc luctus at sollicitudin neque egestas. Aliquam ac mattis nibh. Aliquam sit amet nunc metus. Nunc enim nisl, luctus ac luctus nec, ornare eget enim. Cras diam sem, interdum ac blandit nec, fringilla id orci. Phasellus ac nisl lectus. Praesent bibendum, enim at lobortis volutpat, risus ante pretium sem, hendrerit facilisis lectus tortor in nulla. Mauris non turpis tincidunt nibh scelerisque lacinia.

Curabitur volutpat augue lacinia urna tempus vel congue velit pellentesque. Sed congue arcu eu turpis interdum sagittis. Aliquam sodales, augue in venenatis vulputate, mi purus faucibus felis, a auctor ligula velit vitae nulla. Maecenas ligula mauris, malesuada eu interdum eu, volutpat eu sapien. Praesent imperdiet velit non dolor pellentesque fringilla. Suspendisse potenti. Etiam a neque a eros consequat vehicula. Proin nec arcu vel quam bibendum semper. Suspendisse commodo lectus sit amet justo scelerisque ac faucibus risus commodo. Proin tincidunt pharetra arcu, tempus varius elit laoreet at. Mauris luctus sollicitudin purus. Vivamus vitae turpis augue, ut ultricies magna. Quisque lorem massa, gravida blandit commodo non, condimentum eget diam. Duis in ante vitae nunc ornare volutpat.

Ut aliquam metus in lectus sodales pretium. Praesent blandit tortor nec velit suscipit et laoreet neque iaculis. Phasellus aliquam sapien et libero blandit in fringilla odio vestibulum. Vestibulum quis risus diam. Phasellus ut nunc urna. Donec pulvinar iaculis viverra. Praesent et tellus odio. Fusce dapibus varius porttitor. Ut risus nibh, elementum nec eleifend ut, porta ut orci. Donec at dolor justo, a imperdiet leo. Vivamus non felis ut ipsum blandit varius non nec neque. Mauris vitae erat et elit congue viverra quis a eros. Mauris sodales arcu sed dui aliquam varius. Morbi blandit, nulla sit amet porttitor porta, magna libero aliquam neque, non consectetur dui risus a orci. Donec in urna ante, sed luctus ligula.

Nullam ac quam eros, ut scelerisque est. Aliquam fermentum dui non lectus dictum rhoncus a vitae dui. Nam id orci turpis, eu tempus quam. Ut libero eros, luctus id sodales quis, consectetur sed orci. Sed et turpis dui, fringilla pulvinar sapien. Praesent blandit elementum feugiat. Vivamus non tortor sed velit sodales semper et sit amet orci. Aenean tempor luctus commodo. Integer quis sapien nisi. Quisque enim nisi, lacinia at tristique quis, adipiscing at sem. Nullam tincidunt consectetur mauris et faucibus. Cras egestas imperdiet nisi. Vestibulum imperdiet arcu purus, in auctor nisl. Suspendisse interdum molestie lorem et aliquam. Proin elementum quam vitae tortor tempor sed congue nulla placerat. Suspendisse blandit felis sed diam varius ac semper massa vestibulum. Sed varius luctus ante eu iaculis.

Nullam venenatis quam eu quam aliquam lobortis. Etiam sit amet neque sit amet turpis pretium accumsan. Etiam faucibus euismod nisi, id gravida elit gravida sit amet. Aenean tincidunt vulputate lacus, eu dapibus nisl faucibus eu. Nullam euismod, ante pulvinar tincidunt venenatis, odio est pellentesque diam, vitae sodales mi ligula quis magna. Aliquam eget mollis turpis. Quisque eu erat condimentum eros euismod venenatis nec faucibus nisi. Mauris ut sapien ac justo pellentesque accumsan non sit amet nisl. Suspendisse tortor neque, pretium vitae fermentum nec, mattis sit amet enim. Proin et sem sed turpis sagittis tempus. Ut porta fringilla nulla non sodales. In sed lacus magna. Suspendisse sagittis nibh in nulla malesuada eu viverra justo commodo. Sed hendrerit pellentesque elit, vitae varius nisl porttitor in. Curabitur tincidunt venenatis ipsum id vestibulum.

Quisque ultrices elementum pulvinar. Nam eleifend lacus in nunc fringilla blandit. Quisque arcu nulla, placerat luctus iaculis id, ornare nec urna. Nullam sed arcu magna, sit amet fermentum erat. Aenean imperdiet porttitor sapien ac tempus. Aliquam velit sem, tincidunt eu rhoncus nec, volutpat quis dui. Nam ipsum urna, blandit et varius vitae, vehicula vel lectus. Ut in quam eu dolor posuere sodales ut vel odio. Curabitur eu magna eu risus semper tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et quam nulla. Phasellus at viverra nisl. Phasellus eleifend nibh placerat risus accumsan porttitor. Aenean nec elit ut est vestibulum fringilla quis a erat.

Fusce euismod, libero eget molestie porttitor, erat nibh euismod tortor, non porttitor eros massa quis nisl. Pellentesque non congue eros. Cras ornare quam vel orci euismod ut pellentesque lectus pretium. Curabitur elit ipsum, euismod quis mollis iaculis, bibendum et ipsum. Vivamus porttitor mi ut tellus luctus venenatis. Vivamus vestibulum dictum semper. Mauris sit amet dui sed ante suscipit varius sit amet sit amet enim. Aliquam blandit aliquam dui at varius. Vestibulum sem turpis, interdum quis ullamcorper ac, egestas id metus. Ut placerat tortor at turpis laoreet at posuere magna molestie. Duis in velit et metus pharetra dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget lorem leo. Pellentesque erat mi, sodales congue cursus ac, adipiscing ut est.

Pellentesque risus est, placerat vitae venenatis a, tincidunt non lorem. Duis a elit quis tortor molestie venenatis a at justo. Etiam venenatis sagittis hendrerit. Duis eros lorem, tincidunt eu dapibus in, varius vitae tortor. Donec eget risus a sapien tincidunt lacinia. Suspendisse potenti. Maecenas viverra pulvinar mollis. Duis turpis est, vulputate eget auctor id, faucibus at massa. In adipiscing euismod hendrerit. In molestie sem in purus porttitor consequat. Mauris nisl mi, lobortis ut consequat vel, porttitor et eros. Integer sed eleifend nibh. Sed nec dui ligula. In vitae nisl quis sem elementum rutrum.

Aenean feugiat blandit dolor vel auctor. Donec auctor lobortis tristique. Nam nec turpis vel felis vulputate facilisis. Mauris eleifend tortor in nunc tincidunt a tristique erat viverra. Vivamus eleifend dolor sed ligula dictum at semper diam dictum. Sed sed tellus mi. Phasellus imperdiet feugiat pretium. Morbi posuere eleifend facilisis. Curabitur ac commodo orci. Cras metus arcu, tempus aliquet lobortis quis, eleifend ac massa. Nullam in turpis orci, id faucibus quam. Aenean a nisi in enim accumsan viverra ut in tortor.
</div>

  </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script><script type="text/javascript">
	$(document).ready( function () {
	$("body").click(function() {
	$("#from").effect("transfer", {
	to: "#to"
	},2000);
	$("#from").effect("transfer", {
	to: "#to2"
	},2000);

	// this simple fix kinda works because left/top happen to be 0
	// if you scroll down partially before clicking you'll see it break again

	$(".ui-effects-transfer").css('position', 'fixed');

	// strangely enough try clicking body twice after having scrolled down...
	});
	});
	</script>
	<style type="text/css" media="screen">
	.boxy {
	border: 1px solid #000;
	width: 100px;
	height: 100px;
	background: #abcdef;
	}
	.ui-effects-transfer {
	background: #abcdef;
	border: 1px dashed #000;
	}

	#from {
	position: fixed;
	top: 0;
	left: 0;
	}

	#to2 {
	position: absolute;
	top: 200;
	left: 500;
	}

	#to {
	position: fixed;
	bottom: 0;
	right: 0;
	}

	#bg {
	width: 1000px;
	}
	</style>
	</head>
	<body>

	<div id="from" class="boxy">Transfer me</div>
	<div id="to" class="boxy">To here</div>
	<div id="to2" class="boxy">Here is abs</div>

	<div id="bg">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in volutpat nisl. Suspendisse potenti. Sed dignissim faucibus ante, eu hendrerit mauris pharetra vel. Aliquam mattis, nisl at faucibus fringilla, sapien orci pulvinar mi, interdum rutrum neque urna vel elit. Suspendisse ultrices porttitor libero ut lacinia. Phasellus leo justo, malesuada non iaculis at, feugiat vitae tortor. Donec sit amet urna nec odio pellentesque venenatis sed sit amet nibh. Proin urna nibh, cursus quis condimentum quis, fermentum vitae sem. Mauris luctus, lectus ac placerat eleifend, libero nisi pharetra magna, nec laoreet enim sem non neque. Donec a interdum diam. Ut faucibus quam eget est faucibus quis egestas quam ultrices. Nullam hendrerit libero sed elit semper a iaculis dolor congue. Pellentesque in sem orci. Sed nec nunc blandit felis sagittis imperdiet eu id ante. Phasellus non arcu eget quam suscipit vestibulum in eget lectus. Aliquam erat volutpat.

	Nullam id facilisis ligula. Curabitur sagittis iaculis suscipit. Aliquam fringilla tincidunt diam eget condimentum. Sed gravida magna non urna dapibus lobortis. Curabitur bibendum, metus a pharetra suscipit, erat velit dignissim nunc, sed egestas enim elit ut justo. Cras ac risus in nisi fermentum placerat et vel mauris. Sed sed velit sed eros adipiscing dapibus sit amet ac ligula. Integer ligula libero, mattis vel vulputate et, elementum et odio. Morbi dignissim lorem a elit dictum ut pretium nulla luctus. Cras sed ante orci. Ut ut urna risus. Proin ornare purus a nunc luctus at sollicitudin neque egestas. Aliquam ac mattis nibh. Aliquam sit amet nunc metus. Nunc enim nisl, luctus ac luctus nec, ornare eget enim. Cras diam sem, interdum ac blandit nec, fringilla id orci. Phasellus ac nisl lectus. Praesent bibendum, enim at lobortis volutpat, risus ante pretium sem, hendrerit facilisis lectus tortor in nulla. Mauris non turpis tincidunt nibh scelerisque lacinia.

	Curabitur volutpat augue lacinia urna tempus vel congue velit pellentesque. Sed congue arcu eu turpis interdum sagittis. Aliquam sodales, augue in venenatis vulputate, mi purus faucibus felis, a auctor ligula velit vitae nulla. Maecenas ligula mauris, malesuada eu interdum eu, volutpat eu sapien. Praesent imperdiet velit non dolor pellentesque fringilla. Suspendisse potenti. Etiam a neque a eros consequat vehicula. Proin nec arcu vel quam bibendum semper. Suspendisse commodo lectus sit amet justo scelerisque ac faucibus risus commodo. Proin tincidunt pharetra arcu, tempus varius elit laoreet at. Mauris luctus sollicitudin purus. Vivamus vitae turpis augue, ut ultricies magna. Quisque lorem massa, gravida blandit commodo non, condimentum eget diam. Duis in ante vitae nunc ornare volutpat.

	Ut aliquam metus in lectus sodales pretium. Praesent blandit tortor nec velit suscipit et laoreet neque iaculis. Phasellus aliquam sapien et libero blandit in fringilla odio vestibulum. Vestibulum quis risus diam. Phasellus ut nunc urna. Donec pulvinar iaculis viverra. Praesent et tellus odio. Fusce dapibus varius porttitor. Ut risus nibh, elementum nec eleifend ut, porta ut orci. Donec at dolor justo, a imperdiet leo. Vivamus non felis ut ipsum blandit varius non nec neque. Mauris vitae erat et elit congue viverra quis a eros. Mauris sodales arcu sed dui aliquam varius. Morbi blandit, nulla sit amet porttitor porta, magna libero aliquam neque, non consectetur dui risus a orci. Donec in urna ante, sed luctus ligula.

	Nullam ac quam eros, ut scelerisque est. Aliquam fermentum dui non lectus dictum rhoncus a vitae dui. Nam id orci turpis, eu tempus quam. Ut libero eros, luctus id sodales quis, consectetur sed orci. Sed et turpis dui, fringilla pulvinar sapien. Praesent blandit elementum feugiat. Vivamus non tortor sed velit sodales semper et sit amet orci. Aenean tempor luctus commodo. Integer quis sapien nisi. Quisque enim nisi, lacinia at tristique quis, adipiscing at sem. Nullam tincidunt consectetur mauris et faucibus. Cras egestas imperdiet nisi. Vestibulum imperdiet arcu purus, in auctor nisl. Suspendisse interdum molestie lorem et aliquam. Proin elementum quam vitae tortor tempor sed congue nulla placerat. Suspendisse blandit felis sed diam varius ac semper massa vestibulum. Sed varius luctus ante eu iaculis.

	Nullam venenatis quam eu quam aliquam lobortis. Etiam sit amet neque sit amet turpis pretium accumsan. Etiam faucibus euismod nisi, id gravida elit gravida sit amet. Aenean tincidunt vulputate lacus, eu dapibus nisl faucibus eu. Nullam euismod, ante pulvinar tincidunt venenatis, odio est pellentesque diam, vitae sodales mi ligula quis magna. Aliquam eget mollis turpis. Quisque eu erat condimentum eros euismod venenatis nec faucibus nisi. Mauris ut sapien ac justo pellentesque accumsan non sit amet nisl. Suspendisse tortor neque, pretium vitae fermentum nec, mattis sit amet enim. Proin et sem sed turpis sagittis tempus. Ut porta fringilla nulla non sodales. In sed lacus magna. Suspendisse sagittis nibh in nulla malesuada eu viverra justo commodo. Sed hendrerit pellentesque elit, vitae varius nisl porttitor in. Curabitur tincidunt venenatis ipsum id vestibulum.

	Quisque ultrices elementum pulvinar. Nam eleifend lacus in nunc fringilla blandit. Quisque arcu nulla, placerat luctus iaculis id, ornare nec urna. Nullam sed arcu magna, sit amet fermentum erat. Aenean imperdiet porttitor sapien ac tempus. Aliquam velit sem, tincidunt eu rhoncus nec, volutpat quis dui. Nam ipsum urna, blandit et varius vitae, vehicula vel lectus. Ut in quam eu dolor posuere sodales ut vel odio. Curabitur eu magna eu risus semper tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et quam nulla. Phasellus at viverra nisl. Phasellus eleifend nibh placerat risus accumsan porttitor. Aenean nec elit ut est vestibulum fringilla quis a erat.

	Fusce euismod, libero eget molestie porttitor, erat nibh euismod tortor, non porttitor eros massa quis nisl. Pellentesque non congue eros. Cras ornare quam vel orci euismod ut pellentesque lectus pretium. Curabitur elit ipsum, euismod quis mollis iaculis, bibendum et ipsum. Vivamus porttitor mi ut tellus luctus venenatis. Vivamus vestibulum dictum semper. Mauris sit amet dui sed ante suscipit varius sit amet sit amet enim. Aliquam blandit aliquam dui at varius. Vestibulum sem turpis, interdum quis ullamcorper ac, egestas id metus. Ut placerat tortor at turpis laoreet at posuere magna molestie. Duis in velit et metus pharetra dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget lorem leo. Pellentesque erat mi, sodales congue cursus ac, adipiscing ut est.

	Pellentesque risus est, placerat vitae venenatis a, tincidunt non lorem. Duis a elit quis tortor molestie venenatis a at justo. Etiam venenatis sagittis hendrerit. Duis eros lorem, tincidunt eu dapibus in, varius vitae tortor. Donec eget risus a sapien tincidunt lacinia. Suspendisse potenti. Maecenas viverra pulvinar mollis. Duis turpis est, vulputate eget auctor id, faucibus at massa. In adipiscing euismod hendrerit. In molestie sem in purus porttitor consequat. Mauris nisl mi, lobortis ut consequat vel, porttitor et eros. Integer sed eleifend nibh. Sed nec dui ligula. In vitae nisl quis sem elementum rutrum.

	Aenean feugiat blandit dolor vel auctor. Donec auctor lobortis tristique. Nam nec turpis vel felis vulputate facilisis. Mauris eleifend tortor in nunc tincidunt a tristique erat viverra. Vivamus eleifend dolor sed ligula dictum at semper diam dictum. Sed sed tellus mi. Phasellus imperdiet feugiat pretium. Morbi posuere eleifend facilisis. Curabitur ac commodo orci. Cras metus arcu, tempus aliquet lobortis quis, eleifend ac massa. Nullam in turpis orci, id faucibus quam. Aenean a nisi in enim accumsan viverra ut in tortor.
	</div>

	</body>
	</html>