Mootools chain openen als pagina opent

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jimmy Arts

jimmy Arts

15/09/2008 18:25:00
Quote Anchor link
Hey,

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)
PHP script in nieuw venster Selecteer het PHP script
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
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>
 
PHP hulp

PHP hulp

28/03/2024 20:57:05
 
Jan Koehoorn

Jan Koehoorn

15/09/2008 18:27:00
Quote Anchor link
Zoiets:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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).');
        });
    });
});
 
Jan geen

Jan geen

15/09/2008 18:28:00
Quote Anchor link
window.addEvent('domready', function() {
// HERE IS WHAT YOU READ IN JS CODE
});
 
Jan Koehoorn

Jan Koehoorn

15/09/2008 18:31:00
Quote Anchor link
Het kan ook nog zo, dan hoeven ze niet eens op die link te klikken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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).');
    });
});
 
Jimmy Arts

jimmy Arts

15/09/2008 18:31:00
Quote Anchor link
Mm nu gebeurt er helemaal niets heb nu:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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>
 
Jan geen

Jan geen

15/09/2008 18:32:00
Quote Anchor link
Je moet het click event dan wel weglaten.

edit: Zie 2de reactie jan
Gewijzigd op 01/01/1970 01:00:00 door Jan geen
 
Jan Koehoorn

Jan Koehoorn

15/09/2008 18:35:00
Quote Anchor link
Of mijn tweede voorbeeld gebruiken.
 
Jimmy Arts

jimmy Arts

15/09/2008 18:52:00
Quote Anchor link
Dit is al mijn code en er gebeurt nog steeds niets...
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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;
}

In het mapje staan de volgende bestanden: demo.css, demo.js, index.html, mootools.js
 
Harmen

Harmen

16/09/2008 03:22:00
Quote Anchor link
Draai regel 44 en 45 om... Je hebt de mootools functies nodig voordat je je eigen JS begint
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.