Reposition window with a javascript function?

[viktor]

A script I found on http://www.dynamicdrive.com/dynamic.../topcontent.htm (code pasted further down) creates a static pop up (one which does not follow the page when scrolled). I have customised it so that it is no longer static but I would like to make one more change:

My question:
Can the pop up window be repositioned with a javascript function (which I can call from an onClick event etc)? The horizontal position could be the same but I would like to change the vertical position with a simple textlink... Very thankful for any help!
________________________________________________

CODE FOLLOWS:
________________________________________________


<!--[if IE]>

<!--
Always On Top Content Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
-->

<style>
<!--
.drag{position:relative;cursor:hand
}
#scontentmain{
position:absolute;
width:150px;
}
#scontentbar{
cursor:hand;
position:absolute;
background-color:green;
height:15;
width:100%;
top:0;
}
#scontentsub{
position:absolute;
width:100%;
top:15;
background-color:lightyellow;
border:2px solid green;
padding:1.5px;
}
-->
</style>

<script language="JavaScript1.2">
<!--
//Drag and drop engine for static content
//© Dynamic Drive (www.dynamicdrive.com)

var dragapproved=false
var zcor,xcor,ycor
function movescontentmain(){
if (event.button==1&&dragapproved){
zcor.style.pixelLeft=tempvar1+event.clientX-xcor
zcor.style.pixelTop=tempvar2+event.clientY-ycor
leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft
toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop
return false
}
}
function dragscontentmain(){
if (!document.all)
return
if (event.srcElement.id=="scontentbar"){
dragapproved=true
zcor=scontentmain
tempvar1=zcor.style.pixelLeft
tempvar2=zcor.style.pixelTop
xcor=event.clientX
ycor=event.clientY
document.onmousemove=movescontentmain
}
}
document.onmousedown=dragscontentmain
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

<![endif]-->





<!--[if IE]>
<div id="scontentmain">
<div id="scontentbar" >
<img align="right" src="barbutton.gif" onClick="onoffdisplay()">
</div>
<div id="scontentsub">


<p align="center"><br>
<a href="http://wsabstract.com"><img src="http://wsabstract.com/wabutton5.gif" border="1"
alt="Click here for Website Abstraction"></a><br>
<font face="Arial"><small><small>While we didn't invent JavaScript, we sure as hell
created the best site on IT. <a href="http://wsabstract.com">Website Abstraction</a> is
considered by many online as the definitive JavaScript technology site on the
internet. Online since December, 1997, <a href="http://wsabstract.com">Website Abstraction</a> features over 300+ original scripts, 100+
tutorials on JavaScript programming and web design, and a highly active programming forum
where developers from all over meet and share ideas on their latest projects. Click <b><a href="http://wsabstract.com">HERE</a></b>
for JavaScript!</small></small></font></p>


</div>
</div>
</div>

<script language="JavaScript1.2">

/*
Always On Top Content Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

//configure the below two variables to determine where the static content will initially be positioned when the document loads, in terms of X and Y cooridinates, respectively

var w=document.body.clientWidth-195
var h=50


////Do not edit pass this line///////////
w+=document.body.scrollLeft
h+=document.body.scrollTop

var leftpos=w
var toppos=h
scontentmain.style.left=w
scontentmain.style.top=h

function onoffdisplay(){
if (scontentsub.style.display=='')
scontentsub.style.display='none'
else
scontentsub.style.display=''
}



</script>
<![endif]-->

[Mr J]

Try this


function moveme(){
document.all.scontentmain.style.pixelTop=100
document.all.scontentmain.style.pixelLeft=100
}

Where scontentmain is the layer id

[viktor]

Many thanks! Worked just fine!

Just one more question then: How can I pass a variable into the function to change the vertical position (horizontal position will remain the same all the way)? Something like...

<img src="button.gif" onclick="moveme(200)">
...and then the window moves to 200 px from the top. Or even better, make a function that moves the window to a position for example 30px higher than the image which is clicked? Script only has to work in IE5!

Thanks again, hope someone can help me with this last piece as well...

[Mr J]

Answer to your first part

function moveme(posY){
document.all.scontentmain.style.pixelLeft=100
document.all.scontentmain.style.pixelTop=posY
}

<img src="button.gif" onclick="moveme(200)">




Answer to your second part, have a play with the script below

<script>
function moveme(ID){
imgposY=document.all[ID].offsetTop
imgposX=document.all[ID].offsetLeft

document.all.scontentmain.style.pixelLeft =imgposX
document.all.scontentmain.style.pixelTop = imgposY-30
}
</script>
<img id="image1" src="pic1.gif" onclick="moveme('image1')">

<div id="scontentmain" style="position:absolute;left:0;top:200">Hello World</div>

[viktor]

THANK YOU MR J! Perfect, you are a hero...

This part:

<script>
function moveme(ID){
imgposY=document.all[ID].offsetTop
imgposX=document.all[ID].offsetLeft

document.all.scontentmain.style.pixelLeft =imgposX
document.all.scontentmain.style.pixelTop = imgposY-30
}
</script>
<img id="image1" src="pic1.gif" onclick="moveme('image1')">

<div id="scontentmain" style="position:absolute;left:0;top:200">Hello World</div>

...was really all I needed, then I use an Iframe inside the layer to change the content. THANKS!