dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: new Window

  1. #1
    Join Date
    Feb 2006
    Location
    Buckingham, UK. (the Town, not the Palace)
    Posts
    148

    new Window

    I'm trying to open a new Window, not a new tab.
    I see the Thread back in 2012. That suggested the new window name must be blank.
    No good to me. I want to open a 'help' window giving information.
    This code, both the link and the button, works in Safari, but not in FF, IE, Opera or Chrome.

    Can you advise me what I'm doing wrong.
    JJ

    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml' lang='en-US'>
    <head>
    <title>HtmlJS</title>
    <script language='javascript' type='text/javascript'>
    var props = "top=100, left=100, width=200, height=200";
    var newWndo = window.open ( "", "info", props );
    function openWndo () { newWndo; }
    </script>
    </head>
    <body>
    window.open ( "", "info", "top=100, left=100,
    width=200, height=200, location=yes, status=yes" );>
    <p>
    <a href="info.html" target="infoWndo">info.html</a>
    </p>
    <p>
    <button type="button" name="infoButn"
    onclick="JavaScript: window.open ( );" >HELP</button>
    </p>
    </body>

    </html>

  2. #2
    Join Date
    Oct 2013
    Posts
    602
    One way to do it:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Open a window</title>
    <script>
    function open_window(url){
        mywin = window.open(url,'wins','width=475,height=350,scrollbars');
    }
    </script>
    </head>
    <body>
    <a href="javascript:open_window('info.html')">HELP</a><br>
    <button onclick="open_window('info.html')">HELP</button>
    </body>
    </html>

  3. #3
    Join Date
    Oct 2013
    Posts
    602
    A more elegant solution:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Open a window</title>
    <style>
    #floating_box {
     position:fixed;
     top:10%;
     left:20%;
     width:455px;
     background-color:white;
     border:solid 1px #f0e68c;
     padding:5px;
     text-align:center;
     border-radius:10px;
     -moz-box-shadow: 10px 10px 5px #888;
     -webkit-box-shadow: 10px 10px 5px #888;
     box-shadow: 10px 10px 5px #888;
     display:none;
    }
    </style>
    </head>
    <body>
    <div id="floating_box">
       <iframe id="display" name="display" width="450" height="450" seamless frameborder="0"></iframe>
       <button style="cursor:pointer;" onmouseup="document.getElementById('floating_box').style.display='none'">Close</button>
    </div>
    <a onclick="document.getElementById('floating_box').style.display='block'" href="info.html" target="display">HELP</a>
    </body>
    </html>

  4. #4
    Join Date
    Feb 2006
    Location
    Buckingham, UK. (the Town, not the Palace)
    Posts
    148
    Hi, Kevin2,
    I saw your detailed reply, and then that someone had posted 'a more elegant solution'.
    I thought 'that's rather rude'. Then saw It was 'Kevin2' again !!
    Thank you. I think both solutions are quite elegant, but admit your second contribution is really great.
    I notice you had over 150 views. I'm sure many of those are also thanking you.
    Thanks, again.
    JJ

  5. #5
    Join Date
    Oct 2013
    Posts
    602
    Ha! There's an interesting concept: Being rude to yourself!

    Glad to help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles