SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35
  1. #1
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript onFocus and onBlur

    Hey everyone,
    I am trying to give my contact forms a unique feel on http://www.kimstewart.ca/contact/
    As you can see I am using highlight.js to give my forms an onFocus and onBlur in IE6/IE7. (Since :focus and :active both don't apply to IE6/IE7 forms using CSS)
    Anyways, for the input fields it is working, but the textarea where it says "Message (required)" it is not.

    This is the code in highlight.js:
    var elements = document.getElementsByTagName("input","textarea");
    ^Am I doing something wrong?


    Also... I am losing my HTML onclick events with all of my forms because of highlight.js. Does anybody know how to get them back?

    Thanks!

  2. #2
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    getElementsByTagName only takes one parameter so the second parameter is ignored.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    getElementsByTagName only takes one parameter so the second parameter is ignored.
    Ahhh, thanks felgall!
    So what would the code be to fix this? Will I need to make 2 highlight.js files, one for textarea and one for input?

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Since you only have one form, the easiest thing might be to do this:
    Code JavaScript:
    function highlight() {
      var elements = document.getElementsByTagName('form')[0].getElementsByTagName('*');
      for (var i = 0, j = elements.length; i < j; i++) {
        var elname = elements[i].tagName.toLowerCase();
        if (elname !== 'input' || elname !== 'textarea') continue;
        // everything else
      }
    }
    Note my change to the for() statement. It saves having to find the length of elements (which in this case isn't changing) with every iteration of the loop. Also, i isn't being declared as a global variable.

    Also, since you're already using jQuery on that page, you might as well use it for this small and simple script.

  6. #6
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Raffles,
    Thanks for the helpful advice.
    Sorry for my inexperience with JavaScript but could you show me how to do this sitewide for all textareas?
    I have a few more textareas on my Blog that I would like to apply this to also.

    Thanks!

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't use jQuery, but from what I've read I believe this should work:
    Code javascript:
    $(document).ready(function() {
      var elements = $('textarea', 'input');
      elements.focus(function() {
        $(this).css({borderColor: '#292929', backgroundColor: '#090909'});
      });
      elements.blur(function() {
        $(this).css({borderColor: '#222222', backgroundColor: '#111111'});
      });
    });
    That can replace your entire highlight script. To understand how it works, see the excellent jQuery documentation, e.g. for the ready method.

  8. #8
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Raffles,
    Hmmm - I replaced highlight.js with the code you gave me above, but it didn't seem to work... I really appreciate your help so far!
    Hoping that with a little bit more we can get it working.
    Cheers,

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, I just stuck it in this jQuery sandbox and it works. If you put it in the input box and then click the text above and then back in the box, the box goes #090909. Then #111111 again on blur.

    I can't see anything wrong with what you've done with your page and tested it with IE7 and it doesn't work, so I'm a bit mystified. You must be doing something wrong at your end but I can't see what it is!

    All I can suggest at this juncture is that you stick a few alerts in there to check at which step it is failing. So, change it to something like this:
    Code javascript:
    $(document).ready(function() {
      alert('ready');
      var elements = $('textarea', 'input');
      alert(elements.length);
      elements.focus(function() {
        alert('focus');
        $(this).css({borderColor: '#292929', backgroundColor: '#090909'});
        alert('end focus changes')
      });
      elements.blur(function() {
        alert('blur');
        $(this).css({borderColor: '#222222', backgroundColor: '#111111'});
      });
    });
    See if that gives you some irritating alerts in IE.

  10. #10
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your time Raffles
    I will give the alerts a shot, and I do have some CSS controlling the effect in Firefox.
    The highlight.js script is to give the forms in IE6/IE7 the very same effect.

    Cheers,

  11. #11
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I modified highlight.js with your latest code and it looks like "ready" is the only one that is giving me an alert.
    Which means "focus" and "blur" are not... Could the JavaScript be at fault here? Or am I just missing something...

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I noticed your CSS.

    I now know what the error is. This doesn't work as I assumed it would:
    Code:
    var elements = $('textarea', 'input');
    That selects all input elements that are inside textareas (which is impossible). It expects normal CSS syntax, which I should have realised. So, after looking at the docs, replace the above with this:
    Code:
    var elements = $('textarea, input');
    and it really should work!

  13. #13
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES! It's adjusting the onFocus background and border colors in IE6/IE7 now!!!
    THANK YOU, Raffles! You are the man!

    On a further note, adjusting the font color onFocus is a different matter... "fontColor: '#FFFFFF'" doesn't seem to be working when I include it into the highlight.js script... IE won't support CSS for forms, and they won't support JS either? Seems kinda silly... Maybe something I did wrong (again)?

    P.S. I am learning a ton already! Thank you!!!

    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    IE won't support CSS for forms, and they won't support JS either?
    That's not true. IE just doesn't support the :focus pseudo-class. The thing is that there is no such thing as fontColor (for the style object) or font-color in CSS. All you need is color.

  15. #15
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm,
    I tried "color" as well, but it's not working either...
    And I noticed that "borderColor" and "backgroundColor" do not have dashes in them, so I figured it was JS code of some sort. Stylizing forms using CSS seems to have a really hard time working in IE6/IE7....

    Hopefully there is still a workaround!
    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  16. #16
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update: LOL, well I guess I tried "Color" instead of "color"... now it's working!
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  17. #17
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is just one more JavaScript adjustment and my forms will finally be finished!

    When a user enters a value into an input, and then clicks away, I would like the background color and font color to stay changed to unique colors (to signify that they have entered something). These colors should only be present on inputs that the user fills out. Everything that is left untouched stays the same.

    This may be tricky because if a user clicks inside of an input and doesn't enter anything of their own, and then clicks out of an input, there is the default value such as "Email (required)" which will pop back up, and perhaps "trick" JS to give the unique style.

    I am thinking I will need some extra code added into highlight.js to make this work, but don't even know where to begin...lol
    (if statements? or is there an easier way)

    I hope all this makes sense! And please lemme know if I need to clarify any more.

    Cheers!
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  18. #18
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can achieve this:
    HTML Code:
    <div id="a">...</div>
    Code:
    #a {
      border-color:red;
      border-style:solid;
      border-width:1px;
      color:blue;
    }
    Using these inline styles:
    HTML Code:
    <div style="border-color:red; border-style:solid; border-width:1px; color:blue;">...</div>
    That style attribute can be set using JavaScript:
    Code javascript:
    var a = document.getElementById('a');
    a.style.borderColor = 'red';
    a.style.color = 'blue';
    But, because the hyphen used in CSS could cause problems (since in JavaScript it is used as the mathematical operator for subtraction), most of them are converted to camel case. i.e. the dash is replaced by capitalisation of the following word.

    And yes, everything in JavaScript is case sensitive.

  19. #19
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, you will need to add something else to highlight.js. Probably a simple statement to check whether the user has inputted something by checking the length of the value property of the text INPUT element.

  20. #20
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will the length attribute have conflict if the default "Email (required)" is 16 characters, and what the user types in also happens to be 16 characters?
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  21. #21
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not if you do the length measuring before you put the "Email (required)" back into the box. You need to figure out how you're going to do this in logical steps:

    1. User clicks text box. (something happens)
    2. User may or may not input text.
    3. ....

  22. #22
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agreed.
    I am understanding the concept, it's the JS code to make it work that I have absolutely no idea where to begin with...lol

    PHP Code:
    $(document).ready(function() {
      var 
    elements = $('textarea, input');
      
    elements.focus(function() {
        $(
    this).css({borderColor'#292929'color'#FFFFFF'backgroundColor'#090909'});
      });
      
    elements.blur(function() {
        $(
    this).css({borderColor'#222222'color'#696969'backgroundColor'#111111'});
      });
    }); 
    if length = true
    return $(this).css({...});
    else
    return default;
    end if

    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  23. #23
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Firstly, you have some nice code on your page, but you have polluted it horribly with inline event handlers (onfocus, onblur in your input elements). You can get rid of them and do this:
    Code javascript:
    $(document).ready(function() {
      var elements = $('textarea, input');
      elements.focus(function() {
        if (!$(this).originalValue) $(this).originalValue = $(this).value; // save value in HTML for possible later use
        if ($(this).value === $(this).originalValue) $(this).value = '';
        $(this).css({borderColor: '#292929', color: '#FFFFFF', backgroundColor: '#090909'});
      });
      elements.blur(function() {
        if ($(this).value === '') $(this).value = $(this).originalValue;
        $(this).css({borderColor: '#222222', color: '#696969', backgroundColor: '#111111'});
      });
    });

    However, although this all looks very cool, I'd strongly recommend the use of the LABEL element. This will mean you don't have to rely on JavaScript for playing about with the labels for each text field, and, more importantly, it will make your form a lot more usable and accessible. If I were you I would not go down the path you are going down at the moment and simply use the LABEL element, which is robust, unambiguous and very unlikely to break in any way.

  24. #24
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advise! Accessibility is something I definitely want to make good use of on my website. Hmmm, what if I gave everything labels and gave them display:none; in CSS? Would this resolve the problem?

    Also, I copied that code over to highlight.js and stripped out the inline onFocus and onBlur on http://www.kimstewart.ca/contact/ but it's not working ... Any ideas?
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    When it comes to labels, there's an improved way over the old way of doing them.

    The improved way is where the label contains the form element, so they don't require an identifier

    Code html4strict:
    <p><label>Name: <input type="text" name="name"></label></p>

    Compare this with the old way of doing them that requires identifiers, and the difference becomes clear.

    Code html4strict:
    <p>
        <label for="login-name">Name:</label>
        <input type="text" name="name" id="login-name">
    </p>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •