macOS Java Script for the web

[michaelmastro]

Hello

I am not a programer, I am a simple photographer and digital artist. I need Java Script that will cause new web windows to open to a particular size, that is the size of the image contained in the window. Can anyone help out this poor, undereducated artist? Thank you all in advance.

 

[robbieduncan]

What, exactly, are the contents of the window? An HTML document with and IMG tag for the image or just the image file? Do you want the window to open at the correct size (if so you'll need to know the size of the image before the window opens) or once the image is loaded (easier, especially if it's an HTML document).

 

[michaelmastro]

Hi Robbie

Each window that opens will contain a jpeg of a particular size, and I want the window to be that size. I realize that I will probably have to insert these dimensions into the Java Script.

 

[robbieduncan]

If you want to open a window use the javascript window.open function. Something like this should work:

<a href="javascript:window.open('imageurl.jpeg','imageviewer','height=480px,width=640px')">Open</a>

You can put a lot more in the height/width bit to control window features like the menubar etc. Obviously you need to replace imageurl.jpeg with the correct URL and the width and height with the correct ones...

 

[michaelmastro]

Robbie

In a stream of code such as the one below (for several links), where does the "<a href..." go?

<a title="Bishop Allen" href="../../mm_cathedralsite/web-content/5_allen_hero.jpg" target="_blank"><img src="../../mm_cathedralsite/web-content/5_allen_hero_thumb.jpg" alt="" height="90" width="90" border="0" /></a></div>
<div style="position:absolute;top:16px;left:490px;width:90px;height:90px;">
<a title="Bishop-Archbishop Toolen" href="../../mm_cathedralsite/web-content/6_toolen_hero.jpg" target="_blank"><img src="../../mm_cathedralsite/web-content/6_toolen_hero_thumb.jpg" alt="" height="90" width="90" border="0" /></a></div>
<div style="position:absolute;top:16px;left:580px;width:90px;height:90px;">
<a title="Bishop May" href="../../mm_cathedralsite/web-content/7_may_hero.jpg" target="_blank"><img src="../../mm_cathedralsite/web-content/7_may_hero_thumb.jpg" alt="" height="90" width="90" border="0" /></a></div>
<div style="position:absolute;top:16px;left:670px;width:90px;height:90px;">
<a title="Archbishop Lipscomb" href="../../mm_cathedralsite/web-content/8_lipbscomb_hero.jpg" target="_blank"><img src="../../mm_cathedralsite/web-content/8_lipbscomb_hero_thumb.jpg" alt="" height="90" width="90" border="0" /></a></div>
<div style="position:absolute;top:112px;left:40px;width:90px;height:48px;-adbe-c:c">

 

[michaelmastro]

Robbie

Disregard my last post - I figured it out (wonders never cease!).

Now I need to know if it is possible to have the newly opening window, open in the center of the viewer's screen.

 

[plinden]

Robbie

Disregard my last post - I figured it out (wonders never cease!).

Now I need to know if it is possible to have the newly opening window, open in the center of the viewer's screen.

You can set the position of the top left corner by specifying top=X, left=Y in the specs list. See this for more details on Javascript http://www.w3schools.com/js/default.asp. You would be interested in the JS HTML DOM section for window control

To centre, you'll need to know the user's screen resolution, using screen.width and screen.height.

So to determine the top left position, you would use:
top = (screen.height - yourWindowHeight)/2
left = (screen.width - yourWindowWidth)/2

 

[robbieduncan]

Robbie

Disregard my last post - I figured it out (wonders never cease!).

Now I need to know if it is possible to have the newly opening window, open in the center of the viewer's screen.

Sure but it'll take more code. You will need a JS function defined in the header (or a seperate file) and then call that function in the href.

If we start with the call:

<a href="javascriptpenCenteredWindow('imageurl.jpeg','640','480);">Link Text</a>

We then need this function defined somewhere:

function openCenteredWindow(img,width,height)
{
var swidth = screen.availWidth;
var sheight = screen.availHeight;
var sleft = (swidth - width)/2;
var stop = (sheight - height)/2;
window.open(img,img,'width='+width+'px,height='+height+'px,left='+sleft+'px,top='+stop+'px');
}

I think that will work although I have not tested it. Note that the centering will not be perfect as the size of the window is probably a bit more that the height and width used for the calculations....

Edit1: Fix silly typos...

 

[robbieduncan]

You can set the position of the top left corner by specifying top=X, left=Y in the specs list. See this for more details on Javascript http://www.w3schools.com/js/default.asp. You would be interested in the JS HTML DOM section for window control

To centre, you'll need to know the user's screen resolution, using screen.width and screen.height.

So to determine the top left position, you would use:
top = (screen.height - yourWindowHeight)/2
left = (screen.width - yourWindowWidth)/2

I've used availWidth and availHeight as this are supposed to give the width and height allowing for the task bar on Windows (and therefore I suppose the Dock and menubar on OSX).

 

[michaelmastro]

Here's what I have so far. Any suggestions are extremely appreciated...

http://www.michaelmastro.com/cathedral-book/bishops.html

 

[michaelmastro]

Here's what I have so far. Any suggestions are extremely appreciated...

http://www.michaelmastro.com/cathedral-book/bishops.html

 

[michaelmastro]

Here's what I have so far. Any suggestions are extremely appreciated...

http://www.michaelmastro.com/cathedral-book/bishops.html

 

[jeremy.king]

Here's what I have so far. Any suggestions are extremely appreciated...

http://www.michaelmastro.com/cathedral-book/bishops.html

Four things.

1) don't bump your threads
2) doesn't show anything in FireFox on Windows
3) popups are more annoying than useful. I would suggest ditching the idea and use some DHTML to accomplish the same effect. A quick google found this. http://dasme.org/imagegal/
4) Since this seems to have a commercial purpose - consider just hiring it out instead of struggling since you have stated your not a programmer. A few bucks spent will save your hours upon hours of effort.

 

[robbieduncan]

2) doesn't show anything in FireFox on Windows

It does for me (Windows 2000, FireFox 1.5.0.1). What versions are you on? Or do you mean the popups? They don't seem to work for me now either...

 

[jeremy.king]

It does for me (Windows 2000, FireFox 1.5.0.1). What versions are you on? Or do you mean the popups? They don't seem to work for me now either...

The popup loads without an image (Windows 2000 + Firefox 1.5.0.1)

 

[Crikey]

My FireFox (1.5.0.1 under WinXP right now) blocks the pop-ups. If you insist on using pop-ups, you should insert verbiage telling the user that the images are displayed in pop-ups and they need to enable pop-ups in their browser settings. Maybe 40% of your site visitors will know what you're talking about.

I'm with the previous poster who said you could do this better with DHTML.


Crikey

 

[Josh]

DHTML or Flash is a much better option, in my opinion.

Granted, these things need to be learned (or paid for), but it's not very difficult, and the end result is very worth it.

Not cluttering the user with more windows, and allowing them to sit at one page, and view all your photos, is a great experience for them, and lets them focus on the pictures, not their windows.