PDA

View Full Version : DHTML Window Position



jpfield
01-04-2005, 09:00 PM
I have utilized the DHTML code provided in the DHTML Window article at:

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow.htm

I need know how to change the vertical position of the window that opens. The horizontal position is controlled by the line:

document.getElementById("dwindow").style.left="30px"

But the line that appears to control the vertical position I cannot make any sense of:

document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"

How do you change the vertical position of the window that opens?

Minos
01-04-2005, 09:30 PM
This:

document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"

Is Basically

If (ns6)
window.PageYOffset*1+30+"px"
else
iecompattest().scrollTop*1+30+"px"

The thirty is what you would change...

modhem
01-06-2005, 03:04 AM
is it possible to set this value as a variable to be specified in the link (togheter with the width and height of the window)?

AndyGermany
06-13-2006, 01:41 PM
Hi,

did you get a solution for the question:

is it possible to set this value as a variable to be specified in the link (togheter with the width and height of the window)?

If yes, please give it to me. I have the same problem for my website.

Thanks,

Andi.:) :) :)

jscheuer1
06-13-2006, 02:44 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>

//DHTML Window script- Copyright Dynamic Drive (http://www.dynamicdrive.com)
//For full source code, documentation, and terms of usage,
//Visit http://www.dynamicdrive.com/dynamicindex9/dhtmlwindow.htm

var dragapproved=false
var minrestore=0
var initialwidth,initialheight,initialleft,initialtop
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all

function iecompattest(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"
}
}

function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
document.getElementById("dwindowcontent").style.display="none" //extra
tempx=parseInt(document.getElementById("dwindow").style.left)
tempy=parseInt(document.getElementById("dwindow").style.top)

dragapproved=true
document.getElementById("dwindow").onmousemove=drag_drop
}

function loadwindow(url,width,height,left,top){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left=left+"px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+top+"px" : iecompattest().scrollTop*1+top+"px"
document.getElementById("cframe").src=url
}
}

function maximize(){
if (minrestore==0){
minrestore=1 //maximize window
initialleft=document.getElementById("dwindow").style.left;
initialtop=document.getElementById("dwindow").style.top;
document.getElementById("maxname").setAttribute("src","restore.gif")
document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px"
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("src","max.gif")
document.getElementById("dwindow").style.width=initialwidth
document.getElementById("dwindow").style.height=initialheight
document.getElementById("dwindow").style.left=initialleft
document.getElementById("dwindow").style.top=initialtop
}
}

function closeit(){
document.getElementById("dwindow").style.display="none"
}

function stopdrag(){
dragapproved=false;
document.getElementById("dwindow").onmousemove=null;
document.getElementById("dwindowcontent").style.display="" //extra
}

</script>
</head>
<body>
<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
<div align="right" style="background-color:navy"><img src="max.gif" id="maxname" onClick="maximize()"><img src="close.gif" onClick="closeit()"></div>
<div id="dwindowcontent" style="height:100%">
<iframe id="cframe" src="" width=100% height=100%></iframe>
</div>
</div>

<script>
//Use below code to load DHTML Window as page loads
if (ns6) window.onload=new Function('loadwindow("http://www.google.com",600,400,100,150)')
else
loadwindow("http://www.google.com",600,400,100,150)
</script>

<!--Use below code to load DHTML window via link-->
<a href="javascript:loadwindow('http://www.google.com',600,400,70,200)">Geocities</a>
</body>
</html>

Wildfire563
08-19-2006, 06:24 AM
Thank you John for this update to the script.

Is it possible to modify the script further so that it is centered in the users browser?

Or perhaps modify initialleft and initialtop so they can take other arguments like "left, center, right" and "top, middle, bottom", as well as pixel values?

Or perhaps even allow combinations of the above terms and pixels so the user can add padding to the position from the start location?

Thanks again,

Thomas
http://www.flyingscool.com
or the new version of the site I am building, currently at
http://www.flyingscool.com/index3.htm

cbulmer
08-25-2006, 01:42 PM
Hi, im using the DHTML Window script (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow.htm) and i am trying to launch the window from one of the links in the Microsoft Outlook Bar script (http://www.dynamicdrive.com/dynamicindex1/outbar/index.htm)

I cant get the link to work, it just says that there is a syntax error, but i cant find where it is.

P.s. I haven't modified the javascript in either script, just incase you put it down to that.

Thanks for your help in advance.

jscheuer1
08-25-2006, 02:15 PM
Hi, im using the DHTML Window script (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow.htm) and i am trying to launch the window from one of the links in the Microsoft Outlook Bar script (http://www.dynamicdrive.com/dynamicindex1/outbar/index.htm)

I cant get the link to work, it just says that there is a syntax error, but i cant find where it is.

P.s. I haven't modified the javascript in either script, just incase you put it down to that.

Thanks for your help in advance.

These two scripts are not well suited to working together. Outbar uses a frameset, while DHTML Window is meant for installation on a single page. In an unrelated matter, Outbar will only work in IE so, in my opinion, isn't the best choice for the internet which now has 20 to 30 percent of its users browsing in other browsers. When Outbar was written, this was more like less than 10%.

The syntax error you are seeing is probably just the result of entering the command for DHTML Window into folders.js in an invalid manner. Also, it would have to be targeted to the frame you wanted it to appear in somehow (this part would be the trickiest). However, even if written correctly and targeted, the DHTML Window would have to be in one frame or the other. This would limit its scope of visibility to that frame. If it didn't entirely fit within that frame, it would be partly cut off. If you wanted it available to more than one of the pages that Outbar brings up, it would have to be on or linked to each page. If not, it would need to be prevented from firing unless the desired page were already loaded.

Unless you are certain that unique aspects of your intended application of these two scripts together makes all of the above considerations unimportant, my best advice would be to find another way way to deal with your content.

cbulmer
08-28-2006, 10:08 AM
Hi, the combination of the scripts is not for a website, but a html application that i am developing. There is no frameset, I managed to work around that. What I did was use the page that the menu was on, then placed an iframe to the right hand side of it, therefore removing the frameset.

I need the iframe there because when i maximize the dhtml window, it would cover the menu otherwise.

It doesn't matter that it only works in IE because HTML Applications depend on IE and not, let's say firefox or netscape.

The frame that i have used is called 'content', without the quotes.

Thanks for your help in advance.