SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Popups in a page

    I have a products page, where there are thumbnails of each product. On clicking these I want there to be a seperate popup window containing details of the product.
    I am fairly new to javascript and I know there would be a simple way of doing this.
    But the way Ive done it is put a function in the head and calling that function when the thumbnail is clicked.
    eg:
    Code:
    function newWindow() {
    		popUp = window.open("products/storage1.html", "storage1", "width=350,height:=210")
    		}
    calling the function in the link:
    Code:
     <a href="javascript:newWindow()">
    Now, this works fine for one link/pop up window. But I need 10 different pages(popups)
    This function specifies the exact html file so obviously I cant call this function on every link.
    Do I have to write 10 functions, 1 for each page?
    Or can it be done without any functions, just inline with the link?
    Or should this be done with an array? If so, I need some help getting that together...

    Hopefully Ive explained this in an understandable manner.

    Any help very much appreciated!

  2. #2
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Dunedin
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not change your function to take the url and description as input parameters?
    sth like this

    function newWindow(url, desc)
    {
    popUp = window.open(url, desc, "width=350,height:=210")
    }

    and <a href="java_script_:newWindow("products/storage1.html", "storage1") >

  3. #3
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but how would that allow me to cater that function for 10 different popup windows?
    If I put a specific URL in its only going to be for one page. do I have to write this function 10 times?

  4. #4
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, the function will take any URL. So, you have that one function, and for each link, you just change the parameters - it will still use that one function, but because of the parameters it will open different windows.

    Code:
    function newWindow(url, desc)
    {
    popUp = window.open(url, desc, "width=350,height:=210")
    }
    Code:
    <a href="java_script_:newWindow("products/storage1.html", "storage1") >
    <a href="java_script_:newWindow("products/storage2.html", "storage2") >
    <a href="java_script_:newWindow("products/storage3.html", "storage3") >
    etc...
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  5. #5
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, so the (url, desc) in the function stays as just that. I was thinking it was to be replaced by the actual url.

    Thank you so much, Im going to try this now.

  6. #6
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, Ive done this but Im getting an error in all browsers. Mozilla tells me its in line 1 and lists
    newWindow(
    as the syntax error

    this is my link code:
    Code:
    <a href="javascript:newWindow("products/storage1.html", "storage1") >
    this is my function:
    Code:
    	function newWindow(url, desc)
    {
    popUp = window.open(url, desc, "width=350,height=210")
    }
    can you see where Ive gone wrong?

  7. #7
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Dunedin
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this:

    <a href="javascript:newWindow('products/storage1.html', 'storage1');">

    use single quote inside......

  8. #8
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that did the trick, thank you!
    I also left out the semi colon which would have caused the problem

  9. #9
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually have another question now...
    Is there a way to not specify the window size in the function, but rather have it specified in each link so I can suit the window size to the content?

  10. #10
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Dunedin
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can pass the width and height to the newWindow function too:

    function newWindow(url, desc, newWidth, newHeight)
    {
    var option = "width="+ newWidth+ ",height=" + newHeight;
    popUp = window.open(url, desc, option)
    }

    <a href="javascript:newWindow(blabla.html', 'storage1', 200, 500);">


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
  •