How to have a popup scrolling in the same way that others elements? - gwt

I can not solve my problem. As example, my website : www.mananaseguro.com.
In the home page, I have some popup appearing just under movies's poster (when the mouse is over the poster). But when I scroll UP (for example), the popup will not appear just under the poster. Their is a space between them. I tried to add the popup to the home's page panel but it did not succeed.
So is it possible to simulate the good popup behavior? (the popup must stay under the poster).
Or more precisely, is it possible to attach a DecoratedPopupPanel to another panel inside the page in order to have the popup scrolling in the same way that others elements?

Try using the PopupPanel#showRelativeTo() method.

You can achive good popup behavior by using below property.
popup.setPopupPosition(left, top)
Pass movie image x and y index position in top and left. and make consistent look and fill.

Related

how open a small page in dialog?

I am looking for a solution for display a window over the page like a dialog box but this box will contains a lot of information. It is for my betting game, i display a list of game with a choice between 1 N and 2.
Here is an image of a betting game named netbet :
As you can see i have selected 2.10 in the game Slavia Mozyr/ FC Minsk and a window appears at the bottom of the page for set the amount of money i need to bet. I think it will be better,because mobile screen are very little, displaying a window over the page like a dialog box. Is there a solution for do that in flutter ? Thanks
You might want to use Bottom sheet which does the exact task. It opens a small 'page' (read: widget) over the normal app screen. It'll allow to place the bet etc. It vanishes when use taps anywhere outside.
Sample implementation is here. You can also check solid bottom sheet.

How can i make a moving button in GWT, so that users can move it to anywhere they want?

I just want to make a moving button , Is there a way to do that in GWT? Thanks in advance.
BS
Out of the box, you can use a DialogBox to display your button. DialogBox can be moved around, but you will need to display something in a Caption that is used for dragging.
Another option is to use PopupPanel. It can be completely invisible (no Caption), but you will have to implement dragging functionality on your own. The advantage is that a PopupPanel floats on top of all the other layers in your UI.
Finally, you can simply add dragging functionality to a regular button. Just remember to check for the boundaries so that a user cannot drag your button outside of the visible browser area - or obscure some important elements of the UI.

Facebook like button pops up behind some elements

On my website the comment box that pops up when I press the Like button is placed behind some elements of the page and I really don't figure out how to fix it.
For 2 days I'm struggling with z-index property but no result and now I've found a solution by changing the overflow property of the parent div from hidden to visible/auto and it works! BUT I can't use this fix because that div has overflow set to hidden because I'm using the slimScroll plugin to customize the scrollbar...
This is the website, just click on any image and press the Like button to see what happens.
The right and left side of the popup are integrated in a table... I was thinking, if i remove the table and use just divs instead, the fix would be easier?
Thanks!

How to achieve slideToggle effect similar to facebook "New Stories" button with jQuery?

As you may know not long time ago facebook added several new features. One of them was a "New Stories" button which when clicked expands (with what I guess is a slideToggle effect) and shows new stories.
Here is the button I am talking about:
I would like to know How to achieve same slide / toggle effect and fade in effect that comes in after this button is clicked, with a help of jQuery.
I tried searching for this on internet, but all effects I found were regular slideToggle effects, I mean they started showing div from top and slided down to it's bottom (here is what I mean by regular content http://jsfiddle.net/TwxB4/), where as one facebook uses starts from the bottom of the hidden div and sort of slides to the top of it. (You will see what I mean if you check it on facebook).
Edit: I am only looking for a slideToggle effect and nothing else, I want to be abble to expand and shrink hidden div when user clicks on the link that lunches the effect.
Edit: Here is an illustration of the effect I'm looking for:
This example works the way you described, showing bottom content first:
http://jsfiddle.net/SBLNn/16/
Also full screen view here:
http://jsfiddle.net/SBLNn/16/embedded/result/
They may also do it by having the overflow of the feed hidden, and then setting a negative margin on the inner feed wrapper, then when you click they just animate that negative margin down to 0.
Does this works for you
http://jsfiddle.net/wb7h6/1/
updated version
http://jsfiddle.net/wb7h6/9/ I hope this is what you need
You want slideToggle() I think. See this jsFiddle.

SmartGWT: hide current element showing in Canvas

I'm working something like a dynamic menu, where you click some radio buttons and it shows a specific form, each radio control matches to a different form.
Examples from the showcase always base themselves on the Tabs widget and I don't need that behaviour.
I opted for placing all the forms inside one Canvas and hide/show them accordingly (Not sure this was the best idea, if someone knows better I would like to hear it)
Now my problem is that every onClick event has to .show() one form and .hide() the other 9. that is annoying.
Is there a way to "get" the current displayed child in the Canvas and hide it?
If what you want is basically mutex display, you could put all the components as members of a Layout instead of a Canvas, then use setVisibleMember(). That hides all other members.