SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you specify new window width and height?

    Hi,

    I'm creating a link to my javascript calculator. I want the link to load the calculator on a new page of course, but the window should just fit the width and height of the calculator, so the person can still do calculations and still be able to see the page underneath. How do you do that? Like specify the new window's height and width?

    This is a bit like those annoying popup advertisements which have no title bar or close button, just an image faking a close button and some text. I hope you know what i mean. I want a small window to pop up so ppl can use it, not another big browser window.

    THanks
    Last edited by nutshell; Jul 7, 2002 at 01:08.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't be simpler

    window.open('calculator.html','calculatorWin','width=200,height=400')

    If you wrap this in a function...

    function popCalc() {
    window.open('calculator.html','calculatorWin','width=200,height=400');
    }


    then you only have to add ...
    onclick="popCalc();"

    ...to whatever text link or image link you want to use to launch it.

    There are a number of ways you can customise the window and make the script more reusable for any other popup windows you may want to have on your site, but this is the most basic way of doing just what you need at the moment.

    If you want to know ways of making it more resuable then just let us know

    You might want to take a look at the WebReview.com Introduction to JavaScript Pop-up Windows to get your head round the basic window customisation properties.

    Hope this helps
    Last edited by Bill Posters; Jul 7, 2002 at 01:43.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much!

    By the way, do i need to specify i am using javascript before first?

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, yes.

    Simply stick this...

    <script type="text/javascript">

    function popCalc() {
    window.open('calculator.html','calculatorWin','width=200,height=400');
    }

    </script>


    ...just before the closing </head> tag and the...

    onclick="popCalc()"

    ...somewhere in the <a> tag of the item/text you wish to use to trigger the new window*.

    * For image links, you don't actually need to create an <a> tag around it to make it respond to an onclick event. You can actually put it directly within the <img> tag itself, but you will not get the usual pointer (hand) cursor when you mouseover it unless you add a little css.
    You can actually still put the onclick into the img tag without the need for css by putting 'dead' links around the img tag...

    <a href="#"><img src="calculator.gif" onclick="popCalc()"></a>

    For now using an <a> tag and having the onlick in there is still the less problematic (most popular) way.

    Went off on bit if a tangent, there, but threw it in just in case you were interested
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THanks so much! I got it working now...
    BUt is there anyway to remove the title bar? Like just the calculator appears? And then i can make a close button?

    Thanks

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Certain browsers support the titlebar window property that can be referenced with the features of the window.open command.
    I'm not totally sure which browsers do and which don't, but I believe support is limited(?) to only IE4+ on PC.

    One alternative is a 'chromeless window', which removes *all* the window edges (chrome) and shows just the contents of the html body.

    However, this is neither universally popular with web-users or universally supported by browsers. (just so you're aware).
    I, personally, have never actually seen one of these in use as Macintosh doesn't support it (nor do I particularly want it to)

    Anywho...
    You can check out the neccessary script for chromeless windows at Microbians.com.


    And yes for the close button...
    Make it clear simple for users to close the window again with the mouse as the 'window' will no longer have the close button along the title bar.
    This is one of the most overlooked elements of pages show in such windows and is the number objection to using them at all.

    Those platforms and browsers that do not support these functions should simply get a 'normal' popup window (i.e. one with window chrome and title bar (incl. close button*)

    * It is generally more user-friendly to include a close button/link in *all* popup windows, even those that still have a title bar.
    Last edited by Bill Posters; Jul 7, 2002 at 23:30.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I guess i'll just leave my calculator for now. Anyway thnx for all the help. You can hava look at my web site here:

    www.wishingwell.com.hk

  8. #8
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use this bit of code to specify the height, width, scrollbars on/off, toolbar, address bar, status bar, menu bar.

    Stick this in just above the </Head> tag:

    <script language="JavaScript">
    <!--
    function MM_openBrWindow(theURL,winName,features) { //v1.2
    window.open(theURL,winName,features);
    }
    //-->
    </script>


    and then use this as the link:

    href="javascript:MM_openBrWindow('YOURPAGEHERE.htm','help','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=450,height=520')"

  9. #9
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just out of curiosity moonman, how does the Dreamweaver script improve on/differ to the examples and advice I have given so far?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  10. #10
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nutshell said he wanted to be able to open a window without the title bar. The code I gave allowed him to do that.

    I didn't realise it came from Dreamweaver!

  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see how it can turn the title bar when it doesn't mention it in the window properties.*
    (*the default for title bar unless specified otherwise is on)

    Does IE PC have title bar off if not mentioned in the properties (as is the case with the other 'standard' properties)?

    I'm on a Mac so I can't test it, but it still seems wrong given the info I've found on that particular subject plus the limited but accurate knowledge I already have of javascript.
    Last edited by Bill Posters; Jul 8, 2002 at 02:17.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  12. #12
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just cottoned on to what Nutshell was after. I confused the title bar with the toolbar. My bad.

    I blame Monday mornings. You're right Bill, it doesn't remove the title bar, and it's of no improvement on the code you gave.

  13. #13
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by moonman
    I confused the title bar with the toolbar.
    I guessed that might have been it
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  14. #14
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Moonman, just so you know, Macromedia-generated JavaScript function names (i.e. from FireWorks & DreamWeaver) are always prefixed with "MM_"!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!


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
  •