Draggable Inline Popups

July 09, 2004

First of all, thank you everyone for the feedback on inline popups. Ruben pointed out that if you have a scrollbar present (your may have to resize your browser) that you can scroll past the overlay div. James from New Zealand emailed me a solution that would expand the overlay div with javascript. All you have to do is add this to the page.

 function showScreen(){
document.getElementById("screen").style.height = »
document.body.clientWidth + "px";
document.getElementById("screen").style.width = »
document.body.scrollWidth +  "px";}
 showScreen()

Let us move on now and make this a draggable popup. First, I don’t think it is necessary to make the popup draggable if you design it right. However, if you want to make that layer drag, all you have to do is add a little javascript and ‘ta da’. Mike Hall of Brain Jar has a great cross-browser draggable script that I used.

Comments

SM Korzdorfer said:

Holy Smokes! That’s the most lovable creation I’ve seen in a long, long, time. Hats off for a fine job.

Posted on Jul. 9, 2004 10:35 #

Jon said:

Love the dragable stuff

Posted on Jul. 9, 2004 15:17 #

Dominik Hahn said:

May we use that code for our projects or will you release it soon? :)

Posted on Jul. 10, 2004 02:53 #

Kyle said:

Excellent example, although if I may add my own 2cents.

The most impressive use of a draggable inline popup was from a site I saw a few years ago that used this, plus lowering the opacity of the background and using PNGs for the dropshadows around the outside.

It makes for one hell of a graphical presentation, albeit murder on your processor.

Posted on Jul. 10, 2004 13:01 #

Blake Scarbrough said:

Dominik Hahn-
This code may be used as outlined in this Creative Commons
Feel free to improve upon it as you like.

Posted on Jul. 10, 2004 15:25 #

baz said:

Still renders the page completely useless once I drag the box past the top of the browser window and can't scroll to get it back.

Sigh.

Posted on Jul. 11, 2004 07:57 #

Blake Scarbrough said:

baz-
There probably should be some controls to restrict someone from dragging out the window. Thanks for the feedback.

Posted on Jul. 12, 2004 15:28 #

Cameron Moll said:

Here's a real-world example in action:

http://48hourprint.com/printing.html

Not sure if the code is the same, but the end result is the same (and draggable!).

Posted on Jul. 14, 2004 13:47 #

Blake Scarbrough said:

Cameron, good to see some people are using it. The minimize button didn't work for me on their inline popup but it was easy to use. A little to windowesk looking though.

Posted on Jul. 20, 2004 23:06 #