Welcome to WebmasterWorld Guest from 54.159.50.111

Forum Moderators: open

Message Too Old, No Replies

Jquery slideToggle problem on input form

     
12:52 pm on Feb 20, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:July 24, 2009
posts: 113
votes: 0


hi,

i have an issues with slideToggle input form when i tried clicked on the text area input form it slideUp back to it original position. Can anyone help me on this issue here?


<li>File Forms<div class="menuInfo">

Submit Form :
<input type="text" name="delfile" id="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';">
<input type="submit" name="delpage" id="submit" value="Submit" class="button black medium" />

</div></li>



<script type="text/javascript">
$(document).ready(function()
{
$('#menuBar li').click(function()
{
$(this).find('.menuInfo').slideToggle("500");
});
});
</script>


Thanks
3:02 pm on Feb 20, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


It's behaving as expected. "Toggle" means to switch back and forth between 2 states (displayed or hidden). Events "bubble up", so when the user clicks on the input field, the click event fires there first, then bubbles up the ancestor chain. So when the click event reaches '#menuBar li', it performs the toggle again, thus sliding it back up to it's original position.

If you only want to toggle when the "File Forms" text is clicked, then you could modify your function like this:

$(document).ready(function() {
$('#menuBar li').click(function(event) {
// If the event target of the click is this
// LI element and not one of it's children,
// then toggle the '.menuInfo' child
if (event.target === this) {
$(this).find('.menuInfo').slideToggle("500");
}
});
});
12:03 am on Feb 21, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:July 24, 2009
posts: 113
votes: 0


Thanks Fotiman it works like a charm :)
12:56 am on Feb 22, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:July 24, 2009
posts: 113
votes: 0


hi Fotiman

What about if i need 'clickoutside' event that close the menu if it's open


$(document).ready(function() {
$('#menuBar li').click(function(event) {
// If the event target of the click is this
// LI element and not one of it's children,
// then toggle the '.menuInfo' child
if (event.target === this) {
$(this).find('.menuInfo').slideToggle("500");
}
});
});
2:00 am on Feb 22, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


You'd probably want to attach a click handler to the document that gets every '#menuBar li', and for each one if it doesn't contain the event.target and the .menuInfo is visible, then call slideUp on it.
8:15 am on Feb 22, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:July 24, 2009
posts: 113
votes: 0


hi Fotiman,

Can you show me how to do it right based on the following script below: Sorry im not good in jquery and a completely idiot on this subject. Hope you can provide me solution here :)

Thanks


<div id="menuBarHolder">

<ul id="menuBar">

<li>File Forms<div class="menuInfo">
Submit Form :
<input type="text" name="delfile" id="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';">
<input type="submit" name="delpage" id="submit" value="Submit" class="button black medium" />

</div></li>




$(document).ready(function() {
$('#menuBar li').click(function(event) {
// If the event target of the click is this
// LI element and not one of it's children,
// then toggle the '.menuInfo' child
if (event.target === this) {
$(this).find('.menuInfo').slideToggle("500");
}
});
});
4:03 pm on Feb 23, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Sorry, haven't had a chance to look into this further. I suspect something like this:

$(document).click(function(event) {
$('#menuBar li').each(function (index, el) {
if (!$(el).has(event.target).length && el != event.target) {
$(el).find('.menuInfo:visible').slideUp("500");
}
});
});
12:25 am on Feb 24, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:July 24, 2009
posts: 113
votes: 0



thumbsup man :)