changing font of text description inside popup window

pattyo

05-23-2005, 09:19 PM

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>

glenngv

05-24-2005, 06:08 AM

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>');
...

pattyo

05-25-2005, 03:54 AM

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>

glenngv

05-25-2005, 10:19 AM

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>');

pattyo

05-26-2005, 06:02 AM

Thanks a lot! That worked perfectly.

All the best,
Patty

pattyo

07-01-2005, 11:17 PM

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="javascript:open_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> 
</td>
</tr>
</table>
</center>
</div>

<p> </p>

</body>

</html>

glenngv

07-04-2005, 05:45 AM

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>');

pattyo

07-08-2005, 05:51 AM

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

glenngv

07-08-2005, 06:28 AM

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? :rolleyes:

pattyo

07-09-2005, 05:25 PM

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

wise_mike

02-05-2006, 07:05 PM

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

glenngv

02-06-2006, 10:15 AM

Change div tags to span.
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>');

Bill Posters

02-06-2006, 10:28 AM

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.

wise_mike

02-22-2006, 01:23 PM

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

Nischumacher

02-22-2006, 01:33 PM

see this link (http://www.codingforums.com/showthread.php?t=25618)...

Bill Posters

02-22-2006, 01:40 PM

see this link (http://www.codingforums.com/showthread.php?t=25618)...

That's not a particularly efficient way to go about it, particularly as some browsers allow users to permit (manually triggered) new windows, but disallow the moving or resizing of any windows - presumably by blocking the moveTo and resizeTo methods.

So, rather than create the window and then move and resize it, you should aim to position and size the new window as part of the creation process.

e.g.
function goPop(url) {

var winProps = 'top=0,left=0,height='+screen.availHeight+',width='+screen.availWidth+',location=yes,toolbar=yes,dir ectories=yes,status=yes,resizable=yes,scrollbars=yes';

var newWin = window.open(url,'popWin',winProps);
newWin.focus();

}

Tanasha

03-06-2008, 10:34 AM

Hi,

This post is about the same javascript that I use. I have also a question:

I want to center the popup window in the middle of the screen. Can anyone tell me how?

Thanks,
Tanasha

Script below:

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>