How to do i-frame like this..?

@ashwiniJul 24.2004

Hi Script Guru,
Please visit ~~[url]~~www.rediff.com[/url]
When the page loads a Flash built swf ads float’s on the screen.
swf ad comes out of iframe transparent on the main page.

This swf after floating goes back to its normal position in the iframe.
i want to know that.. how this is done..?
Please post reply.

to post a comment

JavaScript

15 Comments(s) _↴

@Mr_JJul 24.2004 — #I went to the link you posted but saw nothing floating about.

I refreshed the page a few times but all I got was a pop under

@ashwiniauthorJul 24.2004 — #You will see the word "Advertisement" written in gray, above which iframe is located. Which is used as the container for the play of swf random ads. Random swf comes out of this iframe and then goes back to it's original position..

means when loaded swf has size of 350 x 350 and after showing transparent swf ad it goes back to iframe size i.e. 150 x 180.

Now, the problem is that how can swf played in browser outside the iframe.

Here is the attatched diagram of loading of transparent swf ad and unloading back to iframe size

I think for today rediff.com changed there ad. They are displaying only Pepsi Jukebox swf ad. You can check random ad after 3 hours.

www.rediff.com

How this is done? How random swf is played outside the iframe?

Thanks.

@ashwiniauthorJul 24.2004 — #oops.. link to diagram of loading and unloading of swf ads is here..

http://www.shivajiakola.com/iframe.bmp

@ashwiniauthorJul 25.2004 — #hi,

you can see this random ad today.

don't refresh the page just add www.rediff.com in browser address bar for random ad.

@Mr_JJul 25.2004 — #Here's a couple of possible methods, for the second example use 2 different sized images say around 200x200 and 400x200

<SCRIPT language=javascript>



</SCRIPT>

<A HREF="#null" onclick="frm.frameElement.width=400">big</A>

<A HREF="#null" onclick="frm.frameElement.width=200">small</A>

<P><A HREF="image1.jpg" TARGET=frm>big</A>

<A HREF="image2.jpg" TARGET=frm>small</A>

<div style="position:absolute;left:200;top;100"> Dummy text<BR> Dummy text<BR> Dummy text<BR> Dummy text<BR></div>

<iframe name=frm width="200" height="100px" ONLOAD="return frm_onload(frm)" style="position:relative;z-index:5"></iframe>

@ashwiniauthorJul 25.2004 — #Thanks for reply..

but.. rediff.com doesn't uses 2 images. It uses only on swf file which comes out of iframe.

Here i am giving the link to see that swf ad which is shown on rediff.com.

Click on the link to see swf ad..

http://www.shivajiakola.com/ad.swf

When you click on Close X button in swf, see how swf goes back to its normal position which is equal to the iframe?

Now the question is how it is possible to display swf file which has the large size than iframe?

Here is the code used for iframe in rediff.com..



<SCRIPT language=JavaScript type=text/javascript>



</SCRIPT>



Thanks again

@Mr_JJul 26.2004 — #The images were only to show the examples at work.

I think you will find that the swf effect is being shown over the top of the Iframe and cleverly positioned so that when it reduces in size it is giving the effect of going into the Iframe

@JPnycJul 26.2004 — #Like J said, I'd bet it's just css absolute positioning.

@ashwiniauthorJul 27.2004 — #CSS absolute positioning example.

Code:

<div id="Layer1" style="position:absolute; background: #999966; left:65px; top:206px; width:380px; height:27px; z-index:1"> Absolute postioning</div>

You are right but swf closes automatically and after playing full movie how it is again called in IFrame.

Do you know how to do that?

How to auto-close the layer and after closing how to display I frame?

@JPnycJul 27.2004 — #I didn't check the code but it's probably just over the iframe with absolute positioning, and then hidden, which would display the iframe. I don't develop flash so I don't know what event handler is present like EOF or something like that.

@ashwiniauthorJul 27.2004 — #you are right..

i am very well at flash I can do that..

but.. how to hide layer or auto close layer playing swf.

@JPnycJul 27.2004 — #You need some Flash event handler that tells the script has run. Or else you need a timeout which can't possibly work because it will never be downloaded and played at the same speed everywhere.

Can you manipulate css with flash script? Basically you just need either visibility:hidden; or display:none; Or you could change the z-index to place the layer behind the iframe. But no real reason to use the last option.

@ashwiniauthorJul 27.2004 — #I am thinking the same to manipulate css with flash script.. but i don't think flash will support it..

The layer should be closed itself.. or we can use borderless popup with absolute positioning and can set its auto close timeout for unload. Unload time for the borderless popup may be equal to the time taken by flash movie i.e. timeline to occure..

I am thinking over it..

Do u know how to develop borderless popup window with abs. positioning.. and auto closing it ?

@JPnycJul 28.2004 — #NO but it sounds like more work. HAs to be some way to tell a javascript that the flash script is done.

@JPnycJul 28.2004 — #Actually you know, it still wouldn't matter. You'd still need some way of passing the fact that the flash script had run to javascript.

Also in #JavaScript _↴

bah! frames hate me! help!!Getting data from a table please help a newbee

Success!

Help @ashwini spread the word by sharing this article on Twitter...

Tweet This

How to do i-frame like this..?

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to do i-frame like this..?

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴