Changing font attributes in pop up window

jkelleway

05-14-2009, 05:10 PM

Hi all,

I am using the JK Pop-up image viewer, from JavaScript Kit for an online library exhibition I am making. I can change the background color of the pop-up window to the color of the main website (Dark Blue) however, I can not seem to find away to change the color or font style, of the text that appears in the pop-up window.

I have tried using css to no success, the only way I can seem to do it is by wrapping the text for each image in the deprecated <font color> tag which i obviously don't want to do.

Here is the code below:

<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="#FFFFFF" //specify backcolor or background image for pop window
var windowtitle="Hail To The Chief: Image Viewer" //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, scrollbars=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()
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

</script>

and the html:

<a href="#" title="View Larger Image"><img src="../../images/pop_ups/WT Marshall/McKinley/McKinley 1898 White House Invitation.jpg" hspace="10" vspace="5" align="top" alt="McKinley 1898 White House Invitation thumbnail" onclick="jkpopimage('../../images/WT Marshall/McKinley/McKinley 1898 White House Invitation.jpg', 830, 600, 'Engraved Invitation to the McKinley White House on 1 February 1898. W.T. Marshall Collection.'); return false" /></a>

The red text above is the text I am looking to change in the pop-up

Does anyone have any suggestions?

Any help would be greatly appreciated.

Old Pedant

05-14-2009, 08:35 PM

Since that code is creating *ALL* the content for the popup window, it can easily create whatever content you want it to.

The key is this line:

jkpopwin.document.write('<html><title>'+windowtitle+'</title>'
+ '<body '+bodyattribute+'>'
+ '<img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'
+ textdescription
+'</body></html>');

which I broke up for readability.

Consider: That is the ENTIRE CONTENTS of the popup window. From the <html> tag to the </html> tag.

So you can dump in there ANYTHING you want.

You could, for example, do:

jkpopwin.document.write('<html><title>'+windowtitle+'</title>'
+ '<head><link href="popupstyle.css" rel="stylesheet" type="text/css" /></head>'
+ '<body '+bodyattribute+'>'
+ '<img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'
+ textdescription
+'</body></html>');

Note this means that you could also get rid of the bogus and old bodyattribute; you'd just put the style for the body into the "popupstyle.css" file. Along with the style for the <img>, come to think of it.

So:

jkpopwin.document.write('<html>'
+ '<head>'
+ '<title>'+windowtitle+'</title>'
+ '<link href="popupstyle.css" rel="stylesheet" type="text/css" />'
+ '</head>'
+ '<body>'
+ '<img src="'+imgpath+'"><br />'
+ textdescription
+'</body></html>');

And now you can get rid of the code that builds the bodyattribute variable, as well.

This is a reasonably old and obsolescent kit you are using, I would assume? Note that it didn't even put the <title> inside of the <head>. I used to do that, too...in maybe 2001 or so.

jkelleway

05-20-2009, 11:08 PM

Thanks so much for your help on this, sorry it has taken me a while to reply but this project got pushed back at work and I only re-visited it this morning.

This is the first time I have ever used javascript so I had no idea that the code was old.

Now you have broken up the jkpopwin.document.write section, it makes a lot more sense and I have not only managed to change the bg color and font color but have also put in a header and footer.

I did try deleting the bodyattribute variable after styling the body with CSS but the pop-up would not work. I'll have another look tomorrow as I'd obviously like to delete any redundant code.

Thanks again for your help.

James