die ken ik ja, maar dat werkt dus helaas ook nergens
wat ik nu doe is het volgende
- onload alle elementen langslopen en kijken naar counter-reset en counter-increment style properties (de pseudoelementen sla ik over, maar eventueel zou je die erbij kunnen pakken)
- met behulp van die waarden een named array maken en die opslaan in elk element (alle subelementen van een hoofdstuk weten zo ook in welk hoofdstuk ze zitten)
- de css tellers gewoon hun werk laten doen, dit loopt dus compleet los van elkaar
vervolgens heb ik anchor elementen in de code a la:
HTML:
1
| <a rel="figure chapter.figure" href="#some_figure_id"></a> |
dat rel attribuut is dus wat speciaal, ik splits 'm op spaties, het eerste deel wordt een soort caption, het tweede deel is een expression die refereert naar de counters. Voor elk woorddeel (split(/\b/)) kijk ik of die key in de counter array van het targetelement staat, zoja, vervang ik het door de counter, zoniet, dan laat ik het woorddeel staan. De punt blijft in dit geval dus staan. Het resultaat plak ik als textnode in het a element.
Wat vinden jullie ervan? misschien een ander attribuut gebruiken? kan het netter? slimmer? meer richting css3 syntax wat blues schetst?
edit: code is alleen getest op firefox, enige wat voor mij effe van belang is, maar het idee moet overal wel werken als de css rules voor counterReset en counterIncrement tenminste uit te lezen zijn (gok: niet het geval in IE)
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| function applyCounters() {
var counters=[];
var all = document.getElementsByTagName('*');
for (var i=0; i<all.length; i++) {
s = getComputedStyle(all[i],'');
if (s.counterReset!='none') {
var cr = s.counterReset.split(' ');
for (var j=0; j<cr.length; j++) {
counters[cr[j]] = 1*cr[++j];
}
}
if (s.counterIncrement!='none') {
var ci = s.counterIncrement.split(' ');
for (var j=0; j<ci.length; j++) {
counters[ci[j]] += 1*ci[++j];
}
}
all[i].counter = counters.copy();
}
}
function linkCounters() {
var as = document.getElementsByTagName('a');
var types='equation|figure|table';
for (var i=0; i<as.length; i++) {
if (as[i].getAttribute('rel') && types.indexOf(as[i].getAttribute('rel').split(' ')[0])!==-1) {
var capt = as[i].rel.split(' ')[0];
var expr = as[i].rel.split(' ')[1].split(/\b/gi);
var target = document.getElementById(as[i].getAttribute('href').substring(1));
var val = '';
for (var j=0; j<expr.length; j++) val+=(target.counter[expr[j]])?target.counter[expr[j]]:expr[j];
as[i].appendChild(document.createTextNode(capt+' '+val));
}
}
} |
edit: iets aangepast, ik haal nu eerst de textnodes die al in de a bestaan weg, zo kan je bijvoorbeeld standaard linken naar "the figure below" en als deze hele reutemeteut werkt wordt dat dan vervangen door "figure 3.2" ofzo, beetje meer a la replaced content dus.
[
Voor 40% gewijzigd door
Verwijderd op 10-10-2006 15:31
]
/u/7685/ruinmytune-60x60.png?f=community)
