SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    giving focus to a button upon loading page

    I would like to know what code to use if I want to put the focus on a button?

    I know how to put a focus on a textfield of some kind...

    but if I have just a button (onClick=window.close() without a form, how do I, upon loading the page, give this button the main focus...

    so, if someone presses the Spacebar or Enterkey the window will be closed immediately.

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the way Google does their auto-focus:

    <html>
    <head>
    <script>
    <!--
    function setfocus() { document.f.q.focus(); }
    // -->
    </script>
    </head>

    <body onLoad="setfocus()">

    <form action="search" name="f">
    <input name=q type=text value="" size=55 maxlength=256><br>
    <input type=submit value="Google Search">
    </form>
    </body>
    </html>


    They set the name of the text field to q. Then they tell q to be the focus when the page loads. All I did was to give the name "q" to the Button instead and it worked perfectly. Like so:

    <html>
    <head>
    <script>
    <!--
    function setfocus() { document.f.q.focus(); }
    // -->
    </script>
    </head>

    <body onLoad="setfocus()">

    <form action="search" name="f">
    <input type=text value="" size=55 maxlength=256><br>
    <input name=q type=submit value="Google Search">
    </form>
    </body>
    </html>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well...
    I'll have to add a form than.

    The button I want the focus on, is just a simple button which executes a onClick=window.close();

    I'll have a go at it first thing tomorrow morning.

    Thanx

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think you have to add a FORM. I just thought that you wanted to use a FORM button.

    You SHOULD be able to use a normal image or text link just the same way. You just have to figure out how to reference that element.

    Let me experiment, I'll get back to you.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK...

    This doesn't work but only because I don't know the DOM well enough to know how to reference the DIV.

    <html>
    <head>
    <script>
    <!--
    function setfocus() { document.all.f.q.focus(); }
    // -->
    </script>
    </head>

    <body onLoad="setfocus()">

    <div id="f">
    <a href="somepage.html"><img src="someimage.jpg" name="q" onClick="window.close();"></a>
    </form>
    </body>
    </html>

    However, even if you referenced the DIV properly, I don't know if you could focus on a page element like that. It would most definitely be easier if you could just use FORM as we KNOW that works.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK...I lied...this works:

    <html>
    <head>
    <script>
    <!--
    function setfocus() { document.all.q.focus(); }
    // -->
    </script>
    </head>

    <body onLoad="setfocus()">

    <a href="sompage.html" name="q" onClick="window.close();">Close me</a>

    </body>
    </html>

    I just realized that my structure was wrong. I was trying to reference an element that was inside another element. So as far as the page was concerned, that element did not exist.

    I had the "name="q" attached to the image when it should have been attached to the HREF tag. It works now. And you don't even need the DIV.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx for all the work you put into it.

    I tried it this morning, and it works like a charm!



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
  •