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. Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/ 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 Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/#findComment-1228201 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 Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/#findComment-1228202 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 Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/#findComment-1228204 Share on other sites More sharing options...
codingmasterRS Posted June 11, 2011 Author Share Posted June 11, 2011 WORKS, cheers Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/#findComment-1228205 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 Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/#findComment-1228217 Share on other sites More sharing options...
codingmasterRS Posted June 11, 2011 Author Share Posted June 11, 2011 have done that Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/#findComment-1228227 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 Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/#findComment-1228258 Share on other sites More sharing options...
codingmasterRS Posted June 11, 2011 Author Share Posted June 11, 2011 thanks, much appreciated Link to comment https://forums.phpfreaks.com/topic/239029-hide-show/#findComment-1228265 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.