how to hide a div in javascript with onblur - rails

Question

i have a link_to_function that shows a hidden div. now i would like to hide this div if the user clicks out of this div(onBlur or onclick). when should i call this function and how? this is my function that shows the hidden div:

<%= link_to_function "ShowHorse", "$('horsePic').show();" :class =>"links_02"%>

shoud it be from inside this function? or should i call an external action with link to remote to look after events on the site? i would be able to use function onblur if it references a form element(text_field or sth). but i dont know how or when to put code for just div element. i was trying sth like:

:onclick=>"if($('loginContainer').onClick) {} else {$('loginContainer').hide}"  

i dont know much javascript so i am kind of a lost here. was checking google but wasnt able to find anything useful. any help would be greatly appreciated!

Answer 1

It appears that you're using Prototype, so you can use the built-in JavaScript helpers in Rails to do this for you.

One thing to be careful with in JavaScript versus Ruby is that functions are not called unless the brackets are included. Without the brackets you get a reference to the function instead.

// Check to see if a function is defined
if ($('something').onClick)
  true;

// Check to see if a defined function returns a true value by calling it
if ($('something').onClick())
  true;

Typically you can just introduce functions in your link_to definition as required.

Answer 2

You should look at defining a click event on the whole body of the page. If a click isn't caught on the div you're watching, close the div. You might need to look at capturing and bubbling javascript events, to get the right click target.

http://www.quirksmode.org/js/events_order.html Very good resource for understanding how a click will move through your page.