Home/ Questions/Q 7159969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T13:19:11+00:00

some how i manage to have jquery transfer effect working with jquery dialog but

  • 0

some how i manage to have jquery transfer effect working with jquery dialog but there is one glitch. here is the url http://jsbin.com/amicev/2 please go and see. the glitch is when dialog appear then dialog appear before the transfer effect complete. i want that dialog should appear after transfer effect complete. if i try to write the code for showing dialog after the completion of transfer effect.

so here is my full code

<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block; }
.ui-effects-transfer {
border: 2px dotted grey;
}
</style>
</head>
<body>
<input type="button" id="btnToggle" value="Toggle Dialog">
<div id="dialog" title="Basic dialog" style="display: none">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>

 jQuery(function($) {
// Set up the dialog, don't show it yet
// Note the effects, they tie up with the
// transfer effect we do later.
 $("#dialog").dialog({
 show: {
  effect:   "fade",
  duration: 1000
},
hide: {
  effect:   "fade",
  duration: 500
},
autoOpen: false
});

// Hook up the button to toggle showing/hiding
// the dialog
$("#btnToggle").click(function() {
var dlg = $("#dialog");

// Show or hide?
if (dlg.is(":visible")) {
  // Hide: Kick off the transfer effect and close the
  // dialog. The transfer will run simultaneously
  // with the fade we configured above
  dlg.effect("transfer", {
    to: "#btnToggle",
    className: "ui-effects-transfer",
    duration: 500
  }).dialog("close");
 }
 else {
  // Show: Show the dialog, then kick off a transfer
  // effect transferring the button to the dialog's
  // widget. Again the transfer and fade run simultaneously
  // and so work together.
  dlg.dialog("open");
  $(this).effect("transfer", {
    to: dlg.dialog("widget"),
    className: "ui-effects-transfer"
  }, 500);
}
return false;
});
});

if i try to modify this line to appear dialog after transfer effect complete then output is getting distorted.

     $(this).effect("transfer", {
     to: dlg.dialog("widget"),
     className: "ui-effects-transfer"
     }, 500,function() { dlg.dialog("open"); });

so i just want to show dialog after completion of transfer effect. so tell me what i need to change in the code as a result output should not distorted.

thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you have seen firsthand, you cannot reliably trigger the transfer effect if the dialog widget is hidden through display: none; (since the widget’s dimensions cannot be measured under these conditions).

    However, you can set its visibility property to hidden, trigger the effect, then set the property back to visible. This gives good results in my tests:

      dlg.dialog("open").dialog("widget").css("visibility", "hidden");
  $(this).effect("transfer", {
      to: dlg.dialog("widget"),
      className: "ui-effects-transfer"
  }, 500, function() {
      dlg.dialog("widget").css("visibility", "visible");
  });

    You will find an updated JS Bin here.

    • 0