#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    3
    Rep Power
    0

    Question Search Box Wordpress Help


    I'm working on a wordpress website launchpadphoto dot com / blog

    On the bottom right, there is a search box. Inside the search box there is a message that reads "Hit enter to search..." but it's not very intuitive for the user to need to highlight and erase that message before doing a search. I would like to have that message disappear when the user clicks inside the search box.

    I asked the theme developer for help and this was the reply:

    The theme doesn't have anything to make this happen. Something like this in js/jquery.custom.js should work:

    var defaultSearchText = jQuery("#s").val();
    jQuery('#s').focus(function() {
    jQuery(this).val('');
    });
    jQuery('#s').blur(function() {
    jQuery(this).val(defaultSearchText);
    });

    I'm not well versed in code at all and am wondering if you guys can help me place the code. I don't even know where to begin. Thanks so much!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    Originally Posted by codeoverride
    I'm working on a wordpress website
    ...
    and am wondering if you guys can help me place the code.
    Originally Posted by Kravvitz
    Would you mind explaining why you recommend that?
    Thank you, Kravvitz. Of course I completely messed this up. I meant for the code to go within the <head> tag. Not sure what I was thinking...

    codeoverride:
    The following within the <head> tag of your header.php file should do it:
    Code:
    <script type="text/javascript">
    $(document).ready(function () {
      var defaultSearchText = 'Hit enter to search...';
      $('#s').focus(function() {
        $(this).val('');
      });
      $('#s').blur(function() {
        $(this).val(defaultSearchText);
      });
    });
    </script>
    - Null
    Last edited by null.if.ied; March 3rd, 2013 at 10:00 PM. Reason: Fixed mistakes, as pointed out by Kravvitz.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Originally Posted by null.if.ied
    Notice how this comes AFTER the </head> tag, but BEFORE the <body> tag. Make sure you place everything that's in blue BETWEEN these tags.
    Would you mind explaining why you recommend that? It's not valid. Is it to prevent WordPress from doing something to it that it shouldn't?

    Also, wouldn't you need to place the script it in a $(document).ready() event handler function?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo