[jQuery] Re: HTML Node
Rob Desbois wrote:
Just to extend on what Su said - you would never need a class or even ID
for the html tag because there *is* only one (or should be anyway!)
So, to target it with a CSS rule you just need:
html { /* ... */ }
But as he says, why would you need to target html not body?
Rob.
Even with a DOM ready event by attaching a flag to the HTML element it
is a faster way to apply degradable JS related styles to elements.
Take the tabs for example: Depending on what else is going on you may
notice a minimal flash of content there before they're initialized. Thus
there is the wish to have the content hidden until initialization is
done. But simply hiding relevant containers via CSS wouldn't degrade
gracefully in the JS off/CSS on scenario. The elements would be
inaccessible.
You could juse document.write a special JS related style sheet into the
head, but with that I encountered some timing issues in Safari for example.
There are solutions out there that attach a class like js to the body,
but that involves adding a script element after the opening body tag. Ugly.
Using the HTML element is better because it is also faster, you can
attach the flag immediatly before any other style sheet or javascript
has been loaded.
Cool, I did not do it because of the invalid class element on the the
html element, but never thought of the id...
-- Klaus
[jQuery] Re: HTML Node
Glen Lipka wrote:
div.foo.bar {} works perfectly in IE6, IE7, and FF.
No, unfortunately not. IE 6 does not support multiple class selectors.
This won't be noticed in some cases, because IE treats the
aforementioned selector like
div.bar {}
-- Klaus
[jQuery] Re: HTML Node
On 5/5/07, Glen Lipka [EMAIL PROTECTED] wrote: Unfortunately it seems that id is invalid as well: http://www.w3.org/TR/html401/struct/global.html#h-7.3 -- Klaus So I am back to where I started. Shouldn't put anything on the HTML tag and there is no AND operation in CSS. Seems like a blatant oversight by IE6 developers. They have OR with the comma, and no AND. B IE6. No. Klaus' link is to the the HTML 4 spec, in which case he is correct. Your original question indicated XHTML, in which case an ID on the HTML element is perfectly valid.
[jQuery] Re: HTML Node
The XHTML 1.0 strict DTD defines id as an attribute on the html node (I haven't looked at transitional or 1.1 strict) !ELEMENT html (head, body) !ATTLIST html %i18n; id ID #IMPLIED xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml' On May 5, 1:15 pm, Klaus Hartl [EMAIL PROTECTED] wrote: Su wrote: On 5/3/07, Glen Lipka [EMAIL PROTECTED] wrote: Can jQuery access the HTML node and add a class to it? Is this invalid XHTML? Class is invalid on the HTML element, but you /can/ assign an ID. Given that there should never be more than one HTML element in a doc, this is less a restriction than just proper behavior, if you really think about it. Unfortunately it seems that id is invalid as well:http://www.w3.org/TR/html401/struct/global.html#h-7.3 -- Klaus
[jQuery] Re: HTML Node
I wish there was a way in CSS to say div.foo *AND* div.bar {color:red}
The comma acts like an OR statement. Why isn't there an AND statement?
div.foo.bar {color: red}
[jQuery] Re: HTML Node
valid means passes the validater. it won't
works means works ... id'ing the html is weird, but should work in most
browsers
$(div.foo.bar) might look good but I don't think it works.
$(div.foo).filter(.bar) would be my choice to do an and.
$(div.bar,.foo) might get you there too.
On 5/4/07, Glen Lipka [EMAIL PROTECTED] wrote:
I'm curious why you're going up so far, though. What are you doing
that you couldn't just put a class on the body instead?
I figured out a different way to solve my original problem, however, here
was the circumstance. I am working on a large web 2.0 app. Its using Jack
Slocum's EXT framework as well as YUI and a bunch of third party packages.
One section is a Landing Page editor. It launches in a totally seperate
window as the main app. One feature is that part of the page has a
template which is base HTML that the customers provide. So one CSS file
that I work with is used for both windows. So I cant use HTML alone because
it's not specific enough.
So the problem arose when the customer had styling on the body. Their
CSS was coming first (for other reasons) so it was getting overwritten by
Jack Slocums class which was on the body. We need his body stuff for the
main app, but not the editor window. I was trying to figure out how to
differentiate BODY tags between the app and the Editor windows. I thought,
maybe I could put a class on HTM. I wish there was a way in CSS to say
div.foo *AND* div.bar {color:red}
The comma acts like an OR statement. Why isn't there an AND statement?
Anyway, I ended up using an EXT line in the JS to remove the offending
rule.
It's a little complicated, but I hope this helps clarify.
One question. Two answers here: It is Valid and it is NOT valid. Which
is the truth? It seems unorthadox to put an ID on an HTML tag, but I don't
see why it should be avoided if needed. (in rare circumstances)
Thanks for the help.
Glen
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
[jQuery] Re: HTML Node
On 5/4/07, Ⓙⓐⓚⓔ [EMAIL PROTECTED] wrote:
valid means passes the validater. it won't
works means works ... id'ing the html is weird, but should work in
most browsers
$(div.foo.bar) might look good but I don't think it works. --This
works! :)
$(div.foo).filter(.bar) would be my choice to do an and.
$(div.bar,.foo) might get you there too.
div.foo.bar {} works perfectly in IE6, IE7, and FF.
Holy Cow! Basic regular CSS. How did I not know this? How have I gone so
long and not known this?
This is HUGE. I have spent so many hours working around this problem. My
god. I am doofus!
WOW! I can't get over how big a deal this is. I just asked a bunch of
friends. They had no idea either.
You guys rock.
Glen
[jQuery] Re: HTML Node
I guess when John Resig says CSS descriptors he really means it
On 5/4/07, Glen Lipka [EMAIL PROTECTED] wrote:
On 5/4/07, Ⓙⓐⓚⓔ [EMAIL PROTECTED] wrote:
valid means passes the validater. it won't
works means works ... id'ing the html is weird, but should work in
most browsers
$(div.foo.bar) might look good but I don't think it works. --This
works! :)
$(div.foo).filter(.bar) would be my choice to do an and.
$(div.bar,.foo) might get you there too.
div.foo.bar {} works perfectly in IE6, IE7, and FF.
Holy Cow! Basic regular CSS. How did I not know this? How have I gone
so long and not known this?
This is HUGE. I have spent so many hours working around this problem. My
god. I am doofus!
WOW! I can't get over how big a deal this is. I just asked a bunch of
friends. They had no idea either.
You guys rock.
Glen
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
[jQuery] Re: HTML Node
http://www.bennadel.com/index.cfm?dax=blog:680.view
http://www.commadot.com/?p=529
so cool.
On 5/4/07, Ⓙⓐⓚⓔ [EMAIL PROTECTED] wrote:
I guess when John Resig says CSS descriptors he really means it
On 5/4/07, Glen Lipka [EMAIL PROTECTED] wrote:
On 5/4/07, Ⓙⓐⓚⓔ [EMAIL PROTECTED] wrote:
valid means passes the validater. it won't
works means works ... id'ing the html is weird, but should work
in most browsers
$(div.foo.bar) might look good but I don't think it works. --This
works! :)
$(div.foo).filter(.bar) would be my choice to do an and.
$(div.bar,.foo) might get you there too.
div.foo.bar {} works perfectly in IE6, IE7, and FF.
Holy Cow! Basic regular CSS. How did I not know this? How have I gone
so long and not known this?
This is HUGE. I have spent so many hours working around this problem.
My god. I am doofus!
WOW! I can't get over how big a deal this is. I just asked a bunch of
friends. They had no idea either.
You guys rock.
Glen
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
[jQuery] Re: HTML Node
On 5/4/07, Glen Lipka [EMAIL PROTECTED] wrote: One question. Two answers here: It is Valid and it is NOT valid. Which is the truth? It seems unorthadox to put an ID on an HTML tag, but I don't see why it should be avoided if needed. (in rare circumstances) Not sure if you meant me. I don't think I said it was invalid, just probably not generally necessary, since There Can Be Only One(HTML element). I suppose a case could come up at some point.
[jQuery] Re: HTML Node
On 5/4/07, Glen Lipka [EMAIL PROTECTED] wrote:
div.foo.bar {} works perfectly in IE6, IE7, and FF.
Holy Cow! Basic regular CSS. How did I not know this? How have I gone
so long and not known this?
This is HUGE. I have spent so many hours working around this problem. My
god. I am doofus!
Any browser worth caring about anymore, and even some of the earlier IE
versions handle multiple classes with no trouble at all. Now that you know,
it's probably going to become one of your favorite tricks. It becomes really
handy for things like blogs that have images positioned left, right, center
with shared styles(like borders), but sometimes the authors need to be able
to cancel out the borders. A standard set of rules for me when building a
site is:
img {basic border/background styling}
img.left {float left, direction-specific margins}
img.center {display as block, top/bottom margins}
img.right {float right, direction-specific margins}
img.noborder {border:none;}
And then the authors just use them as a modular set:
img class=left noborder /
[jQuery] Re: HTML Node
Hey Glen,
div.foo.bar {} works perfectly in IE6, IE7, and FF.
Beware of this CSS syntax does in IE6 (I'm not referring to the
jQuery selector of course; just the pure css selector). I've had
quite a few problems with it in the past.
I started putting together a test page to show you some issues with
it, but then I read the comments to Ben Nadel's post, and someone
linked to Eric Meyer's test page, so I'll just link to that one, too:
http://meyerweb.com/eric/css/tests/multiclass.html
Look at the same page in both Firefox (which gets it right) and IE6
(which doesn't).
Assigning multiple classes to elements works great. It's just
referring to multiple classes to apply styles that doesn't (in IE).
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On May 4, 2007, at 1:47 PM, Glen Lipka wrote:
On 5/4/07, Ⓙⓐⓚⓔ [EMAIL PROTECTED] wrote:
valid means passes the validater. it won't
works means works ... id'ing the html is weird, but should
work in most browsers
$(div.foo.bar) might look good but I don't think it works. --
This works! :)
$(div.foo).filter(.bar) would be my choice to do an and.
$(div.bar,.foo) might get you there too.
div.foo.bar {} works perfectly in IE6, IE7, and FF.
Holy Cow! Basic regular CSS. How did I not know this? How have I
gone so long and not known this?
This is HUGE. I have spent so many hours working around this
problem. My god. I am doofus!
WOW! I can't get over how big a deal this is. I just asked a
bunch of friends. They had no idea either.
You guys rock.
Glen
