[Help] Javascript pop up window with background color

empty.container · #1 (**permalink**) 01-13-05, 02:23 AM

Hello everyone. Killed half a day trying to get this right, and thought i'd post for some help .. and leave it alone for a while before I rip out my hair.

The request is quite simple. I want to create a javascript behavior that opens up a chromeless window (no scrollbars, menu, status etc.) that contains an image only and which will allow me to set the background color. I've tried various methods, including the document.write function .. but i've failed every way i go.

I can get the pop up to create properly but always I stumble at the size of the window. The window is always too small and appears to cut off the image. I'm not quite sure why. For instance, I used this script from Javascript Kit:

Code:

// for free JavaScript tutorials and scripts
// This notice must stay intact for use

var popbackground="lightskyblue" //specify backcolor or background image for pop window
var windowtitle="Image Window"  //pop window title

function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var  winattributes='width='+popwidth+',height='+popheig
ht+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br>'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}

</script>

Everything works to perfection, except that all tested browser (Internet Explorer(PC), Firefox(PC) and Safari on Mac cut off the image on teh bottom and right) Its as if the window is too small. I'm positive I've set the window height and width properly. Several other scripts have this problem as well.

Concindentally if I use the basic open browser window function of dreamweaver (simple window.open (URL, winname, winattributes) it works perfectly .. but I can't because i can't set the background color.

I'd really appreciate if someone could shed some light on this. I very open to suggestions including sample scripts. Thanks everyone.

the_mole001 · #2 (**permalink**) 01-13-05, 03:11 AM

Hello There,

First things first, u mentioned there was always a small piece being cut off, thats because html always adds rough 10px to the top and left of the screen when showing a page so u must cancel them out (hence topmargin=0 leftmargin=0 included in the bodyattribute var), nextly to even let the script work on my pc i had to add the ';'s to lines that needed them and remove "(popbackground.indexOf(".")!=-1)?" from the beginning of body attribute. I hope thats all i changed and it doesn't damaged the value of your script. Anyways I did manage to get it working fine on my pc in the end and heres the code i was using:

Code:

<html>
<head>
<title>Testing</title>
<script type='text/javascript'>
// for free JavaScript tutorials and scripts
// This notice must stay intact for use

var popbackground="lightskyblue"; //specify backcolor or background image for pop window
var windowtitle="Image Window" ; //pop window title

function detectexist(obj){
return (typeof obj !="undefined");
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){
	function getpos(){
		leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
		toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
		if (window.opera){
			leftpos-=screenLeft;
			toppos-=screenTop;
		}
	}
	getpos()
	var  winattributes = 'width='+popwidth+', height='+popheight+', resizable=yes, left='+leftpos+', top='+toppos;
	var bodyattribute = 'topmargin=0 leftmargin=0 bgcolor='+popbackground;
	if (typeof jkpopwin=="undefined" || jkpopwin.closed){
		jkpopwin = window.open("","",winattributes);
	} else {
		//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
		//jkpopwin.moveTo(leftpos, toppos)
		jkpopwin.resizeTo(popwidth, popheight+30);
	}
	jkpopwin.document.open();
	jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br><center>'+textdescription+'</body></html>');
	jkpopwin.document.close();
	jkpopwin.focus();
}
</script>
</head>
<body>
<input type='button' onclick='jkpopimage("logout.gif", 150, 25, "a pretty pic");'>
</body>
</html>

Hope that helps get your code to working order even if you need to add parts yourself. Sorry for the non-complete original script.