...

View Full Version : 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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum