Results 1 to 4 of 4

Thread: Window-Widget-Woes

  1. #1
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Window-Widget-Woes

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    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)
    }

  3. #3
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

    Code:
    <!-- 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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •