PassMark Logo
Home » Forum

Announcement

Collapse
No announcement yet.

Setting cursor focus on the search box.....

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Setting cursor focus on the search box.....

    ive got my search engine just how i wont it & its working great thanks


    but i would like to know how i can get it so when someone comes to my site that the search box is already flashing?





    cause at the moment you have to click on it with your mouse so you can type in it

    i know its not i big deal but i would like it so you can type straight away

    i hope you can make sense of what im getting at
    Tags: None
  • #2
    This behaviour is typically up to the browser. To change this behaviour, you will need to use Javascript.

    A simple example would be to have the following onLoad script as part of your body tag on the search template:

    Code:
    <BODY onLoad="document.getElementById('zoom_query').focus()">
    As is the nature of Javascript on web pages, you will need to test these things carefully and be aware of how they work to some extent to avoid conflicts with existing scripts.

    A kind Zoom user by the name of Bob Lewis contributed the following Javascript code which seems to work well, and it does the above and a fair bit more (it will select the text if a user clicks in the box, and deselect it if a user clicks it a second time, and moves the cursor to where the cursor is, etc). It should also change the style of the mouse pointer to an hour glass whilst loading (although this didn't quite work for me in IE).

    Code:
    [SIZE=1]var inFocus = 0;[/SIZE]
[SIZE=1]//set focus on edit box onload[/SIZE]
[SIZE=1]obj = document.all.zoom_query;[/SIZE]
[SIZE=1]obj.focus();[/SIZE]
[SIZE=1]//manage onclick event when user clicks on zoom_query edit box;[/SIZE]
[SIZE=1]//if the user clicks once, the string is highlighted;[/SIZE]
[SIZE=1]//the second click deselects the string and sets the cursor at the mouse [/SIZE]
[SIZE=1]//pointer position[/SIZE]
[SIZE=1]obj.onclick = function()[/SIZE]
[SIZE=1]{[/SIZE]
[SIZE=1]   if(inFocus == 0)[/SIZE]
[SIZE=1]   {[/SIZE]
[SIZE=1]       obj.select()[/SIZE]
[SIZE=1]       inFocus = 1;[/SIZE]
[SIZE=1]   }[/SIZE]
[SIZE=1]   else[/SIZE]
[SIZE=1]   {[/SIZE]
[SIZE=1]       obj.focus()[/SIZE]
[SIZE=1]       inFocus = 0;[/SIZE]
[SIZE=1]   }[/SIZE]
[SIZE=1]};[/SIZE]
 
[SIZE=1]//find Submit button[/SIZE]
[SIZE=1]inputs = document.getElementsByTagName("input");[/SIZE]
[SIZE=1]//set onclick event handler to change cursor to wait[/SIZE]
[SIZE=1]for(i=0; i<inputs.length; i++)[/SIZE]
[SIZE=1]{[/SIZE]
[SIZE=1]   if(inputs[i].value == "Submit")[/SIZE]
[SIZE=1]   inputs[i].onclick = function()[/SIZE]
[SIZE=1]   {[/SIZE]
[SIZE=1]       document.body.style.cursor = "wait";[/SIZE]
[SIZE=1]   };[/SIZE]
[SIZE=1]}[/SIZE]
    You will need to place this within <script></script> tags at the end of the HTML page (after the </body> tag), like so:

    Code:
    <body>
....rest of page here...
</body>
<script>
     ... above script goes here ...
</script>
</html>
    For more information on using Javascript with forms, check out this page (or try a search on Google).
    --Ray
    Wrensoft Web Software
    Sydney, Australia
    Zoom Search Engine

    Comment

    • #3
      These are my two cents...

      Hi,

      If you (or your clients) are using FF, you need to add id=\"zoom_query\" to search.php for this to work properly.

      In Zoom Search Engine 5.1 (29/02/200 it's in the input at line 741
      ...BUT, for your own mental health, do it in the source folder (usually C:\Program Files\Zoom Search Engine 5.1\scripts\PHP or ASP)
      Last edited by CesarF; Jul-12-2008, 03:58 AM.

      Comment

      • #4
        Hi,
        Does'nt work for me.
        Where should I add id=\"zoom_query\"
        Did I miss something?
        thanks
        best regards


        Code:
        <body onLoad="document.getElementById('zoom_query').focus()">
        and
        Code:
         <form method="get" action="http://www.info-radiologie.ch/public_html/search.php">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" value="Rechercher" size="15" id="rech" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"/></td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;"></td>
</tr>
</table>
</form></table></div>
        Code:
        </body>
<script>
var inFocus = 0;
//set focus on edit box onload
obj = document.all.zoom_query;
obj.focus();
//manage onclick event when user clicks on zoom_query edit box;
//if the user clicks once, the string is highlighted;
//the second click deselects the string and sets the cursor at the mouse 
//pointer position
obj.onclick = function()
{
   if(inFocus == 0)
   {
       obj.select()
       inFocus = 1;
   }
   else
   {
       obj.focus()
       inFocus = 0;
   }
};
 
//find Submit button
inputs = document.getElementsByTagName("input");
//set onclick event handler to change cursor to wait
for(i=0; i<inputs.length; i++)
{
   if(inputs[i].value == "Submit")
   inputs[i].onclick = function()
   {
       document.body.style.cursor = "wait";
   };
}
</script>
</html>

        Comment

        • #5
          I did a quick test, and this method (by itself, with no further changes) works fine in IE7:
          Code:
          <body onLoad="document.getElementById('zoom_query').focus()">
          It fails in Firefox and requires a custom search form where the search box has an id="zoom_query" attribute. So in your example,

          This line:
          Code:
          <input type="text" name="zoom_query" value="Rechercher" size="15" [COLOR=red][B]id="rech"[/B][/COLOR] style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"/>
          Should be:
          Code:
          <input type="text" name="zoom_query" value="Rechercher" size="15" [COLOR=green][B]id="zoom_query"[/B][/COLOR] style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"/>
          --Ray
          Wrensoft Web Software
          Sydney, Australia
          Zoom Search Engine

          Comment

          • #6
            scdsone/ray
            Just done this.
            I think this link may be worth a look.
            http://www.plus2net.com/html_tutorial/set-focus.php
            Fine, use javascript if you prefer, but this very simple method appears to work in IE & FF & covers if users have JS blockers, as it just uses the body tag.
            Just watch that you don't have 2 forms with the same ID in the same doc!!
            And, yes, you would need to actually name your form. "name=myformname"
            In FXS's example
            <form method="get" name="myformname" action="http://www.info-radiologie.ch/public_html/search.php">

            Comment

            • #7
              The onLoad method described in the above URL is essentially the same as my first solution (except it retrieves the element by name rather than id).

              The onLoad event in the body tag is JavaScript. It will not work when Javascript is disabled in the browser. You can test this easily in Firefox (Tools->Options->Content->Uncheck "Enable JavaScript") and reloading the above page.
              --Ray
              Wrensoft Web Software
              Sydney, Australia
              Zoom Search Engine

              Comment

              • #8
                Ray
                Well, .... you are quite correct!!
                I wasn't blocking JS in FF, however, using an IE JS blocker, it still works.
                The IE JS blocker that I use (Agnitum), appears to block some JS & not others. It certainly appears to block some of the nasty JS out there.
                (As you have probably guessed, I am no expert at all!!).
                But, I still find this method a lot easier to code/deploy, & if it passes my IE JS blocker, I am happier.
                That said, I do bow to your knowledge of these matters over mine.
                So apologies for interupting the thread.

                Comment

                Previous template Next
                Working...
                X