Results 1 to 6 of 6

Thread: Adding an onblur event to a selectbox div only mockup

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Adding an onblur event to a selectbox div only mockup

    Hello,

    I need your help.

    I can't seem to quite figure out so as to add an onblur event to my css div only selectbox.

    The normal onblur method for my wrapper div is not working:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <style type="text/css">
    #container {
    	width: 200px;
    	float: left;
    	font-family: Arial;
    	font-size: 10pt;
    	position:relative;
    }
    #one {
    	height: 200px;
    	border: 1px solid red;
    	display: none;
    	position:absolute;
    	background: #C0C0C0;
    }
    #two {
    	width: 8px;
    	height: 8px;
    	float: left;
    	position:absolute;
    }
    
    #commentsbox, ul {
    	list-style: none;
    	margin: 0;
    	cursor: default;
    	width:194px;
        padding:6px;
    }
    #commentsbox, ul, li {
    	padding: 2px;
    }
    #commentsbox li:hover{
    	background: blue;
    	color: #fff;
    }
    #result {
    	border: 1px solid #000;
    	width: 206px;
    }
    </style>
    
    <script type="text/javascript">
     function showcommentsbox(){
       document.getElementById("one").style.display="block";
     }
     function hidecommentsbox(){
       document.getElementById("one").style.display="none";
     }
     
    // pick a name that's useful to you:
    function textToTextArea (e) {
    
        e = e ? e : event;
        var text = e.target ? e.target : e.srcElement;
    
        document.getElementById('result').innerHTML = text.innerText
    }
    
    
    
    </script>
    
    </head>
    
    <body>
    
    <div id="container">
    	<div id="one" onclick="hidecommentsbox()">
    		<ul onclick="textToTextArea(event)" id="commentsbox" onblur="hidecommentsbox()">
    		  <li>Item 1</li>
    		  <li>Item 2</li>
    		</ul>
    	</div>
    </div>
    
    <div id="two"><img src="images/arrow_double.png" onclick="showcommentsbox()"></div>
    <br>
    <textarea id="result"></textarea>
    </body>
    
    </html>

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

  3. #3
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    It doesn't work for IE. Any other suggestions?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is no cross browser onblur event for anything other than form elements, anchor links, and area (image map area tags) links. The best strategy is to use the onblur event of one of those elements.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by jason_kelly View Post
    It doesn't work for IE. Any other suggestions?
    It works on my machine, with IE. What IE-version are you using?

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    There is no cross browser onblur event for anything other than form elements, anchor links, and area (image map area tags) links. The best strategy is to use the onblur event of one of those elements.
    Wouldn't it be possible (if not especially easy) to create one?

    1. Add an onclick event to the whole webpage. And another to the element in question.

    2. When that element is clicked, set a variable somewhere called "element_is_selected" (etc.).

    3. Then when you click anywhere on the page, check for two conditions:
    --the click was on the page but not on the element in question [this can be done by using return false within the element's onclick, right?]
    --the variable element_is_selected is set to TRUE
    If those conditions are met, then:
    --set element_is_selected to FALSE (for the next time you click somewhere)
    --do the "onblur" event you'd like.

    [Note: I'm assuming that the events triggering onclick = onblur in the broad sense-- of course you might also have something using the keyboard like the tab key, but generally speaking I'd imagine a div wouldn't involve using the tab key. If you did add some extra functionality like that, adjust the idea above accordingly.]


    Of course, yes, it would be easier to use something that is already designed for this...
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Similar Threads

  1. Replies: 10
    Last Post: 02-12-2012, 08:12 PM
  2. what to use in the field onblur, onload, onchange...???
    By leonidassavvides in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-31-2008, 07:33 PM
  3. help with onBlur not working
    By bvaroni in forum JavaScript
    Replies: 0
    Last Post: 05-09-2008, 09:31 PM
  4. JavaScript and DOM textarea onblur issue.?
    By dekemcaffee in forum JavaScript
    Replies: 1
    Last Post: 09-10-2007, 09:05 AM
  5. Adding an onClick event
    By mrickert in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 08-04-2005, 01:08 PM

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
  •