jQWidgets Forums

Tagged: jqxwindow

This topic contains 7 replies, has 2 voices, and was last updated by DaveC426913 12 years, 5 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

positioning and animating Posts
November 30, 2012 at 10:20 pm positioning and animating #11783
DaveC426913
Member
I am trying to build an alert panel that flies down from the top of the screen. It has no controls and is not modal. It simply flies down with a short message, then flies back up again.

I think jqxWindow may be overkill, but that’s what I’m using right now.

1] I have been unable to get the window to position itself top center (on a screen of dynamic width and height)
No combination of y:0/top and x:50%/center or any other will position as I want it.

2] It does not seem to animate. I set animationType:’slide’ which does not work, and even set showAnimationDuration:1000, which does nothing.

The documentation seems to be silent on animation. Presumably, a ‘slide’ needs to have both a start and end position, yet nowhere do the docs mention anything about these.
```
this.flyoutOpen({
    message:              "Look at me!",
    showCloseButton:    false,
    draggable:          false,
    //resizable:          false,
    width:              '100%',
    animationType:      'slide',
    showAnimationDuration:  1000,
    position:           'center',
    position:           {y: 10}
});
```
November 30, 2012 at 10:53 pm positioning and animating #11789
Peter Stoev
Keymaster
Hi DaveC426913.,

Here’s what the API says about the ‘position’ property:

Gets or sets window’s position. The value is expected to be in the following formats: ‘center’, ‘top, left’, { x: 300, y: 500 }, [300, 500]. You can’t use percentages or other combinations of these.

Here’s a working code which positions the window at the top-left corner:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#window").jqxWindow({ position: { x: 0, y: 0 }, autoOpen: false, animationType: 'slide', draggable: false, resizable: false, showCloseButton: false });
            $("#Open").click(function () {
                $("#window").jqxWindow('open');
            });
        });
    </script>
</head>
<body class='default'>
    <input type="button" value="Open Window" id="Open" />
    <div id="window">
        <div>
            Title
        </div>
        <div>
            Content
        </div>
    </div>
</body>
</html>
```
The ‘slide’ animation calls the jQuery’s slideDown method when the window’s ‘open’ method is called. If you don’t set height of the window, there will be nothing for sliding down.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
December 3, 2012 at 2:47 pm positioning and animating #11843

DaveC426913
Member

Ok, I’ll try the animation, thanks. As for height, I was really hoping to not have to explicitly fix a height, as its height would ideally be set by the length of the content. But if I must, I must.

But how can I set the window for top center? I can set it for ‘top left’ and I can set it for ‘center’ but I can’t find a combination for ‘top center’.

December 3, 2012 at 8:35 pm positioning and animating #11847

DaveC426913
Member

OK, I have tested your code example. I put it in an HTML file exactly as you supplied it, re-pointing the file references as necessary.

It does not animate. It simply pops open the window instantly. No errors.

I tried showAnimationDuration: 10000 but no luck.

December 3, 2012 at 8:43 pm positioning and animating #11849
DaveC426913
Member
My method for getting the window to appear at the top center kind of sucks, but I see no alternative.

I set position: ‘top’ then overrode the ‘left’ in CSS, like this:
```
margin-left:        10%!important;
margin-right:       10%!important;
width:              80%!important;
max-width:          80%!important;
min-width:          80%!important;
```
Nothing less will do.
December 3, 2012 at 9:38 pm positioning and animating #11850

DaveC426913
Member

And finally, I want the window to pause for a second and then animate closed again. I’m looking for an event that shows the window is fully open, so I an tell it to close again. None of the events listed (open, expand, resized…?) seem to fire.

December 4, 2012 at 4:26 am positioning and animating #11853

Peter Stoev
Keymaster

The following sample of jqxWindow can be used to learn how to use its events: jquery-window-events.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 7, 2012 at 5:51 pm positioning and animating #12077

DaveC426913
Member

Thanks but I had already been through the example.

S’OK, vanilla jquery does the trick: el.slideDown(400).delay(2000).slideUp(200);
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.