Your name or email adress:
Do you already have an account?
Forgot your password?
  • Log in or Sign up



    Advertise here
    Results 1 to 11 of 11
    1. #1
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Javascript Tutorial Part 4 - Browser Windows

      Introduction

      In the last part I showed you how you can use JavaScript to prompt the user for information and how you can display HTML via JavaScript. In this part I will show you how you can create and manipulate browser windows using JavaScript.

    2. # ADS
      Advertise here Circuit advertisement
      Join Date
      My Birthday
      Posts
      Million and counting


       
    3. #2
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      Windows and HTML

      Before learning how to create and manipulate windows in JavaScript, it is important to know how to create and manipulate them in HTML. The HTML manipulation is very basic but will also help you to understand how windows work in web browsers.

      Firstly you must know the two ways of creating a link which opens in a separate window. The most common use is to have:

      <a href="link.html" target="_blank">Click Here</a>

      This is the standard HTML code for opening a new window with the page in it.

      A less common way of opening a new window is to use:

      <a href="link.html" target="mywindow">Click Here</a>

      This will create a new window, just like the first set of code, but it will also name the window 'mywindow'. This means that you can then have:

      <a href="page2.html" target="mywindow">Change the page</a>

      which, when clicked, will change the page which appears in the window you opened.

      Knowing about how a window name works is very important as you must understand it to use JavaScript windows effectively.

      ahmadatta2009 - ahmad paolo

    4. #3
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      Opening A Window With JavaScript

      The first thing you should learn to do with JavaScript is to do exactly the same thing with JavaScript as you could do with HTML. The JavaScript command used to open a window is:

      window.open

      For this to work, though, it requires two extra things. Firstly you will need to have some extra information so that the JavaScript knows how to open the window:

      window.open('link.html','mywindow');

      This means that a window called 'mywindow' will open with the page link.html in it, exactly like with the HTML code above.

      This code can either used as part of your JavaScript code (for example if you included it in the JavaScript code in the <head> section of your page it would open when the page loaded) or can be used when a link is clicked. To do this you must use another JavaScript command called onclick.

      I will give you more information about how this command works in a later part but for now all you really need to know is the following: In your standard HTML code include a link as follows:

      <a href="#" onClick="window.open('link.html','mywindow');">Cli ck Here</a>

      As you can see this is just the same window.open command inside an HTML tag.


      ahmadatta2009 - ahmad paolo

    5. #4
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      Manipulating The Window

      The main reason of using JavaScript to manipulate windows, though, is because you can set many things on the window which you could never do with HTML. JavaScript allows you to use commands to decide which parts of the browser window appear. This is done using a third part of the window.open command. This is where you decide the window features:

      window.open('link.html','mywindow','window features');

      There are many things you can include here. For example if you wanted a window that only has a location bar and a status bar (the part at the bottom of the browser) then you would use the following code:

      window.open('link.html','mywindow','location, status');

      There are many different things you can include in your new window:
      Feature Function
      menubar The File, Edit etc. menus at the top of the browser will be shown
      scrollbar This will show scrollbars at the side of the window if they are needed
      width You can set the width of the window in pixels (see the next section)
      height You can set the height of the window in pixels (see the next section)
      toolbar This will display the browser toolbar with the Back, Stop, Refresh buttons etc.
      location The location bar (where you type in URLs) will be displayed in the browser
      resizable This will allow the window to be resized by the user
      directories This will show the directories in Netscape browsers like 'Whats new' and 'Whats cool'


      ahmadatta2009 - ahmad paolo

    6. #5
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      Examples Of Manipulating Windows

      You may be a little confused by all these options so I will show you a few examples of opening a window in JavaScript:

      This window will open with a location bar, toolbar and will be resizable:

      window.open('window1.htm','the_first_window','loca tion, toolbar, resizable');


      This will open another page in this window:

      window.open('window2.htm','thefirstwindow');


      This will open a window 200 pixels wide and 300 pixels high. It is not resizable and has a status bar and will scroll if necessary. This is a very commonly used combination:

      window.open('window1.htm','thesecondwindow','heigh t=300,width=200,status,scrollbars');

    7. #6
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      I hope that everyone is

      Has benefited from the my lesson

      Greetings: ...

      ahmadatta2009 - ahmad polo

    8. #7
      Join Date
      Sep 2012
      Posts
      1,698
      MTV$
      5,031
      Thanks
      2
      Thanked 9 Times in 9 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      Firstly you must know the two ways of creating a link which opens in a separate window. The most common use is to have:

      <a href="link.html" target="_blank">Click Here</a>

      This is the standard HTML code for opening a new window with the page in it.

      A less common way of opening a new window is to use:

      <a href="link.html" target="mywindow">Click Here</a>

      This will create a new window, just like the first set of code, but it will also name the window 'mywindow'. This means that you can then have:

      <a href="page2.html" target="mywindow">Change the page</a>

      which, when clicked, will change the page which appears in the window you opened.

      Knowing about how a window name works is very important as you must understand it to use JavaScript windows effectively.
      I hope that everyone is

      Has benefited from the my lesson

      Greetings: ...

    9. #8
      Join Date
      Sep 2012
      Posts
      1,124
      MTV$
      3,336
      Thanks
      1
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      Before learning how to create and manipulate windows in JavaScript, it is important to know how to create and manipulate them in HTML. The HTML manipulation is very basic but will also help you to understand how windows work in web browsers.

      Firstly you must know the two ways of creating a link which opens in a separate window. The most common use is to have:

      <a href="link.html" target="_blank">Click Here</a>

      This is the standard HTML code for opening a new window with the page in it.

      A less common way of opening a new window is to use:

      <a href="link.html" target="mywindow">Click Here</a>

      This will create a new window, just like the first set of code, but it will also name the window 'mywindow'. This means that you can then have:

      <a href="page2.html" target="mywindow">Change the page</a>

      which, when clicked, will change the page which appears in the window you opened.

    10. #9
      Join Date
      Sep 2012
      Posts
      1,037
      MTV$
      1,042
      Thanks
      2
      Thanked 2 Times in 2 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      Firstly you must know the two ways of creating a link which opens in a separate window. The most common use is to have:

      <a href="link.html" target="_blank">Click Here</a>

      This is the standard HTML code for opening a new window with the page in it.

      A less common way of opening a new window is to use:

      <a href="link.html" target="mywindow">Click Here</a>

      This will create a new window, just like the first set of code, but it will also name the window 'mywindow'. This means that you can then have:

      <a href="page2.html" target="mywindow">Change the page</a>

      which, when clicked, will change the page which appears in the window you opened.

      Knowing about how a window name works is very important as you must understand it to use JavaScript windows effectively.

    11. #10
      Join Date
      Jun 2013
      Posts
      769
      MTV$
      1,993
      Thanks
      0
      Thanked 1 Time in 1 Post

      Re: Javascript Tutorial Part 4 - Browser Windows

      browser window is one of the part of the JavaScript is used to allow one of the contexts than a Web browser and so many other window things. they are used to allow one of the large part of site is used to devote to exploring, explaining browser and so many other browser window things.

    12. #11
      Join Date
      Mar 2014
      Posts
      752
      MTV$
      1,987
      Thanks
      0
      Thanked 7 Times in 4 Posts

      Re: Javascript Tutorial Part 4 - Browser Windows

      Opening A Window With JavaScript

      The first thing you should learn to do with JavaScript is to do exactly the same thing with JavaScript as you could do with HTML. The JavaScript command used to open a window is:

      window.open

      For this to work, though, it requires two extra things. Firstly you will need to have some extra information so that the JavaScript knows how to open the window:

      window.open('link.html','mywindow');

      This means that a window called 'mywindow' will open with the page link.html in it, exactly like with the HTML code above.

      This code can either used as part of your JavaScript code (for example if you included it in the JavaScript code in the <head> section of your page it would open when the page loaded) or can be used when a link is clicked. To do this you must use another JavaScript command called onclick.

      I will give you more information about how this command works in a later part but for now all you really need to know is the following: In your standard HTML code include a link as follows:

      <a href="#" onClick="window.open('link.html','mywindow');">Cli ck Here</a>

      As you can see this is just the same window.open command inside an HTML tag.


      ahmadatta2009 - ahmad paolo

    Thread Information

    Users Browsing this Thread

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

    Tags for this Thread

    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
    •