[jQuery] [multifile] Programmatic functionality not working
Getting the MultiFile plugin (jQuery Multiple File Upload Plugin
v1.46) working programmatically is not happening for me.
Please see two demos with a class-based and programmatic approach
(view source and check the js files)...the link to switch between them
is at the top: http://monovisiondesign.com/sandbox/multifile/
It works when I apply the plugin through class selectors:
input class=text multi accept-pdf max-5 type=file name=pdf_url
[] id=pdf_url /
But I would like more control over the functionality. For instance, I
have a select list that determines the number of files that can be
uploaded per a particular selected index and I'd also like to display
a 'remove' image for each selected file, which doesn't appear possible
with the class-based approach. However, when I attempt to run this,
each MultiFile input allows only one file to be selected before
disabling itself.
Any clues as to what I'm doing wrong?
jQuery('#type').change(function(){
var text = jQuery('#type :selected').text();
enableMultiFile(text);
}
function enableMultiFile(text){
jQuery('input:file').MultiFile('reset');
jQuery('#img_url').MultiFile({accept: 'gif|jpg|png', STRING: {
remove: 'img
src=http://www.fyneworks.com/@/bin.gif; height=16
width=16 alt=x/'
}});
jQuery('#logo_url').MultiFile({max: 1, accept: 'gif|jpg|png',
STRING: {
remove: 'img
src=http://www.fyneworks.com/@/bin.gif; height=16
width=16 alt=x/'
}});
if(text == 'press-releases') {
jQuery('#pdf_url').MultiFile({max: 1, accept: 'pdf',
STRING: {
remove: 'img
src=http://www.fyneworks.com/@/bin.gif; height=16
width=16 alt=x/'
}});
}else{
jQuery('#pdf_url').MultiFile({max: 5, accept: 'pdf',
STRING: {
remove: 'img
src=http://www.fyneworks.com/@/bin.gif; height=16
width=16 alt=x/'
}});
}
}
[jQuery] Can jQuery create Drop Caps?
I'd like to turn this: a href=# class=tablinkIconic Figures/a into this: a href=# class=tablinkspan class=dropcapI/spanconic span class=dropcapF/spanigures/a Is there a way for jQuery to search and replace uppercase letters?
[jQuery] Are Drop Caps possible?
I'd like to turn all instances of tablink: a href=# class=tablinkDrop Cap/a Into this: a href=# class=tablinkspan class=dropcapD/spanrop span class=dropcapC/spanap/a That is, place a span around each uppercase letter. Is it possible to do? Thanks, Rus Miller
[jQuery] Can jQuery create Drop Caps?
I'd like to turn all instances of tablink: a href=# class=tablinkDrop Cap/a Into this: a href=# class=tablinkspan class=dropcapD/spanrop span class=dropcapC/spanap/a That is, place a span around each uppercase letter. Is it possible to do? Thanks, Rus Miller
[jQuery] Re: Can jQuery create Drop Caps?
Thanks David. That's perfect!
On Feb 24, 12:22 pm, Dave Stewart [EMAIL PROTECTED]
wrote:
Yup - you need jQuery and Regular Expressions:
var elements = $('a[class=tablink]')
elements.each(
function(){
var html = $(this).html()
html = html.replace(/([A-Z])/g, 'span class=dropcap$1/
span')
$(this).html(html)
}
)
[jQuery] Re: [Validation] v1.2.1pre - Validating an empty field and
Yep. You got it. Thanks for great work! Is a spinner coming anytime soon? On Feb 4, 12:50 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote: Rus Miller schrieb: [...] I moved up to your latest release and the issue of validating an empty field is still there. http://monovisiondesign.com/client/jquery/validate-url/form.php Thanks for the testcase! I've missed a small change in the remote method, its now fixed:http://dev.jquery.com/changeset/4637 Let me know if that works for you. Jörn
[jQuery] Re: [Validation] v1.2.1pre - Validating an empty field and
Great. Thanks. [subliminal message] Spinner! Spinner! [/subliminal message] On Feb 4, 2008 5:36 PM, Jörn Zaefferer [EMAIL PROTECTED] wrote: Rus Miller schrieb: Yep. You got it. Thanks for great work! Is a spinner coming anytime soon? Not in the 1.2.1 release, I don't yet have a schedule for further releases. I'll keep it in mind. And by the way, 1.2.1 bundles both the delegate plugin and the necessary part of the ajaxQueue plugin, so you don't need to include those anymore. Jörn
[jQuery] [Validation] v1.2.1pre - Validating an empty field and
Jörn, Jeez, this groups board is the buggiest thing I've ever seen from Google. I can't answer my own post anymore (http://groups.google.com/ group/jquery-en/browse_thread/thread/74705e85e6d0b747#) so I've started this new one. So annoying, because all I want to say is... I moved up to your latest release and the issue of validating an empty field is still there. http://monovisiondesign.com/client/jquery/validate-url/form.php
[jQuery] [Validation] How to add a pending (spinner) label to a remote validation
It's not pretty but it seems to work. I'd ideally like to tap into
the error/success label display but I couldn't figure out how, so
right now this only works for remote validation rules. It might also
be interesting to have the option to make these labels instances of
the Tooltip plugin. Then again, it might not.
Anyway, on with the show...
There are 4 modifications to jquery.validate.js and 1 class to add to
your stylesheet. Please let me know if it can be done better.
New default property:
Line 149
/*+*/
pendRequestClass: pending,
/*-*/
Two new methods:
Line 583
/*+*/
pendRequestFor: function(element){
return this.pendRequest().filter([EMAIL PROTECTED]' +
this.idOrName(element)
+ ']);
},
pendRequest: function() {
return jQuery( this.settings.errorElement + . +
this.settings.pendRequestClass, this.errorContext );
},
/*-*/
Hack to startRequest method:
Line 598
/*+*/
var pendingLabel = jQuery( + this.settings.errorElement + /)
.attr({for: this.idOrName(element), generated: true})
.addClass(this.settings.pendRequestClass);
if ( this.settings.wrapper ) {
// make sure the element is visible, even in IE
// actually showing the wrapped element is handled elsewhere
pendingLabel = pendingLabel.hide().show().wrap( +
this.settings.wrapper + ).parent();
}
if ( !this.labelContainer.append(pendingLabel).length )
this.settings.errorPlacement
? this.settings.errorPlacement(pendingLabel, jQuery(element) )
: pendingLabel.insertAfter(element);
/*-*/
Hack to stopRequest method:
Line 617
/*+*/
var pendingLabel = this.pendRequestFor( element );
if ( pendingLabel.length 0 ) {
// refresh pending class
pendingLabel.remove();
}
/*-*/
New style class:
label.pending {
/* some styles based on error label style for consistency */
height: 16px;
width: 16px;
background-color: #00;
background-image: url(../img/spinner.gif);
}
[jQuery] Re: [Validation] How to add a pending (spinner) label to a remote validation
http://monovisiondesign.com/client/jquery/validate-url/form.php On Feb 1, 4:49 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote: Hi Rus, could you post a demo/testpage with that code? That makes it easier to see the modifications in context. Thanks Jörn
[jQuery] [Validation] One request and one issue...please help?
I'm trying to do two things that seem as if they should be very simple (for somebody who has a little more experience than me, that is): 1. Attach a pending label to a currently validating field, like the error and checked labels 2. Prevent validation on a field with validation rule, but which is optional and empty. Can somebody help me with a concrete answer or a code example? Thanks, Rus
[jQuery] Validation plugin -- need help attaching 'pending' label and one other issue
I apologize for the double post. This subject line is a little more specific. I'm trying to do two things that seem as if they should be very simple (for somebody who has a little more experience than me, that is): 1. Attach a pending label to a currently validating field, like the error and checked labels 2. Prevent validation on a field with validation rule, but which is optional and empty. Can somebody please help me with a concrete answer or a code example? Thanks, Rus
[jQuery] Validation plugin - spinner while validating field?
There is a label.error and a label.checked but does anyone know how I would display a label.pending (perhaps with a spinner) while the validation (especially a remote request) is happening? Thanks.
[jQuery] jQuery.Validation - Is there a way to display a spinner while validating field?
On Jan 30, 5:40 am, Rus Miller [EMAIL PROTECTED] wrote: There is a label.error and a label.checked but does anyone know how I would display a label.pending (perhaps with a spinner) while the validation (especially a remote request) is happening? Thanks.
[jQuery] Re: [SITE SUBMISSION] Sapitot Creative
Also, you could dim the first view and thumbnail on the print and web pages to show that they're currently displayed. A beautiful site, though! I was actually planning on doing the same drop-down effect on my site redesign (which should be done sometime in '09). Stole my thunder! On Jan 30, 3:04 pm, Benjamin Sterling [EMAIL PROTECTED] wrote: Looks really nice, but I would second Dan's comments and would probably suggest you implement the history plugin. Being in the DC area, 508 compliance is a big sell. On 1/30/08, Dan G. Switzer, II [EMAIL PROTECTED] wrote: Sapitot Creative is a Design firm that recently redesigned their website. jQuery is being used to enhance page transitions and to give a little flair to the print and web portfolio sections. What is real interesting is the unconventional use of jQuery-ui.tabs plugin for the main navigation. Check it out:www.sapitot.com Overall it looks good. A couple of comments: 1) I'd change the URL each time one of the tabs is clicked--that way users can cut-n-paste the URLs and e-mail them. If possible, it'd also use meaningful hashes (like #store, #web, #print, #about, etc.) 2) Occasionally I was able to get the Loading... message that appears when you've clicked on a category to never go away. It seems to happen if you click on another menu option before the last animation has finished. (I suspect you're using a global variable to reset the value and this is getting overwritten.) -Dan -- Benjamin Sterlinghttp://www.KenzoMedia.comhttp://www.KenzoHosting.comhttp://www.benjaminsterling.com
[jQuery] Re: Validation plugin - spinner while validating field?
My issue is that remote requests, especially those involving an external server, can take a second or two. It's nice to give the user an indication that something is happening, which is why a spinner isn't 'useless'. It would be great if someone could give me a push in the right direction. Also, I noticed that even though the 'Check URL' field on my form (http://monovisiondesign.com/client/jquery/validate-url/form.php) is not required, it still performs a remote call and a label.checked is applied to the field when it's left empty. Am I doing something wrong or is there a way to prevent that? On Jan 30, 1:17 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote: Rus Miller schrieb: There is a label.error and a label.checked but does anyone know how I would display a label.pending (perhaps with a spinner) while the validation (especially a remote request) is happening? Thanks. You can still use jQuery's ajax events to display a busy-indicator:http://docs.jquery.com/Ajax_Events I acutally considered a pending state for remote-validated-fields, but dropped the idea in favor of a lack of those useless spinner icons. I found the goal to make the remote validation as unobtrusive as possible to the user a more worthwhile goal. Jörn
[jQuery] Re: Email validation broken in plugin v1.2?!
I agree, [EMAIL PROTECTED] isn't likely to be used anytime soon in a real-
world situation.
I've hacked the plugin on line 865 from:
return this.optional(element) || /^((([a-z]|\d|[!#\$%'\*\+\-\/=\?
\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\
$%'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])
+)*)|((\x22)\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b
\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-
\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF
\uF900-\uFDCF\uFDF0-\uFFEF]*(((\x20|\x09)*(\x0d\x0a))?(\x20|
\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|
\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)*(([a-z]|[\u00A0-\uD7FF
\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-
\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/
i.test(value);
to:
return this.optional(element) || /^[_a-z0-9-]+(\.[_a-z0-9-]+)[EMAIL PROTECTED]
z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i.test(value);
This seems to work for me. Please test and let me know.
On Jan 30, 4:55 pm, Seth - TA [EMAIL PROTECTED] wrote:
Is there a way to change that? Or, what part of the email regex could
I modify? I would think that most people would agree with me that
@localhost wouldn't really be a valid email for production use. If I
am wrong, then tell me, however, could you point me in the right
direction to not allow a valid email without a .com, .net, etc, etc.
Thanks.
Regards,
Seth
On Jan 28, 3:10 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Yuval schrieb: Thisemail
[EMAIL PROTECTED]
validates perfectly on v1.2. No .com nothing...
Is it broken or is it done on purpose?
I tried it on my site AND on the remember-the-milk demo...
Nope. Its perfectly valid, just as something like [EMAIL PROTECTED] is
valid.
Jörn
[jQuery] Re: Validate remote method response problem
OK, finally... http://monovisiondesign.com/client/jquery/validate-url/form.php (I've got another problem with PHP config in that my script isn't connecting on this server, but it should still return false and cause an error on the form). The markup for the form is here: http://darthead.pastebin.com/f644fcf6b After an initial wrong URL the remote method appears to be firing on every keystroke if you look at the log. I thought it was only supposed to fire on blur? http://monovisiondesign.com/client/jquery/validate-url/includes/log.txt And on focus isn't the error message supposed to go away until the element is blurred again? Thanks for your help and what looks like a great plugin! I'm probably trying to do too much too early in my jQuery career and I'm maybe missing something trivial. I was wondering if the format of the true or false response from the PHP script was not being read as boolean, but as a string. I also think I saw that the request or response was JSON, which I don't know anything about, so it's possible my script is not giving your plugin what it wants. And, btw, there's another post about this that you've probably already answered, but the email validation doesn't check for a TLD. On Jan 28, 5:34 pm, Rus Miller [EMAIL PROTECTED] wrote: Hi Jörn, Thanks, give me a couple hours to get back home and I'll put something up. On Jan 28, 4:12 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote: Rus Miller schrieb: [...] It'd be great if someone could give it a look. Your code looks fine. Could you post a testpage? Jörn
[jQuery] Re: Validate remote method response problem
Whew! OK. Got the URL checker working but to tell the truth I don't know what the issue was. I thought it was the onkeyup:false that fixed it but I just checked and it worked anyway, although I like the idea of the validation happening on blur so I left it as false. If anyone's interested... HTML markup: http://darthead.pastebin.com/f644fcf6b Validation code: http://darthead.pastebin.com/f2d416812 PHP class and code: http://darthead.pastebin.com/f3b21a38b I have one more question, how would I display a label.pending spinner while the validation (especially the remote request) is happening? I realize on the other fields the spinner would be there and gone before the user saw it, but for consistency's sake. And, respectfully, I think the email validation should check for a TLD. I know it's technically correct that one is not needed, but in practice how often is that going to happen? Maybe you could add an emailTLD method? Or better yet, an emailnoTLD, or something like that. It's really no use validating an email I won't be able to use. My two cents... On Jan 29, 11:13 am, Jörn Zaefferer [EMAIL PROTECTED] wrote: Rus Miller schrieb: OK, finally... http://monovisiondesign.com/client/jquery/validate-url/form.php (I've got another problem with PHP config in that my script isn't connecting on this server, but it should still return false and cause an error on the form). The markup for the form is here:http://darthead.pastebin.com/f644fcf6b The serverside must return true or false, without the quotes, eg. in PHP this: echo true which outputs true without quotes. In my attempts to test your page Firebug didn't show any response at all, so it seems like something is wrong on the serverside. After an initial wrong URL the remote method appears to be firing on every keystroke if you look at the log. I thought it was only supposed to fire on blur? Thats was designed for pure client-side validation. For now you may want to completely disable validation on keyup, by setting onkeyup: false.http://monovisiondesign.com/client/jquery/validate-url/includes/log.txt And on focus isn't the error message supposed to go away until the element is blurred again? You can enable that via focusCleanup: true. [...] And, btw, there's another post about this that you've probably already answered, but the email validation doesn't check for a TLD. The problem here is that a valid email address doesn't need an TLD. Jörn
[jQuery] Validate remote method response problem
I've been working with jQuery just a couple days and I'm having an issue with the Validate plugin. Please see these URLs for the source code: jQuery.Validate: http://darthead.pastebin.com/f7e7f8715 PHP remote script: http://darthead.pastebin.com/f2417d853 I'm trying to use the remote method to call a PHP script in order to test the validity of a user's URL. I've got the PHP logging calls to a text file, so I know that the remote request from Validate is going out and the PHP script is working. My issue is that I don't seem to be receiving the response back to the plugin, which should give the user an error message if the URL is invalid. I am trying to figure out what's happening in Firebug and set a breakpoint at line 761 in jquery.validate.js but I can't follow what's happening with the request. It'd be great if someone could give it a look. Thanks, Rus
[jQuery] Re: Email validation broken in plugin v1.2?!
I noticed this issue too. On Jan 28, 2:15 pm, Yuval [EMAIL PROTECTED] wrote: This email [EMAIL PROTECTED] validates perfectly on v1.2. No .com nothing... Is it broken or is it done on purpose? I tried it on my site AND on the remember-the-milk demo...
[jQuery] Re: Validate remote method response problem
Hi Jörn, Thanks, give me a couple hours to get back home and I'll put something up. On Jan 28, 4:12 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote: Rus Miller schrieb: [...] It'd be great if someone could give it a look. Your code looks fine. Could you post a testpage? Jörn
[jQuery] Re: slideToggle weirdness - also Easing question
Thanks, that looks very interesting. Is there a way to test them without downloading all the dependent files? When I open the test directory and click on one of the HTML files I get the source code. Am I missing something? On Jan 26, 8:24 pm, David Serduke [EMAIL PROTECTED] wrote: I've never used any of them so I don't know their state but I know people have been adding fx here: http://dev.jquery.com/browser/trunk/fx Just FYI. :) David
[jQuery] Re: slideToggle weirdness - also Easing question
Very nice!! That's exactly what I wanted to do, and so simple to
implement...marginTop! There was only one remaining problem and that
is that I'm hiding the element initially, so it's starting from
display:none, which is what I think hide() does. There is probably a
better way, but to unhide my hidden element I modified your plugin to:
jQuery.fn.slideToggleUp = function(speed, easing, callback) {
var h = 0;
if(this.css('display') == 'none'){
this.css('display','inherit');
h = this.height() + parseInt(this.css('paddingTop')) +
parseInt(this.css('paddingBottom'));
this.css('marginTop', -h);
}
h = this.height() + parseInt(this.css('paddingTop')) +
parseInt(this.css('paddingBottom'));
return this.animate({marginTop: parseInt(this.css('marginTop')) 0 ?
0 : -h}, speed, easing, callback);
};
I think I will make the plugin wrap the sliding div in the container
div on the fly so as not to mark up my source unnecessarily. And I
just realized my version doesn't work in IE (couldn't get the display
property). Grrr. Oh, well, tomorrow.
A very nice solution and is every bit as smooth as mootools. Thanks
to you and to David for your help. I knew I would like JQ...great
community.
On Jan 26, 9:24 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi Rus,
I'm sorry I didn't have time to reply sooner. I didn't see a link to a
Mootools effect, so I'm not sure which one you're referring to, but I
did look at the Interface slideUpToggle effect and tried to emulate it
as quickly as possible. This is by no means a bullet-proof solution,
and I'm sure you'll need to tweak it to suit your needs, but I thought
I'd at least help you get started with something. With a little bit of
jQuery and some CSS, you can pretty much mimic that effect. I put
together a crude plugin with a demo here:
http://test.learningjquery.com/slide-up-toggle.html
Hope it helps.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jan 26, 2008, at 6:30 PM, Rus Miller wrote:
David, you're right about Interface. It has problems, but then so does
Mootools as I found out when I hooked it up to the test page (it won't
un-toggle, something to do with the height of the element not being 0
I think). Also, after running test after test with different styles
and markup I found there are many ways to mess everything up. It's
very strange that mootools works perfectly on a fully marked-up and
CSS'd page on my new site.
The original problem was that I couldn't get the Interface toggle to
work on my completed page. The problem there, of course, was that I
hadn't checked the version compatibility. After reading your reply I
reverted to JQ 1.1.2 on that page, but...after firing the Interface
toggle event I got this error: too much recursion. jQuery v1.2.2
worked like a champ, except that I don't like the effect itself.
It looks like Interface's slide method isn't quite ready yet and
because I like the Mootools effect better I think I'm going to stick
with Mootools for the time being for this effect...UNLESS...somebody
knows how to achieve the Mootools effect with jQuery. Please?!?!?
For the easing problem, setting the default easing only works for
1.2.2. There's probably an easy way to do it in 1.1.2 but I haven't
dug through the code.
That's all for now. My brain hurts.
On Jan 26, 2:10 pm, David Serduke [EMAIL PROTECTED] wrote:
On Jan 25, 3:27 pm, Rus Miller [EMAIL PROTECTED] wrote:
1. JQ 1.2.2 Interface.SlideToggleUp:
After the SlideToggleUp event, Firebug started logging a string of
errors and the script crashed in both FF and IE:
this.options.curAnim has no properties
http://monovisiondesign.com/client/jquery/js/jquery-1.2.2.js
Line 3217
I suspect most of your problems are caused by the inclusion of
interface.js. Unfortunately it hasn't been updated since release 1.2
so it causes problems. There is work going on ui.jquery.com which
should eventually replace it (although it has some quirks of its
own). Try taking out that file and see how it looks.
2. JQ 1.1.2. Interface.SlideToggleUp:
No errors. But in FF there is a flicker or a jump when the event
fires. In both FF and IE there is some funkiness with the element
width and/or height. I saw a post somewhere that suggested setting
the height to 'auto' in the callback function but that didn't work.
I'm afraid 1.1.2 is before my time so I'm not sure what's going on
here.
3. JQ 1.2.2 / 1.1.2 JQ.slideToggle:
Smooth sailing in FF, (except for the effect itself (the eclipse of
the element)). However, very jumpy in IE, with the text popping
up to
the top of the div before being eclipsed.
Again I think a lot of this is because interface.js is included in
your file. Try taking it out. I still see some strange behavior
without it but it helps a lot. Try
[jQuery] Re: slideToggle weirdness - also Easing question
Found my IE problem:
this.css('display','inherit');
works when 'inherit' is changed to 'block'.
On Jan 26, 11:23 pm, Rus Miller [EMAIL PROTECTED] wrote:
Very nice!! That's exactly what I wanted to do, and so simple to
implement...marginTop! There was only one remaining problem and that
is that I'm hiding the element initially, so it's starting from
display:none, which is what I think hide() does. There is probably a
better way, but to unhide my hidden element I modified your plugin to:
jQuery.fn.slideToggleUp = function(speed, easing, callback) {
var h = 0;
if(this.css('display') == 'none'){
this.css('display','inherit');
h = this.height() + parseInt(this.css('paddingTop')) +
parseInt(this.css('paddingBottom'));
this.css('marginTop', -h);
}
h = this.height() + parseInt(this.css('paddingTop')) +
parseInt(this.css('paddingBottom'));
return this.animate({marginTop: parseInt(this.css('marginTop')) 0 ?
0 : -h}, speed, easing, callback);
};
I think I will make the plugin wrap the sliding div in the container
div on the fly so as not to mark up my source unnecessarily. And I
just realized my version doesn't work in IE (couldn't get the display
property). Grrr. Oh, well, tomorrow.
A very nice solution and is every bit as smooth as mootools. Thanks
to you and to David for your help. I knew I would like JQ...great
community.
On Jan 26, 9:24 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi Rus,
I'm sorry I didn't have time to reply sooner. I didn't see a link to a
Mootools effect, so I'm not sure which one you're referring to, but I
did look at the Interface slideUpToggle effect and tried to emulate it
as quickly as possible. This is by no means a bullet-proof solution,
and I'm sure you'll need to tweak it to suit your needs, but I thought
I'd at least help you get started with something. With a little bit of
jQuery and some CSS, you can pretty much mimic that effect. I put
together a crude plugin with a demo here:
http://test.learningjquery.com/slide-up-toggle.html
Hope it helps.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jan 26, 2008, at 6:30 PM, Rus Miller wrote:
David, you're right about Interface. It has problems, but then so does
Mootools as I found out when I hooked it up to the test page (it won't
un-toggle, something to do with the height of the element not being 0
I think). Also, after running test after test with different styles
and markup I found there are many ways to mess everything up. It's
very strange that mootools works perfectly on a fully marked-up and
CSS'd page on my new site.
The original problem was that I couldn't get the Interface toggle to
work on my completed page. The problem there, of course, was that I
hadn't checked the version compatibility. After reading your reply I
reverted to JQ 1.1.2 on that page, but...after firing the Interface
toggle event I got this error: too much recursion. jQuery v1.2.2
worked like a champ, except that I don't like the effect itself.
It looks like Interface's slide method isn't quite ready yet and
because I like the Mootools effect better I think I'm going to stick
with Mootools for the time being for this effect...UNLESS...somebody
knows how to achieve the Mootools effect with jQuery. Please?!?!?
For the easing problem, setting the default easing only works for
1.2.2. There's probably an easy way to do it in 1.1.2 but I haven't
dug through the code.
That's all for now. My brain hurts.
On Jan 26, 2:10 pm, David Serduke [EMAIL PROTECTED] wrote:
On Jan 25, 3:27 pm, Rus Miller [EMAIL PROTECTED] wrote:
1. JQ 1.2.2 Interface.SlideToggleUp:
After the SlideToggleUp event, Firebug started logging a string of
errors and the script crashed in both FF and IE:
this.options.curAnim has no properties
http://monovisiondesign.com/client/jquery/js/jquery-1.2.2.js
Line 3217
I suspect most of your problems are caused by the inclusion of
interface.js. Unfortunately it hasn't been updated since release 1.2
so it causes problems. There is work going on ui.jquery.com which
should eventually replace it (although it has some quirks of its
own). Try taking out that file and see how it looks.
2. JQ 1.1.2. Interface.SlideToggleUp:
No errors. But in FF there is a flicker or a jump when the event
fires. In both FF and IE there is some funkiness with the element
width and/or height. I saw a post somewhere that suggested setting
the height to 'auto' in the callback function but that didn't work.
I'm afraid 1.1.2 is before my time so I'm not sure what's going on
here.
3. JQ 1.2.2 / 1.1.2 JQ.slideToggle:
Smooth sailing in FF, (except for the effect itself (the eclipse of
the element)). However, very jumpy in IE
[jQuery] Re: slideToggle weirdness - also Easing question
David, you're right about Interface. It has problems, but then so does
Mootools as I found out when I hooked it up to the test page (it won't
un-toggle, something to do with the height of the element not being 0
I think). Also, after running test after test with different styles
and markup I found there are many ways to mess everything up. It's
very strange that mootools works perfectly on a fully marked-up and
CSS'd page on my new site.
The original problem was that I couldn't get the Interface toggle to
work on my completed page. The problem there, of course, was that I
hadn't checked the version compatibility. After reading your reply I
reverted to JQ 1.1.2 on that page, but...after firing the Interface
toggle event I got this error: too much recursion. jQuery v1.2.2
worked like a champ, except that I don't like the effect itself.
It looks like Interface's slide method isn't quite ready yet and
because I like the Mootools effect better I think I'm going to stick
with Mootools for the time being for this effect...UNLESS...somebody
knows how to achieve the Mootools effect with jQuery. Please?!?!?
For the easing problem, setting the default easing only works for
1.2.2. There's probably an easy way to do it in 1.1.2 but I haven't
dug through the code.
That's all for now. My brain hurts.
On Jan 26, 2:10 pm, David Serduke [EMAIL PROTECTED] wrote:
On Jan 25, 3:27 pm, Rus Miller [EMAIL PROTECTED] wrote:
1. JQ 1.2.2 Interface.SlideToggleUp:
After the SlideToggleUp event, Firebug started logging a string of
errors and the script crashed in both FF and IE:
this.options.curAnim has no properties
http://monovisiondesign.com/client/jquery/js/jquery-1.2.2.js
Line 3217
I suspect most of your problems are caused by the inclusion of
interface.js. Unfortunately it hasn't been updated since release 1.2
so it causes problems. There is work going on ui.jquery.com which
should eventually replace it (although it has some quirks of its
own). Try taking out that file and see how it looks.
2. JQ 1.1.2. Interface.SlideToggleUp:
No errors. But in FF there is a flicker or a jump when the event
fires. In both FF and IE there is some funkiness with the element
width and/or height. I saw a post somewhere that suggested setting
the height to 'auto' in the callback function but that didn't work.
I'm afraid 1.1.2 is before my time so I'm not sure what's going on
here.
3. JQ 1.2.2 / 1.1.2 JQ.slideToggle:
Smooth sailing in FF, (except for the effect itself (the eclipse of
the element)). However, very jumpy in IE, with the text popping up to
the top of the div before being eclipsed.
Again I think a lot of this is because interface.js is included in
your file. Try taking it out. I still see some strange behavior
without it but it helps a lot. Try adding this to your html file too
for the last IE problem.
style type=text/css
p { margin:1em 0; }
/style
I also attempted to use the jQuery.easing plugin. On its website
(http://gsgd.co.uk/sandbox/jquery/easing/) instructions stated that
the default JQ easing method could be set thusly: jQuery.easing.def =
'easeInBounce';
It should work if you take interface.js out.
I don't know how many of these problems are my inexperience with JQ
and/or Interface, or one or the other not being quite ready for prime
time (I don't mean that offensively). Any assistance would be very
much appreciated. I do like JQ's style much better than Prototype or
Mootools but it seems that compatibility issues still exist across
browsers and plugins.
jQuery is used all over the place but that certainly doesn't mean it
is bug free. Plus there are quirks that just does seem worth the code
necessary/performance hit to fix it. I've never seen this particular
issue with slide where the default margins on a paragraph in IE
somehow mess up the height calls during an animation. I guess I
usually set my own margin so I haven't seen it.
In any case try those two changes and see if that fixes your
problems. It seemed to work in my tests.
Good luck. :)
David
[jQuery] slideToggle weirdness - also Easing question
I just moved over to jQuery yesterday and I'm trying to port my Mootools slide code. The Mootools slide was very smooth but I like jQuery's syntax and philosophy better. I was comparing Interface.SlideToggleUp (http://interface.eyecon.ro/ docs/fx) and jQuery.slideToggle (http://docs.jquery.com/Effects/ slideToggle). I liked the effect of Interface better because the element being toggled actually moves up under the element above (like Mootools), as opposed to merely being eclipsed by the element below. However, I noticed some bad behavior from both Interface and JQ in both IE 6/7 and FF and I'm wondering if it's operator headspace or if one or both of the libraries are buggy. There are several issues and they are illustrated with these two pages, dealing with two versions of jQuery and the current version of Interface Elements. http://monovisiondesign.com/client/jquery/slidetoggle-jquery-1.1.2.htm http://monovisiondesign.com/client/jquery/slidetoggle-jquery-1.2.2.htm --- 1. JQ 1.2.2 Interface.SlideToggleUp: After the SlideToggleUp event, Firebug started logging a string of errors and the script crashed in both FF and IE: this.options.curAnim has no properties http://monovisiondesign.com/client/jquery/js/jquery-1.2.2.js Line 3217 2. JQ 1.1.2. Interface.SlideToggleUp: No errors. But in FF there is a flicker or a jump when the event fires. In both FF and IE there is some funkiness with the element width and/or height. I saw a post somewhere that suggested setting the height to 'auto' in the callback function but that didn't work. 3. JQ 1.2.2 / 1.1.2 JQ.slideToggle: Smooth sailing in FF, (except for the effect itself (the eclipse of the element)). However, very jumpy in IE, with the text popping up to the top of the div before being eclipsed. --- I also attempted to use the jQuery.easing plugin. On its website (http://gsgd.co.uk/sandbox/jquery/easing/) instructions stated that the default JQ easing method could be set thusly: jQuery.easing.def = 'easeInBounce'; However, when I ran the script the only permutation that sort of seemed to work was JQ 1.2.2 and Interface.SlideToggleUp, which as noted earlier always crashed. I don't know how many of these problems are my inexperience with JQ and/or Interface, or one or the other not being quite ready for prime time (I don't mean that offensively). Any assistance would be very much appreciated. I do like JQ's style much better than Prototype or Mootools but it seems that compatibility issues still exist across browsers and plugins. -Rus
