...

View Full Version : javascript dhtml popup



tpeck
11-05-2006, 08:55 AM
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:


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:


<img border="0" src="clickme.gif" width="30" height="20" onclick="startPopUp();">

At present the div below is needed on each page:


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



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

brandonH
11-05-2006, 02:15 PM
<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=

tpeck
11-05-2006, 02:41 PM
OK. Thanks. I've tried:


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

and


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

brandonH
11-05-2006, 04:12 PM
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.

brandonH
11-05-2006, 04:28 PM
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?

tpeck
11-21-2006, 03:04 AM
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

Ancora
11-21-2006, 01:36 PM
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.



<!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:


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

tpeck
11-21-2006, 02:29 PM
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?

Ancora
11-21-2006, 02:50 PM
Get rid of the toggle function, and use these two functions instead, tying them to the onlclick event of the image.



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

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

tpeck
11-22-2006, 01:13 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum