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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [Help] Javascript pop up window with background color

    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:
    <script type="text/javascript">
    
    // JK Pop up image viewer script- By JavaScriptKit.com
    // Visit JavaScript Kit (http://javascriptkit.com)
    // 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=(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 t his. I very open to suggestions including sample scripts. Thanks everyone.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Location
    MD, USA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Has anyone solved this problem yet, as I have the exact same problem.

    Angi


  •  

    Posting Permissions

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