This repository has been archived by the owner on May 6, 2024. It is now read-only.
/
index.html
66 lines (64 loc) · 2.63 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>waitforit.js: Wait for an Element</title>
<style>
html { font-family:Sans-Serif; font-size:75%; height:100%; }
body { _height:100%; line-height:180%; margin:0; min-height:100%; padding:1%; }
.example { max-width:960px; margin:0 auto; padding:0; clear:both; }
.example > article, .example > aside { width:98%; padding:2%; }
.example-left > article, .example-left > aside { width:48%; padding:1%; float:left; }
.example-right > article, .example-right > aside { width:48%; padding:1%; float:right; }
</style>
<!--[if lte IE 9]>
<meta http-equiv="imagetoolbar" content="no"/>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<![endif]-->
</head>
<body>
<section class="example example-right">
<article>
<h2>Wait for It</h2>
<p>Waits for an element to start existing.</p>
<p><a class="button downloadButton" href="http://github.com/WoollyMittens/useful-waitforit" target="_blank">Download (GitHub)</a></p>
</article>
<aside>
<!-- Cut below this -->
<script src="./js/waitforit.js"></script>
<div id="watchThis"></div>
<p><a class="button" href="#" onclick="document.getElementById('watchThis').innerHTML='<figure id=waitForThis><b>Hello World</b></figure>'">Insert the example HTML.</a></p>
<p><a class="button" href="#" onclick="document.getElementById('watchThis').innerHTML=''">Remove the example HTML.</a></p>
<script>
//<!--
new WaitForIt({
'target': '#watchThis',
'selector': '#waitForThis',
'repeat': true,
'handler': function(selection) {
// START EXAMPLE BLINK SCRIPT
console.log('handler:', selection);
// this example script will only work after the example HTML is added to the document
var _selection = selection[0];
var _interval = setInterval(function () {
if (_selection && _selection.offsetWidth > 0) {
_selection.style.color = '#' + (0x1000000 + Math.random() * 0xFFFFFF).toString(16).substr(1,6);
_selection.style.opacity = (_selection.style.opacity !== '0') ? '0' : '1';
} else {
clearInterval(_interval);
}
}, 1000);
_selection.style.fontSize = '2.4rem';
_selection.style.transition = 'all ease 500ms';
// END EXAMPLE BLINK SCRIPT
}
});
//-->
</script>
<!-- Cut above this -->
</aside>
</section>
</body>
</html>