WebPasties How To



How to Isolate Webpage Reloading to Only Your Pastie


 


Perhaps you have a Web Poll, and after a visitor votes you want just the Web Poll to refresh - not the entire webpage. Or maybe you have an Event Signup and similarly you want only the Event Signup to refresh after a visitor signs up for the event - not the entire webpage.

This How To describes the steps to isolate your pastie from the rest of your webpage through the use of the HTML inline frame tag called the IFRAME.

An IFRAME can be used similar to an IMG tag except that instead of defining a box in your webpage for an image, you define a box for an external webpage.

For example, below is an IFRAME that displays Google in a 400x200 box.

This IFRAME is defined with the following code:
<iframe src="http://www.google.com" width="400" height="200"></iframe>

When embedding an IFRAME for a pastie, we want to hide the scrollbars and borders as shown below:

We are able to hide the scrollbars and borders with the following code:
<iframe src="http://www.google.com" width="400" height="200" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>


Step 1.
Create an HTML file that contains nothing but the code for your pastie. For example, below is how your code might look:

<HTML>
  <HEAD></HEAD>
  <BODY>
    <script language="JavaScript" type="text/javascript"
     src="http://www.webpasties.com/pastie.php?mode=poll&pid=624&mid=34"></script>
  </BODY>
</HTML>

Save this file in the directory your webpage is in with a name such as "my_pastie.html"

Step 2.
Find the code for your pastie and replace it with an iframe that points to your new file. The code will look something like the following:

<iframe src="my_pastie.html" marginwidth="0" marginheight="0" frameborder="0" height="300" width="300" scrolling="no"></iframe>

Step 3.
Adjust the width and height of the IFRAME tag to match the width and maximum height of the pastie

NOTE: You should test the height of the Web Poll pastie when it is in results mode, because that is when it is at its tallest.

Step 4. (Final step)
If necessary, set the BGCOLOR attribute for the BODY tag of your iframe file in order to match the webpage it is embedded in.

Go To Previous "How To" Go To Next "How To"