Window-Widget-Woes

[luannj]

The script url:
http://www.dynamicdrive.com/dynamici...ndow/index.htm

I have an iframe displaying a blog in a window widget in a nested div tag.
url:
http://library.westliberty.edu/nestedtables.html

The problem centers around resolution ... viewing the page in different resolutions causes the iframe to shift left or right ... depending on the res you choose. I've been trying to work through this for several days, but nothing I adjust seems to help me with the problem. The problem began when I needed to center the page content on the display.

Any help will be appreciated.

Thanx,
Lu Ann

[ddadmin]

The problem is because your layout is centered on the screen, with the left and right margins expanding or contracting based on the resolution. When this happens, the distance between the DHTML window on the screen to the left edge of the page changes, hence the "mispositioning." One thing you can do is try to position the DHTML window relative to the top/left corner of the "blogger" column where it's displayed in. Try replacing your current dhtmlwindow.open() line on your page with the below instead:

var blogwin=dhtmlwindow.open("blogwin", "iframe", "http://library.westliberty.edu/news.html", "Library News", "left=425px,top=407px,width=414px,height=308px,resize=1,scrolling=1,center=0")

function getposOffset(what, offsettype){
	return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
}

window.onload=function(){
var bloggercolumn=document.getElementById("blogger")
var bloggerleft=getposOffset(bloggercolumn, "offsetLeft")
var bloggertop=getposOffset(bloggercolumn, "offsetTop")
blogwin.moveTo(bloggerleft, bloggertop)
}

[luannj]

Thanx so much for your help.

Unfortunately, the edited code made the iframe and blog disappear. I'm not a programmer; so I think my only alternative is to notify our users to set their display res higher to view the page as it's meant to be viewed. I don't know where to go from this point.

The new URL:
http://library.westliberty.edu/newindex1.html

Again, many thanx.

[ddadmin]

Hi:
To elaborate on the technique I mentioned above, try out the below HTML on a fresh page with just DHTML window script installed:

<!-- 1) DHTML Window Example 1: -->

<div id="testcontainer" style="margin: 100px 0 0 200px; background: silver; height: 400px">This is a test container. DHTML Window will be positioned at the upper left corner of this container.</div>

<script type="text/javascript">

function getposOffset(what, offsettype){
	return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
}

var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://images.google.com/", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1")

var testcontainer=document.getElementById("testcontainer")
var leftpos=getposOffset(testcontainer, "offsetLeft")
var toppos=getposOffset(testcontainer, "offsetTop")
googlewin.moveTo(leftpos, toppos)

googlewin.onclose=function(){ //Run custom code when window is being closed (return false to cancel action):
return window.confirm("Close window 1?")
}

</script>

As you can see, there's a gray sample container on the page, and the DHTML window in this case is positioned relative to the upper left corner of this container, using the technique mentioned.