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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing font of text description inside popup window

    I am using the following script for a popup window with an image in it. I want to change the font and size of the text description that shows up below the image in the popup window.

    Can anyone out there help?

    Thanks.
    -----------------

    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>
    </head>
    <body>
    <a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">
    Breakfast pancakes</a>

    </body>
    <html>

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

    Use CSS

    Code:
    var popbackground="lightskyblue" //specify backcolor or background image for pop window
    var windowtitle="Image Window" //pop window title
    var popfont="Verdana"; //or "Verdana, Tahoma, Arial"
    var popfontsize="12px";
    var popfontweight="normal"; //or "bold", "italic normal", "italic bold"
    ...
    var bodyattribute=(popbackground.indexOf(".")!=-1) ? 'background-image:url('+popbackground+');' : 'background-color:'+popbackground+";";
    var bodyfont = "font:"+popfontweight+" "+popfontsize+" " + popfont + ";";
    ...
    jkpopwin.document.write('<html><head><style type="text/css">body{"+bodyfont+"\n"+bodyattribute+"}\nimg{margin-bottom:0.5em}</style><title>'+windowtitle+'</title></head><body><div><img src="'+imgpath+'" alt="" /></div><div>'+textdescription+'</div></body></html>');
    ...
    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
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help, Glennv. I put your code into mine but I still can't get it to work. So I'm pasting a test page below. Can you figure out what else I have to do? I don't care that the image isn't there, I just want that pesky label to show in Verdana!

    Thanks
    Patty
    ------------

    <html>
    <head>
    <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
    var popfont="Verdana"; //or "Verdana, Tahoma, Arial"
    var popfontsize="12px";
    var popfontweight="normal"; //or "bold", "italic normal", "italic bold"


    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-image:url('+popbackground+');' : 'background-color:'+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+30)
    }
    jkpopwin.document.open()
    jkpopwin.document.write('<html><head><style type="text/css">body{"+bodyfont+"\n"+bodyattribute+"}\nimg{margin-bottom:0.5em}</style><title>'+windowtitle+'</title></head><body><div><img src="'+imgpath+'" alt="" /></div><div>'+textdescription+'</div></body></html>');
    jkpopwin.document.close()
    jkpopwin.focus()
    }

    </script>

    </head>
    <body>
    <a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">
    Breakfast pancakes</a>

    </body>
    </html>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    jkpopwin.document.write('<html>\n<head>\n<style type="text/css">\nbody{'+bodyfont+bodyattribute+'}\nimg{margin-bottom:0.5em}\n</style>\n<title>'+windowtitle+'</title>\n</head>\n<body>\n<div><img src="'+imgpath+'" alt="" /></div>\n<div>'+textdescription+'</div>\n</body>\n</html>');
    Glenn
    ____________________________________

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

  • #5
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    many thanks

    Thanks a lot! That worked perfectly.

    All the best,
    Patty

  • #6
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing font colour in popup window

    A while ago GlennV helped me to change the font of the text in a popup window and now I want to change the colour. What I want is a black popup window with white text inside. I can change the colour of the window by changing popbackground to black, but can't figure out how to change the colour of the text. Thanks in advance for your help.

    Here's the code I have so far:

    <html>

    <head>

    <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="white" //specify backcolor or background image for pop window
    var windowtitle="Image Window" //pop window title
    var popfont="Verdana"; //or "Verdana, Tahoma, Arial"
    var popfontsize="10px";
    var popfontweight="normal"; //or "bold", "italic normal", "italic bold"




    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-image:url('+popbackground+');' : 'background-color:'+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+30)
    }
    jkpopwin.document.open()



    jkpopwin.document.write('<html>\n<head>\n<style type="text/css">\nbody{'+bodyfont+bodyattribute+'}\nimg{margin-bottom:0.5em}\n</style>\n<title>'+windowtitle+'</title>\n</head>\n<body>\n<div><img src="'+imgpath+'" alt="" /></div>\n<div>'+textdescription+'</div>\n</body>\n</html>');

    jkpopwin.document.close()
    jkpopwin.focus()
    }

    </script>


    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta http-equiv="Content-Language" content="en-us">
    <meta name="Description" content="Ruminations on the making of pots.">
    <meta name="Keywords" content="Patty Osborne, slab, pottery, ceramics, mould, sawdust firing, smoke firing, raku">
    <title>Gallery of pottery by Patty Osborne</title>
    <LINK rel="stylesheet" type="text/css" href="includes/mud.css">

    </script>
    <script language="Javascript">
    function open_win()
    {
    window.open("mailer.php","my_new_window","toolbar=1, location=0, status=0, menubar=0, scrollbars=1, resizable=0, width=500, height=500")
    }
    </script>



    </head>

    <body bgcolor="#F5F5DC">

    <div align="center">
    <center>
    <table border="0" width="654" height="1">
    <tr>
    <td width="123" height="112" valign="bottom" align="right"><b><font face="Verdana" color="#000000" size="1"><a href="notes.htm">site
    notes</a></font><font face="Verdana" size="2" color="#000000"><br>
    </font>
    <a href="index.htm">
    <font face="Verdana" color="#000000" size="1">
    HOME<br>
    <br>
    </font></a></b><font face="Verdana" color="#000000" size="1"><a href="javascriptpen_win()" Title = "to mudroom">send a note</a></font></b></td>
    <td width="11" height="112" valign="bottom" align="right"><img border="0" src="images/spacer.gif" width="1" height="1"></td>
    <td width="147" height="112"><img border="0" src="images/logo.gif" alt="logo" width="100" height="100"></td>
    <td width="143" height="112"></td>
    <td width="115" height="112"></td>
    <td width="167" height="110" valign="bottom"></td>
    </tr>
    <tr>
    <td width="123" height="31" valign="top" align="right"></td>
    <td width="11" height="31" valign="top"></td>
    <td colspan="4" width="488" height="31" valign="top">
    <hr color="#CC3300">
    <font face="Verdana" size="1" color="#CC3300"><b>GALLERY<br>
    <br>
    </b></font></td>
    </tr>
    <tr>
    <td width="123" height="110" valign="middle" align="right"><b><font face="Verdana" size="1" color="#000000">TAFONI<br>
    </font></b></td>
    <td width="11" height="110" valign="top"></td>
    <td width="485" height="110" valign="top" colspan="4">
    <div align="center">
    <table border="0" width="505" cellpadding="0" cellspacing="5">
    <tr>
    <td width="134"><a href="#" onClick="jkpopimage('images/tafvase.jpg', 406, 320, 'Vases, thrown and cut, 10 inches high, oxidation'); return false"><img border="0" src="images/tafvase.jpg" width="138" height="100" alt="tafoni vases"></a></td>
    <td width="144"><a href="#" onClick="jkpopimage('images/tafbowl.jpg', 440, 320, 'Bowl, thrown, altered and cut, 12-inch diameter, oxidation'); return false"><img border="0" src="images/tafbowl.jpg" width="140" height="100" alt="tafoni bowl"></a></td>
    <td width="106"><a href="#" onClick="jkpopimage('images/tafcol2.jpg', 406, 320, 'Colander, thrown and cut, 9-inch diameter, oxidation'); return false"><img border="0" src="images/tafcol2.jpg" width="106" height="100" alt="tafoni colander"></a></td>
    <td width="101"><a href="#" onClick="jkpopimage('images/tafcol.jpg', 406, 320, 'Flared bowl, thrown and cut, 8-inch diameter, oxidation'); return false"><img border="0" src="images/tafcol.jpg" width="101" height="100" alt="tafoni bowl"></a></td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    <tr>
    <td width="123" height="110" valign="middle" align="right"><font face="Verdana" size="1"><b>RAKU
    </b></font></td>
    <td width="11" height="110" valign="top"></td>
    <td width="485" height="110" valign="top" colspan="4">
    <div align="center">
    <table border="0" width="494" cellpadding="0" cellspacing="5">
    <tr>
    <td width="130"><a href="#" onClick="jkpopimage('images/rakbowls.jpg', 406, 320, 'Bowls, thrown with rim added, 10-inch diameter, raku'); return false"><img border="0" src="images/rakbowls.jpg" width="130" height="100" alt="raku bowls"></a></td>
    <td width="130"><a href="#" onClick="jkpopimage('images/rakplate.jpg', 395, 320, 'Plate, handbuilt, 9-inch diameter, raku'); return false"><img border="0" src="images/rakplate.jpg" alt="raku plate" width="130" height="100"></a></td>
    <td width="64"><a href="#" onClick="jkpopimage('images/rakvases.jpg', 300, 500, 'Leaning vases, handbuilt, 16.5 inches high to 3.5 inches high, raku'); return false"><img border="0" src="images/rakvases.jpg" width="64" height="100" alt="raku leaning vases"></a></td>
    <td width="101"><a href="#" onClick="jkpopimage('images/rakbox.jpg', 440, 320, 'Carved-out boxes, handbuilt, 4 and 5 inches high, raku'); return false"><img border="0" src="images/rakbox.jpg" width="150" height="100"></td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    <tr>
    <td width="123" height="110" valign="middle" align="right"><b><font size="1">LEANERS</font></b></td>
    <td width="11" height="110" valign="top"></td>
    <td width="485" height="110" valign="top" colspan="4">
    <div align="center">
    <table border="0" width="494" cellpadding="0" cellspacing="5">
    <tr>
    <td width="113"><img border="0" src="images/bchor.jpg" width="113" height="100"></td>
    <td width="130" height="100"><img border="0" src="images/beach.jpg" width="132" height="100"></td>
    <td width="64"></td>
    <td width="101"><img border="0" src="images/bchplt.jpg" width="150" height="100"></td>
    </tr>
    </table>
    </div>
    <p>&nbsp;
    </td>
    </tr>
    </table>
    </center>
    </div>

    <p>&nbsp;</p>

    </body>

    </html>

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    var popbackground="black" //specify backcolor or background image for pop window
    var windowtitle="Image Window" //pop window title
    var popfont="Verdana"; //or "Verdana, Tahoma, Arial"
    var popfontsize="10px";
    var popfontweight="normal"; //or "bold", "italic normal", "italic bold"
    var popfontcolor="white";
    ...
    jkpopwin.document.write('<html>\n<head>\n<style type="text/css">\nbody{'+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="" /></div>\n<div>'+textdescription+'</div>\n</body>\n</html>');
    Glenn
    ____________________________________

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

  • #8
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks for font color help + centering image and text in popup

    Thanks for helping again, glennv, by showing me how to change the color of the font inside the popup window.

    Of course, there's always one more thing:

    Now I would like to be able to center the image and the window title inside the popup window.

    Thanks in advance

    pattyo

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    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="" /></div>\n<div>'+textdescription+'</div>\n</body>\n</html>');
    What's next?
    Glenn
    ____________________________________

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

  • #10
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    centering image and text vertically in popup window

    Of course, now there IS something else I'd like to do:

    I'd like to be able to enlarge the popup window and have the text and image stay centered vertically inside it. Is this possible?

    I sense that I may be close to attaining perfection with these popup windows--I couldn't have done it without you!!

    Thanks
    pattyo

  • #11
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Text centered beside the image



    Hi,

    This is my first post!

    Is there a way to make the text be not under the pic, but beside it to the right? I have managed to do it, but it was like at the very bottom of the pic.

    I need it to be like that Logo of CodingForums.com at the top of this page with text beside it.

    Thanks in advance

    Mike


  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Change div tags to span.
    Code:
    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<span><img src="'+imgpath+'" alt="" /></span>\n<span>'+textdescription+'</span>\n</body>\n</html>');
    Glenn
    ____________________________________

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

  • #13
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Imho, writing entire* pages using js is a really horrible idea as it makes the destination page entirely inaccessible to users without access to javascript.
    (* I say 'entire', but I rarely see js and document.write used to create anything approaching a compliant page.)

    Far better, imho, to have a proper markup document which can be shown either in a popup window or in the same window depending on whether the user has js available or not.
    As a practice, the creation of entire pages through js is long overdue a painful death in favour of more accessibly-minded techniques.
    Last edited by Bill Posters; 02-06-2006 at 11:31 AM.

  • #14
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Hallo,

    I wanna know how to make that popup window open maximized in all resolutions? Is there a way to do that? or at least make it open full in 800x600?

    Thanks in advance

    Mike


  • #15
    Regular Coder Nischumacher's Avatar
    Join Date
    Oct 2005
    Location
    Bombay, India
    Posts
    196
    Thanks
    0
    Thanked 2 Times in 2 Posts
    see this link...
    - NS 666
    .net DEVILoper


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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