Recent Widgets


Register for DashboardWidgets

Recent Forums Posts

Partners


iCompositions

MacDesktops.net

RSS Showcase
RSS Comments
RSS Forums

This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies. Posted in: Widget Development

How to simulatie sliding panels

Author Message
macpeterr



Joined: 20 Feb 2009
Posts: 2

Posted: Fri Feb 20, 2009 - 4:13 pm    Post subject: How to simulatie sliding panels Reply with quote

I just started a new challenge by giving me the task to develop a widget in dashcode. (so bare with me) Dashcode is a nice tool, although Apple has been a little sloppy in cutting and pasting some snippet code....

I have some javascript experience and familiar with other OO languages and have basic knowledge of hml and css.

Currently i am trying to simulate the opening of a panel after the Widget has been initialized correctly, revealing some gauges and fields. By using the
Appleanimator functions i can animate two boxes so they slide away. What i want is that the boxes do disappear inside a frame and not at the outer lines of the widget.

Maybe i am not to clear so hereby two images of the widget in progress;
"Closed"


"Open"


Wat i am trying to realize is to move the panels behind the grey border of the widget.

Any tips/how to's/tutorials ?

Peter
View user's profile Send private message Send e-mail AIM Address Widgets
Osjcag



Joined: 24 Feb 2009
Posts: 1
Location: The Netherlands

Posted: Tue Feb 24, 2009 - 10:13 am    Post subject: Reply with quote

You can try to build the 'slide-object' in two parts: the part to move upwards, and the part to move downwards (I call them block1 (the block on top) and block2 (the block on the bottom)). Then you can animate in with javascript, like this:
Code:

function slideBlocksOpen(){
  var x = distance to slide;
  for(i=1; i<=x; i+=0.1){
    setTimeout("document.getElementById('block1').style.top = '"+(i*-1)+"px';",i*10);
    setTimeout("document.getElementById('block2').style.top = '"+i+"px';",i*10);
  }
}
I hope this will help you.
_________________
My English may not be so good, I'm from the Netherlands.
View user's profile Send private message Send e-mail Visit poster's website AIM Address MSN MessengerWidgets
macpeterr



Joined: 20 Feb 2009
Posts: 2

Posted: Tue Feb 24, 2009 - 10:38 am    Post subject: Reply with quote

Thanks,


But that is more or less to code i used. This moves the two div's up and down.
I currently choose the option to change the height of the div (scaling). It is not as nice as done in the cryptboard widget, but it will do for now.
View user's profile Send private message Send e-mail AIM Address Widgets
Greenie



Joined: 08 Jun 2005
Posts: 81

Posted: Sun Mar 01, 2009 - 5:44 am    Post subject: Reply with quote

um, wouldn't it work if you would set the z-index via css so that the frame is "over" the sliding panels?

As the widget also has a white background, you might need three different layers. The first would be the white background which would have the same shape as the border, just sized so that the grey border will overlap it slightly. The second (over the white background) would be the sliding panels. And the the third would be the grey border. This can be accomplished easily by setting z-index accordingly.
View user's profile Send private message Send e-mail AIM Address ICQ NumberWidgets
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.

 
Powered by phpBB © 2001, 2002 phpBB Group