how to animate a dialog on show and hide?

[Slapyo]

In the Hello World example the dialog shows some animation on show() and on hide(). I can't see where you can set the animation, type of animation. In the documentation I can see that you can set the animateTarget by passing it to the show and hide. When I do this, I don't get the full dialog, I just get the element that appears for for the proxyDrag, even though that is false.

[tryanDLS]

Can you post some code? Did you include the CSS files?

[Slapyo]

If I don't pass anything in show and hide everything works just fine, but there is no animation which I would like.

I am using the latest yui-ext 0.33 rc3. I include the yui-ext.css file and include all of the images.


var wholesite = function() {
var dlgCreateString, dlgEditString, btnCreateString;
return {
init : function() {
btnCreateString = getEl('btnCreateString');
btnCreateString.on('click', this.showCreate, this, true);
},
showCreate : function() {
if (!dlgCreateString) {
dlgCreateString = new YAHOO.ext.BasicDialog('createString', {
width: 300,
height: 300,
shadow: true,
resizable: false
});
dlgCreateString.addButton('Close', dlgCreateString.hide, dlgCreateString);
dlgCreateString.addButton('Submit', function() {}, this);
}
if(dlgEditString) {
dlgEditString.hide();
}
dlgCreateString.show();
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(wholesite.init, wholesite, true);

[tryanDLS]

You don't specify an animateTarget in your dialog create (e.g. your button).

[Slapyo]

Correct, because this currently works. Sorry, I should have pasted the code that doesn't work.

If I do the following, I get just the proxyDrag element to appear. No dialog, can't close it.

dlgCreateString.show(btnCreateString.dom)
or

dlgCreateString.show(document.getElementById('btnCreateString'))

[tryanDLS]

Works for me using show() with 'btnCreateString' or btnCreateString or btnCreateString.dom

Here' the HTML I used, with yui-ext.css, and your code. Are you doing something different?


<button id="btnCreateString">Login</button>
<div id="createString" style="visibility:hidden">
<div id="dlghd" class="ydlg-hd">Please sign in.</div>
</div>

[Slapyo]

This is what I have.



<button id="btnCreateString">Create String</button>
<div id="createString" style="visibility:hidden;">
<div class="ydlg-hd">Create String</div>
<div class="ydlg-bd">Hi</div>
</div>

[tryanDLS]

Here's what I'm including - are you missing anything, maybe a path typo?

<script type="text/javascript" src="../yui/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../yui/build/dom/dom-min.js"></script>
<script type="text/javascript" src="../yui/build/event/event.js"></script>
<script type="text/javascript" src="../yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../yui/build/animation/animation-min.js"></script>

<script type="text/javascript" src="../yui-ext.0.33/yui-ext.js"></script>

<link rel="stylesheet" type="text/css" href="../yui-ext.0.33/resources/css/yui-ext.css"/>

[Slapyo]

Here is what I am including.

<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/dragdrop-min.js"></script>
<script type="text/javascript" src="js/yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids-min.css">
<link rel="stylesheet" type="text/css" href="css/yui-ext.css">
OK, now I feel stupid. I don't know why, but I was thinking that the animation for the dialog was all handled by yui-ext, so I never included the animation script from yui. I have included animation-min.js and everything works perfectly.

Thanks for the help. Not sure what I was thinking heh.

[tryanDLS]

What are you using as debug envirionment? If it's FF, I would suggest getting the Console2 extension as it kicks all the errors to a central location and you'll usually catch something like this? Barring that wrap your entire routine in a try-catch and kick to alert - should save a lot of headbanging :)

[Slapyo]

I use both IE7 and FF2. I'll search for the Console2 extension and hopefully that will help. I have Firebug, but it's disabled right now till I have some time to figure out how to fully use it.

[brian.moeskau]

Enable Firebug :) If nothing else, this would have turned the little green check at the bottom into a little red X, and it would have given you something like '[ref to YUI animation object] undefined.' You can then click the little red X to pop up the console and click the error link to get to the exact line number.

Then after you do that, click the 'Inspect' button and start mousing over your page to check out the DOM contents. Then start wondering why you ever had Firebug turned off ;)

[tryanDLS]

@bmoeskau,

Do you think Firebug is at the point where it can replace the Venkman debugger? The last time I looked at it (pre beta 1.0), it didn't seem to useful.

[brian.moeskau]

Well, I haven't really used Venkman -- I tried it a while back and had issues with it. Honestly, like Jack, I work in Visual Studio a lot and 2005 is now pretty capable at handling client side debugging. My experience using Firebug for debugging has been hit-or-miss -- for simple stuff (set a break point to check out a variable or two) it usually works OK, but it tends to get lost pretty easily during heavy debugging. I have heard that the debugging in 1.0 beta is much better, but I'm not on the beta list so I haven't seen it yet.

[tryanDLS]

Firebug 1.0 Beta just went public today :)

[brian.moeskau]

Indeed it did! Thanks for the tip :)

[brian.moeskau]

OK, I still haven't tried the debugging, but I must say... everyone on this forum should head on over to http://getfirebug.com and install it. The new network monitor and new box model inspector alone are worth it! Really quite awesome stuff.

[nEEbz]

is firebug any better than aptana(aptana.com)?

[brian.moeskau]

Two different things really. Aptana is an IDE for writing code while Firebug is more of a testing/debugging/troubleshooting/logging/etc. tool that is specific to Firefox. Think of Aptana as a design-time tool and Firebug as a runtime tool to test and diagnose issues with your js and css. They both do js debugging at some level, but that's really about all they have in common.

In my opinion, every web developer's toolkit for debugging pages should begin with Firebug, esp. with the enhancements coming out in 1.0. Choosing your IDE is more a matter of preference -- I use Visual Studio since I'm mainly doing .NET work, others here -- including Jack -- use JSEclipse (although I believe Jack actually uses Visual Studio also for debugging), some use Aptana -- that's really up to you and what works for you.