-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsubtree modified.html
129 lines (111 loc) · 3.35 KB
/
subtree modified.html
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>subtree modified</title>
<style>
body
{
font-size: 80%;
}
#source
{
white-space: pre;
margin-left: 20px;
font-family: monaco;
font-size: 7pt;
border: solid 1px #888;
}
#dump
{
white-space: pre;
}
#escaped
{
white-space: normal;
color: #888;
font-family: helvetica neue;
position: absolute;
z-index: 1;
color: red;
}
span
{
position: relative;
z-index: 2;
}
#line-3, #line-4, #line-5
{
opacity: 0.1;
}
#line-6
{
edisplay: inline-block;
margin-top: -4em;
}
#line-6, #line-15
{
border: solid 1px lime;
background-color: rgba(255, 255, 255, 0.9);
}
#offseter
{
margin-top: 40px;
}
#offseter2
{
margin-top: -20px;
}
</style>
</head>
<body>
<h1>subtree modified</h1>
<div id='dump'>-</div>
<div id='dump2'>-</div>
<pre>
<script>
function subtreeModified()
{
document.getElementById('dump').innerHTML = 'DOM Changed at ' + (new Date()).getTime() + ' ' + event.target + '(' + event.nodeValue + ')'
}
var n = document.getElementById('source')
document.addEventListener("DOMSubtreeModified", subtreeModified, false)
function loadImage()
{
document.getElementById('img').src = 'file:///Users/mini/Pictures/iPhoto%20Library/Originals/2009/24%20mai%2009_4/Construction+Continues+Border+Fence+Drug+Violence+3wEcpcL3fR-l.jpg'
document.getElementById('dump2').innerHTML = (new Date()).getTime() + ' IMAGE LOAD'
}
setTimeout(loadImage, 1000)
</script>
</pre>
<div contentEditable='true' id='source'>
<span id='line-1'>line 1, this is some text</span>
<span id='line-2'>line 2, this is some text</span><div id='escaped' contentEditable='false'>
<h3>Hello !</h3>
<b>world :) Ceci est un test</b>
<img src='...' id='img' width='50'><- some image
</div>
<span id='line-3'>line 3, this is some text</span>
<span id='line-4'>line 4, this is some text</span>
<span id='line-5'>line 5, this is some text</span>
<div id='offseter' econtentEditable='false'></div><span id='line-6'>line 6, this is some text with a positive offset up</span>
<span id='line-7'>line 7, this is some text</span>
<span id='line-8'>line 8, <span contentEditable='false'><div style='position: absolute; border: solid 1px red; white-space: normal; font-family: helvetica neue'><h3>Hello absolute</h3></div></span>this is some text</span>
<span id='line-9'>line 9, this is some text</span>
<span id='line-10'>line 10, this is some text</span>
<span id='line-11'>line 11, this is some text</span>
<span id='line-12'>line 12, this is some text</span>
<span id='line-13'>line 13, this is some text</span>
<span id='line-14'>line 14, this is some text</span>
<div id='offseter2' econtentEditable='false'></div><span id='line-15'>line 15, this is some text with a negative offset up</span>
<span id='line-16'>line 16, this is some text</span>
<span id='line-17'>line 17, this is some text</span>
<span id='line-18'>line 18, this is some text</span>
<span id='line-19'>line 19, this is some text</span>
<span id='line-20'>line 20, this is some text</span>
</div>
<pre>
DOMSubtreeModified - only works on document ?
http://www.quirksmode.org/dom/events/index.html
</body>
</html>