473,242 Members | 1,439 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,242 software developers and data experts.

Popup issue with script?

10
Issue NOT use

This script makes the popup sit behind the main webpage once clicked off it and if another image is chosen to enlarge the image will not be seen as it is still sits behind the main web page.

What I am asking

Is it possible to add some script to this code to make the popup always sit on top when the script is activated?

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function jkpopimage(image) {
  4. function detectexist(obj){
  5. return (typeof obj !="undefined")
  6. }
  7. var i = new Image();
  8. i.src = image;
  9. var x = i.width;
  10. var y = i.height;
  11. // window.status for degugging:
  12. window.status = image + " = " + x + " x " + y + " pixels";
  13. var z = "scrollbars=no,width=" + (x+20) + ",height=" + (y+20);
  14. window.open(image,"image",z);
  15. }
  16. </script>
Excuse me if it sounds like a dull question it's just I am not a developer and would really appreciate any help.

Thank you
Jan 20 '09 #1
17 1900
dijnr
10
This is some code I grabbed which does what I want except it does not have the code that sizes the image to to popup

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. // JK Pop up image viewer script- By JavaScriptKit.com
  4. // Visit JavaScript Kit (http://javascriptkit.com)
  5. // for free JavaScript tutorials and scripts
  6. // This notice must stay intact for use
  7.  
  8. var popbackground="white" //specify backcolor or background image for pop window
  9. var windowtitle="Artist Image"  //pop window title
  10.  
  11.  
  12. function detectexist(obj){
  13. return (typeof obj !="undefined")
  14. }
  15.  
  16. function jkpopimage(imgpath, popwidth, popheight, textdescription){
  17.  
  18. function getpos(){
  19. leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
  20. toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
  21. if (window.opera){
  22. leftpos-=screenLeft
  23. toppos-=screenTop
  24. }
  25. }
  26.  
  27. getpos()
  28. var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
  29. var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
  30. if (typeof jkpopwin=="undefined" || jkpopwin.closed)
  31. jkpopwin=window.open("","",winattributes)
  32. else{
  33. //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
  34. //jkpopwin.moveTo(leftpos, toppos)
  35. jkpopwin.resizeTo(popwidth, popheight+30)
  36. }
  37. jkpopwin.document.open()
  38. jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
  39. jkpopwin.document.close()
  40. jkpopwin.focus()
  41. }
  42.  
  43. </script>
Jan 20 '09 #2
acoder
16,027 Expert Mod 8TB
If you keep a reference to the pop-up window when opening:
Expand|Select|Wrap|Line Numbers
  1. var win = window.open(...);
you can use it to give focus:
Expand|Select|Wrap|Line Numbers
  1. win.focus();
To resize, you can use the resizeTo() method.
Jan 20 '09 #3
dijnr
10
Thanks for the response. I must say that I am not too familiar with hand coding.

If I was to take the following code.
what and where would I place code to make the window automatically resize to the image?]
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. // JK Pop up image viewer script- By JavaScriptKit.com
  4. // Visit JavaScript Kit (JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop)
  5. // for free JavaScript tutorials and scripts
  6. // This notice must stay intact for use
  7.  
  8. var popbackground="white" //specify backcolor or background image for pop window
  9. var windowtitle="Artist Image"  //pop window title
  10.  
  11. function detectexist(obj){
  12. return (typeof obj !="undefined")
  13. }
  14.  
  15. function jkpopimage(imgpath, popwidth, popheight, textdescription){
  16.  
  17. function getpos(){
  18. leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
  19. toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
  20. if (window.opera){
  21. leftpos-=screenLeft
  22. toppos-=screenTop
  23. }
  24. }
  25.  
  26. getpos()
  27. var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
  28. var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
  29. if (typeof jkpopwin=="undefined" || jkpopwin.closed)
  30. jkpopwin=window.open("","",winattributes)
  31. else{
  32. //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
  33. //jkpopwin.moveTo(leftpos, toppos)
  34. jkpopwin.resizeTo(popwidth, popheight+30)
  35. }
  36. jkpopwin.document.open()
  37. jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
  38. jkpopwin.document.close()
  39. jkpopwin.focus()
  40. }
  41.  
  42. </script>
I do hope someone can help?
Jan 22 '09 #4
acoder
16,027 Expert Mod 8TB
Pass the image width and height for the second and third parameters to the function.
Jan 22 '09 #5
dijnr
10
Thanks for your response.

I must admit I am a total newbie.

So how do I do that?

I know it seems like I just want the code but I am willing to learn.

could you please give me an example of what to do?

I do hope I am not asking too much?
Jan 22 '09 #6
acoder
16,027 Expert Mod 8TB
Can you show me where you call jkpopimage()?
Jan 22 '09 #7
dijnr
10
you mean this?

Expand|Select|Wrap|Line Numbers
  1. <a href="#" onClick="jkpopimage('images/artists/AliceRolfe/alice4.jpg', 374, 555, ''); return false">
  2.                       <img src="images/artists/AliceRolfe/alice4a.jpg" alt="Image" width="144" height="181" border="0" />
Jan 22 '09 #8
acoder
16,027 Expert Mod 8TB
Yes, replace 374 and 555 with 144 and 181 (though it'd be better if you did it programmatically, of course).
Jan 22 '09 #9
dijnr
10
Yes it would as otherwise I have over 300 images to resize.

How do I do it programatically?

Excuse me if this sounds wrong but...can I set peramater in the code above to resize to the image size as all the images vary in width and hight?

i have looked at other code and tried cutting and pating bits with no avail.

do i set a var.....(for hight and width)?

the giving it a function...(the size to image perameters)?

If so how do I do that and where in the existing code would it sit?

I hope I am making sence if it is at all possible?

Thank you
Jan 22 '09 #10
acoder
16,027 Expert Mod 8TB
Do you use server-side code to generate the HTML code to display the images?
Jan 22 '09 #11
dijnr
10
I don't think so? If you php or the like then, no.
I designed the site in html using dreamweaver and got the javascript code from a tutorial site and pated it in the html page.

the images are called up by the script I assume.

the images are just saved in their own directory with the use of the script it calls the images into the popup. This is what I imagine the code does. I have a very basic understanding of how the code works but I am not competent enough with the langude yet to edit in the way I would like to. I found two scripts and the one I have used is the later as the popup on the first code have major issues with the popup that would make it none user friendly.

They both seem to work in a similar way they call the .jpg images from the directory.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. // JK Pop up image viewer script- By JavaScriptKit.com
  4. // Visit JavaScript Kit (http://javascriptkit.com)
  5. // for free JavaScript tutorials and scripts
  6. // This notice must stay intact for use
  7.  
  8. var popbackground="white" //specify backcolor or background image for pop window
  9. var windowtitle="Artist Image"  //pop window title
  10.  
  11. function detectexist(obj){
  12. return (typeof obj !="undefined")
  13. }
  14.  
  15. function jkpopimage(imgpath, popwidth, popheight, textdescription){
  16.  
  17. function getpos(){
  18. leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
  19. toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
  20. if (window.opera){
  21. leftpos-=screenLeft
  22. toppos-=screenTop
  23. }
  24. }
  25.  
  26. getpos()
  27. var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
  28. var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
  29. if (typeof jkpopwin=="undefined" || jkpopwin.closed)
  30. jkpopwin=window.open("","",winattributes)
  31. else{
  32. //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
  33. //jkpopwin.moveTo(leftpos, toppos)
  34. jkpopwin.resizeTo(popwidth, popheight+30)
  35. }
  36. jkpopwin.document.open()
  37. jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
  38. jkpopwin.document.close()
  39. jkpopwin.focus()
  40. }
  41.  
  42. </script>
this is the javascript I pasted ino my page:

and as far as I can work out this is where the function 'jkpopimage' is called within the page to bring up the image.

it's just the scripting in the first example looses me in it's technicalities.

if there was some way to modify that code in such a way that it would size the . popwidth, popheight,' to size to the image or the second best option would be to centralise the image in the popup ( 'jkpopimage') and make the popup default to 100% width and hight. I uderstand the principle of what logically it should state I just do not no where to start with developing code to do this. and I imagine it takes many years to get a firm grip on hard code.

hope this answers the question?

Is what I want to do possible? well I imagine it is possible I am just not quiet talented enough yet to make it possible. That is what I am here to get some help form kind people like yourself who are willing to take time in helping a newbie like me.

Thanks
Jan 22 '09 #12
acoder
16,027 Expert Mod 8TB
The reason I asked about server-side code is that it would make this a lot easier because you could use the same values that you use to set the width and height of the image to set the popup width/height. It also makes sense especially if you have 300 or so images.

You can do it in JavaScript, of course and there are a number of ways.

One way is to get a reference to an image either by loading the image (using an Image() object - see your first snippet of code) or by getting an image loaded into the DOM (see example). For the second method, you'll need to set an ID and/or name.
Jan 23 '09 #13
dijnr
10
I tried out the example but it does not quite do what I want?

Firstly it did not open the image in a popup rather just load it into the same page?(I might be doing something wrong?)

Secondly the images are not all the same width and hieght and by looking at the code it makes reference to setting solid paramiters for width and hieght

function changeSize()
{
document.getElementById("compman").height="250"
document.getElementById("compman").width="300"
}
where I would need it to size to the peramiters set by the height and width of the image itself?

this code seems to sujest something to do with what i want?
Expand|Select|Wrap|Line Numbers
  1. # function detectexist(obj){
  2. # return (typeof obj !="undefined")
  3. # }
  4. # var i = new Image();
  5. # i.src = image;
  6. # var x = i.width;
  7. # var y = i.height;
how could I add that to the script I already have?

Like where would I put it in this script?

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. // JK Pop up image viewer script- By JavaScriptKit.com
  4. // Visit JavaScript Kit (http://javascriptkit.com)
  5. // for free JavaScript tutorials and scripts
  6. // This notice must stay intact for use
  7.  
  8. var popbackground="white" //specify backcolor or background image for pop window
  9. var windowtitle="Artist Image"  //pop window title
  10.  
  11. function detectexist(obj){
  12. return (typeof obj !="undefined")
  13. }
  14.  
  15. function jkpopimage(imgpath, popwidth, popheight, textdescription){
  16.  
  17. function getpos(){
  18. leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
  19. toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
  20. if (window.opera){
  21. leftpos-=screenLeft
  22. toppos-=screenTop
  23. }
  24. }
  25.  
  26. getpos()
  27. var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
  28. var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
  29. if (typeof jkpopwin=="undefined" || jkpopwin.closed)
  30. jkpopwin=window.open("","",winattributes)
  31. else{
  32. //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
  33. //jkpopwin.moveTo(leftpos, toppos)
  34. jkpopwin.resizeTo(popwidth, popheight+30)
  35. }
  36. jkpopwin.document.open()
  37. jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
  38. jkpopwin.document.close()
  39. jkpopwin.focus()
  40. }
  41.  
  42. </script>
Jan 23 '09 #14
acoder
16,027 Expert Mod 8TB
The example was just to show how to get the width and height. To actually use it, you need to add replace the popwidth/popheight with these values.

What I suggest you do is load the passed source into an Image object (before line 27):
Expand|Select|Wrap|Line Numbers
  1. var i = new Image();
  2. i.src = imagepath;
  3. i.onload=function() {
  4.  popwidth = i.width;
  5.  popheight = i.height;
  6. }
Jan 23 '09 #15
dijnr
10
You have been a great help and I do not want to be a pain in the ass.

Is there any chance you could show me how the code should look in complete form as I have got a bit confused as I am looking at the original code, the example you gave me and the other code I looked grabbed. my code is not looking pretty to say the least.

If I saw it as it was meant to look I am sure I could make sense (or at least hope) of where I was getting confused.

I know it must seem obvious to you but to me its starting to look like hyragliphics.
Thank you in advance.
Jan 23 '09 #16
dijnr
10
I have done it! thankyou then only to be told about a thing called milkbox

Thanks
Jan 23 '09 #17
acoder
16,027 Expert Mod 8TB
Oh, if you wanted something like that, then there are plenty. The first one (or at least the one that made these *boxes famous) was Lightbox. There are plenty of clones written using libraries and without.

Anyway, glad to see that you got it sorted.
Jan 26 '09 #18

Sign in to post your reply or Sign up for a free account.

Similar topics

38
by: Shaun McKinnon | last post by:
HI...Here's my problem...I have a popup window that loads when i want it to, but it's not sized properly. I've set the size, but it doesn't seem to work. I've been on 8 different websites to find...
12
by: HarveyB | last post by:
I would like to generate non-modal popup windows from ASP.Net code-behind. I have tried using Client Side scripting like "function Test(){ window.open('test.htm',_blank,...
26
by: Raffi | last post by:
Hi, We have a database application that runs in a popup Internet Explorer application window. The reason for this is to isolate the casual user from the address bar and the typical IE navigation...
13
by: ldan | last post by:
Hi everybody, I would not consider myself an expert in javascript - but so far whatever I know, helped me reaching my goals. Recently I started to experience a lot of javascript errors related...
1
by: Earl Teigrob | last post by:
I did a ton of searching to try and find a simple solution to this issue and finally wrote my own, which I am sharing with everyone. In my searching, I did find a very complete and robust solution at...
3
by: clsmith66 | last post by:
I am building an ASP.NET application where I have been required to make all the editing screens popup windows within the application. I didn't have any trouble creating the new windows but only...
11
by: Alex.Svetos | last post by:
Hello, I'm trying to get a popup to keep focus when it is re-clicked. The script below is supposed to produce this exact behaviour, however it doesn't work, at least on firefox 1.0.7 and moz...
5
by: midnight_use_only | last post by:
hi all, quick question, how do you submit a form to a parent window from a child popup window? i have the following and all online documentation *suggests* that it should work but it does NOT: ...
11
by: V S Rawat | last post by:
using Javascript, I am opening a web-based url in a popup window. MyWin1=Window.Open(url, "mywindow") There is a form (form1) in the url in that popup window, I need to submit that form. ...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.