[jQuery] Re: Wait until animation completed - callback?
does nobody have an idea? :-(
On Sep 23, 5:13 pm, Merlin ngro...@fastmail.fm wrote:
Hi there,
I am building huge list with subcategories in each category that fade
out once the mouse is placed over the category. It works great, BUT
the problem is, if your mouse goes down the list vertically and the
subcategories are fiew, then the obove subcategories fade out and your
mouse is over the next category which is causing the next menu to fade
in.
I would need a way to make jquerywaitto fade out the next menüuntil
the last one has disapeared. An area would be good, if the mouse
leaves the subcategory area fade out or similar.
Do you believe the callback function might be a solution? I could not
think about how. Here is the code I am using:
onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
(#51)').hide(700);
Thank you for any help!!
Merlin
[jQuery] Re: Wait until animation completed - callback?
The timeout sounds logical. I would like to try it, but somehow jquery
does not know that function:
http://docs.jquery.com/Special:Search?ns0=1search=setTimeoutgo=
I am pretty new to jquery. Could you post some code that fits into
this one:
onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
(#51)').hide(700);
Thanks!!
On Sep 25, 4:42 pm, ryan.j ryan.joyce...@googlemail.com wrote:
the problem with jquery animation effects is that you can easily chain
effects on a single element, but unless you specify a timer of some
description or utilise the callback, effects on different elements
will execute simultaneously as you're finding.
unfortunately you really aren't going to know how far into the
animation it is (you can find out by checking the opacity of the el,
but that's probably A Very Bad Idea) so whilst it seems like the most
obvious method, if you want to just stop the new mouseover func
executing until the animation has finished you'd need to make the
mouseover function setTimeout(yourActualFunction(+el.attr('id')+),
x) where x is the max length the anim could be.
you might be able to do something clever with a conditional to
determine if there was a menu animation happening on the initial
mouseover event, and if there was checking the element now under the
cursor in the callback, but since you have limited access to the
callback of any existing events in progress you're always going to hit
the problem of not being able to fully utilise that.
i'd be tempted to .stop() anything that's :animated on mouseover
before you start the new .fadeTo() ;)
On Sep 25, 2:12 pm,Merlinngro...@fastmail.fm wrote:
does nobody have an idea? :-(
On Sep 23, 5:13 pm,Merlinngro...@fastmail.fm wrote:
Hi there,
I am building huge list with subcategories in each category that fade
out once the mouse is placed over the category. It works great, BUT
the problem is, if your mouse goes down the list vertically and the
subcategories are fiew, then the obove subcategories fade out and your
mouse is over the next category which is causing the next menu to fade
in.
I would need a way to make jquerywaitto fade out the next menüuntil
the last one has disapeared. An area would be good, if the mouse
leaves the subcategory area fade out or similar.
Do you believe the callback function might be a solution? I could not
think about how. Here is the code I am using:
onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
(#51)').hide(700);
Thank you for any help!!
Merlin
[jQuery] Wait until animation completed - callback?
Hi there,
I am building huge list with subcategories in each category that fade
out once the mouse is placed over the category. It works great, BUT
the problem is, if your mouse goes down the list vertically and the
subcategories are fiew, then the obove subcategories fade out and your
mouse is over the next category which is causing the next menu to fade
in.
I would need a way to make jquery wait to fade out the next menü until
the last one has disapeared. An area would be good, if the mouse
leaves the subcategory area fade out or similar.
Do you believe the callback function might be a solution? I could not
think about how. Here is the code I am using:
onmouseover=$('#51').slideToggle('fast');$('.subcategories:not
(#51)').hide(700);
Thank you for any help!!
Merlin
[jQuery] Re: Bug? Jumping show/hide in Chrome and Safari
Does nobody have an idea what is causing this?
On Sep 21, 9:39 pm, Merlin ngro...@fastmail.fm wrote:
Hi there,
I am building a simple show/hide list with the help of jquery. It
works great on IE and Firefox but inChromeand Safari the closing
menuitems shift the whole menu to the left for a second and then back
to its origin. I have about 20 menüitems that each hold about 5
submenü items. The goal is to show the 5 items only on mouseover on
the menüitems and then hide it once the mouse moves away.
Here is the code:
script type=text/javascript
$(document).ready(function(){
//Hide all subsubmenus
$(.subcategories).css(display,none);
});
/script
lia href=/kleinanzeige-aufgeben/geschenke.htm onmouseover= $
('.subcategories:not(#86)').hide('fast');$('#86').show('fast');
title=GeschenkeGeschenke/a/li
Any idea on how to fix this? I found a relevant post that refers to a
bug in jquery but the workaround does not work for me and I also tried
the nightly build which also did not
help.http://tommcfarlin.com/2009/01/08/the-problem-with-jquery-hide-safari...
Thank you for any help!!
Regards, Merlin
[jQuery] Re: Bug? Jumping show/hide in Chrome and Safari
HI,
I broke the problem down into the fact that somehow jQuery is not able
to handle show/hide of Lists inside a talbe correctly with Safari/
Chrome.
Using fadeIn and fadeOut works though, but I really would like to use
show/hide as the effect is much nicer.
Here is an example code that demonstrates that the right row will
always jump in Chrome and Safari:
script src=http://code.jquery.com/jquery-latest.js; type=text/
javascript/script
script type=text/javascript
$(document).ready(function(){
//Hide all subsubmenus
$(.subcategories).css(display,none);
});
/script
table border=1 width=600px
tr
td valign=top width=300px
a href=
onmouseover=$('.subcategories:not(#29)').hide('fast');$
('#29').show('fast'); Wohnungen/a
ul class=subcategories id=29
lia href=
title=MaisonetteMaisonette/a/li
/ul
p
a href=
onmouseover=$('.subcategories:not(#16)').hide('fast');$
('#16').show('fast'); Freundschaften/a
/td
td valign=top width=300px
Row 2
/td
/tr
/table
Or am I overlooking something?
Thank you for any help on that! Merlin
On Sep 21, 9:39 pm, Merlin ngro...@fastmail.fm wrote:
Hi there,
I am building a simple show/hide list with the help of jquery. It
works great on IE and Firefox but inChromeand Safari the closing
menuitems shift the whole menu to the left for a second and then back
to its origin. I have about 20 menüitems that each hold about 5
submenü items. The goal is to show the 5 items only on mouseover on
the menüitems and then hide it once the mouse moves away.
Here is the code:
script type=text/javascript
$(document).ready(function(){
//Hide all subsubmenus
$(.subcategories).css(display,none);
});
/script
lia href=/kleinanzeige-aufgeben/geschenke.htm onmouseover= $
('.subcategories:not(#86)').hide('fast');$('#86').show('fast');
title=GeschenkeGeschenke/a/li
Any idea on how to fix this? I found a relevant post that refers to a
bug in jquery but the workaround does not work for me and I also tried
the nightly build which also did not
help.http://tommcfarlin.com/2009/01/08/the-problem-with-jquery-hide-safari...
Thank you for any help!!
Regards, Merlin
[jQuery] Re: Bug? Jumping show/hide in Chrome and Safari
thank you for the reply.
I finally solved it by using slideToggle followd by hide.
regards, merlin
On Sep 22, 4:56 pm, ryan.j ryan.joyce...@googlemail.com wrote:
the handling of lists may be slightly buggy - i had a similar sounding
problem in IE with the fade/slide functions breaking margin-top.
worked fine in everything else but it seemed to be caused in IE by
moving the mouse off the element that triggered the animation before
it completed.
http://jsbin.com/izowe
On Sep 22, 3:29 pm, Merlin ngro...@fastmail.fm wrote:
HI,
I broke the problem down into the fact that somehow jQuery is not able
to handle show/hide of Lists inside a talbe correctly with Safari/
Chrome.
Using fadeIn and fadeOut works though, but I really would like to use
show/hide as the effect is much nicer.
Here is an example code that demonstrates that the right row will
always jump inChromeand Safari:
script src=http://code.jquery.com/jquery-latest.js; type=text/
javascript/script
script type=text/javascript
$(document).ready(function(){
//Hide all subsubmenus
$(.subcategories).css(display,none);});
/script
table border=1 width=600px
tr
td valign=top width=300px
a href=
onmouseover=$('.subcategories:not(#29)').hide('fast');$
('#29').show('fast'); Wohnungen/a
ul class=subcategories id=29
lia href=
title=MaisonetteMaisonette/a/li
/ul
p
a href=
onmouseover=$('.subcategories:not(#16)').hide('fast');$
('#16').show('fast'); Freundschaften/a
/td
td valign=top width=300px
Row 2
/td
/tr
/table
Or am I overlooking something?
Thank you for any help on that! Merlin
On Sep 21, 9:39 pm, Merlin ngro...@fastmail.fm wrote:
Hi there,
I am building a simple show/hide list with the help of jquery. It
works great on IE and Firefox but inChromeand Safari the closing
menuitems shift the whole menu to the left for a second and then back
to its origin. I have about 20 menüitems that each hold about 5
submenü items. The goal is to show the 5 items only on mouseover on
the menüitems and then hide it once the mouse moves away.
Here is the code:
script type=text/javascript
$(document).ready(function(){
//Hide all subsubmenus
$(.subcategories).css(display,none);
});
/script
lia href=/kleinanzeige-aufgeben/geschenke.htm onmouseover= $
('.subcategories:not(#86)').hide('fast');$('#86').show('fast');
title=GeschenkeGeschenke/a/li
Any idea on how to fix this? I found a relevant post that refers to a
bug in jquery but the workaround does not work for me and I also tried
the nightly build which also did not
help.http://tommcfarlin.com/2009/01/08/the-problem-with-jquery-hide-safari...
Thank you for any help!!
Regards, Merlin
[jQuery] Bug? Jumping show/hide in Chrome and Safari
Hi there,
I am building a simple show/hide list with the help of jquery. It
works great on IE and Firefox but in Chrome and Safari the closing
menuitems shift the whole menu to the left for a second and then back
to its origin. I have about 20 menüitems that each hold about 5
submenü items. The goal is to show the 5 items only on mouseover on
the menüitems and then hide it once the mouse moves away.
Here is the code:
script type=text/javascript
$(document).ready(function(){
//Hide all subsubmenus
$(.subcategories).css(display,none);
});
/script
lia href=/kleinanzeige-aufgeben/geschenke.htm onmouseover= $
('.subcategories:not(#86)').hide('fast');$('#86').show('fast');
title=GeschenkeGeschenke/a/li
Any idea on how to fix this? I found a relevant post that refers to a
bug in jquery but the workaround does not work for me and I also tried
the nightly build which also did not help.
http://tommcfarlin.com/2009/01/08/the-problem-with-jquery-hide-safari-and-chrome/
Thank you for any help!!
Regards, Merlin
[jQuery] Problem with classes
Hi everybody, it seems that I am doing something wrong concerning CSS classes with JQuery. I am using the plugin cluetip to open a new iframe tip. Now that works perfectly, just it does not if I have the invoking a href tag inside another div that containes any css class. How come?! Example working: div class=myactions .. come code /div a class=myactions2 href=go.html rel=go.html style=font- weight:regular;test/a Example not working: div class=myactions .. come code a class=myactions2 href=go.html rel=go.html style=font- weight:regular;test/a /div That is really strange. Can somebody please shed some light on it? Thank you in advance, Merlin
[jQuery] Form target out of jquery plugin cluetip
Hello everybody, I am relativly new to Jquery so forgive me if this is a bit basic. I am opening a form with cluetip that where user can submit. Now if I hit the submit button the parent window gets affected, not the iframe. I believe from forum readings that I have to add a target into that form: FORM ACTION=do.php target=something But what is the target name? I can not find it anywhere. Can somebody please help? Thank you for any hint. Merlin
[jQuery] Cluetip insertionafter
Hi there,
I am having trouble with cluetip plugin regarding the
insertionElement.
Basicly my code looks like this:
div class=one
a href=... class=invokeme
/div class=one
div class=one
a href=... class=invokeme
/div class=one
div class=one
a href=... class=invokeme
/div class=one
Problem is, that the cluetipp always shows up on the same spot, not
next to the link I click.
I believe that this is because of the insertionelement:
$.cluetip.setup({insertionType: 'insertAfter', insertionElement:
'div:first'});
If I comment that out, the box will not show up at all. Unless I move
the invoking element out of the other div containers.
Any ideas?
Thank you for your help,
Merlin
[jQuery] Re: Displaying same input box
Hello Adrian,
I tried your code but on click of the button there is absolutly
nothing happening?! I also tried to locate the potential error, but my
JQuery knowledge is limited so far.
Regards,
Merlin
On Oct 26, 1:30 pm, Adrian Lynch [EMAIL PROTECTED] wrote:
How about creating the form once and moving it to where ever it's
needed. Something like this:
script type=text/javascript
var replyForm = $('div id=replyForm/div');
$(document).ready(function() {
replyForm.append($('textarea id=replyText/textarea'));
replyForm.append($('input type=button value=SAVE
id=saveReply / OR input type=button value=CANCEL
id=cancelReply /'));
$(.reply).click(showReplyForm);
// We haven't injected the form into the DOM yet so we give a
reference to where out form is
$(#cancelReply, replyForm).click(cancelReply);
$(#saveReply, replyForm).click(saveReply);
});
function showReplyForm() {
var buttonPressed = $(this)
// Show any that might be hidding, they'll usually be one
$(.reply).show();
// Get the text from the message. There's bound to be a
better way
to do this!
var messageText =
buttonPressed.parent().find(.messageText).text();
$(#replyText, replyForm).text(messageText);
replyForm.insertAfter(buttonPressed);
replyForm.show();
buttonPressed.hide();
}
function cancelReply() {
$(replyForm).hide();
$(.reply).show();
}
function saveReply() {
alert(Saving...);
}
/script
div class=message
div class=messageTextThis is message one/div
button class=replyReply to message 1/button
/div
div class=message
div class=messageTextThis is message two/div
button class=replyReply to message 2/button
/div
Any good?
Adrian
On Oct 26, 7:53 am,Merlin[EMAIL PROTECTED] wrote:
Hello everybody,
I am new to jquery and do currently try to add a reply field to each
of many user comments under a picture.
Therefore I have create a function in jquery that displays a html form
with a save and cancel button.
My goal is now to show this form whenever someone clicks on one of the
many reply buttons. Somehow I have a problem with the object and the
code does not work. I hope to get a bit starting help inside this
group. Thank you for any help.
Here is the code:
html
head
script src=/app_global/jquery-1.2.1.pack.js type=text/
javascript/script
script type=text/javascript
$(document).ready(function() {
$('#slickbox').hide();
$('a#reply-box').click(function() {
var textarea = 'divtextarea rows=4
cols=60'+$(this).html()
+'/textarea';
var button = 'divinput type=button
value=SAVE
class=saveButton / OR input type=button value=CANCEL
class=cancelButton //div/div';
var revert = $(obj).html();
$(obj).after(textarea+button).remove();
$('.saveButton').click(function(){saveChanges(this,
false, i);});
$('.cancelButton').click(function(){saveChanges(this, revert,
i);});
});
$('a#slick-down').click(function() {
$('#slickbox').toggle('slow');
return false;
});
});
/script
/head
body
a href=# id=slick-downShow test div/abr
div id=slickboxpShow div/div
Text underneathbr
a href=# id=reply-boxReply/abr
Comment text 1br
a href=# id=reply-boxReply/abr
Comment text 2br
/body
/html
Best regards,
Merlin
[jQuery] Adressing the right area
Hi there,
I am a beginner in Jquery and need some help to get started.
I would like to create a functionality that provides a button
underneath each user comment of a picture reply, that would on
clicking it show a reply field.
Now this does not sound so hard, does it?! It looks hard to me. The
problem is, that there could be 100 user comments and I would only
want to add a few lines of JQ code. How can I pass the appropiate
reply ID, so that on click it does only show the reply box underneath
the comment in querstion?
Here is how I tried it:
$(document).ready(function() {
var $loader = 'form method=post name=comment
action=act_insert_pic_comment_reply.php style=margin-bottom:0;
padding:0; border:0; margin:0 textarea tabindex=2 name=reply
id=R1 class=text_L rows=7 cols=36 style=width:468px
wrap=virtual/textareabrinput type=Image src=/g/p/2/
BN_ct_sa_en.gif width=80 height=19 ';
$('.RB1').click(function(){
$('#C1').html($loader).fadeIn('slow');
return false;
});
});
a href=# class=RB1 id=B1bReply/b/a
span id=C1/span
a href=# class=RB1 id=B2bReply 2/b/a
span id=C2/span
Thank you for any help on this!
Best regards,
Merlin
[jQuery] Displaying same input box
Hello everybody,
I am new to jquery and do currently try to add a reply field to each
of many user comments under a picture.
Therefore I have create a function in jquery that displays a html form
with a save and cancel button.
My goal is now to show this form whenever someone clicks on one of the
many reply buttons. Somehow I have a problem with the object and the
code does not work. I hope to get a bit starting help inside this
group. Thank you for any help.
Here is the code:
html
head
script src=/app_global/jquery-1.2.1.pack.js type=text/
javascript/script
script type=text/javascript
$(document).ready(function() {
$('#slickbox').hide();
$('a#reply-box').click(function() {
var textarea = 'divtextarea rows=4
cols=60'+$(this).html()
+'/textarea';
var button = 'divinput type=button
value=SAVE
class=saveButton / OR input type=button value=CANCEL
class=cancelButton //div/div';
var revert = $(obj).html();
$(obj).after(textarea+button).remove();
$('.saveButton').click(function(){saveChanges(this,
false, i);});
$('.cancelButton').click(function(){saveChanges(this,
revert,
i);});
});
$('a#slick-down').click(function() {
$('#slickbox').toggle('slow');
return false;
});
});
/script
/head
body
a href=# id=slick-downShow test div/abr
div id=slickboxpShow div/div
Text underneathbr
a href=# id=reply-boxReply/abr
Comment text 1br
a href=# id=reply-boxReply/abr
Comment text 2br
/body
/html
Best regards,
Merlin
[jQuery] Multiple reply fields
Hi there,
I am trying to add a comment functionality to my webapp that includes
a reply possibility on each comment. Like on digg for example. I am
new to AJAX, but would like to take this oportunity and to jump into
cold water with that task now.
My goal is to use JQuery to show and hide a dialog box which contains
the form to reply on the comments.
Basicaly I managed to do this, but now I have a general understanding
problem. Let's say there are 100 comments there and I want to have
reply possiblity for each of them. Do I have to integrate the same
code underneath each one? I would rather like to have a box in that is
used for everyone of them. I believe this is somehow done with divs,
but I do not know how.
Here is my code:
html
head
script src=/app_global/jquery-1.2.1.pack.js type=text/
javascript/script
script type=text/javascript
$(document).ready(function() {
$('#slickbox').hide();
$('a#reply').click(function() {
$('#slickbox').toggle('slow');
return false;
});
});
/script
/head
body
a href=# id=replyReply/a
div id=slickboxpSpace for reply box/div
p
next comment
/body
/html
I would like to place a complex reply form into the id=slickbox, but
here is where the problems starts. If I do this for all 100 comments
the code will be way to much to load. There must be a smarter way to
achieve this.
Thank you for any help on this. I am pretty much stuck here.
Best regards,
Merlin
[jQuery] Newbie question on hide objects
Hello everybody,
I am trying to add a comment functionality to my webapp that includes
a reply possibility on each comment. Like on digg for example. I am
new to AJAX, but would like to take this oportunity and to jump into
cold water with that task now.
My goal is to use JQuery to show and hide a dialog box which contains
the form to reply on the comments.
Basicaly I managed to do this, but now I have a general understanding
problem. Let's say there are 100 comments there and I want to have
reply possiblity for each of them. Do I have to integrate the same
code underneath each one? I would rather like to have a box in that is
used for everyone of them. I believe this is somehow done with divs,
but I do not know how.
Here is my code:
html
head
script src=/app_global/jquery-1.2.1.pack.js type=text/
javascript/script
script type=text/javascript
$(document).ready(function() {
$('#slickbox').hide();
$('a#reply').click(function() {
$('#slickbox').toggle('slow');
return false;
});
});
/script
/head
body
a href=# id=replyReply/a
div id=slickboxpSpace for reply box/div
p
next comment
/body
/html
I would like to place a complex reply form into the id=slickbox, but
here is where the problems starts. If I do this for all 100 comments
the code will be way to much to load. There must be a smarter way to
achieve this.
Thank you for any help on this. I am pretty much stuck here.
Best regards,
Merlin
--
Merlin
[EMAIL PROTECTED]
--
http://www.fastmail.fm - Does exactly what it says on the tin
