Resizing an iFrame on a ONCLICK event

Dev Articles Community Forums Sponsor:

Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

June 6th, 2004, 07:57 AM

Possibility

Registered User

Join Date: Jun 2004

Posts: 6

Time spent in forums: 15 m 43 sec
Reputation Power: 0

Resizing an iFrame on a ONCLICK event

Hi, i'm creating a shopping site with a shopping cart that goes through an affiliate program on another site. The catalog is on my site, but the shopping cart is on the other site. I don't want the customer to loose their browsing page when they click "buy", but I can't have a new window open up everytime either, making multiple shopping carts.

So I decided to create an iFrame. When they are browsing, the shopping cart iFrame would be invisible, but when they click "buy" it would enlarge the shopping cart iFrame, and leave just enough space for a backlink to browsing that would, when clicked, bring the user back to my site and make the shopping cart iframe invisible again.

A person in another forum told me the following, but I have no clue on how to implement it.

Quote:

set the display property of the iframe to none. then put an onclick event on the buy button and use that to set the iframe's display to default.

For example, if the id of your iframe is "myiframe" when the buy button is clicked:

Code:

 var myiframe = document.getElementById('myiframe');
 myiframe.style.display = '';

and then when they click on the shop button:

Code:

 var myiframe = document.getElementById('myiframe');
 myiframe.style.display = 'none';

Any help would be greatly appreciated

June 6th, 2004, 10:38 AM

klur

Registered User

Join Date: Apr 2004

Posts: 5

Time spent in forums: < 1 sec
Reputation Power: 0

specify

hello.

take in account this:
when you set the display property to none, the element is hidden, when you set it to "", the element appear, check this on your functions. please, specify what code appertain to the show function and what to the hide function.

regards
klur

June 6th, 2004, 11:57 AM

Possibility

Registered User

Join Date: Jun 2004

Posts: 6

Time spent in forums: 15 m 43 sec
Reputation Power: 0

Ok, here is what I have so far.

Code:

<html>
 <head>
 <title></title>
 <script language="javascript">
 <!-- hide me
 var sc = document.getElementById('shop');
 -->
 </script>
 </head>
 
 <body bgcolor='white'>
 
 <iframe id="shop" name="shop" src="http://bluerobot.com" style="height: 100px; width: 100%;"></iframe>
 
 <a href="#" onClick="sc.style.height='200px'; return false;">Red</a>
 </body>
 
 </html>

I am trying to assign the variable "sc" to the iframe "shop". Then, onclick, change the height of sc (which now should be the iFrame) to 200px.

June 6th, 2004, 03:48 PM

sweimh

Registered User

Join Date: Jun 2004

Posts: 2

Time spent in forums: 45 sec
Reputation Power: 0

I've done similar work using the lines of codes found here:
http://guymal.com/mycode/iframe_size.shtml

but, as I recall.. You will not be able to resize the iframe according to an off-site
webpage. I got some sort of javascript security error when I tried in the past.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: