ldfedje
12-20-2005, 06:14 PM
Hi
I am new to this forum, so bear with me while I learn your protocol. I am also fairly new to web design and very new to javascript. Just to give you a little background, I have designed a couple of sites using Web Studio which is a WYSIWYG type design program with capbility of alowing the user to go as far as he/she wishes. Adding CSS, Javascript, Tables and much more can be achieved with this tool.
One of the functions I have been working on is the development of a Pop-Up that is controlled from the body by passing variables to a javascript function, but I am not quite sure how to get there.
Here is the code I have been working with. This code was found on this site at http://www.webdeveloper.com/forum/showthread.php?t=88984 , modified a bit:
<head>
<title></title>
<script language="JavaScript">
var aWindow;
function CkImg(img){
var Img=new Image();
Img.onload=function(){ openWin(this); }
Img.src=img;
}
function openWin(URL)
{
CloseWin();
aWindow=window.open (URL.src, "aWindow", "toolbar=no, width="+(URL.width+20)+", height="+(URL.height+20)+", status=no, scrollbars=no, resize=no, menubar=no, left="+(((screen.width-URL.width)/2)-20)+", top="+(((screen.height-URL.height)/2)-20)+"" ) ;
//aWindow.sizeToContent()
}
function CloseWin(){
// Include CloseWin() in body tag to ensure that the pop-up closes when the main window looses focus.
if (aWindow&&!aWindow.closed){ aWindow.close(); }
}
</script>
</head>
<body onunload="CloseWin();" >
<input type="button" name="" value="Img 1" onclick="CkImg('http://www.lumierestandardpoodles.com/LargePhotos/2004-3-L.jpg');">
<input type="button" name="" value="Img 3" onclick="CkImg('http://www.lumierestandardpoodles.com/LargePhotos/2004-5-L.jpg'); ">
</body>
</html>
What I would like to do is pass variables from the body to the script. These variables would be:
URL (which is already there)
Center - true/false
Left Offset from Center (a negative or positive number)
Right Offset from Center (a negative or positive number)
positionLeftX - If not centered X px from left
positionTopY - If not centered Y px from top
bordercolor - self explanitory
borderWidth - a positive number
With this information, I would then like to create the pop-up based on the information provided by the variables.
-If Center (true) and no offset (0), the code would be similar to the quoted code.
-If Center (true) and Offset values either with a negative number or positive number the above code would include the offset values.
-If not center (false), the x and y co-ordinates would be used.
-The way the code stands right now the border around the image is white, however, I would like that to be variable based on the information passed.
-The way the code is structured above, there is a 20 px border around the images. I would like the user to be able to increase that, or if there is a way, reduce it so that there is no border.
The only rule that would have to apply to this structure is that the maximum image height would be 500 px and the maximum width would be 700 px. This would be to allow for viewing at a 800 x 600 resolution. If the user put in a +50 px border and the screen height is 600 px he would have an image overrun on the page, so I guess that would also have to come into the calculations.
The optimal javascript function would be to put it in a .js file at the root, called from a snippit in the head which would of course be called from the body. The reason for this is that the user would only have to install one .js file and the rest would be passed from the page.
I tried another script that I use on these 2 pages, but they don't work as well as the above script.
http://www.lumierestandardpoodles.com/2004.html and http://www.lumierestandardpoodles.com/2005.html
You can view the page source for the code that I used there if you feel it necessary.
Is this overboard for a Pop-up script? :confused:
Any comments, assistance that you might have would be greatly appreciated. If I am going overboard, let me know that as well.
Regards: Loren
I am new to this forum, so bear with me while I learn your protocol. I am also fairly new to web design and very new to javascript. Just to give you a little background, I have designed a couple of sites using Web Studio which is a WYSIWYG type design program with capbility of alowing the user to go as far as he/she wishes. Adding CSS, Javascript, Tables and much more can be achieved with this tool.
One of the functions I have been working on is the development of a Pop-Up that is controlled from the body by passing variables to a javascript function, but I am not quite sure how to get there.
Here is the code I have been working with. This code was found on this site at http://www.webdeveloper.com/forum/showthread.php?t=88984 , modified a bit:
<head>
<title></title>
<script language="JavaScript">
var aWindow;
function CkImg(img){
var Img=new Image();
Img.onload=function(){ openWin(this); }
Img.src=img;
}
function openWin(URL)
{
CloseWin();
aWindow=window.open (URL.src, "aWindow", "toolbar=no, width="+(URL.width+20)+", height="+(URL.height+20)+", status=no, scrollbars=no, resize=no, menubar=no, left="+(((screen.width-URL.width)/2)-20)+", top="+(((screen.height-URL.height)/2)-20)+"" ) ;
//aWindow.sizeToContent()
}
function CloseWin(){
// Include CloseWin() in body tag to ensure that the pop-up closes when the main window looses focus.
if (aWindow&&!aWindow.closed){ aWindow.close(); }
}
</script>
</head>
<body onunload="CloseWin();" >
<input type="button" name="" value="Img 1" onclick="CkImg('http://www.lumierestandardpoodles.com/LargePhotos/2004-3-L.jpg');">
<input type="button" name="" value="Img 3" onclick="CkImg('http://www.lumierestandardpoodles.com/LargePhotos/2004-5-L.jpg'); ">
</body>
</html>
What I would like to do is pass variables from the body to the script. These variables would be:
URL (which is already there)
Center - true/false
Left Offset from Center (a negative or positive number)
Right Offset from Center (a negative or positive number)
positionLeftX - If not centered X px from left
positionTopY - If not centered Y px from top
bordercolor - self explanitory
borderWidth - a positive number
With this information, I would then like to create the pop-up based on the information provided by the variables.
-If Center (true) and no offset (0), the code would be similar to the quoted code.
-If Center (true) and Offset values either with a negative number or positive number the above code would include the offset values.
-If not center (false), the x and y co-ordinates would be used.
-The way the code stands right now the border around the image is white, however, I would like that to be variable based on the information passed.
-The way the code is structured above, there is a 20 px border around the images. I would like the user to be able to increase that, or if there is a way, reduce it so that there is no border.
The only rule that would have to apply to this structure is that the maximum image height would be 500 px and the maximum width would be 700 px. This would be to allow for viewing at a 800 x 600 resolution. If the user put in a +50 px border and the screen height is 600 px he would have an image overrun on the page, so I guess that would also have to come into the calculations.
The optimal javascript function would be to put it in a .js file at the root, called from a snippit in the head which would of course be called from the body. The reason for this is that the user would only have to install one .js file and the rest would be passed from the page.
I tried another script that I use on these 2 pages, but they don't work as well as the above script.
http://www.lumierestandardpoodles.com/2004.html and http://www.lumierestandardpoodles.com/2005.html
You can view the page source for the code that I used there if you feel it necessary.
Is this overboard for a Pop-up script? :confused:
Any comments, assistance that you might have would be greatly appreciated. If I am going overboard, let me know that as well.
Regards: Loren