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 10 of 10
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    861
    Thanks
    50
    Thanked 6 Times in 5 Posts

    javascript dhtml popup

    I have this code which popups up a window nicely, but I want the same graphic to popup on over 1000 pages.

    So it would be sensible to try to incorporate the graphic reference within the external js file rather than at present within the page.

    Here is the code:

    Code:
    var popWindowWidth = '600';
    var popWindowHeight = '400';
    var centerPopUpWindow = 'yes';
    var popWindowBackgroundColor = 'FFFFF0';
    var popWindowPadding = '8';
    var popWindowPositionTop = '20';
    var popWindowPositionLeft = '100';
    var popWindowBorderStyle = 'solid';
    var popWindowBorderWidth = '1';
    var popWindowBorderColor = 'black';
    var popWinFontFamily = 'arial,verdana,sans-serif';
    var popWinFontSize = '11px';
    var popWindowDelay = '500';
    var popWindowShadowColor = '#666666';
    
    var ie=document.all
    var ns6=document.getElementById && !document.all
    function showPopUp(){
    document.getElementById('pWinConfg').style.visibility='visible';
    }
    function hidePopUp(){
    document.getElementById('pWinConfg').style.visibility='hidden';
    }   
    function startPopUp(){
    timerID=setTimeout('showPopUp()',popWindowDelay);
    
    var pWinConfg = "<style>.pWinConfg{\n";
    if(popWinFontFamily !== ''){
    pWinConfg += "font-family:"+popWinFontFamily+";\n";
    }
    if(popWinFontSize !== ''){
    pWinConfg += "font-size:"+popWinFontSize+";\n";
    }
    pWinConfg += "position:absolute;\n";
    pWinConfg += "width:"+popWindowWidth+";\n";
    pWinConfg += "height:"+popWindowHeight+";\n";
    pWinConfg += "background-color:"+popWindowBackgroundColor+";\n";
    if(centerPopUpWindow.toLowerCase() == 'yes'){
    var popTop = (screen.height)?(screen.height-popWindowHeight-75)/2:100;
    var popLeft = (screen.width)?(screen.width-popWindowWidth-32)/2:100;
    pWinConfg += "top:"+popTop+";\n";
    pWinConfg += "left:"+popLeft+";\n";
    }
    else{
    pWinConfg += "top:"+popWindowPositionTop+";\n";
    pWinConfg += "left:"+popWindowPositionLeft+";\n";
    }
    pWinConfg += "border-style:"+popWindowBorderStyle+";\n";
    pWinConfg += "border-width:"+popWindowBorderWidth+";\n";
    pWinConfg += "border-color:"+popWindowBorderColor+";\n";
    pWinConfg += "padding:"+popWindowPadding+";\n";
    pWinConfg += "visibility:hidden;\n";
    if(popWindowShadowColor != 'none'){
    pWinConfg += "@filter: progid:DXImageTransform.Microsoft.Shadow(color="+popWindowShadowColor+",direction=135);\n";
    }
    pWinConfg += "}<\/style>\n";
    document.write(pWinConfg);
    The popup is displayed by clicking this image on the page:

    Code:
    <img border="0" src="clickme.gif" width="30" height="20" onclick="startPopUp();">
    At present the div below is needed on each page:

    Code:
    <div align="center" class="pWinConfg" id="pWinConfg">
    <img border="0" src="graphic.gif" width="659" height="410">
    </div>
    What I cannot do is get it off the page and into the external js file.

    I tried doing this:

    Code:
    ...
    pWinConfg += "}<\/style>\n";
    pWinConfg += "<img border=\"0\" src=\"..\/img\/lessonhelp.png\" width=\"659\" height=\"410\">\n";
    document.write(pWinConfg);
    ...but it didn't work.

    I think it should be possible. Any hint would be appreciated.

    Thanks,

    Terry
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    <div align="center" class="pWinConfg" id="pWinConfg">
    <img border="0" src="graphic.gif" width="659" height="410">
    </div>



    IE should recognize the element just by its id name:
    pWinConfg.innerHTML = "<img border='0' src='/img/lessonhelp.png' width='659' height='410'><br>";

    if not use document.getElementById('pwinConfig').innerHTML=
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    861
    Thanks
    50
    Thanked 6 Times in 5 Posts
    OK. Thanks. I've tried:

    Code:
    ...
    pWinConfg += "}<\/style>\n";
    document.getElementById('pwinConfig').innerHTML = "<img border=\'0\' src=\'..\/img\/lessonhelp.png\' width=\'659\' height=\'410\'><br>\n";
    document.write(pWinConfg);
    //-->
    and

    Code:
    ...
    pWinConfg += "}<\/style>\n";
    document.getElementById('pwinConfig').innerHTML = "<img border='0' src='../img/lessonhelp.png' width='659' height='410'><br>";
    document.write(pWinConfg);
    //-->
    and the same combinations with...

    pWinConfg.innerHTML = etc.

    ...but to no avail.

    Obviously, I'm missing something...
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    ok after looking it over again, i must suggest that you not write the style into the html, instead create an external .css file and write the link tag that will point to the css file:
    if using an external js file:
    document.write("<LINK href="locationto/external/cssfile/yourfile.css" rel=StyleSheet>")
    if not using external js file jsut put the <link> tag in the head section of the source code.


    use that instead of the <style></style> tag.
    this will de clutter your script/source code.

    and when you want to insert the image use the innerHTML as said above.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    so what is the point in using the javascript to write the <Style> tag? are you writing it depending on certain conditions or something?

    or are you just wanting the script to write in the same style on every page?
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #6
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    861
    Thanks
    50
    Thanked 6 Times in 5 Posts
    Sorry about the delay in replying to your help.

    Looking at it again, I can see that what I am asking is not feasible. I wrote:

    <So it would be sensible to try to incorporate the graphic reference within the external js file rather than at present within the page.>

    No, it is not sensible - the <div must be on each page.

    Thanks anyway.

    Terry
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #7
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Terry:

    This is how to dynamically create the div, onload, in any document where you need it. Test the following AS IS. You are using very old code. You might consider moving to something current and cross browser.

    Also, I changed the code so that the popup is toggled, open/close, on multiple clicks of the image.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="initPopup.js"></script>
    </head>
    	<body>
    		<img border="0" src="clickme.gif" width="30" height="20" onclick="togglePopUp();">
    		
    	</body>
    </html>
    initPopup.js:
    Code:
    var popWindowWidth = '600';
    var popWindowHeight = '400';
    var centerPopUpWindow = 'yes';
    var popWindowBackgroundColor = 'FFFFF0';
    var popWindowPadding = '8';
    var popWindowPositionTop = '20';
    var popWindowPositionLeft = '100';
    var popWindowBorderStyle = 'solid';
    var popWindowBorderWidth = '1';
    var popWindowBorderColor = 'black';
    var popWinFontFamily = 'arial,verdana,sans-serif';
    var popWinFontSize = '11px';
    var popWindowDelay = '0';
    var popWindowShadowColor = '#666666';
    
    var ie=document.all
    var ns6=document.getElementById && !document.all
    
    function init(){
    
    		var nBody = document.getElementsByTagName('body')[0];
    		var nDiv = document.createElement('div');
    		nDiv.className = "pWinConfg";
    		nDiv.id = "pWinConfg";
    		nImg = document.createElement('img');
    		nImg.src = "graphic.gif";
    		nImg.width = "659";
    		nImg.height = "410";
    		nDiv.appendChild(nImg);
    		nBody.appendChild(nDiv);
    	}
    
    function togglePopUp(){
    
    	document.getElementById('pWinConfg').style.visibility == 'visible' ? document.getElementById('pWinConfg').style.visibility = 'hidden' : document.getElementById('pWinConfg').style.visibility = 'visible';
    }
    
    onload=init;	
    
    
    var pWinConfg = "<style>.pWinConfg{\n";
    if(popWinFontFamily !== ''){
    pWinConfg += "font-family:"+popWinFontFamily+";\n";
    }
    if(popWinFontSize !== ''){
    pWinConfg += "font-size:"+popWinFontSize+";\n";
    }
    pWinConfg += "position:absolute;\n";
    pWinConfg += "width:"+popWindowWidth+";\n";
    pWinConfg += "height:"+popWindowHeight+";\n";
    pWinConfg += "background-color:"+popWindowBackgroundColor+";\n";
    if(centerPopUpWindow.toLowerCase() == 'yes'){
    var popTop = (screen.height)?(screen.height-popWindowHeight-75)/2:100;
    var popLeft = (screen.width)?(screen.width-popWindowWidth-32)/2:100;
    pWinConfg += "top:"+popTop+";\n";
    pWinConfg += "left:"+popLeft+";\n";
    }
    else{
    pWinConfg += "top:"+popWindowPositionTop+";\n";
    pWinConfg += "left:"+popWindowPositionLeft+";\n";
    }
    pWinConfg += "border-style:"+popWindowBorderStyle+";\n";
    pWinConfg += "border-width:"+popWindowBorderWidth+";\n";
    pWinConfg += "border-color:"+popWindowBorderColor+";\n";
    pWinConfg += "padding:"+popWindowPadding+";\n";
    pWinConfg += "visibility:hidden;\n";
    if(popWindowShadowColor != 'none'){
    pWinConfg += "@filter: progid:DXImageTransform.Microsoft.Shadow(color="+popWindowShadowColor+",direction=135);\n";
    }
    pWinConfg += "}<\/style>\n";
    document.write(pWinConfg);

  • #8
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    861
    Thanks
    50
    Thanked 6 Times in 5 Posts
    It's pretty good - thanks. I will update my old code on all pages.

    The only trouble is, in my actual situation, the popup takes up most of the screen (by design) and the graphic that is the toggle is hidden behind the popup and therefore it can't be toggled off.

    This was not an issue with the old way of doing things because I had this on each page:

    <body>
    <div class="pWinConfg" id="pWinConfg" style="visibility: hidden;" onclick="hidePopUp();">
    <img border="0" src="img/mygraphic.gif" width="659" height="410">
    </div>

    ... and that onclick did the job.

    Is there a method to adapt in your new code which will accomplish the same thing and not be reliant on the (hidden) toggle graphic?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #9
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Get rid of the toggle function, and use these two functions instead, tying them to the onlclick event of the image.

    Code:
    function hidePopUp(){
    document.getElementById('pWinConfg').style.visibility='hidden';
    } 
    
    function showPopUp(){
    document.getElementById('pWinConfg').style.visibility='visible';
    }

  • #10
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    861
    Thanks
    50
    Thanked 6 Times in 5 Posts
    In that case the image reference does have to be on every page, doesn't it? ...which kind of negates the original idea. Of course, the code is a lot more robust, and that is good.

    My demo is: http://aapress.com.au/demo/popup/popup.html

    Is there a way to do the close from within the popup, but coded inside the external js file?

    Or have I misunderstood something?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

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