Results 1 to 5 of 5

Thread: Scrolling problem with DHTML Window widget

  1. #1
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Scrolling problem with DHTML Window widget

    DHTML Window widget
    http://www.dynamicdrive.com/dynamici...ndow/index.htm

    I'm using the iframe version. It seems that the widget opens relative to the top left (0,0) of the window in Firefox 3.0.5 / Safari (seems fine in IE), even if the calling anchor is not on the first visible page (i.e. several scrolls down). Ideally I'd like the widget to open under the mouse pointer, if possible.

    See http://www.britburn.co.uk/dhtmlwindow/demo.php (a variation on the original demo.htm) to see what I mean.

    Taking the script further I've managed to pass variable from the original link to a form on the first iframe widget, pass the contents of the form to a second iframe widget, do some database actions and set up a link to close the widget, so I suspect if I can manage that much then I'm probably missing something obvious!

    All help gratefully appreciated.

    Bert
    Last edited by BertD; 01-30-2009 at 09:42 PM. Reason: Added "in firefox"

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

    Default

    Actually by default when you call dhtmlmwindow.open(), its left and top positions are relative to the upper left corner of the viewport, and not (0, 0) of the very top of the browser. So if an anchor link that launches a DHTML window is way down below the page, clicking on it should cause the window to be positioned relative to the viewable viewport.

    It's hard to tell at a glance why the windows are behaving differently on your page. Regardless though, there are a few past threads on how to reposition a DHTML window upon opening it so it appears right beneath the mouse cursor. Please try doing a search.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    BertD (01-31-2009)

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

    Default

    Thanks for the reply, but I think I've explained it exactly the wrong way around!

    The widget opens perfectly as expected in the viewport (new word for me, thanks), but the original window scrolls back to the top, presumably because of the

    Code:
    <a href='#' onClick="goo etc">link</a>
    leaving the widget hidden further down the page.

    Adding a named anchor, ie

    Code:
    <a name="#xyz">
    <a href='#xyz' onClick="goo etc">link</a>
    has fixed that problem.

    Now for the mouse co-ords!
    Last edited by BertD; 01-31-2009 at 03:17 AM. Reason: Partially solved.

  5. #4
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Right, I expect anyone that knows how could solve this in about ten seconds flat!

    As above, I can open my iframe widget using

    Code:
    <a href="holder" onClick="googlewin=dhtmlwindow.open('googlebox', 'iframe', 'windowfiles/external.htm', 'Title', 'width=450px,height=250px,left=50px,top=50px,resize=1,scrolling=1')">Window Test</a>
    I've now got a function that sets the mouse co-ordinates to tempX and tempY and can display these co-ordinates in an alert

    Code:
    <a href="#holder" onClick="alert('x: '+tempX+' y: '+tempY)">Mouse Test 1</a>
    Everything seems fine up to here. The problem is using tempX and tempY in dhtmlwindow.open - I would have thought using ...

    Code:
    <a href="holder" onClick="googlewin=dhtmlwindow.open('googlebox', 'iframe', 'windowfiles/external.htm', 'Title', 'width=450px,height=250px,left='+tempX+'px,top='+tempY+'px,resize=1,scrolling=1')">Window Test</a>
    ... would do the job, but it fails if used directly as above, or even in a function.

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

    Default

    You haven't posted what your tempX and tempY variables are set to, but regardless, it's cleaner to put everything in a function, then call that function within your link to invoke it. Here's an example:

    Code:
    <script type="text/javascript">
    
    function openwindow(e, url){
    var e=e ||window.event
    googlewin=dhtmlwindow.open('googlebox', 'iframe', url, 'Title', 'width=450px,height=250px,resize=1,scrolling=1')
    googlewin.moveTo(e.clientX, e.clientY)
    }
    
    </script>
    
    <a href="holder" onClick="openwindow(event, 'windowfiles/external.htm'); return false">Window Test</a>
    DD Admin

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
  •