Dear Sir/Madam,
I try to modify the sample "http://jqueryui.com/demos/
effects_general/#transfer" such that when the element "transfer-
target" is clicked, it will show/hide the "transfer" element. However,
if the element "Transfer" is set to be an absolute layer and set to
different position. It is find that the effect cannot track to the
right position. Below is the modified code. Please take it and try and
you'll know what I mention.
Just want to know if there is any alternative. Thanks.
----------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Effects - Transfer Demo</title>
<link type="text/css" href="themes/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery-ui-
personalized-1.5.3.js"></script>
<link type="text/css" href="themes/demos.css" rel="stylesheet" />
<style type="text/css">
.ui-effects-transfer { border: 2px dotted gray; }
#transfer { width: 240px; height: 135px; padding: 0.4em; }
#transfer h3 { margin: 0; padding: 0.4em; text-align: center; }
#transfer-target { width: 80px; height: 80px; margin-top: 80px;
}
</style>
<script type="text/javascript">
$(function() {
$("#transfer").click(function() {
$(this).effect("transfer", {to: "#transfer-target"},
null, function
() {$(this).hide();});
});
$("#transfer-target").click(function() {
if ($("#transfer").is(':visible')) {
$("#transfer").effect("transfer", { to:
"#transfer-target"}, null,
function() {$("#transfer").hide();} );
} else {
$(this).effect("transfer", { to: "#transfer"},
null, function() {$
("#transfer").show();} );
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="transfer" class="ui-widget-content ui-corner-all"
style="position:absolute; left:114px; top:65px; border:1px solid
#f00">
<h3 class="ui-widget-header ui-corner-all">Transfer</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem.
Sed
pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae,
mi.
</p>
</div>
<div id="transfer-target" class="ui-widget-header" style="border:1px
solid #666"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Click above to preview the <code>.effect("transfer")</code> effect.
</p>
</div><!-- End demo-description -->
</body>
</html>
----------------------------------------------------------------------------------
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
