Position Div using Javascript on page refresh

Question

Hi all

I have a div that I would like to reposition each time the page is refreshed.

It is currently set in the css using top and left. I wold like to pass the top and left values on page refresh.

#inneriframe
{
position:absolute;
top:-170px;
left:-5px;
width:1280px;
height:1200px;
}

The content is from another site and contained in an iframe and I want the viewport of the div to change(within certain limits) each time the page is refreshed.

The original page is here http://labs.ideeinc.com/multicolr#colors=8438AD;

I have iFramed part of it here http://www.weninja.com/what-we-do

Full code

<style type="text/css">
#outerdiv
{
width:280px;
height:150px;
overflow:hidden;
position:relative;
}

#inneriframe
{
position:absolute;
top:-170px;
left:-5px;
width:1280px;
height:1200px;
}
</style>

<div id='outerdiv'>
<iframe src="http://labs.ideeinc.com/multicolr#colors=8438AD;" id='inneriframe' scrolling=no></iframe>
</div> 
<h5>Multicolr Search Lab &copy; 2008 Idee Inc</h5>

So basically I just need to change the TOP and LEFT values for the div #inneriframe to have different images show - is this possible?

Thanks

Jonathan

Answer 1

I don't understand why the iframe?...

You can do what you want by clientside (ajax) or by serverside (php, or similar)

With php, for example:

In your code xhtml:

<style type="text/css">
...
top: <?php echo $_GET['valueTop']; ?>px;
left: <?php echo $_GET['valueLeft']; ?>px;
...
</style>

Or you can write all your css with the serverside...

With clientside, using for example jquery (javscript)

$('yourelementyouwantposition').css('top','whatyouwant').css('left','whatyouwant');

And you can pass the "whatyouwant" with the serverside too...