Virusscanner tips?
Mootools chain openen als pagina opent
Ik gebruik het volgende script van mootools:
http://demos111.mootools.net/Chain
maar nu wil ik dat als de pagina word geopend dat dan de chain begint.
Code (php)
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
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
Js:
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('start').addEvent('click', function() {
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
Html:
<h3>Chaining</h3>
<p>Click <a id="start" href="#" name="start">start</a> to see a sequence of effects controlled by chain</p>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('start').addEvent('click', function() {
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
Html:
<h3>Chaining</h3>
<p>Click <a id="start" href="#" name="start">start</a> to see a sequence of effects controlled by chain</p>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>
Code (php)
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
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
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('start').addEvent('click', function() {
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
});
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('start').addEvent('click', function() {
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
});
// HERE IS WHAT YOU READ IN JS CODE
});
Code (php)
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
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
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
Code (php)
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
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
Js:
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('start').addEvent('click', function() {
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
});
Html:
<h3>Chaining</h3>
<p>Click <a id="start" href="#" name="start">start</a> to see a sequence of effects controlled by chain</p>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('start').addEvent('click', function() {
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
});
Html:
<h3>Chaining</h3>
<p>Click <a id="start" href="#" name="start">start</a> to see a sequence of effects controlled by chain</p>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>
edit: Zie 2de reactie jan
Gewijzigd op 01/01/1970 01:00:00 door Jan geen
Code (php)
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
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
Js:
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
Html:
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<style type="text/css" src="demo.css"></style>
<h3>Chaining</h3>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>
Css:
h3.section {
margin-top: 1em;
}
#vertical_slide, #horizontal_slide {
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
Html:
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<style type="text/css" src="demo.css"></style>
<h3>Chaining</h3>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>
Css:
h3.section {
margin-top: 1em;
}
#vertical_slide, #horizontal_slide {
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
In het mapje staan de volgende bestanden: demo.css, demo.js, index.html, mootools.js