SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Popup Window Function

    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
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Note: 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.

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    mattjacob,

    Thank you so very much

    -Corbb
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beetle,

    But I don't want separate function for every popup window.

    Thanks,
    Corbb
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    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?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  10. #10
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •