codingmasterRS Posted June 11, 2011 Share Posted June 11, 2011 Hi Guys, Basically I am after some JS or Jquery code that will allow me to do the following: I have a textarea which when click needs to trigger a div tag to be shown, then when a user clicks out of this textarea the div should disappear again. I have this code: <script> function dispChange(eid){ if(document.getElementById(eid).style.display=="none") { document.getElementById(eid).style.display="none"; } else { document.getElementById(eid).style.display="block"; } } </script> <body onClick="dispChange('hideme')"> <textarea onclick="dispChange('hideme')></textarea> <div id="hideme">HIDEME</div> Now it works (sort of), but when it is display:none; and the the user click in the body, the div appears, how do I stop this? Also it does NOT hide when I click into the body. Cheers in advance. Quote Link to comment Share on other sites More sharing options...
codingmasterRS Posted June 11, 2011 Author Share Posted June 11, 2011 I'd much rather use jQuery .... http://api.jquery.com/show/ and http://api.jquery.com/hide/ so if anyone can tell me how to do it with this Quote Link to comment Share on other sites More sharing options...
codingmasterRS Posted June 11, 2011 Author Share Posted June 11, 2011 ok I got this jQuery working, $("textarea").click(function () { $("#hideme").show("slow"); }); $("body").click(function () { $("#hideme").hide("slow"); }); apart from the fact it disappears straight after appearing Quote Link to comment Share on other sites More sharing options...
fugix Posted June 11, 2011 Share Posted June 11, 2011 from what you posted, i believe you might want something like this. $(document).ready(function(){ $("#textarea").focus(function(){ $("#hideme").show("normal"); }); }); $(document).ready(function(){ $("#textarea").blur(function(){ $("#hideme").hide("normal"); }); }); now you will have to assign an id to your textarea and replace my #textarea with whatever your id is preceded by a #. this code will make the div appear when you click inside of the textarea, and disappear when you click out of it, hope this helps. Also, the "normal" parameter in both .blur() and .focus() can be interchanged with "slow" or "fast", depending on what you want the speed to be of the div hiding or showing Edit: see that you found a solution, please mark as solved Quote Link to comment Share on other sites More sharing options...
codingmasterRS Posted June 11, 2011 Author Share Posted June 11, 2011 WORKS, cheers Quote Link to comment Share on other sites More sharing options...
fugix Posted June 11, 2011 Share Posted June 11, 2011 Just a word of caution, by setting you jquery to display the div while any textarea is clicked, you might get unwanted results. If it is only that specific textarea that you wish to have the div display onfocus, I would advise assigning a unique id to you textarea tag and call it like I have shown in my code. Unless you want all textareas to display the div of course Quote Link to comment Share on other sites More sharing options...
codingmasterRS Posted June 11, 2011 Author Share Posted June 11, 2011 have done that Quote Link to comment Share on other sites More sharing options...
fugix Posted June 11, 2011 Share Posted June 11, 2011 have done that Just informing you, in the code you posted you did not do this which is why I posted. Regards Quote Link to comment Share on other sites More sharing options...
codingmasterRS Posted June 11, 2011 Author Share Posted June 11, 2011 thanks, much appreciated Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.