Liens du Vin - Fixed Menus and Dynamic Contents

Dynamic content with iframe

Click the link on the left, to change the contents

The iframe

Create the iframe, with an initial content ::

<iframe name="NAME_OF_FRAME" id="NAME_OF_FRAME" src="URL of content" width="xxx" height="xxx"
scrolling="no" frameborder="no"></iframe>

Changing the content of iframe

Create a normal anchor :

<a href="URL of content" title="text for link" target="NAME_OF_FRAME">Link</a>

Style for the content

Create an html page, with this style :

html {
margin:0px;
padding:0px;
overflow: auto;
border: none;
}

body {
width: xxxpx;
height: xxxpx;

margin: 0px 0px 0px 20px;

overflow: auto;
}

Changing GPC template

To change the width of columns and / or the outlook of links we need to load a supplemental style sheet. Write this javascript in the first editable section of the page :

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/my_style.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet to change GPC template';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>

More informations here, changing width of columns and here for the oulook of links.

Creating an Ads Rotator

Using this technique, Math.random and window.setTimeout, it's easy to create an Ads Rotator :

This iframe will reload its contents every 120 seconds

Using Ajax ?

With iframe, no Cross-Domain limitations
Testing locally is easy, just target="name_of_frame" to specify
AJax could be usefull in a lot of other cases. Look at here for a small test using Ajax and xml with Google Page Creator

One Day - One Label - One Wine

Find a Wine with Google CSE