constraint iframe

[samirkut]

I have an iframe floatnig on top of my swf. I need to constraint the location of the iframe to a view.

Can somebody show me an example of how to do this. Have been trying for the past couple of hours without any luck :(

Thanks
Samir

[d~l]

These links should help you ..


introduction to iframes (http://www.quirksmode.org/js/frameintro.html)

iframe attributes (http://www.w3schools.com/tags/tag_iframe.asp)

floating iframe (http://www.dynamicdrive.com/dynamicindex17/floatiframe.htm)

position and move iframe (http://www.faqts.com/knowledge_base/view.phtml/aid/1965)

dynamic resize iframe (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm)

iframe size change (http://www.lissaexplains.com/forum/archive/index.php/t-54412.html)



Call the javascript functions from within laszlo app to control position (and effects) of floating iframe.

[samirkut]

thanks for your reply. but I think you misunderstood me. I dont have problems with moving the iframe. I dont know how to make laszlo call the function to move the iframe.


Samir

[d~l]

Assuming that you have a javascript function named "iframe_control" in your HTML wrapper page ..


<button>run javascript function in HTML wrapper page
<method event="onclick">
LzBrowser.loadURL('javascript:iframe_control()');
</method>
</button>


You can also pass arguments to javascript function (e.g. x, y coordinates to overlay view area).

note .. remove the space in LzBrowser.loadURL('java(space)script .... above.

[samirkut]

yes, that I figured out. Let me explain in more detail. I have some view animations which should cause the iframe to move around a bit. I want to constraint the iframe position to the view position so that they both move together. I dont know how to setup that constraint.

Thanks
Samir

[d~l]

view animations

You did not say that your laszlo views were also moving!

So you need to sync movement of animated view and iframe?

That will need a bit more thinking time.

Have you tried using setAttribute (laszlo attribute) in the HTML wrapper page function so that the x,y attributes of your lzx view are changed at the same time as the x,y attributes of your iframe?

..

Giving more thought, the solution depends on where the animation is initiated.

If you wish to initiate animation from a link in the iframe page (which triggers movement of iframe and laszlo view) then you should read here on bi-directional communication (http://www.laszlosystems.com/lps-3.0/docs/guide/browser-integration.html#d0e17499) .. although note that in this documented code the lps path is assumed to be lps-dev not lps-3.0.

So you can have a javascript function which passes variables to the laszlo app, and at same time animate your iframe.

If you wish to initiate animation from within the laszlo app then you just move the view and at same time call the javascript to move the iframe.

[samirkut]

actually its the other way. my views move, hence the iframe has to move. I found some method called applyConstraint in LzNode, but am not sure exactly how to use this.

Samir

[samirkut]

====
If you wish to initiate animation from within the laszlo app then you just move the view and at same time call the javascript to move the iframe.
====


yes, this is possible. but this causes the iframe to jerk to the new position. At which point the whole purpose of the animatino is lost. The ideal case would be that as the view position changes, the iframe also changes position.

Now am thinknig along the lines of a timer which constantly maps the iframe to the view position every 100ms or so (at least during the animation timeframe)

[d~l]

in the javascript you can animate iframe movement to avoid the "jerkiness" or sudden jumps.

but whether you can sync these animations (lzx and iframe) I'm not sure.

[samirkut]

ok seems to work. i added the frame moving function to the onx and ony events of the view. Now the only problem is that since i am calling th javascript using LzBrowser.loadJS, it makes very irritating click-click-click sound everytime the frame move function is called (which can be a lot during an animation). I think loadJS still calls loadUrl in the background to work. :(

Is there any other way to communicate with the page js or someway of silencing the sound?

Thanks
Samir

[d~l]

this clicking sound might be due to frequent use of LzBrowser.loadJS .. loading files from disk ..

can't you just do a one time initialisation of javascript in HTML wrapper page?

.. then use LzBrowser.LoadURL('javascript:iframe_animate()');

[samirkut]

I could. I can theoretically calculate the starting and ending position for the iframe. But then the iframe and view animations wont be synchronized.

Samir

[d~l]

Is the animation path a straight vector .. or a complex path?

[samirkut]

along a straight line. but not necessarily one direction. It kind of bounces up and down a bit before reaching final state.

[samirkut]

dont think it has anything to do with multiple loadJS calls. I am controlling the number of javascript calls now. But there is still one click sound per loadJS call.

[d~l]

not sure yet .. but this thread might be relevant (http://www.laszlosystems.com/developers/community/forums/showthread.php?threadid=3187&highlight=loadJS)

... also expanded discussion of same problem here (http://openlaszlo.org/pipermail/laszlo-dev/2005-June/001145.html).

Since this is an IE6 related problem, does your app work o.k. in Firefox?

[d~l]

I have just thought of one possible solution to the problem of synchronising animation of lzx view and floating iframe .. as yet untested ..



create two laszlo apps.

(a) a laszloapp1.lzx which is a static background canvas.

(b) a laszloapp2.lzx which is to be the animated canvas object, synced to HTML content in a floating iframe.

embed laszloapp1.lzx in HTML wrapper page1.html

embed laszloapp2.lzx in HTML wrapper page2.html

in page2.html embed another (nested) iframe which contains the HTML content to be animated;
this floating iframe, fixed in position relative to the top of the laszloapp2.lzx canvas.

create an outer wrapper page which has two iframes:-

(a) iframe1 containing page1.html (which has laszloapp1.lzx embedded)

(b) iframe2 containing page1.html (which has laszloapp2.lzx embedded, and the
embedded floating iframe fixed to position of laszloapp2.lzx canvas)

now to animate the bound (constrained) laszloapp2.lzx and HTML iframe, you can just animate the iframe2 attrributes to make the content move together

in theory, both laszlo and HTML content should now move in sync, floating above the background static laszloapp1.lzx.



But this theory has to be tested ..

[samirkut]

Hi

your method might work though I think its unecessarily complicated. I have already got the imframe animation working smoothly by linking it to a view position using onx and ony events. ofcourse the problem now is only with regards to the noise that loadjs creates. for some reason on IE6, every loadjs call leads to a click noise.

Samir

[d~l]

this animator example using onx (http://www.laszlosystems.com/developers/community/forums/showthread.php?threadid=817&highlight=onx) does not animate smoothly .. is your version of onx ony better?

[samirkut]

this is my version. its pretty smooth. The above code assumes that there is a moveFrame() function in the page.


<view x="15" id="f1" width="140" height="100">
<method event="ony">
var str="moveFrame("+this.x+","+this.y+");";
LzBrowser.loadJS(str);
</method>
<method event="onx">
var str="moveFrame("+this.x+","+this.y+");";
LzBrowser.loadJS(str);
</method>
</view>


This seems to work pretty well though it makes a lot of noise. I have a slightly more complex version, where I cache the old X and old Y values and call the moveFrame function only if they have changed.
I have experimented with timers etc so that js call is only made once every 50ms/100ms. In those the animation is quite jerky.