Well, i wouldn't go there using plain css-javascript tricks. GWT has an animation class - take a look at it. And if that isn't enough - there are plenty of animation librarys there that can make developer's life much easier. This one for example: demo: http://gwtfx.adamtacy.com/EffectsExample.html#intro lib: http://code.google.com/p/gwt-fx/
On 18 Jun., 02:52, Jeff Chimene <[email protected]> wrote: > On 06/17/2009 05:23 PM, kingdomain wrote: > > > > > Yes, sorry, it's on the site that has all the getting started stuff > > here: > > >http://code.google.com/webtoolkit/gettingstarted.html > > > The main thing I'm trying to understand is: are they using traditional > > CSS tricks with floating panels, margins, etc. and getting some mouse > > event off the background to dynamically manipulate the CSS, or are > > they doing something slick with the GWT widgets that I haven't seen in > > the docs/samples (e.g., with animation, per alex.d above). > > > It's a very cool effect that I'd love to incorporate. I can't see how > > it's just a Disclosure Panel... > > > Thanks! > > John > > Hi John, > > This is a css/javascript trick > > I was going to say that you can also see it in use at the w3c.org > website, but it's been redesigned from the last time I saw it (which was > where I first learned this UI). > > I don't know if the webpage is using GWT. One doesn't need GWT to handle > this particular user interface. > > Each display toggle is an HTML div that when clicked toggles the CSS > style of its associated HTML div (e.g. node0) between "display: block" > and "display:none". Each div is defined as follows: > > <div id="node0" style="display: none"> > leaf1<br> > leaf2<br> > leaf3<br> > </div> > > Which causes the browser to collapse the div block. The initial HTML > specifies this style so the block's collapsed on page load. > > The toggle can be defined in HTML as follows: > > <div onclick="toggle('node0');">+</div> > > There's usually some whitespace and a border around the toggle character > to give the user a fighting chance to hit the element with the cursor > hotspot. > > toggle is a javascript routine that takes its argument, does a > getElementById and toggles the style as noted above. It also sets the > div contents to indicate that the block has been expanded. > > The technique allows for arbitrary complexity. > > As far as placing the panel on the left, that's usually accomplished via > the "float" and "clear" properties. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Web Toolkit" 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/Google-Web-Toolkit?hl=en -~----------~----~----~----~------~----~------~--~---
