SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: Window control

  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Window control

    I'm developing a site where you can click on a thumbnail of a company logo, which pops up a window containing some additional information about that company. This popup window is devoid of features - no scrolling, resizing, buttons, etc. Trying to keep it small.

    Within this popup window is a link to the company's website. When clicked, I'd like to have one of two things happen. Either would do.

    Either that popup window magically changes to a normal browser window - larger, scrollable, resizable, buttons, etc.

    or...

    When the link is clicked, that window closes and the company's website is opened in a newly created fully-functioning browser window, so that the original web page stays available.

    Is this possible?

    Thanks in advance for any help. And fwiw... my javascript skills are rudimentary.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You can have the popup window tell the original web page to navigate somewhere else with:

    Code javascript:
    window.opener.location = '...';

    After which you can close the popup window:

    Code javascript:
    window.close();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I don't want that original window to go elsewhere. I want the new customer's page to open in a new window (or tab).

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by enchant1 View Post
    But I don't want that original window to go elsewhere. I want the new customer's page to open in a new window (or tab).
    In that case, after your popup tells the parent to navigate wher you need to go, close the popup with:

    Code javascript:
    self.close();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    In that case, after your popup tells the parent to navigate wher you need to go
    I'm sorry if I'm misunderstanding you, but the critical part to all of this is that the parent MUST NOT navigate anywhere else. That page MUST remain. I need a new browser window to open. NOT the parent.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by enchant1 View Post
    I'm sorry if I'm misunderstanding you, but the critical part to all of this is that the parent MUST NOT navigate anywhere else. That page MUST remain. I need a new browser window to open. NOT the parent.
    Then just open a new window to where you need it to go.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Then just open a new window to where you need it to go.
    That's what I'm unable to do. I can open a new window leaving the small popup window open, but I don't want that. I want the popup window to close.

    I've tried this code in the popup window:

    Code:
    <a href="newpage.html" target="blank" onClick="javascript:self.close();"><img src="popupwindowimage.jpg"></a>
    ...but this simply closes the popup window and doesn't open a new window with newpage.html.

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if I understand correctly, this is the scenario

    window A

    contains logo thumbnails that are links to more info for that company.

    when a thumbnail is clicked a new window (window B) opens with more info for that company

    window B

    is fixed-size, non scrollable etc and contains a link to the conpany's actual website.

    when the link in window B is clicked, a 3rd fully featured window opens displaying the company's website and window B closes

    if the above is correct then in window B

    1) use window.open() to first open the 3rd window displaying the company's website

    2) then immediately run self.close() to close window B

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Ahh, I see the problem, you're using inline scripting events which dramatically limit what you can do.

    Instead, use traditional scripting events so that you can much more easily run some scripting.

    Give the link a unique identifier:

    Code html4strict:
    <a id="newpage" href="newpage.html"><img src="popupwindowimage.jpg"></a>

    Then place this script at the end of the body, just before the </body> tag.

    Code javascript:
    var link = document.getElementById('newpage');
    link.onclick = function () {
        window.open(this.href);
        self.close();
        return false;
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    if I understand correctly
    Yes, you described it perfectly.

    Quote Originally Posted by pmw57 View Post
    Ahh, I see the problem, you're using inline scripting events which dramatically limit what you can do.
    Yeah, I generally copy/paste any javascripting I need. I fall way short if I have to come up with something on my own. So I depend on the kindness of strangers.

    Instead, use traditional scripting events so that you can much more easily run some scripting.

    Give the link a unique identifier:

    Code html4strict:
    <a id="newpage" href="newpage.html"><img src="popupwindowimage.jpg"></a>

    Then place this script at the end of the body, just before the </body> tag.

    Code javascript:
    var link = document.getElementById('newpage');
    link.onclick = function () {
        window.open(this.href);
        self.close();
        return false;
    };
    Ok, I did that, and it does open a new browser window in a new page, but the popup window stays open.

    Does this website allow you to post test urls?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by enchant1 View Post
    Does this website allow you to post test urls?
    It should do.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://test3.ssih.com/cgi-bin/yp.pl?letter=B

    Under a couple of the listings on the left are "Please see our ad" links that will generate a popup ad. I removed the resize restriction so that you can see what happens and view the code.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The problem is that you don't actually have it on the popup page as script code.

    That script that's just below the <body> tag, move it to the end of the body, just before the </body> tag and put the rest of the script code in there as well.

    Ultimately, you could move the script code out to a separate file and use the src attribute to load the script from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it!

    Thanks so much. I figured I needed some sort of wrapper around that code. I should have just kept trying.


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
  •