flyover popup content position
Locked
 
|
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 [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Bob Nemec
|
|
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, <[hidden email]> wrote:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: flyover popup content position
|
|
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: Regards.
El 28 de febrero de 2012 13:14, Nick Ager <[hidden email]> escribió: Hi Bob, _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |