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
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing font attributes in pop up window

    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:


    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="#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:


    Code:
    <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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    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:
    Code:
    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:
    Code:
    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:
    Code:
    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.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

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