Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Location
    Edmonton
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Background color not showing in pop up window

    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 of 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){
    leftpos-=screenLeft
    toppos-=screenTop
    }
    }

    getpos()
    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)
    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+50)
    }
    jkpopwin.document.open()
    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>');
    jkpopwin.document.close()
    jkpopwin.focus()

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    bgcolor is not a CSS property. You want background-color

  • #3
    New to the CF scene
    Join Date
    Jun 2006
    Location
    Edmonton
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You're treating like a body attribute and not a style definition:

    body
    {
    background-color: red;
    }

    You are doing:

    body
    {
    bgcolor="red"
    }

    You need:

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

  • #5
    New to the CF scene
    Join Date
    Jun 2006
    Location
    Edmonton
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!

  • #6
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Jun 2006
    Location
    Edmonton
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •