<div>Hi all.<br></div><div><br></div><div>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.</div>
<div><br></div><div><br></div><div>WGMPresentation>>renderContentOn: html<br> </div><div><br></div><div>html unorderedList class: 'gm_presentations jcarousel-skin';<br> script: (html jQuery this call: 'jcarousel' with: (Dictionary with: 'scroll' -> 3));<br>
with: [ <br> presentations doWithIndex: [ :p :i | <br> html listItem<br> onClick: ( html jQuery ajax script: [ :s | <br> "do something" ] );<br>
with: [ <br> html image resourceUrl: p photo; altText: p title;<br> script: (html jQuery this bubbletip<br> target: (html jQuery: '#tipPresent', p id); <br>
deltaDirection: (i = 1 ifTrue: [ 'left'] ifFalse: [i odd ifTrue: [ 'above' ] ifFalse: [ 'down' ] ] );<br> calculateOnShow: true) ] ] ].<br>
<br> presentations do: [ :p |<br> html div id: 'tipPresent', p id; style: 'display:none'; with: [<br> html div with: [<br> html heading level: 2; with: p title.<br> html paragraph: [<br>
html text: p description.<br> html break.<br> html text: p date ] ] ] ]</div><div><br></div><div><br></div><div>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.</div>
<div><br></div><div>In the site, see the sortable list in the play list and the carousel in the Multimedia section:</div><div><a href="http://grupomitai.com.ar/">http://grupomitai.com.ar/</a></div><div><br></div><div>Regards.</div>
<div><br></div><div class="gmail_quote">El 28 de febrero de 2012 13:14, Nick Ager <span dir="ltr"><<a href="mailto:nick.ager@gmail.com">nick.ager@gmail.com</a>></span> escribió:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Hi Bob,<div><br></div><div>You might want to look at the BubbleTip integrated into JQueryWidget box to load:</div><div><br></div><div>Gofer it</div><div> squeaksource: 'MetacelloRepository';</div><div> package: 'ConfigurationOfJQueryWidgetBox';</div>
<div> load.</div><div><br></div><div>ConfigurationOfJQueryWidgetBox load.</div><div><br></div><div>Nick<br><br><div class="gmail_quote"><div><div class="h5">On 28 February 2012 16:09, <span dir="ltr"><<a href="mailto:bobn@rogers.com" target="_blank">bobn@rogers.com</a>></span> wrote:<br>
</div></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><div class="h5"><div><div style="font-size:10pt;font-family:arial,helvetica,sans-serif"><div style="font-family:arial,helvetica,sans-serif;font-size:10pt">
Hello,</div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt">I'm trying to learn techniques for showing flyover content, where something pops up while your mouse moves over a component.</div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt">
A common approach seems to be to build a hidden component and then use javascript to make it visible. </div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt">I've got that working, using code like this... </div>
<div style="font-family:arial,helvetica,sans-serif;font-size:10pt"><br></div><div><div><font face="arial, helvetica, sans-serif"><span style="white-space:pre-wrap"> </span>onMouseOver: (html jQuery ajax
script: [:s | </font></div><div><font face="arial, helvetica, sans-serif"><span style="white-space:pre-wrap"> </span>s << (html jQuery id: flyoverId) cssAt: 'top' put: ((html jQuery id: cellId) positionTop).</font></div>
<div><font face="arial, helvetica, sans-serif"><span style="white-space:pre-wrap"> </span>s << (html jQuery id: flyoverId) cssAt: 'left' put: ((html jQuery id: cellId) positionLeft).</font></div><div><font face="arial, helvetica, sans-serif"><span style="white-space:pre-wrap"> </span>s << (html jQuery id: flyoverId) show]);</font></div>
<div><font face="arial, helvetica, sans-serif"><span style="white-space:pre-wrap"> </span>onMouseOut: (html jQuery ajax script: [:s | s << (html jQuery id: flyoverId) hide]);</font></div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt">
<br></div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt"><span style="font-size:10pt">...where 'cellId' is the id of a table cell. But this example shows the popup content over the table cell.</span><br>
</div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt"><span style="font-size:10pt">What I need next is to adjust the 'left' position by adding </span><span> '</span><span>(html jQuery id: cellId) width' to the </span><br>
</div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt"><span style="font-size:13px">positionLeft value. </span>Easy enough to do with javascript, but how is this done with Seaside jQuery?</div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt">
<span style="font-size:13px"><br></span></div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt">Also, are there other examples of how to
show flyover content using Seaside jQuery?<br></div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt">And what about popup content that you can interact with? i.e. content that says rendered as you move your mouse over it.</div>
<div style="font-family:arial,helvetica,sans-serif;font-size:10pt"><span style="font-size:13px"><br></span></div><div style="font-family:arial,helvetica,sans-serif;font-size:10pt"><span style="font-size:13px">Thanks for any help,</span></div>
<div style="font-family:arial,helvetica,sans-serif;font-size:10pt"><span style="font-size:13px">Bob</span></div></div></div></div><br></div></div>_______________________________________________<br>
seaside mailing list<br>
<a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
<br></blockquote></div><br></div>
<br>_______________________________________________<br>
seaside mailing list<br>
<a href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
<br></blockquote></div><br>