0

i have a div and an icon, i connected the 2 with toggle()
<img .... onclick=" jQuery('#my_div').toggle();" >

it works great, but how do i hide the div (once it's visible) when other area on the screen is clicked (besides the icon)? basicly what i need is <div id= 'my_div' ... onfocusout=jQuery('#my_div').hide();" >
but looks like focus events don't work on divs? i can't figure it out, please help

4
Contributors
6
Replies
7
Views
4 Years
Discussion Span
Last Post by arcticM
0

This one's tricky, having an image, that would notify an onfocus event; I remember IE's the only one who does that. LOL

The first element with the onclick event that would fire up is the descendants, so meaning, if you're gonna reference body on the the onclick event, the function on the body -onclick event will be the last to run.

For blur and focus events, those can only be used by form elements. And the closest you can ever come with, having the image as your icon, is by using the BUTTON tag.

<button id="myButtonID">
    <img src="http://static.daniweb.com/images/attachments/0/logo.gif" />
</button>

and in your javascript you do it like this using jQuery:

$("#myButtonID").on({
    click:function(){
        $(this).focus()
    },
    focus:function(){
        console.log("focus")
    },
    blur:function(){
        console.log("blur")
    }
});
0

the onmouseout worked on the div BUT not the way i wanted..

inside the div there's a table
<div onmouseout='$(this).hide();'><table>..</table></div>

so the funny thing is, the moment the mouse hovers over the table (which is pretty much 95% of the div (and the user needs to click on the rows in the table)) the div disappears

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.