[jquery-dev] Re: jQuery forward compatibility issues
It was late last night when I wrote the names of the spec authors. It should have been only Elika and Paul Nelson (paulnel at microsoft.com). The other authors was from the CSS Background and Borders Module. I just sent an e-mail to Elika. Hi Elika. I've looked into some of the new CSS3 additions and some features like text-shadow and box-shadow don't have shorthand properties. This can create quite a headache for browser libraries and has spawned a discussion in the jQuery dev list. http://groups.google.com/group/jquery-dev/browse_thread/thread/9af8f51d557e323a/ba48dc96ae77dffc#ba48dc96ae77dffc I urge you to implement shorthand properties in the specifications. E.g. text-shadow-color, text-shadow-x, text-shadow-y, and text- shadow- radius. Regards, Jon. -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@googlegroups.com. To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=.
[jquery-dev] Re: jQuery forward compatibility issues
I've only tested in FF3.5, Chrome 3.0 and Safari 4 as they are the
only browsers that I'm aware of supports text-shadow. You can test it
yourself with this code (uncomment in appropriate order):
script type=application/javascript
jQuery(function($){
// test that text-shadow is supported - always work
// $('h1,p').attr({ style: 'text-shadow:#6374AB
20px -12px
2px;' });
// css properties http://docs.jquery.com/CSS/css#properties
// $('h1,p').css({ 'text-shadow': '#6374AB 20px
-12px 2px;' });
// css name/value http://docs.jquery.com/CSS/css#namevalue
$('h1,p').css('text-shadow', '#6374AB 20px -12px 2px');
// animating blur radius with animate( params, [duration],
[easing], [callback] )
// $('h1,p').animate({ textShadow: '#6374AB 20px
-12px 20px' },
2000);
// animating left offset with animate( params, [duration],
[easing], [callback] )
// $('h1,p').animate({ textShadow: '#6374AB 40px
-12px 2px' },
2000);
// animating blur radius with animate( params, options )
// $('h1,p').animate({ textShadow: '#6374AB 20px
-12px 20px' },
{ duration: 2000 });
// animating left offset with animate( params, options )
// $('h1,p').animate({ textShadow: '#6374AB 40px
-12px 2px' },
{ duration: 2000 });
});
/script
h1Hello World!/h1
pLorem ipsum dolor sit amet, consectetur adipiscing elit.../p
To my surprise the css method with name/value does actually work. But
as stated in my first post, animate fails and I've only found my
shitty work around to work. I've seen some monkey patches from Zach
(of http://www.zachstronaut.com/) but my aim is to evaluate jQuery for
a prototype project where we need to quickly utilize advance features.
So far jQuery has proven to be an obstacle in that regard.
Regards, Jon.
On Nov 19, 3:08 am, Dave Methvin dave.meth...@gmail.com wrote:
jQuery doesn't support CSS properties with multiple
arguments like text-shadow.
What goes wrong, in particular, and on which browsers? Is it a problem
with the setter, the getter, or both?
--
You received this message because you are subscribed to the Google Groups
jQuery Development group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=.
[jquery-dev] Re: jQuery forward compatibility issues
Sorry, there is a bug in the compiled code (blame
http://closure-compiler.appspot.com/home).
This should work:
(function(d){function f(a){var b=a.css(display),c=a.css
(display,inline).width();a.css(display,b);return 80+a.position
().left+c}function e(a,b,c){return{style:left:-+a
+px;position:relative;text-shadow:+a+px 0 +b+px +c+;}}
d.fn.disassemble=function(){return this.each(function(){var a=d
(this),b=f(a);a.animate({blurRadius:30},{step:function(c){a.attr(e
(b,c,a.css(color)))},duration:800,complete:function(){d(this).hide
(medium)}})})};d.fn.assemble=function(){return this.each(function()
{var a=
d(this),b=f(a);a.attr(e(b,30,a.css(color)));a.animate({blurRadius:
30},{step:function(c){a.attr(e(b,30-Math.round(c),d(this).css
(color)))},duration:1E3})})}})(jQuery);
--
You received this message because you are subscribed to the Google Groups
jQuery Development group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=.
[jquery-dev] Re: jQuery forward compatibility issues
You're dead-on Dave. The same problem arise with box-shadow and possibly other features. jQuery should either embrace these new property syntaxes or put pressure on the CSS spec authors to change it to the ol' fashion way. I don't know what is most appropriate but this will soon be a real pain when IE9 comes out and all browsers support this. http://www.css3.info/preview/ -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@googlegroups.com. To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=.
[jquery-dev] Re: jQuery forward compatibility issues
Well if it won't be a problem until IE9 comes out, we have a couple of years. :-) text-shadow is possible in all browsers right now (using filters, IE was actually the first browser to implement this in the 90's) but I figure that people won't complain about it until IE9 is out and designers begin to use it. BTW, according to the pages you referenced, those args are out of order. The color is supposed to come last. The specs says before or after.. All implementations honor that BTW http://www.w3.org/TR/css3-text/#text-shadow It's actually fun to think that even thought IE rightly deserve a lot bashing for stopping browser innovation, it was the first browser to support image transparency, persistent storage, gradient ect. haha! -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@googlegroups.com. To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=.
[jquery-dev] jQuery forward compatibility issues
Hi all.
I've had some time to experiment with CSS3 and jQuery and found some
serious issues in the jQuery css implementation. First of all jQuery
doesn't support CSS properties with multiple arguments like text-
shadow.
So I played around with creating a jQuery plugin and almost created my
own animation queue system as I couldn't use the jQuery parameter
object in the animation method. But luckily I figured out a half ass
work around.
$.fn.disassemble = function (){
return this.each(function (){
var el = $(this);
var offset = getOffset(el);
el.animate(
{ blurRadius: 30 },
{
step: function(a, b){
el.attr(getStyle(offset, a, el.css('color')));
},
duration: 800,
complete: function(){
$(this).hide('medium');
//$(this).css('visibility', 'hidden');
}
}
);
});
}
I saw in the comments of http://dev.jquery.com/ticket/4214 that jQuery
won't support css features like text-shadow before it is supported in
all jQuery supported browsers but there should be a way to write
plugins that doesn't involve half-assed work arounds like mine above.
Conclusion:
1) Please make jQuery forward compatible when refactoring curCSS and
attr.
2) jQuery is not suitable for projects that targets specific browser
groups (e.i. FF3 and Chrome) as is.
Please don't take this the wrong way - I like jQuery ;)
Regards, Jon
ps. take it for a spin! (never mind the ugly effect - kinda like
blink
$('h1').assemble();
$('p').mouseover(function(){
$(this).disassemble();
});
(function(d){function f(a){var b=a.a(display),c=a.a
(display,inline).width();a.a(display,b);return 8+a.position
().left+c}function e(a,b,c){return{style:left:-+a
+px;position:relative;text-shadow:+a+px 0 +b+px +c+;}}
d.g.j=function(){return this.f(function(){var a=d(this),b=f(a);a.c({d:
30},{h:function(c){a.b(e(b,c,a.a(color)))},e:800,complete:function()
{d(this).k(medium)}})})};d.g.i=function(){return this.f(function()
{var a=d(this),b=f(a);a.b(e(b,30,a.a(color)));a.c({d:30},{h:function
(c){a.b(e(b,
30-Math.round(c),d(this).a(color)))},e:1E3})})}})(jQuery);
--
You received this message because you are subscribed to the Google Groups
jQuery Development group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=.
[jquery-dev] Re: QUnit
done :) http://dev.jquery.com/ticket/4959 On Jul 23, 1:23 am, Jörn Zaefferer joern.zaeffe...@googlemail.com wrote: That was added only recently, so its more of a bug in the implementation then a regression. Thanks for pointing it out anyway. To make sure this doesn't get lost: Could you file a ticket?http://dev.jquery.com/newticket(requires registartion/login) Thanks Jörn On Wed, Jul 22, 2009 at 8:16 PM, Jon Ronnenbergjon.ronnenb...@gmail.com wrote: Hi all. The second module in the example code isn't working for me. Maybe it's a regression? http://docs.jquery.com/QUnit/module#namelifecycle this.testData is always undefined. The same is the case in my own tests. Can anyone confirm? I just downloaded the latest testrunner.js from http://dev.jquery.com/view/trunk/qunit/testrunner.js Tests outside the module(name, [lifecycle]) runs just fine. Regards, Jon. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-dev@googlegroups.com To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~--~~~~--~~--~--~---
[jquery-dev] Re: QUnit
Just a quick thought.. Either make this in module code mean window or scope test code to whatever this means in module. I prefer the latter but the former is quick as in HACK On 23 Jul., 18:05, dotnetCarpenter jon.ronnenb...@gmail.com wrote: done :)http://dev.jquery.com/ticket/4959 On Jul 23, 1:23 am, Jörn Zaefferer joern.zaeffe...@googlemail.com wrote: That was added only recently, so its more of a bug in the implementation then a regression. Thanks for pointing it out anyway. To make sure this doesn't get lost: Could you file a ticket?http://dev.jquery.com/newticket(requiresregistartion/login) Thanks Jörn On Wed, Jul 22, 2009 at 8:16 PM, Jon Ronnenbergjon.ronnenb...@gmail.com wrote: Hi all. The second module in the example code isn't working for me. Maybe it's a regression? http://docs.jquery.com/QUnit/module#namelifecycle this.testData is always undefined. The same is the case in my own tests. Can anyone confirm? I just downloaded the latest testrunner.js from http://dev.jquery.com/view/trunk/qunit/testrunner.js Tests outside the module(name, [lifecycle]) runs just fine. Regards, Jon. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-dev@googlegroups.com To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~--~~~~--~~--~--~---
[jquery-dev] Re: Enhancement to the trim method
Interesting.. I think the question is; if we extend the core methods
do we add to the overall size of websites using jQuery or do we reduce
it? If developers add the same functionality all the time in different
projects, then a generic trim method would actually insure best
practice (performance, code coverage, less development time, reuse-
ability - e.g. when using google AJAX Libraries API) and reduce
overall www sites code base, hence making the web faster. This has to
be widely agreed upon though.
On Jul 10, 10:04 am, George george.jqu...@softwareunity.com wrote:
Yep, I'm inclined to agree that trim() is for trimming!
The only little enhancement that I and several colleagues have often
considered is the ability to specify what character to trim off. (The
default being space of course)
George
On Jul 9, 8:34 pm, Daniel Friesen nadir.seen.f...@gmail.com wrote:
Ya, I see no reason to extend trim with functionality that has nothing
to do with trimming.
If you want to remove all whitespace from a string then just use
.replace(/\s+/g, ''); yourself, it's not like it's a substantial piece
of code at all.
If there is any enhancement to .trim it should be using a better method
of trimming (/^\s+|\s+$/g is slow,
seehttp://blog.stevenlevithan.com/archives/faster-trim-javascript) and/or
making use of native trim(); where available (FF3.5).
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name]
Darko Romanov wrote:
Mmm.. I think space replacing doesn't deal (at all?) with trimming.
When I'm programming with a language X and I need to trim I search for
a function that does that job, when I need to strip away spaces I
usually replace that character with an empty string.
If we like the smallest size possible for jquery.js then I think this
would be the last thing we have to put into.
d
On Thu, Jul 9, 2009 at 5:26 PM, dotnetCarpenterjon.ronnenb...@gmail.com
wrote:
Hi all,
I've submitted Ticket #4848 (new enhancement) about a week ago and
would like to hear what you guys think. I think it's handy for
telephone numbers, bank accounts (IBAN/SWIFT) ect. I realize that
changing the core API (no regression) requires some merit. Am I the
only one who like this idea?
/**
* Uses a regular expression to remove whitespace from the given
string.
* @param {String} text The string to trim.
* @param {Boolean} [all] True to remove all white-space from the
text.
* @return {String}
*/
trim: function(text, all) {
var reg = all===true ? /\s+/g : /^\s+|\s+$/g;
return (text || ).replace(reg, '');
}
Cheers, Jon.
PS. noticed a post back in november 2008 about optimizing the trim
method but don't know what the conclusion was.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
jQuery Development group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~--~~~~--~~--~--~---
[jquery-dev] Enhancement to the trim method
Hi all,
I've submitted Ticket #4848 (new enhancement) about a week ago and
would like to hear what you guys think. I think it's handy for
telephone numbers, bank accounts (IBAN/SWIFT) ect. I realize that
changing the core API (no regression) requires some merit. Am I the
only one who like this idea?
/**
* Uses a regular expression to remove whitespace from the given
string.
* @param {String} text The string to trim.
* @param {Boolean} [all] True to remove all white-space from the
text.
* @return {String}
*/
trim: function(text, all) {
var reg = all===true ? /\s+/g : /^\s+|\s+$/g;
return (text || ).replace(reg, '');
}
Cheers, Jon.
PS. noticed a post back in november 2008 about optimizing the trim
method but don't know what the conclusion was.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
jQuery Development group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~--~~~~--~~--~--~---
