|
| 1 - 10 of 10 [Total 1 Pages] |
|
 |
Popup Window Function Jul 27, 2002, 14:42 |
1 |
|
Hi all,
I'm creating a website for a client, and he has several books, and, on each book page, he wants to have a small picture of his book, and then have a visitor click it and have a window open with a larger (more clear) image of his book. How can I create a function in JavaScript that I can place in a .js file and have it so that I can change the height, width, and URL of each popup window, using only this one function?
I have some prior experience with JavaScript, but not much, so if you could provide code and explanation, that would be very helpful.
Thanks,
-Corbb
|
|
|
|
Jul 28, 2002, 11:37 |
2 |
|
Matt,
I thought about that.
But the client doesn't want any white space around the covers! Your first one will work just fine.
Thanks!
-Corbb
|
|
|
|
Jul 27, 2002, 15:05 |
3 |
|
JavaScript comes with a built in function to do this, and it's called Window.open(). Usage is like this: window.open(url, name, features, replace). Here's a code sample for you to look at: Code: <a href="http://www.some-url-of-yours.com/your_file.jpg" >>onclick="window.open(this.href,'book_lg_view','width=300,height=400'); >>return false;">larger view</a> code contains an intentional hard line break to preserve page formatting wherever you see a >>. Remove these and place code on a single line to use.
|
|
|
|
Jul 27, 2002, 16:10 |
4 |
|
Hi mattjacob,
Thank you so much!
Just one question: you said that part of the function could hold features. What kind of features? Like scrollbars? How do I add these in?
Thanks,
-Corbb
|
|
|
|
Jul 27, 2002, 16:24 |
5 |
|
If you'll notice in the code sample I provided, I included 'width=300,height=400' as the only features to be present. The list of possible features to include in the argument is pretty long, so I'll just provide some of the more commonly used features here.
The features argument is a comma-separated list of features to appear in the window. If this optional argument is empty or not specified, all features are present in the window. On the other hand, if features specifies any one feature, any features that do not appear in the list do not appear in the window. The string should not contain any spaces or other whitespace. Each element in the list has the format: feature[=value].
For most features, the value is yes or no. For these features, the equals sign and the value may be omitted--if the feature appears, yes is assumed, and if it doesn't, no is assumed. For the width and height features, the value is required and must specify a size in pixels.
height Specifies the height, in pixels, of the window's document display area.
location The input field for entering URLs directly into the browser; yes or no value.
menubar The menubar; yes or no value.
resizable If this feature is not present or is set to no, the window does not have resize handles around its border; yes or no value.
scrollbars This feature enables horizontal and vertical scrollbars when they are necessary; yes or no value.
status The status line; yes or no value.
toolbar The browser toolbar, with Back and Forward buttons, etc.; yes or no value.
width Specifies the width, in pixels, of the window's document display area.
|
|
|
|
Jul 27, 2002, 17:47 |
7 |
|
You wanted to control all this from an external file right? Just make a file named 'funcs.js' or something like that, and in it put all your functions that are common among all pages. Code: function popWin1() { window.open('file.htm','name','width=300, height=300, scrollbars); }This will open 'file.htm' into a 300x300 window named 'name' with scrollbars. Then link funcs.js to all the pages that will use the popWin1() function with this code inserted into the <HEAD> Code: <script language="javascript" src="js/funcs.js"></script> This assumes that you have placed 'funcs.js' file into the subfolder 'js'. Then, just call the popWin1() function from whatever event you'd like, or place it in a link, like this: Code: <a href="javascript:popWin1()">Popup Window 1</a> Alternatively you could pass the URL as a parameter or something like that.
|
|
|
|
Jul 28, 2002, 00:44 |
9 |
|
Quote:
Alternatively you could pass the URL as a parameter or something like that. |
Do you understand how to accomplish this? Do you want different sizes for each popup window? Or just a different URL?
|
|
|
|
Jul 28, 2002, 01:24 |
10 |
|
JustForWebmasters, make all the large book images the same size, so that you won't have to change the window size on each link. Then, just do this: Put this code into your external scripts file: Code: function open_new_win(url) { window.open(url,'book_lg_view','width=400,height=400'); }Link your external scripts file into the page like beetle said, using: Code: <script type="text/javascript" src="whatever.js"></script> Call the function via a link like this: Code: <a href="http://www.google.com" onclick="open_new_win('http://www.google.com'); return false;">Google!</a>
|
|
| 1 - 10 of 10 [Total 1 Pages] |
|
|
|
