[Seaside] flyover popup content position

[Gastón Dall' Oglio]

Hi all.

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.


WGMPresentation>>renderContentOn: html

html unorderedList class: 'gm_presentations jcarousel-skin';
    script: (html jQuery this call: 'jcarousel' with: (Dictionary with:
'scroll' -> 3));
       with: [
           presentations doWithIndex: [ :p :i |
                html listItem
                    onClick: ( html jQuery ajax script: [ :s |
                         "do something" ] );
                     with: [
                         html image resourceUrl: p photo; altText: p title;
                              script: (html jQuery this bubbletip
                                   target: (html jQuery: '#tipPresent', p
id);
                                   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 break.
                 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
recalculated.

In the site, see the sortable list in the play list and the carousel in the
Multimedia section:
http://grupomitai.com.ar/

Regards.

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';
>    load.
>
> ConfigurationOfJQueryWidgetBox load.
>
> Nick
>
> On 28 February 2012 16:09, <bobn at rogers.com> wrote:
>
>> Hello,
>> 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
>> javascript to make it visible.
>> 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
>> positionLeft value. Easy enough to do with javascript, but how is this
>> 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,
>> Bob
>>
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20120228/58652130/attachment-0001.htm