homepage Welcome to WebmasterWorld Guest from 50.19.33.5
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Jquery slideToggle problem on input form
chrissim




msg:4419531
 12:52 pm on Feb 20, 2012 (gmt 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

 

Fotiman




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

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");
}
});
});

chrissim




msg:4419765
 12:03 am on Feb 21, 2012 (gmt 0)

Thanks Fotiman it works like a charm :)

chrissim




msg:4420258
 12:56 am on Feb 22, 2012 (gmt 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");
}
});
});

Fotiman




msg:4420300
 2:00 am on Feb 22, 2012 (gmt 0)

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.

chrissim




msg:4420374
 8:15 am on Feb 22, 2012 (gmt 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");
}
});
});

Fotiman




msg:4420938
 4:03 pm on Feb 23, 2012 (gmt 0)

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");
}
});
});

chrissim




msg:4421155
 12:25 am on Feb 24, 2012 (gmt 0)


thumbsup man :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved