[jquery-dev] Re: CONTEXT LOGIC
// jq132-vsdoc.js, line # 145
return jQuery(context).find(selector);
From this one might draw following Conclusions :
C1: if context is not a dom document jQ will find things faster
because the scope of the search is narrow(er)
C2: if context above is a single dom node (aka element) jQ will
find things the fastest, please refer to: jq132-vsdoc.js, line # 107
(please everyone use this structure in a discussion :
body
span id='people'
span id='person' name='john' /span
span id='person' name='bad robot' /span
!-- and so on --
/span
/body
)
We are in the royal mess because we have no crystal clear and
unambigious terminology here. On top of that one important term is
missing:
SCOPE.
Right now we have this (by now apparently) ambiguous term: CONTEXT.
Sometimes it is (acts like, is used for) scope and sometime it does not.
1 :: $([name], #people ) // CONTEXT
(internaly: selector := #people [name], context := document )
2 :: $([name], $(#people) ) // SCOPE
(internaly: selector := [name], context := element with id 'people' )
3 :: $([name], document.getElementByID(people) ) // SCOPE
(internaly: selector := [name], context := element with id 'people' )
Do we all agree with the above? If not we have to, I think.
Furthermore. Line 3:: above is the fastest possible $() , because it
boils down to :
$( document.getElementByID(people)).find([name]) ;
This provides immediate and narrow scope for Sizzle to work in.
(reminder: jQuery.find = Sizzle )
And last but not the least :o)
Please refer to : jq132-vsdoc.js, line # 100
What am I asking for is to enforce this in jQuery. Nothing much and
nothing else. So :
$( selector:string, context:string )
Should be forbidden. should throw an exception.
The non-enforcing style of jQuery sometimes bears no fruit. The above
line is now possible, same as just saying : $() , because jQuery
authors think it is a good thing not to slap junior or senior but
lazy jQuery users, when they do these kind of coding.
But. It is a fact that companies are using jQuery. The more they use
it, the more problems they have with code that uses context in a wrong
way. And. 90% of coders actualyl use no context at all. The badly
written code mushroms and slows things down exponentially. One way out
if that (mess?) would be to enforce proper usage of context and define
the term SCOPE. Explain it to people and gently force them to use it.
2009/3/26 Daniel Friesen nadir.seen.f...@gmail.com:
I disagree. First thing to note is there are two definitions of context.
jQuery(selector).context; And jQuery(selector, context);
They are two different things which overlap just a bit.
jQuery(selector).context; Is the document context. It is the only
context that is stored in jQuery.
jQuery(selector, context); Is a node/document context for the query.
It's primary purpose is to establish document context so that jQuery
knows what document (current document, an iframe, another frameset) to
perform selectors in and use when constructing new document nodes to
insert. It does have the ability to be used to limit the scope of a
query, however that is unintuitive and makes programs confusing to read.
Your pagination example would be better handled in a different way:
$('.pagination .pagelist'); // jQuery selectors are not single-level.
Don't think everything needs to be separated into contexts. Most of the
time it doesn't
var pagination = $('.pagination');
$(pagination).find('.pagelist'); // $(selector, context); is just an
alias to $(context).find(selector); don't abuse it in ways that don't
make sense
pagination.find('.pagelist'); // Your use of another jQuery selector is
completely unnecessary anyways, you already have a jQuery object just
use .find
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
chris thatcher wrote:
I'm trying to follow this thread but it's a little loose so apologies if I'm
missing the point.
The only thing I want to disagree with is the last point. it doesnt matter
whether the context is a class or id. The context's function is to reduce
the scope of the selectors search, and the primary reason for that is simply
performance.
I know there are many signatures for $, but when providing a selector and
context the primary goal is to reduce the scope of the current selector.
There are plenty of cases where the context is a large set of nodes.
For example I might need to modify a portion of the dom that represents a
pagination interface that is provided at the top and bottom of the
interface. So I create a contect based on the class representing the
interface. Say
var pagination = $('.pagination');
Then to update a potion of that sub-dom I would do somthing like:
myCustomUpdate($('.pagelist', pagination));
This saves jquery from having to seach the entire document for elements
with the class 'pagelist', a big win. Instead the selector only looks under
the element array represented
[jquery-dev] Re: CONTEXT LOGIC
It is clear, but you're misunderstanding the concept. I'll use a class
selector to exemplify it:
$('#people .name')
is the same as
$('#people .name', document)
.context = [object HTMLDocument]
$('.name', '#people') or $('.name', $('#people')) will simply
translate to $('#people').find('.name'), or $('#people .name'), where
the context is the *document* object. The context only changes if you
pass a HTMLElement as the second argument, then the native methods
will be called on that node, not the document:
$('.name', $('#people')[0] )
.context = [object HTMLDivElement]
For example (using common DOM methods):
$('#people') == $('#people', document);
what's happening is equivalent to
document.getElementById('people');
now in this case
$('div', document.getElementById('people'))
what is actually happening is
[#people node].getElementsByTagName('div');
In other words, jQuery objects and strings passed as a context will
act as filters, but the context will still be the document. The
context will only change if you pass in a DOM node.
It's a bit counter-intuitive but that's the way it works right now.
cheers,
- ricardo
On Mar 25, 9:30 pm, DBJ dbj...@gmail.com wrote:
This is, of course, true and fine. Exactly the purpose of the context.
To define the starting node BELLOW which it will look further. Fine.
It is only that this is not what current documentation is saying :
http://docs.jquery.com/Core/jQuery#expressioncontext
At least NOT clearly and NOT unambigously...
On top of that jQuery.selector and jQuery.context in this case are not
what was originaly passed but what was processed inside jQ
So:
$([name],#people) which is equivalent to $(#people
[name]).
Results in :
selector := '#people [name] // space in the middle
context := DOMDocument
After call to $() finsihes, and plugins can start using this properties.
Above is wrong and should be :
selector := [name]
context := #people // space on the end
This might seem as some nitpicking, but it is actually extrmely important.
Because if context is always given , jQuery enabled pages will be faster.
In some case much faster. So the context syntax should be crystal
clear and consistent.
In my mind context (as I said but I will repeat ;) should be only dom
node, or single id string. If given by user. So these will be only
three valid forms:
$('#people) // dom document default context
$([name], #people) //single id
$([name], domNode ) // element given as context
I see no reason for anything else to act as context.
This would be (as I also already said ;) excellent start for people to
understand how to structure their pages and why. And why are properly
strucutred pages faster to traverse with jQuery( selector, context )
calls.
2009/3/25 Julian Aubourg aubourg.jul...@gmail.com:
$([name],#people) is equivalent to $(#people [name]).
Please note the spacing.
It then means every element with a name attribute BELOW the element of id
people.
$(#people[name]) means the element of id people with a name attribute.
So, YES, this is quite different.
2009/3/25 DBJ dbj...@gmail.com
@Daniel
You confuse me ;o)
Aa I said : A quick sample I have made (quickly) is here:
http://jsbin.com/avowu/edit
Please use it now. It is extremely simple and it shows what is going
on inside jQuery, regarding : this.selector and this.context.
So when I say: $([name], #people); I can (and you) can see that
inside jQuery selector (aka this.selector) is : '#people[name]
So I am not thinking on this one I am just passing it on. This is
also very confusing:
Thinking that $([name], #people); is the same as $(#people[name]);
is wrong on multiple levels.
This is how I understood jQuery documentation describes the context,
but this is not
apparently how this.selector value is defined inside ... This might be
wrong on multiple levels bi this is the value of this.selector , as
we can clearly see.
Also you say :
$([name], $(#people)); actually means $(#people [name]);
Are you actually saying this is the proper usage? Ok, but why is than
the improper usage allowed? If it is imporper that is. But the
question (for the last snippet) is what is then the value of the
this.slector going to be, when used by a plugin ? Currently it is :
#people [name]
Also, why are we in this mess ? Can we have consistent documentation
and implementation that is folllowing it? Something like :
Context type can be a dom node or an jQuery instance. Everything else
throws an exeception if passed as a context to the jQuery() function
This would be a really good start to the discussion on what is
actually a context ;o)
Regards.
2009/3/25 Daniel Friesen nadir.seen.f...@gmail.com:
Context is either a dom node, a document, or recently a jQuery object
with the like. Context is merely used for establishing a dom node as a
parent, and in the case of
[jquery-dev] Re: feature request: retrieving :hover css properties
thanks all for your replies. I couldn't make it work. In fact i wonder
if the css property for :hover is available for javascript at all, if
the :hover state is not triggered. Would there be a workaround?
On Wed, Mar 25, 2009 at 5:36 PM, DBJ dbj...@gmail.com wrote:
I would also suggest looking into this page:
http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/
and this plugin
http://plugins.jquery.com/project/EnhancedAttributeSelectors
although it (still) does not do exactly what you want ...
Regards
2009/3/25 Richard D. Worth rdwo...@gmail.com:
You may want to look at this plugin by Ariel Flesler for accessing css
rules:
http://plugins.jquery.com/project/Rule
http://flesler.blogspot.com/2007/11/jqueryrule.html
- Richard
On Wed, Mar 25, 2009 at 2:42 AM, Alexandre Plennevaux
aplennev...@gmail.com wrote:
hello!
i first posted this in the mailing list but no replies tells me my answer
is no, so this becomes a feature request
imagine i style the :hover pseudo-class of an element via css:
.myitem{
background-color:green;
}
.myitem:hover{
background-color:red
}
Is it possible to retrieve the background-color property of the
elemnent's :hover class via jquery?
i tried the obvious : http://jsbin.com/idudi/edit
$(function(){
var temp = $('#myitem:hover').css('
background-color');
alert(color is +temp);
});
But that didn't work. It returns the default state.
the reason i'm asking this feature, is because semantically/structurally,
the best place to store a css property is obviously in the CSS, not in some
sort of metadata.
It occurred me while doing an interaction prototype for my school website
: http://pixeline.be/test/heaj/colormap/colorfade.html
each link has its background color fade to a custom color. I could only
store it as metadata or custom attribute, i wish i could have just retrieved
it from the css.
thank you for listening !
Alexandre
--
Dusan Jovanovic
http://dbj.org
-
html e-mail is expensive ™
This email originates from Dusan B. Jovanovic. It, and any
attachments, may contain confidential information and may be subject
to copyright or other intellectual property rights. It is only for the
use of the addressee(s). You may not copy, forward, disclose, save or
otherwise use it in any way if you are not the addressee(s) or
responsible for delivery. If you receive this email by mistake, please
advise the sender and cancel it immediately. Dusan B. Jovanovic may
monitor the content of emails within its network to ensure compliance
with its policies and procedures. Any email is susceptible to
alteration and its integrity cannot be assured. Dusan B. Jovanovic
shall not be liable if the message is altered, modified, falsified, or
edited.
--~--~-~--~~~---~--~~
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: feature request: retrieving :hover css properties
i'm just trying to be as semantically correct as possible.
say i want links to change their background color when the mouse passes over.
I can do it in css easily
a {
background-color:red;
}
a:hover{
background-color:green;
}
now, for those who have javascript, i want the color change to be an
animated color blend, from red to green.
I can of course retrieve the target color (green in this example) by
storing it via metadata, a custom attribute or the data attribute.
However, strictly speaking, its correct place is the css file itself,
where all styling should be.
that's why i wanted to know if i can have access to the css properties
set in the stylesheet for the :hover pseudo class.
On Thu, Mar 26, 2009 at 11:55 AM, DBJDBJ dbj...@gmail.com wrote:
CSS properties, classes and/or pseudo clases are not available to
javascript.
They are availabel to DOM which is available to javascript.
onmousover event is triggered when mouse pointer starts hovering
over an element.
This means that this event is in a hovered state. I do not
understand why are you trying
and what (sorry ;) but I can imagine code like this :
element.onmouseover = function ( event )
{
try {
element.hovered = true ;
} finally {
element.hovered = false ;
}
}
quick and dirty, though ...
On Mar 26, 10:11 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
thanks all for your replies. I couldn't make it work. In fact i wonder
if the css property for :hover is available for javascript at all, if
the :hover state is not triggered. Would there be a workaround?
On Wed, Mar 25, 2009 at 5:36 PM, DBJ dbj...@gmail.com wrote:
I would also suggest looking into this page:
http://james.padolsey.com/javascript/extending-jquerys-selector-capab...
and this plugin
http://plugins.jquery.com/project/EnhancedAttributeSelectors
although it (still) does not do exactly what you want ...
Regards
2009/3/25 Richard D. Worth rdwo...@gmail.com:
You may want to look at this plugin by Ariel Flesler for accessing css
rules:
http://plugins.jquery.com/project/Rule
http://flesler.blogspot.com/2007/11/jqueryrule.html
- Richard
On Wed, Mar 25, 2009 at 2:42 AM, Alexandre Plennevaux
aplennev...@gmail.com wrote:
hello!
i first posted this in the mailing list but no replies tells me my answer
is no, so this becomes a feature request
imagine i style the :hover pseudo-class of an element via css:
.myitem{
background-color:green;
}
.myitem:hover{
background-color:red
}
Is it possible to retrieve the background-color property of the
elemnent's :hover class via jquery?
i tried the obvious :http://jsbin.com/idudi/edit
$(function(){
var temp = $('#myitem:hover').css('
background-color');
alert(color is +temp);
});
But that didn't work. It returns the default state.
the reason i'm asking this feature, is because semantically/structurally,
the best place to store a css property is obviously in the CSS, not in
some
sort of metadata.
It occurred me while doing an interaction prototype for my school website
:http://pixeline.be/test/heaj/colormap/colorfade.html
each link has its background color fade to a custom color. I could only
store it as metadata or custom attribute, i wish i could have just
retrieved
it from the css.
thank you for listening !
Alexandre
--
Dusan Jovanovic
http://dbj.org
-
html e-mail is expensive ™
This email originates from Dusan B. Jovanovic. It, and any
attachments, may contain confidential information and may be subject
to copyright or other intellectual property rights. It is only for the
use of the addressee(s). You may not copy, forward, disclose, save or
otherwise use it in any way if you are not the addressee(s) or
responsible for delivery. If you receive this email by mistake, please
advise the sender and cancel it immediately. Dusan B. Jovanovic may
monitor the content of emails within its network to ensure compliance
with its policies and procedures. Any email is susceptible to
alteration and its integrity cannot be assured. Dusan B. Jovanovic
shall not be liable if the message is altered, modified, falsified, or
edited.
--~--~-~--~~~---~--~~
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] Need help with an IE issue (of course!)
Hi,
I normally bebug my code myself, cos I believe it helps me improve
myself, but here I just can't figure it out.
basically I am writing a JQuery plugin, that JQuery plugin generate a
bit of code that I then eval later. The code is a casacde of getScript
with some initialization command being trigger in the middle (when all
the getScript are finished)
To make my life easy I thought I use $.globalEval(code) to make sure
it works accross all browsers. Like expected no issue with safari 3,
safari 4, FF2 or FF3 but as soon as i tried my test page on IE7
everything broke...
And of course I get the well know and very easy to debug error
80020101.
1. It's not because of comment (none used anywhere)
2. I have tried:
eval(code)
eval(code,$)
window.eval(code)
execScript(code)
window.execScript(code)
window['code'] = code; window.eval(window['code'])
window['code'] = code; eval(window['code'])
window['code'] = code; window.execScript(window['code'])
window['code'] = code; execScript(window['code'])
and many other approach I fund during my search (window.eval || eval)
(code try {} catch {} etc
(debugging IE so tried any stupid way I could think off too which
would explain some of the non-valid example above, I was desperate
lol)
3. I have checked and checked the code I am trying to eval and I just
don't get it, I am pretty sure it's not a JQuery bug of course, but as
I am trying to do this via JQuery it give me an excuse to come and ask
the JQuery community and team where the best javascript developers
are! (kissing asses sometimes help :p)
Here is the code I am trying to eval:
Unformatted (I tried sending it using return carriage, compressed,
with space none of them works)
$.getScript('js/ui.core.js',function(){
$.getScript('js/ui.dialog.js',function(){
$.getScript('js/ui.tabs.js',function(){
$.getScript('js/ui.datepicker.js',function(){
$.getScript('js/ui.resizable.js',function(){
$.getScript('js/ui.accordion.js',function(){
$('#foo1').dialog({ bgiframe:
true, height: 140, modal:
true });
$('#foo2').tabs({});
$('#date1').datepicker({altField: '#alt',
altFormat: 'DD, d MM, yy'});
$('#foo3').resizable({
maxHeight: 280, maxWidth: 440, minHeight:
155, minWidth: 200 });
$('#foo4').accordion({ icons: {
'header': 'ui-icon-plus',
'headerSelected': 'ui-icon-minus' } });
});
});
});
});
});
});
4. One last thing that is weird, also nothing and nothing at all
change sometimes it return an object doesn't support this property
error instead
Here is the code building the code to eval:
// Start creating the code to be eval at the end ( we cascade
getScript)
for (i = 0; i jsl; i++) code += '$.getScript(\''+file[i]+'.js
\',function(){';
// Add our init functions (we are inside the callback function of the
last getScript)
if (init.length 0) code += init.join('; ')+';';
// Close all our getScripts
for (i = 0; i jsl; i++) code += '});';
then just
$.globalEval(code);
to call it (used to test for ie, but got nothing that work with it, so
no real point until I can debug the issue.
If anyone can help please let me know I will really appreciate.
Thanks in advance.
--~--~-~--~~~---~--~~
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: Sly, yet anoyther selector engine
Hello - Interesting work, congrats! A couple quick points: Kind of disconcerting that it's actually not being integrated into another library - that's where much of the hard part comes from (and speed degradation). It's also curious because the MooTools team complained when I compared Sizzle to MooTools rather than Sizzle to just the MooTools selector engine. Being able to see those results would be interesting. Finally, the lack of unit tests is really worrying: http://github.com/digitarald/sly/blob/4224ff310ab5ce91b398270f3dbd6d39a7590f5d/Specs/Utilities/Sly.js For example, right now the jQuery test suite includes hundreds of obscure and difficult problems that we need to work around - we took much of our performance hit in getting those right (not to mention, integrating them directly in to another framework). --John On Wed, Mar 25, 2009 at 10:44 PM, Harald K m...@digitarald.de wrote: Hi jQuery devs, I just released a (probably useful) piece of JavaScript that may concern your selector interested developers. Performance is outstanding in all cases, it is only 3kb, framework-agnostic and easy to implement and to extend. Announcement: http://digitarald.de/journal/89737433/rolling-out-sly-the-javascript-selector-engine/ Slickspeed: http://digitarald/repos/sly/speed/index.php Source Documentation: http://github.com/digitarald/sly/tree/master Any feedback is welcome. --~--~-~--~~~---~--~~ 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: feature request: retrieving :hover css properties
What I've used to grab styles from the stylesheets (though never for
pseudo classes; please try it!) is:
function getStyle (selector){
var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|
$)');
var style = ;
each ($.makeArray(document.styleSheets), function(){
each (this.cssRules || this.rules, function(){
if (re.test(this.selectorText)) style +=
this.style.cssText + ';';
});
});
return style;
}
and use getStyle('a:hover')
This is simplified; it doesn't handle @import and @media or escape
special characters, but it ought to work.
Danny
On Mar 26, 6:22 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
i'm just trying to be as semantically correct as possible.
say i want links to change their background color when the mouse passes over.
I can do it in css easily
a {
background-color:red;
}
a:hover{
background-color:green;
}
now, for those who have javascript, i want the color change to be an
animated color blend, from red to green.
I can of course retrieve the target color (green in this example) by
storing it via metadata, a custom attribute or the data attribute.
However, strictly speaking, its correct place is the css file itself,
where all styling should be.
that's why i wanted to know if i can have access to the css properties
set in the stylesheet for the :hover pseudo class.
--~--~-~--~~~---~--~~
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: jQuery performance listners
Not sure I see what you mean by JQuery allowing you to not have any even listener in your HTML document, you can do the same from pure javascript as well. After yes JQuery will be heavier on your page, depending on your project, if you use only 2 event listener going pure javascript would be lighter than calling JQuery on your page alone... ..but the beauty of JQuery is not about the event listener it provides, it's about all the check and other compatibility issues it ressolve automatically for you :) But remember, JQuery IS Javascript so you are using Javascript for the event listeners ;) On Mar 23, 10:53 pm, egranville mai...@granville.nl wrote: I don't know if my question is in the right spot here. I'm curious about the impact on the performance using event listners has. I love the fact that jquery functionality can be added to a html inferface without any actually any javascript in the html document. We do this by using the event listners provided by jQuery. But how heavy is this on the browser? --~--~-~--~~~---~--~~ 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: feature request: retrieving :hover css properties
tried it but it returns an error, about the each()
see tweak : http://jsbin.com/avoxu
On Thu, Mar 26, 2009 at 2:00 PM, Danny d.wac...@prodigy.net wrote:
What I've used to grab styles from the stylesheets (though never for
pseudo classes; please try it!) is:
function getStyle (selector){
var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|
$)');
var style = ;
each ($.makeArray(document.styleSheets), function(){
each (this.cssRules || this.rules, function(){
if (re.test(this.selectorText)) style +=
this.style.cssText + ';';
});
});
return style;
}
and use getStyle('a:hover')
This is simplified; it doesn't handle @import and @media or escape
special characters, but it ought to work.
Danny
On Mar 26, 6:22 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
i'm just trying to be as semantically correct as possible.
say i want links to change their background color when the mouse passes over.
I can do it in css easily
a {
background-color:red;
}
a:hover{
background-color:green;
}
now, for those who have javascript, i want the color change to be an
animated color blend, from red to green.
I can of course retrieve the target color (green in this example) by
storing it via metadata, a custom attribute or the data attribute.
However, strictly speaking, its correct place is the css file itself,
where all styling should be.
that's why i wanted to know if i can have access to the css properties
set in the stylesheet for the :hover pseudo class.
--~--~-~--~~~---~--~~
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] this as element
Hi, Let's look at this sample $(div span).css(border, 3px double red); This works ok. I need to do something like above with 'this'. I can not find a good syntax for that. $(this , span).css(border, 3px double red); not works $(this span).css(border, 3px double red); not works .. How can I fix the problem ? Thanks Hamazasp Avetisyan --~--~-~--~~~---~--~~ 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: replaceClass
As for .replaceClass I still don't see a point. If
.removeClass(foo).addClass(bar); is doing bad performance things, then
those performance things should be fixed. I find the case to be trivial
in comparison to how much is already done in JS to do anything else.
like I said, probably a bit nitpicking but no matter how you fix the
performance issue in removeClass addClass, chaining them for a simple
replace is twice the work on the class attribute of the node.
$(node).removeClass('color-black color-white color-blue
color-green').addClass('color-white');
I think multiple classes are supported in removeClass already.
yes, definitely is. Though with current implentation, your example is
equivalent to:
$(node).removeClass('color-black').removeClass('color-white').removeClass('color-blue').removeClass('color-green').addClass('color-white')
Oh well ;)
-- Julian
2009/3/26 Daniel Friesen nadir.seen.f...@gmail.com
Your original example was confusing. If you just have buttons that
change the background colors you don't even need to bother with the filter.
$(node).removeClass('color-black color-white color-blue
color-green').addClass('color-white');
I think multiple classes are supported in removeClass already. But the
regex idea is a possibility.
As for .replaceClass I still don't see a point. If
.removeClass(foo).addClass(bar); is doing bad performance things, then
those performance things should be fixed. I find the case to be trivial
in comparison to how much is already done in JS to do anything else.
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
Julian Aubourg wrote:
$(node).filter('.color-black').removeClass('color-black').addClass('color-white').end()
And you find that more readable than
$(node).replaceClass('color-black','color-white') ? ;)
The main issue here is that I dunno what the class will be in the first
place. I just know it will be color-XXX but I have no idea what the XXX
is. All I have are clickable elements that basically say: set backroung
to
red, set background to green, etc etc. It could also be set
background
to image1 and font-weight to bold or anything else, the point is I'm not
supposed to know the exact changes it is supposed to do visually to the
targeted element (that's the whole point: keeping the style info in the
css
and use classes to switch the visual properties).
So clearly, the first step is to find which of the color-XXX the element
is
tagged with, then replace it with color-YYY as asked by the other
clickable
element. So, yes, regexp support on hasClass / removeClass would be
greatly
appreciated (you don't wanna know how horrible my current code is --
basically relying on ids and a secondary structure to keep track of the
actual color class -- hence duplicating the information).
Now, onto the replaceClass. Well, node.removeClass(X).addClass(Y) is
basically:
- 1 split of X to arrayX
- 1 split of Y to arrayY
- (arrayX.length + arrayY.length) splits of the node's class attribute
- (arrayX.length + arrayY.length) times searches in the resulting split
On a side note, I don't even get why add and remove actually delegate to
jQuery.classname.has() knowing the function does a split of the class
attribute each time it is called rather then splitting the class
attribute
themselves and be done with it once and for all. It sure saves some bytes
in
the filesize department but it does not seem right to me from a
performance
point of view.
Even if removeClass and addClass only did one split of the class
attribute
each, it would still be one split too many for a replacement.
All I'm saying in the end is that a replaceClass() function would be
simpler
in usage and much more efficient (depending on the performance penalty of
a
regexped split) than chaining removeClass() and addClass().
I guess that, today, most people do set style properties manually but
class
switching is so much more elegant, solid (since you don't have to keep
track
of which style properties were set previously so that you reset them
before
applying new ones) and efficient (you only change a string portion in an
attribute and you don't have to go through jQuery's style engine). I'm
just
a bit puzzled jQuery makes it difficult by design in that it does not
provide regexp support for class search and forces into an efficient
solution to change a class for another.
Probably nitpicking anyway but then again, I'm just telling because I
have a
real-life case on the table right now ;)
Oh well, I guess it's time to make another plugin no-one will use apart
from
me ;)
Thanks for the feedback, Dan,
-- Julian
2009/3/26 Daniel Friesen nadir.seen.f...@gmail.com
Having .hasClass / .removeClass support regex has been discussed before,
there is a ticket open for one of them so it might be a possibility.
I don't see much use for replaceClass, rather I think the
[jquery-dev] Re: this as element
Thank you very much ! Best regards, Hamazasp Avetisyan On Thu, Mar 26, 2009 at 7:01 PM, John Resig jere...@gmail.com wrote: A couple ways: $(this).find( span) or $(this).children(span) or $( span, this) The second one will probably work best. --John On Thu, Mar 26, 2009 at 9:41 AM, hamazasp.avetisyan hamazasp.avetis...@gmail.com wrote: Hi, Let's look at this sample $(div span).css(border, 3px double red); This works ok. I need to do something like above with 'this'. I can not find a good syntax for that. $(this , span).css(border, 3px double red); not works $(this span).css(border, 3px double red); not works .. How can I fix the problem ? Thanks Hamazasp Avetisyan --~--~-~--~~~---~--~~ 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: replaceClass
If all your class have the same prefix you could also use CSS3
selectors like class^=color-]
So $('class^=color-]').each(function() {
$(this).removeClass(this.className);
});
Haven't tried it and I am tried, but that should remove all classes
starting with color-foo, not sure if it is what you are looking for
but thought it might help :)
On Mar 26, 3:29 pm, Julian Aubourg aubourg.jul...@gmail.com wrote:
As for .replaceClass I still don't see a point. If
.removeClass(foo).addClass(bar); is doing bad performance things, then
those performance things should be fixed. I find the case to be trivial
in comparison to how much is already done in JS to do anything else.
like I said, probably a bit nitpicking but no matter how you fix the
performance issue in removeClass addClass, chaining them for a simple
replace is twice the work on the class attribute of the node.
$(node).removeClass('color-black color-white color-blue
color-green').addClass('color-white'); I think multiple classes are
supported in removeClass already.
yes, definitely is. Though with current implentation, your example is
equivalent to:
$(node).removeClass('color-black').removeClass('color-white').removeClass('color-blue').removeClass('color-green').addClass('color-white')
Oh well ;)
-- Julian
2009/3/26 Daniel Friesen nadir.seen.f...@gmail.com
Your original example was confusing. If you just have buttons that
change the background colors you don't even need to bother with the filter.
$(node).removeClass('color-black color-white color-blue
color-green').addClass('color-white');
I think multiple classes are supported in removeClass already. But the
regex idea is a possibility.
As for .replaceClass I still don't see a point. If
.removeClass(foo).addClass(bar); is doing bad performance things, then
those performance things should be fixed. I find the case to be trivial
in comparison to how much is already done in JS to do anything else.
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
Julian Aubourg wrote:
$(node).filter('.color-black').removeClass('color-black').addClass('color-white').end()
And you find that more readable than
$(node).replaceClass('color-black','color-white') ? ;)
The main issue here is that I dunno what the class will be in the first
place. I just know it will be color-XXX but I have no idea what the XXX
is. All I have are clickable elements that basically say: set backroung
to
red, set background to green, etc etc. It could also be set
background
to image1 and font-weight to bold or anything else, the point is I'm not
supposed to know the exact changes it is supposed to do visually to the
targeted element (that's the whole point: keeping the style info in the
css
and use classes to switch the visual properties).
So clearly, the first step is to find which of the color-XXX the element
is
tagged with, then replace it with color-YYY as asked by the other
clickable
element. So, yes, regexp support on hasClass / removeClass would be
greatly
appreciated (you don't wanna know how horrible my current code is --
basically relying on ids and a secondary structure to keep track of the
actual color class -- hence duplicating the information).
Now, onto the replaceClass. Well, node.removeClass(X).addClass(Y) is
basically:
- 1 split of X to arrayX
- 1 split of Y to arrayY
- (arrayX.length + arrayY.length) splits of the node's class attribute
- (arrayX.length + arrayY.length) times searches in the resulting split
On a side note, I don't even get why add and remove actually delegate to
jQuery.classname.has() knowing the function does a split of the class
attribute each time it is called rather then splitting the class
attribute
themselves and be done with it once and for all. It sure saves some bytes
in
the filesize department but it does not seem right to me from a
performance
point of view.
Even if removeClass and addClass only did one split of the class
attribute
each, it would still be one split too many for a replacement.
All I'm saying in the end is that a replaceClass() function would be
simpler
in usage and much more efficient (depending on the performance penalty of
a
regexped split) than chaining removeClass() and addClass().
I guess that, today, most people do set style properties manually but
class
switching is so much more elegant, solid (since you don't have to keep
track
of which style properties were set previously so that you reset them
before
applying new ones) and efficient (you only change a string portion in an
attribute and you don't have to go through jQuery's style engine). I'm
just
a bit puzzled jQuery makes it difficult by design in that it does not
provide regexp support for class search and forces into an efficient
solution to change a class for another.
Probably nitpicking anyway
[jquery-dev] Re: CONTEXT LOGIC
Example 1 is invalid jQuery.
Example 2's speed comparison to Example 3 is trivial. In fact Example 2
has an advantage to it. Do remember IE6's bug with getElementById,
jQuery's selectors have code to fix that bug.
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
DBJ wrote:
// jq132-vsdoc.js, line # 145
return jQuery(context).find(selector);
From this one might draw following Conclusions :
C1: if context is not a dom document jQ will find things faster
because the scope of the search is narrow(er)
C2: if context above is a single dom node (aka element) jQ will
find things the fastest, please refer to: jq132-vsdoc.js, line # 107
(please everyone use this structure in a discussion :
body
span id='people'
span id='person' name='john' /span
span id='person' name='bad robot' /span
!-- and so on --
/span
/body
)
We are in the royal mess because we have no crystal clear and
unambigious terminology here. On top of that one important term is
missing:
SCOPE.
Right now we have this (by now apparently) ambiguous term: CONTEXT.
Sometimes it is (acts like, is used for) scope and sometime it does not.
1 :: $([name], #people ) // CONTEXT
(internaly: selector := #people [name], context := document )
2 :: $([name], $(#people) ) // SCOPE
(internaly: selector := [name], context := element with id 'people' )
3 :: $([name], document.getElementByID(people) ) // SCOPE
(internaly: selector := [name], context := element with id 'people' )
Do we all agree with the above? If not we have to, I think.
Furthermore. Line 3:: above is the fastest possible $() , because it
boils down to :
$( document.getElementByID(people)).find([name]) ;
This provides immediate and narrow scope for Sizzle to work in.
(reminder: jQuery.find = Sizzle )
And last but not the least :o)
Please refer to : jq132-vsdoc.js, line # 100
What am I asking for is to enforce this in jQuery. Nothing much and
nothing else. So :
$( selector:string, context:string )
Should be forbidden. should throw an exception.
The non-enforcing style of jQuery sometimes bears no fruit. The above
line is now possible, same as just saying : $() , because jQuery
authors think it is a good thing not to slap junior or senior but
lazy jQuery users, when they do these kind of coding.
But. It is a fact that companies are using jQuery. The more they use
it, the more problems they have with code that uses context in a wrong
way. And. 90% of coders actualyl use no context at all. The badly
written code mushroms and slows things down exponentially. One way out
if that (mess?) would be to enforce proper usage of context and define
the term SCOPE. Explain it to people and gently force them to use it.
2009/3/26 Daniel Friesen nadir.seen.f...@gmail.com:
I disagree. First thing to note is there are two definitions of context.
jQuery(selector).context; And jQuery(selector, context);
They are two different things which overlap just a bit.
jQuery(selector).context; Is the document context. It is the only
context that is stored in jQuery.
jQuery(selector, context); Is a node/document context for the query.
It's primary purpose is to establish document context so that jQuery
knows what document (current document, an iframe, another frameset) to
perform selectors in and use when constructing new document nodes to
insert. It does have the ability to be used to limit the scope of a
query, however that is unintuitive and makes programs confusing to read.
Your pagination example would be better handled in a different way:
$('.pagination .pagelist'); // jQuery selectors are not single-level.
Don't think everything needs to be separated into contexts. Most of the
time it doesn't
var pagination = $('.pagination');
$(pagination).find('.pagelist'); // $(selector, context); is just an
alias to $(context).find(selector); don't abuse it in ways that don't
make sense
pagination.find('.pagelist'); // Your use of another jQuery selector is
completely unnecessary anyways, you already have a jQuery object just
use .find
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
chris thatcher wrote:
I'm trying to follow this thread but it's a little loose so apologies if I'm
missing the point.
The only thing I want to disagree with is the last point. it doesnt matter
whether the context is a class or id. The context's function is to reduce
the scope of the selectors search, and the primary reason for that is simply
performance.
I know there are many signatures for $, but when providing a selector and
context the primary goal is to reduce the scope of the current selector.
There are plenty of cases where the context is a large set of nodes.
For example I might need to modify a portion of the dom that represents a
pagination interface that is provided at the top and bottom of the
interface. So I create a contect based on the class representing the
interface. Say
[jquery-dev] reference to undefined property jQuery.cache[id][name] for large element
I am using a jquery plugin (liquid canvas) to round the corners of a div after page load, it works great in Firefox, IE 6 7 . However on certain pages this div is populated with a lot of data which makes it a very long div (many page scrolls) and it breaks firefox with this Jquery error: reference to undefined property jQuery.cache[id][name] (like 679 of jquery-1.2.6.js) I am assuming this is because of the size, because it only happens when the div is very long, it works fine in IE 6 and IE 7... I disabled firebug and HTML tidy incase they were interfering... Help --~--~-~--~~~---~--~~ 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: reference to undefined property jQuery.cache[id][name] for large element
Also if I change strict warnings in Firefox to false I no longer get this message, but then my jquery function fails anyway... On Mar 26, 11:19 am, hassafrass emma.ir...@gmail.com wrote: I am using a jquery plugin (liquid canvas) to round the corners of a div after page load, it works great in Firefox, IE 6 7 . However on certain pages this div is populated with a lot of data which makes it a very long div (many page scrolls) and it breaks firefox with this Jquery error: reference to undefined property jQuery.cache[id][name] (like 679 of jquery-1.2.6.js) I am assuming this is because of the size, because it only happens when the div is very long, it works fine in IE 6 and IE 7... I disabled firebug and HTML tidy incase they were interfering... Help --~--~-~--~~~---~--~~ 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: reference to undefined property jQuery.cache[id][name] for large element
updated to 1.3.2 same problem. On Mar 26, 11:45 am, hassafrass emma.ir...@gmail.com wrote: Also if I change strict warnings in Firefox to false I no longer get this message, but then my jquery function fails anyway... On Mar 26, 11:19 am, hassafrass emma.ir...@gmail.com wrote: I am using a jquery plugin (liquid canvas) to round the corners of a div after page load, it works great in Firefox, IE 6 7 . However on certain pages this div is populated with a lot of data which makes it a very long div (many page scrolls) and it breaks firefox with this Jquery error: reference to undefined property jQuery.cache[id][name] (like 679 of jquery-1.2.6.js) I am assuming this is because of the size, because it only happens when the div is very long, it works fine in IE 6 and IE 7... I disabled firebug and HTML tidy incase they were interfering... Help --~--~-~--~~~---~--~~ 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: feature request: retrieving :hover css properties
Yes this is what it does
$.makeArray(document.styleSheets)
create an array which is use and looped by the each function, the
function is executed on each element in their order in the array.
It can be an heavy work around if the number of stylesheets is
massive, small loop don't add too much time to the process.
On Mar 26, 1:29 pm, Alexandre Plennevaux aplennev...@gmail.com
wrote:
arf how stupid of me, thanks for the head up, this works:
function getStyle (selector){
var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|$)');
var style = ;
$.each ($.makeArray(document.styleSheets), function(){
$.each (this.cssRules || this.rules, function(){
if (re.test(this.selectorText)) style += this.style.cssText + ';';
});
});
return style;
}
var temp = getStyle('#myitem:hover');
alert(css= +temp);
live here:http://jsbin.com/itipo
still, that's a heavy work around for something that i assumed would
be stored in memory. If i understand correctly you parse through each
css file, right?
On Thu, Mar 26, 2009 at 2:19 PM, Gilles gil...@netxtra.net wrote:
Try changing to JQuery.each() instead (or $.each, but I believe it's
JQuery.each()) in this case
On Mar 26, 1:12 pm, Alexandre Plennevaux aplennev...@gmail.com
wrote:
tried it but it returns an error, about the each()
see tweak :http://jsbin.com/avoxu
On Thu, Mar 26, 2009 at 2:00 PM, Danny d.wac...@prodigy.net wrote:
What I've used to grab styles from the stylesheets (though never for
pseudo classes; please try it!) is:
function getStyle (selector){
var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|
$)');
var style = ;
each ($.makeArray(document.styleSheets), function(){
each (this.cssRules || this.rules, function(){
if (re.test(this.selectorText)) style +=
this.style.cssText + ';';
});
});
return style;
}
and use getStyle('a:hover')
This is simplified; it doesn't handle @import and @media or escape
special characters, but it ought to work.
Danny
On Mar 26, 6:22 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
i'm just trying to be as semantically correct as possible.
say i want links to change their background color when the mouse passes
over.
I can do it in css easily
a {
background-color:red;
}
a:hover{
background-color:green;
}
now, for those who have javascript, i want the color change to be an
animated color blend, from red to green.
I can of course retrieve the target color (green in this example) by
storing it via metadata, a custom attribute or the data attribute.
However, strictly speaking, its correct place is the css file itself,
where all styling should be.
that's why i wanted to know if i can have access to the css properties
set in the stylesheet for the :hover pseudo class.
--~--~-~--~~~---~--~~
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: feature request: retrieving :hover css properties
the $.makeArray(document.styleSheets) is to get around a bug in IE
(http://dev.jquery.com/ticket/4366).
This code does not parse the CSS; the styleSheets collection is the
already-parsed rules that the browser applies. See
http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript for an
introduction.
On Mar 26, 8:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
arf how stupid of me, thanks for the head up, this works:
function getStyle (selector){
var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|$)');
var style = ;
$.each ($.makeArray(document.styleSheets), function(){
$.each (this.cssRules || this.rules, function(){
if (re.test(this.selectorText)) style += this.style.cssText + ';';
});
});
return style;
}
var temp = getStyle('#myitem:hover');
alert(css= +temp);
live here:http://jsbin.com/itipo
still, that's a heavy work around for something that i assumed would
be stored in memory. If i understand correctly you parse through each
css file, right?
On Thu, Mar 26, 2009 at 2:19 PM, Gilles gil...@netxtra.net wrote:
Try changing to JQuery.each() instead (or $.each, but I believe it's
JQuery.each()) in this case
On Mar 26, 1:12 pm, Alexandre Plennevaux aplennev...@gmail.com
wrote:
tried it but it returns an error, about the each()
see tweak :http://jsbin.com/avoxu
On Thu, Mar 26, 2009 at 2:00 PM, Danny d.wac...@prodigy.net wrote:
What I've used to grab styles from the stylesheets (though never for
pseudo classes; please try it!) is:
function getStyle (selector){
var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|
$)');
var style = ;
each ($.makeArray(document.styleSheets), function(){
each (this.cssRules || this.rules, function(){
if (re.test(this.selectorText)) style +=
this.style.cssText + ';';
});
});
return style;
}
and use getStyle('a:hover')
This is simplified; it doesn't handle @import and @media or escape
special characters, but it ought to work.
Danny
On Mar 26, 6:22 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
i'm just trying to be as semantically correct as possible.
say i want links to change their background color when the mouse passes
over.
I can do it in css easily
a {
background-color:red;
}
a:hover{
background-color:green;
}
now, for those who have javascript, i want the color change to be an
animated color blend, from red to green.
I can of course retrieve the target color (green in this example) by
storing it via metadata, a custom attribute or the data attribute.
However, strictly speaking, its correct place is the css file itself,
where all styling should be.
that's why i wanted to know if i can have access to the css properties
set in the stylesheet for the :hover pseudo class.
--~--~-~--~~~---~--~~
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: feature request: retrieving :hover css properties
ok, so if i understand this correctly, this method does not bring in a
heavy overhead?
On Thu, Mar 26, 2009 at 10:51 PM, Danny d.wac...@prodigy.net wrote:
the $.makeArray(document.styleSheets) is to get around a bug in IE
(http://dev.jquery.com/ticket/4366).
This code does not parse the CSS; the styleSheets collection is the
already-parsed rules that the browser applies. See
http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript for an
introduction.
On Mar 26, 8:29 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
arf how stupid of me, thanks for the head up, this works:
function getStyle (selector){
var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|$)');
var style = ;
$.each ($.makeArray(document.styleSheets), function(){
$.each (this.cssRules || this.rules, function(){
if (re.test(this.selectorText)) style += this.style.cssText + ';';
});
});
return style;
}
var temp = getStyle('#myitem:hover');
alert(css= +temp);
live here:http://jsbin.com/itipo
still, that's a heavy work around for something that i assumed would
be stored in memory. If i understand correctly you parse through each
css file, right?
On Thu, Mar 26, 2009 at 2:19 PM, Gilles gil...@netxtra.net wrote:
Try changing to JQuery.each() instead (or $.each, but I believe it's
JQuery.each()) in this case
On Mar 26, 1:12 pm, Alexandre Plennevaux aplennev...@gmail.com
wrote:
tried it but it returns an error, about the each()
see tweak :http://jsbin.com/avoxu
On Thu, Mar 26, 2009 at 2:00 PM, Danny d.wac...@prodigy.net wrote:
What I've used to grab styles from the stylesheets (though never for
pseudo classes; please try it!) is:
function getStyle (selector){
var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|
$)');
var style = ;
each ($.makeArray(document.styleSheets), function(){
each (this.cssRules || this.rules, function(){
if (re.test(this.selectorText)) style +=
this.style.cssText + ';';
});
});
return style;
}
and use getStyle('a:hover')
This is simplified; it doesn't handle @import and @media or escape
special characters, but it ought to work.
Danny
On Mar 26, 6:22 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
i'm just trying to be as semantically correct as possible.
say i want links to change their background color when the mouse
passes over.
I can do it in css easily
a {
background-color:red;
}
a:hover{
background-color:green;
}
now, for those who have javascript, i want the color change to be an
animated color blend, from red to green.
I can of course retrieve the target color (green in this example) by
storing it via metadata, a custom attribute or the data attribute.
However, strictly speaking, its correct place is the css file itself,
where all styling should be.
that's why i wanted to know if i can have access to the css properties
set in the stylesheet for the :hover pseudo class.
--~--~-~--~~~---~--~~
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: feature request: retrieving :hover css properties
I honestly have never profiled it, so I don't know. It does not involve any AJAX or other additional http access. It does n regular expression comparisions, where n is the number of CSS rules in all your stylesheets. On Mar 26, 7:05 pm, Alexandre Plennevaux aplennev...@gmail.com wrote: ok, so if i understand this correctly, this method does not bring in a heavy overhead? --~--~-~--~~~---~--~~ 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] height() is wrong in Firefox for tables with captions
Sample page: http://youngisrael-stl.org/wordpress/blogfiles/tableheight.html Firefox does not include the caption in offsetHeight for tables (works correctly in IE and Chrome). This is not a jQuery bug, but it might be worth working around in the height() function. Does anyone know where to submit a bug report on Firefox? Danny --~--~-~--~~~---~--~~ 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] Ajax Partial downloading
Hello Everyone,
How about adding a partial callback function to the ajax options that
will be called whenever the ready state is changed to interactive (3).
This would only wok for text/html data types.
Example:
$.ajax({
url:'process.php',
partial: function(data) {
$('#status').text(data)
}
});
PS. it appears that state 3 is supported by major browsers:
http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_notes_r_2.html
__
Raymond Irving
Create Rich PHP Web Apps Today!
Raxan PDI - http://raxanpdi.com/
--~--~-~--~~~---~--~~
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: replaceClass
So, I talked about making a plugin I would be the only one to use, didn't I?
;)
http://www.tfuture.org/julian/jquery.classname.js
The test page is here:
http://www.tfuture.org/julian/classname.htmlhttp://www.tfuture.org/julian/jquery.classname.js
(I borrowed a piece of internet from a friend)
The plugin replaces jQuery.className and .hasClass(), .addClass(),
.removeClass(). It also adds .replaceClass(). The thing is, it enables
regexps so you can do something like .removeClass(/color\-.*/) and it will
work. I'm currently thinking about re-implementing .toggleClass() using the
same implementation trick.
So anyway, what is the trick?
Rather than splitting the classNames given AND the element.className, I
transform the classNames into a single regular expression that's
matched/used onto element.className. The beauty of it is, using this
technique I can take regexps or strings as classNames, it just works. Also,
the regexp is computed only once per call to every xxxClass() method but
that's a trick that could be applied onto the current implementation.
Now my real problem is that I try get timings comparisons and I can't get
it right. Results change given the order in which you do the tests Oo. I
probably made a huge mistake in the way I handled my timers but it's like
4am and an half here in Paris and my eyes just refuse to find the problem
(ANY HELP IS WELCOME ;) ).
Sad about the timer thingy because at first glance it seemed to be a 20%
performance gain on a single node. I'm pretty confident that the new
implementations are at least on par with current ones (save from hasClass,
given it uses .is() actually) but I'd like to be sure.
-- Julian
2009/3/26 Julian Aubourg aubourg.jul...@gmail.com
$(node).filter('.color-black').removeClass('color-black').addClass('color-white').end()
And you find that more readable than
$(node).replaceClass('color-black','color-white') ? ;)
The main issue here is that I dunno what the class will be in the first
place. I just know it will be color-XXX but I have no idea what the XXX
is. All I have are clickable elements that basically say: set backroung to
red, set background to green, etc etc. It could also be set background
to image1 and font-weight to bold or anything else, the point is I'm not
supposed to know the exact changes it is supposed to do visually to the
targeted element (that's the whole point: keeping the style info in the css
and use classes to switch the visual properties).
So clearly, the first step is to find which of the color-XXX the element is
tagged with, then replace it with color-YYY as asked by the other clickable
element. So, yes, regexp support on hasClass / removeClass would be greatly
appreciated (you don't wanna know how horrible my current code is --
basically relying on ids and a secondary structure to keep track of the
actual color class -- hence duplicating the information).
Now, onto the replaceClass. Well, node.removeClass(X).addClass(Y) is
basically:
- 1 split of X to arrayX
- 1 split of Y to arrayY
- (arrayX.length + arrayY.length) splits of the node's class attribute
- (arrayX.length + arrayY.length) times searches in the resulting split
On a side note, I don't even get why add and remove actually delegate to
jQuery.classname.has() knowing the function does a split of the class
attribute each time it is called rather then splitting the class attribute
themselves and be done with it once and for all. It sure saves some bytes in
the filesize department but it does not seem right to me from a performance
point of view.
Even if removeClass and addClass only did one split of the class attribute
each, it would still be one split too many for a replacement.
All I'm saying in the end is that a replaceClass() function would be
simpler in usage and much more efficient (depending on the performance
penalty of a regexped split) than chaining removeClass() and addClass().
I guess that, today, most people do set style properties manually but class
switching is so much more elegant, solid (since you don't have to keep track
of which style properties were set previously so that you reset them before
applying new ones) and efficient (you only change a string portion in an
attribute and you don't have to go through jQuery's style engine). I'm just
a bit puzzled jQuery makes it difficult by design in that it does not
provide regexp support for class search and forces into an efficient
solution to change a class for another.
Probably nitpicking anyway but then again, I'm just telling because I have
a real-life case on the table right now ;)
Oh well, I guess it's time to make another plugin no-one will use apart
from me ;)
Thanks for the feedback, Dan,
-- Julian
2009/3/26 Daniel Friesen nadir.seen.f...@gmail.com
Having .hasClass / .removeClass support regex has been discussed before,
there is a ticket open for one of them so it might be a possibility.
I don't see much use for
[jquery-dev] Re: replaceClass
And gmail borked the sample page link :/
http://www.tfuture.org/julian/classname.html
2009/3/27 Julian Aubourg aubourg.jul...@gmail.com
So, I talked about making a plugin I would be the only one to use, didn't
I? ;)
http://www.tfuture.org/julian/jquery.classname.js
The test page is here:
http://www.tfuture.org/julian/classname.htmlhttp://www.tfuture.org/julian/jquery.classname.js
(I borrowed a piece of internet from a friend)
The plugin replaces jQuery.className and .hasClass(), .addClass(),
.removeClass(). It also adds .replaceClass(). The thing is, it enables
regexps so you can do something like .removeClass(/color\-.*/) and it will
work. I'm currently thinking about re-implementing .toggleClass() using the
same implementation trick.
So anyway, what is the trick?
Rather than splitting the classNames given AND the element.className, I
transform the classNames into a single regular expression that's
matched/used onto element.className. The beauty of it is, using this
technique I can take regexps or strings as classNames, it just works. Also,
the regexp is computed only once per call to every xxxClass() method but
that's a trick that could be applied onto the current implementation.
Now my real problem is that I try get timings comparisons and I can't get
it right. Results change given the order in which you do the tests Oo. I
probably made a huge mistake in the way I handled my timers but it's like
4am and an half here in Paris and my eyes just refuse to find the problem
(ANY HELP IS WELCOME ;) ).
Sad about the timer thingy because at first glance it seemed to be a 20%
performance gain on a single node. I'm pretty confident that the new
implementations are at least on par with current ones (save from hasClass,
given it uses .is() actually) but I'd like to be sure.
-- Julian
2009/3/26 Julian Aubourg aubourg.jul...@gmail.com
$(node).filter('.color-black').removeClass('color-black').addClass('color-white').end()
And you find that more readable than
$(node).replaceClass('color-black','color-white') ? ;)
The main issue here is that I dunno what the class will be in the first
place. I just know it will be color-XXX but I have no idea what the XXX
is. All I have are clickable elements that basically say: set backroung to
red, set background to green, etc etc. It could also be set background
to image1 and font-weight to bold or anything else, the point is I'm not
supposed to know the exact changes it is supposed to do visually to the
targeted element (that's the whole point: keeping the style info in the css
and use classes to switch the visual properties).
So clearly, the first step is to find which of the color-XXX the element
is tagged with, then replace it with color-YYY as asked by the other
clickable element. So, yes, regexp support on hasClass / removeClass would
be greatly appreciated (you don't wanna know how horrible my current code is
-- basically relying on ids and a secondary structure to keep track of the
actual color class -- hence duplicating the information).
Now, onto the replaceClass. Well, node.removeClass(X).addClass(Y) is
basically:
- 1 split of X to arrayX
- 1 split of Y to arrayY
- (arrayX.length + arrayY.length) splits of the node's class attribute
- (arrayX.length + arrayY.length) times searches in the resulting split
On a side note, I don't even get why add and remove actually delegate to
jQuery.classname.has() knowing the function does a split of the class
attribute each time it is called rather then splitting the class attribute
themselves and be done with it once and for all. It sure saves some bytes in
the filesize department but it does not seem right to me from a performance
point of view.
Even if removeClass and addClass only did one split of the class attribute
each, it would still be one split too many for a replacement.
All I'm saying in the end is that a replaceClass() function would be
simpler in usage and much more efficient (depending on the performance
penalty of a regexped split) than chaining removeClass() and addClass().
I guess that, today, most people do set style properties manually but
class switching is so much more elegant, solid (since you don't have to keep
track of which style properties were set previously so that you reset them
before applying new ones) and efficient (you only change a string portion in
an attribute and you don't have to go through jQuery's style engine). I'm
just a bit puzzled jQuery makes it difficult by design in that it does not
provide regexp support for class search and forces into an efficient
solution to change a class for another.
Probably nitpicking anyway but then again, I'm just telling because I have
a real-life case on the table right now ;)
Oh well, I guess it's time to make another plugin no-one will use apart
from me ;)
Thanks for the feedback, Dan,
-- Julian
2009/3/26 Daniel Friesen nadir.seen.f...@gmail.com
Having
[jquery-dev] Re: replaceClass
It may seem conter-intuitive but, in the end, the less you handle within the
VM the better. Since I want to support regexps, why make some special code
with branching and javascript based handling just for simple strings.
See, your code does apply a regexp on node.className. It should also split
the classNames parameter (because you can have multiple class names) and so
apply a regexp onto it. Except you will have to loop through the resulting
array in the VM and make everything a regexp could do by hand. The string
parameter transformed to a regexp applied onto node.className does all of
this. So in the end, transforming the string into a regexp, as complicated
and stupid as it seems, means less time within the VM and more within
built-in (compiled) functions. And, of course, on top of that, I don't have
custom code just for strings but common ground for both strings regexps
which is an asset from a maintenance point of view.
I'm not saying my solution is faster but I somehow doubt it is much slower
if at all, especially given assigning node.className seems to be the
bottleneck here.
Have you tried the sample page?
2009/3/27 Daniel Friesen nadir.seen.f...@gmail.com
Transforming every simple class check into a regex? That sounds like a
horribly roundabout way to do something extremely simple.
What happened to good old classic string testing? ( + this.className
+ ).indexOf( foo );
A tiny bit of trickery, and that could be turned into a good possibility.
( + node.className.replace(/\s+/, ) + ).indexOf( + className
+ );
~Daniel Friesen (Dantman, Nadir-Seen-Fire)
Julian Aubourg wrote:
And gmail borked the sample page link :/
http://www.tfuture.org/julian/classname.html
2009/3/27 Julian Aubourg aubourg.jul...@gmail.com
So, I talked about making a plugin I would be the only one to use,
didn't
I? ;)
http://www.tfuture.org/julian/jquery.classname.js
The test page is here: http://www.tfuture.org/julian/classname.html
http://www.tfuture.org/julian/jquery.classname.js
(I borrowed a piece of internet from a friend)
The plugin replaces jQuery.className and .hasClass(), .addClass(),
.removeClass(). It also adds .replaceClass(). The thing is, it enables
regexps so you can do something like .removeClass(/color\-.*/) and it
will
work. I'm currently thinking about re-implementing .toggleClass() using
the
same implementation trick.
So anyway, what is the trick?
Rather than splitting the classNames given AND the element.className, I
transform the classNames into a single regular expression that's
matched/used onto element.className. The beauty of it is, using this
technique I can take regexps or strings as classNames, it just works.
Also,
the regexp is computed only once per call to every xxxClass() method but
that's a trick that could be applied onto the current implementation.
Now my real problem is that I try get timings comparisons and I can't
get
it right. Results change given the order in which you do the tests Oo. I
probably made a huge mistake in the way I handled my timers but it's
like
4am and an half here in Paris and my eyes just refuse to find the
problem
(ANY HELP IS WELCOME ;) ).
Sad about the timer thingy because at first glance it seemed to be a 20%
performance gain on a single node. I'm pretty confident that the new
implementations are at least on par with current ones (save from
hasClass,
given it uses .is() actually) but I'd like to be sure.
-- Julian
2009/3/26 Julian Aubourg aubourg.jul...@gmail.com
$(node).filter('.color-black').removeClass('color-black').addClass('color-white').end()
And you find that more readable than
$(node).replaceClass('color-black','color-white') ? ;)
The main issue here is that I dunno what the class will be in the first
place. I just know it will be color-XXX but I have no idea what the
XXX
is. All I have are clickable elements that basically say: set
backroung to
red, set background to green, etc etc. It could also be set
background
to image1 and font-weight to bold or anything else, the point is I'm
not
supposed to know the exact changes it is supposed to do visually to the
targeted element (that's the whole point: keeping the style info in the
css
and use classes to switch the visual properties).
So clearly, the first step is to find which of the color-XXX the
element
is tagged with, then replace it with color-YYY as asked by the other
clickable element. So, yes, regexp support on hasClass / removeClass
would
be greatly appreciated (you don't wanna know how horrible my current
code is
-- basically relying on ids and a secondary structure to keep track of
the
actual color class -- hence duplicating the information).
Now, onto the replaceClass. Well, node.removeClass(X).addClass(Y) is
basically:
- 1 split of X to arrayX
- 1 split of Y to arrayY
- (arrayX.length + arrayY.length) splits of the
