Joy of JavaScript: Flying popup-window onClick

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Flying popup-window onClick
This Fun JavaScript creates a popup-window when you click on a link. The popup-window floats from the left side of your screen to the right side. Very easy installation. Browsers: Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Test the script
Click here to start the Flying Popup

Configuration
Step 1: Paste the following code between the <head> and </head> section of your webpage:

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where this script Script will be running.

var popwindow
var tisurl
var tiswidth
var tisheight
var tistopposition
var tisleftposition
var pause=20
var step=10
var marginright
var endposition
var timer

function openpopup(thisurl,thiswidth,thisheight,thistopposition) {
	tisurl=thisurl
	tiswidth=thiswidth
	tisheight=thisheight
	tistopposition=thistopposition
	tisleftposition=-tiswidth

popwindow=window.open(tisurl, "newwindow", "toolbar=no,width="+tiswidth+",height="+tisheight+",top="+tistopposition+",left="+(tisleftposition)+"");

marginright=screen.width
	endposition=marginright-thiswidth-10
	movewindow()
}

function movewindow() {
	if (tisleftposition<=endposition) {
		popwindow.moveTo(tisleftposition,tistopposition)
		tisleftposition+=step
		timer= setTimeout("movewindow()",pause)
	}
	else {
		clearTimeout(timer)
	}
}
</script>

Step 2: Open your webpage and add a link like this:

GREEN is the URL of the HTML-file displayed in your popup-window
BLUE is the width of the popup-window (pixels).
RED is the height of the popup-window (pixels).
BROWN is the vertical distance to the top of the screen (pixels).