[Seaside] flyover popup content position
Gastón Dall' Oglio
gaston.dalloglio at gmail.com
Tue Feb 28 23:06:20 UTC 2012
I want just say something that in the example of BubbleTip is not used, but
when the elements (targets for popups) in the page are moved you should add
#calculateOnShow: true for get the popup in the correct position. I use
BubbleTip in a Carousel and when the images are moved the position of the
popup should be recalculated. See below code: first generate the carousel
and contents (images) referencing the ids of the popups, and then generate
the referenced divs of popups.
html unorderedList class: 'gm_presentations jcarousel-skin';
script: (html jQuery this call: 'jcarousel' with: (Dictionary with:
'scroll' -> 3));
presentations doWithIndex: [ :p :i |
onClick: ( html jQuery ajax script: [ :s |
"do something" ] );
html image resourceUrl: p photo; altText: p title;
script: (html jQuery this bubbletip
target: (html jQuery: '#tipPresent', p
deltaDirection: (i = 1 ifTrue: [ 'left']
ifFalse: [i odd ifTrue: [ 'above' ] ifFalse: [ 'down' ] ] );
calculateOnShow: true) ] ] ].
presentations do: [ :p |
html div id: 'tipPresent', p id; style: 'display:none'; with: [
html div with: [
html heading level: 2; with: p title.
html paragraph: [
html text: p description.
html text: p date ] ] ] ]
Another example is when you have a sortable list, and the items have a
popup: if you move one, then the position of the popup should be
In the site, see the sortable list in the play list and the carousel in the
El 28 de febrero de 2012 13:14, Nick Ager <nick.ager at gmail.com> escribió:
> Hi Bob,
> You might want to look at the BubbleTip integrated into JQueryWidget box
> to load:
> Gofer it
> squeaksource: 'MetacelloRepository';
> package: 'ConfigurationOfJQueryWidgetBox';
> ConfigurationOfJQueryWidgetBox load.
> On 28 February 2012 16:09, <bobn at rogers.com> wrote:
>> I'm trying to learn techniques for showing flyover content, where
>> something pops up while your mouse moves over a component.
>> A common approach seems to be to build a hidden component and then use
>> I've got that working, using code like this...
>> onMouseOver: (html jQuery ajax script: [:s |
>> s << (html jQuery id: flyoverId) cssAt: 'top' put: ((html jQuery id:
>> cellId) positionTop).
>> s << (html jQuery id: flyoverId) cssAt: 'left' put: ((html jQuery id:
>> cellId) positionLeft).
>> s << (html jQuery id: flyoverId) show]);
>> onMouseOut: (html jQuery ajax script: [:s | s << (html jQuery id:
>> flyoverId) hide]);
>> ...where 'cellId' is the id of a table cell. But this example shows the
>> popup content over the table cell.
>> What I need next is to adjust the 'left' position by adding '(html
>> jQuery id: cellId) width' to the
>> done with Seaside jQuery?
>> Also, are there other examples of how to show flyover content using
>> Seaside jQuery?
>> And what about popup content that you can interact with? i.e. content
>> that says rendered as you move your mouse over it.
>> Thanks for any help,
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
> seaside mailing list
> seaside at lists.squeakfoundation.org
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the seaside