View Full Version : Background color not showing in pop up window

06-05-2006, 06:28 PM
I am new at javascript and my first foray was to try a pop up window to display a few products on my sports photography site.

I am using the JK pop up image viewer script by JavaScriptKit.com.

I initially had the background color working fine in the window when i first installed it. I have since read a few threads on here and have touched up the font and also centered the text and image along with not allowing "right-click" in the pop up window itself. Since doing so, the background color will not work.

I may have stared at the code too long, because i see nothing amiss. Please help. I have posted the code below for you and if you want to check the pop up windows on my site, they are located on the products page (http://www.lensdude.com/products.html) of www.lensdude.com (http://www.lensdude.com). The windows are located in the product lines section of the webpage. Click on the name and you get a small window with a product sample.

The code is below. Thanks in advance for your help!

var popbackground="#808080" //specify backcolor or background image for pop window
var windowtitle="Lensdude.com Products" //pop window title
var popfont="Verdana"; //or "Verdana, Tahoma, Arial"
var popfontsize="12px";
var popfontweight="italic bold"; //or "bold", "italic normal", "italic bold"
var popfontcolor="black";
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){

var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
var bodyfont = "font:"+popfontweight+" "+popfontsize+" " + popfont + ";";
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+50)
jkpopwin.document.write('<html>\n<head>\n<style type="text/css">\nbody{text-align:center;'+bodyfont+bodyattribute+'color:'+popfontcolor+';}\nimg{margin-bottom:0.5em}\n</style>\n<title>'+windowtitle+'</title>\n</head>\n<body>\n<div><img src="'+imgpath+'" alt="Sports products by Lensdude.com." /></div>\n<div>'+textdescription+'</div>\n</body>\n</html>');

06-05-2006, 07:45 PM
bgcolor is not a CSS property. You want background-color

06-05-2006, 08:05 PM
I replaced bgcolor with background-color. It is still showing white.
The color is specified at the beginning of the code with

var popbackground="#808080".

Why is is not working?

The background color worked before I changed the look of the text.

Thank you.

06-05-2006, 08:19 PM
You're treating like a body attribute and not a style definition:

background-color: red;

You are doing:


You need:

var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background: '+popbackground+';' : 'background-color:'+popbackground+';';

06-05-2006, 08:38 PM
What I did -
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'

Compared to what you did-
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background: '+popbackground+';' : 'background-color:'+popbackground+';';

Now I see what I did wrong. It works perfectly now. Thank you!
I have to learn a lot more. I'm just starting. Could you recommend any great tutorials? I have come across a few, but they seem comfusing.

Once again.....THANKS!!

06-05-2006, 08:55 PM
have you gone through the collection of information and tutorials at http://www.w3schools.com/ They are pretty decent to get you started in HTML, CSS, and JavaScript.

Other than that, try not to rely on canned scripts so much. Try writing a lot of on your own, and if you can't get it, ask for help. Of course you'll be reinventing the wheel, but it'll help you learn a lot, and once your comfortable with the code, then you can get into other people's canned scripts.

06-08-2006, 06:32 PM
I've been doing pretty good with HTML and CSS. Got those down pat. I'm a learn by example person. Once I mess with a couple of scripts that are already made...I can see how it fits together easier and I'm off. I just need that first jump start! These pop up windows was my first experience with Java. So now I just have to connect the tutorials with what I am seeing, then I'm good to go.

Thanks for all of your help!