JavaScript/Notes/ClassnameSwap: Difference between revisions
Line 8: | Line 8: | ||
[[Image:https://noisebridge.net/wiki/File:Eventflow_.png|event flow]] | [[Image:https://noisebridge.net/wiki/File:Eventflow_.png|event flow]] | ||
[[File:Eventflow_.png]] | |||
Event flow example from Brainjar.com | Event flow example from Brainjar.com | ||
[http://www.brainjar.com/dhtml/events/default3.asp event phase] | [http://www.brainjar.com/dhtml/events/default3.asp event phase] |
Revision as of 17:14, 13 November 2013
ClassName Swap, Language Review, RTFM, by Garrett Smith
This class shows a simple, efficient trick using event bubbling and css cascade:
Lesson: DOM Event Flow
Event flow is defined by DOM Events specification DOM Event Flow event flow
Event flow example from Brainjar.com event phase
Lesson: CSS ClassName Swap
By changing an element's className
multiple styles can be changed at one time.
Using the descendant selector, and changing the className
of an ancestor element, multiple elements can be updated simultaneously, with a modicum of highly efficient code.
For Styles, replace a loop that applies styles to descendants by adding a class token to the nearest common ancestor (example, explanation).
Calculating Selector's Specificity (CSS 2.1).
The classname swap example leverages the fact that class selectors (e.g. .foo
) have higher specificity than element selectors (e.g. tr
).
CSS Selector specificity is determined four numbers, a-b-c-d, in a number system with a large base.
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) count the number of ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) count the number of element names and pseudo-elements in the selector (= d)
JavaScript Review
Functions
Specifications
Other versions of ECMAScript, including E4X and Compact, are out of scope for this class.
FAQ
FAQ, is currently being ported to Github! Get involved
Assignment
Based off of the example, create a table with headers that when clicked highlight the rows of that type.
For example, for a table with three headers: "word", "pdf", "html"; create a table that has rows of class "word", "pdf", and "html". The rows need not be distinguishable in their default state (they can all look the same). When the header is activated, highlight the row by changing its className.
The row types need not be mutually exclusive. For example, you could, for a row with class="word pdf" use purple, as: <source lang="css"> .word {
background-color: #00F;
}
.pdf {
background-color: #F00;
}
.pdf.word {
background-color: #D0D;
} </source>
<source lang="html4strict">
<thead></thead> <tbody>
Word | HTML | |
---|---|---|
Word |
</source>
Bonus: CSS Transitions
For bonus points, use CSS Transitions for the active state of the rows and buttons.
Extra Bonus: Gradients
Add CSS Gradients. Gradient editor