SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hiding an element if it loses focus??

    hi,

    is there any way to find out if an element has been clicked away from....im trying to create an unordered list that beahves like a select dropdown list so when the user clicks outside of it i need to hide it....can i do this?

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    un-focus

    Maybe the "onblur" event ?

  3. #3
    SitePoint Enthusiast Aquis's Avatar
    Join Date
    Jun 2006
    Location
    Uttoxeter, Staffordshire, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    document.getElementById("list_div").onblur = function () {
    	self.style.display = "none";
    }

    ...or something similar might do the trick.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    thanks for the replies. Unfortunately onblur doesnt seem to work....i'd tried it..if you paste the following code and run it you'll see that when you click away form the p tag ( in yellow) the list below is still showing in fact i cant even get the hide() function to run onblur...

    any ideas?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
    
      <title></title>
      <style type="text/css">
      
      * {
      margin: 30px;
      padding: 0; 
          }
          
           ul {
           background: blue;
           color: white;
           }
       ul li {
       list-style-type: none;
       background-color: red;
       }
       
       p#hello {
       padding: 10px;
       background: yellow;
       }
      </style>
      
      </head>
      <body>
      <p id="hello" onclick="show(this);" onblur="hide();">select...</p>
      <ul id="list" onclick="hide();" style="display:none"><li onclick="changeOut(this);">hello you!</li><li onclick="changeOut(this);">hello this</li><li onclick="changeOut(this);">hello yes</li><li onclick="changeOut(this);">hello no<li></ul>
      <script type="text/javascript">
          
         var onornot = 0;
       
          
          function show(thing) {
              if(onornot == 0) {
                  var ul = document.getElementById("list");
                  ul.style.display = 'block';
                  
                  onornot = 1;
              }
              else if(onornot == 1) {
                  var ul = document.getElementById("list");
                  ul.style.display = 'none';
                  onornot = 0;
              }
          }
          
          
          function changeOut(thistext) {
              var mytext = thistext.innerHTML;
              var oldtxt = document.getElementById('hello');
              oldtxt.innerHTML = mytext;
          }
          
          function hide() {
              document.getElementById("list_div").onblur = function () {
                  self.style.display = "none";
              }
          }
          	      
          
      </script>
      
    
      </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If FF I couldn't give a <p> element focus.

    In the onload I told it to focus the <p> and I told the <p> that when it got focus to alert something. I never got the alert.

    Although obviously I could be wrong.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onblur works on form elements, not other elements.

  7. #7
    SitePoint Enthusiast Aquis's Avatar
    Join Date
    Jun 2006
    Location
    Uttoxeter, Staffordshire, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are you actually trying to do? How can a none-form element loose focus? When a text input is selected, for example, it has the cursor flashing in it. Perhaps you're trying to find out if an element is off of the screen (i.e. scrolled out)?

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, i didn't know focus was only applicable to form elements....so theres my problem.

    Im trying to find out if the element has been clicked away from. The whole script is part of an attempt to replace the ugly select boxes....i've successfully managed to write a script that does some DOM and replaces out all the option elements and replace them with a nicely formatted <ul> on the fly ( so the source code still shows an option list) I can then style this list however i want.

    Problem im haivng is maiking my ul act like a select. Ive got it to hide the list when the user selects an option and to toggle on and off as the user clicks on the selected item ( in yellow) which is how a select dropdown works but cant get it to toggle off if the user clicks away from the selected item......as does a select list.

    Heres some updated code, any suggestions appreciated as i'm close to getting this working!!!:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
    
      <title></title>
      <style type="text/css">
      
      * {
      margin: 30px;
      padding: 0; 
          }
          
           ul {
           background: blue;
           color: white;
           }
       ul li {
       list-style-type: none;
       background-color: red;
       }
       
       p#hello {
       padding: 10px;
       background: yellow;
       }
      </style>
      
      </head>
      <body>
      <p id="hello" onclick="show(this);" onblur="hide();">select...</p>
    
      <ul id="list" onclick="hide();" style="display:none"><li onclick="changeOut(this);">hello you!</li><li onclick="changeOut(this);">hello this</li><li onclick="changeOut(this);">hello yes</li><li onclick="changeOut(this);">hello no<li></ul>
      <script type="text/javascript">
          
         var onornot = 0;
       
          
          function show(thing) {
              if(onornot == 0) {
                  var ul = document.getElementById("list");
                  ul.style.display = 'block';
                  
                  onornot = 1;
              }
              else if(onornot == 1) {
                  var ul = document.getElementById("list");
                  ul.style.display = 'none';
                  onornot = 0;
              }
          }
          
          
          function changeOut(thistext) {
              var mytext = thistext.innerHTML;
              var oldtxt = document.getElementById('hello');
              oldtxt.innerHTML = mytext;
          }
          
          function hide() {
              var hideus = document.getElementById('list');
              hideus.style.display = 'none';
              var focusthis = document.getElementById('hello');
            
            
          }
          
          
      </script>
      
    
      </body>
    </html>

  9. #9
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    onblur works on form elements, not other elements.
    Thats what I assumed too. W3Schools, however, says otherwise: http://www.w3schools.com/jsref/jsref_onblur.asp

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    The following is a quote straight from the actual W3C standards at http://www.w3.org/TR/html401/interact/scripts.html

    onfocus = script [CT]
    The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
    onblur = script [CT]
    The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.
    That W3Schools page is wrong.

    (why people keep quoting the w3schools site as if it were an authority I don't know - it was just set up by a couple of guys from northern Europe [I forget which country - Norway or Denmark?] who selected that domain name for their site and hasn't even been kept up to date with changes to the standards over the last few years).


    There are a number of browsers that also support onfocus for other elements such as windows but that is non-standard and only some of the browsers that support onfocus for non-standard elements also support onblur for those elements.
    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="^$">

  11. #11
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess because it has really good google rankings for most html search terms and it has W3 in the name.


  12. #12
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After some experimentation i've found that onblur fires when an element loses focus. unfortunately an element only seems to lose focus when another element gain focus....which in this instance is not suitable. I need an event to fire simple if the user clicks away from the element.....either in to another element on the page ( perhaps a text input) ot just white space on the page. Onblur does not fire if the user just clicks in to white space.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Some element always has the focus and so an element can't lose the focus unless another element gains it. If someone clicks on whitespace then the prior element still has the focus and keyboard events will still operate on that element.
    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="^$">

  14. #14
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes exactly, so theres not a way to do what i want i want is there? i've been examining different attempts at doing what im trying to do and all seem to have the problem of seeming 'sticky' due to the dropdown not dissappearing when the user has clicked off of the element.

    Mine works just like this:

    http://old.easy-designs.net/articles...t/files/3.html

    http://www.icant.co.uk/forreview/tam...lect_demo.html

    If i could just iron out this last problem it'd be a nice solution
    Last edited by elduderino; Jan 6, 2008 at 15:52.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Why don't you trap all click events inside the body. Then if the event didn't occur inside your special element, you can use the hide function.

    It's a bit more overhead but it works, when you can't use an anchor's onblur event.

  16. #16
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by M-M-J View Post
    Thats what I assumed too. W3Schools, however, says otherwise: http://www.w3schools.com/jsref/jsref_onblur.asp
    IE has a richer focus model than Firefox has. A cross-browser solution in current browsers will not be possible. The so called "W3 Schools" tend to have lots of IE proprietary properties and methods.


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
  •