toggle met mootools
ik heb op jou site (phphulp.jorendewit.nl) es zitten kijken naar de broncode bij een script: ik heb een vraagje over het showen en hiden van die div's. Ik zie dat jij daar een javascriptje bij hebt gemaakt, die heb ik nu ook in mijn site, alleen de onclick van de <a> doet ie de functies nie :S Hoe komt dat of heb jij daar ook nog ander scriptwerk dan dat ene scriptje en die css?
link
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
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
<html>
<head>
<style>
.shown{
display: block;
}
.hidden{
display: none;
}
</style>
<script>
function toggle(e, target)
{
if(e.className == 'more')
{
e.className = 'less';
}
else
{
e.className = 'more';
}
if($(target).className == 'hidden')
{
$(target).className = 'shown';
}
else
{
$(target).className = 'hidden';
}
}
</script>
</head>
<body>
<div><a href='#' onclick='toggle(this, "content")' class='less'>Meer/minder</a></div>
<div id='content' class='shown'>Test Dit is een test ja dit is een test om te kijken of en waarom het niet werkt</div>
</body>
</html>
<head>
<style>
.shown{
display: block;
}
.hidden{
display: none;
}
</style>
<script>
function toggle(e, target)
{
if(e.className == 'more')
{
e.className = 'less';
}
else
{
e.className = 'more';
}
if($(target).className == 'hidden')
{
$(target).className = 'shown';
}
else
{
$(target).className = 'hidden';
}
}
</script>
</head>
<body>
<div><a href='#' onclick='toggle(this, "content")' class='less'>Meer/minder</a></div>
<div id='content' class='shown'>Test Dit is een test ja dit is een test om te kijken of en waarom het niet werkt</div>
</body>
</html>
wat doe ik verkeerd?
Gewijzigd op 01/01/1970 01:00:00 door Pieter Joordens
dat is een javascript dingentje (ben de technische naam even kwijt)
kijk ff op ttp://www.mootools.net je kunt er hele gave dingen mee doen
http://mootools.net/
Kijk eens op deze pagina: http://demos.mootools.net/ en lees daar even.
http://demos.mootools.net/Fx.Slide Deze toggle is zelfs nog korter als die van blanche
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
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
*
{
margin: 0;
padding: 0;
}
body
{
background-color: #84c984;
}
#GJ
{
position: absolute;
width: 100%;
text-align: center;
top: 25%;
}
</style>
<script type="text/javascript" src="<?php echo $conf['website']['link']; ?>js/mootools-release-1.11.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$('GJ').setStyle('display', 'none');
var wrapper = new Element('div', {
'styles': {
'position': 'absolute',
'overflow': 'visible',
'height': '1px',
'width': '100%',
'top': '50%'
},
'id': 'wrapper'
}).injectAfter('GJ');
var StartUpWindow = new Element('div', {
'styles': {
'position': 'absolute',
'background-color': '#71ab6b',
'top': '-100px',
'left': '50%',
'margin-left': '-150px',
'opacity': '0',
'text-align': 'center'
},
'id': 'StartUpWindow'
}).injectInside('wrapper');
$('StartUpWindow').effects({ duration: 2000, transition: Fx.Transitions.Bounce.easeOut }).start({
'width': 300,
'height': 200,
'opacity': 1
}).chain(function() {
new Element('form', {
'id': 'SUWform',
'action': '<?php echo $conf['website']['link']; ?>check.php',
'method': 'post'
}).injectInside('StartUpWindow');
new Element('p').setText('naam').injectInside('SUWform');
new Element('input', {
'type': 'text',
'name': 'naam'
}).injectInside('SUWform');
new Element('p').setText('wachtwoord').injectInside('SUWform');
new Element('input', {
'type': 'password',
'name': 'wachtwoord'
}).injectInside('SUWform');
new Element('input', {
'type': 'submit'
}).injectInside('SUWform');
$('SUWform').addEvent('submit', function(e) {
new Event(e).stop();
this.send({
onComplete: function() {
if(this.response.text == 'true') {
alert('ja');
} else {
alert('nee');
}
}
});
});
});
});
</script>
</head>
<body>
<h2 id="GJ">Sorry Javascript moet aan staan om deze webapplicatie te kunnen gebruiken.</h2>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
*
{
margin: 0;
padding: 0;
}
body
{
background-color: #84c984;
}
#GJ
{
position: absolute;
width: 100%;
text-align: center;
top: 25%;
}
</style>
<script type="text/javascript" src="<?php echo $conf['website']['link']; ?>js/mootools-release-1.11.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$('GJ').setStyle('display', 'none');
var wrapper = new Element('div', {
'styles': {
'position': 'absolute',
'overflow': 'visible',
'height': '1px',
'width': '100%',
'top': '50%'
},
'id': 'wrapper'
}).injectAfter('GJ');
var StartUpWindow = new Element('div', {
'styles': {
'position': 'absolute',
'background-color': '#71ab6b',
'top': '-100px',
'left': '50%',
'margin-left': '-150px',
'opacity': '0',
'text-align': 'center'
},
'id': 'StartUpWindow'
}).injectInside('wrapper');
$('StartUpWindow').effects({ duration: 2000, transition: Fx.Transitions.Bounce.easeOut }).start({
'width': 300,
'height': 200,
'opacity': 1
}).chain(function() {
new Element('form', {
'id': 'SUWform',
'action': '<?php echo $conf['website']['link']; ?>check.php',
'method': 'post'
}).injectInside('StartUpWindow');
new Element('p').setText('naam').injectInside('SUWform');
new Element('input', {
'type': 'text',
'name': 'naam'
}).injectInside('SUWform');
new Element('p').setText('wachtwoord').injectInside('SUWform');
new Element('input', {
'type': 'password',
'name': 'wachtwoord'
}).injectInside('SUWform');
new Element('input', {
'type': 'submit'
}).injectInside('SUWform');
$('SUWform').addEvent('submit', function(e) {
new Event(e).stop();
this.send({
onComplete: function() {
if(this.response.text == 'true') {
alert('ja');
} else {
alert('nee');
}
}
});
});
});
});
</script>
</head>
<body>
<h2 id="GJ">Sorry Javascript moet aan staan om deze webapplicatie te kunnen gebruiken.</h2>
</body>
</html>
Heb ik laatst gemaakt.. ben nog mee bezig hoor.. Voorbeeld: http://84.105.39.21/
Wachtwoord = test, naam = test
Gewijzigd op 01/01/1970 01:00:00 door Mebus Hackintosh
Sir Psycho Sexy schreef op 12.02.2008 19:29:
Ik ga Bb opbellen en die gaat je hacken, muhahaha! h4x0rzZz!
Je bent net terug van een ban begrijp ik. Wil je er weer eentje ofzo?
Poort 80 maar dichtgegooid stelletje hobbyloze mensen..
Gewijzigd op 01/01/1970 01:00:00 door Mebus Hackintosh
@sir psycho sexy: 3 woorden.. begint met het woord 'zoek'.. daarna komt het woord 'een' en als laatst 'leven'..
Snappie?
of moet het anders?
Rick schreef op 12.02.2008 19:46:
@mebus: mee eens.
@sir psycho sexy: 3 woorden.. begint met het woord 'zoek'.. daarna komt het woord 'een' en als laatst 'leven'..
Snappie?
@sir psycho sexy: 3 woorden.. begint met het woord 'zoek'.. daarna komt het woord 'een' en als laatst 'leven'..
Snappie?
Nee, leg uit...
SanThe schreef op 12.02.2008 19:31:
Je bent net terug van een ban begrijp ik. Wil je er weer eentje ofzo?
Sir Psycho Sexy schreef op 12.02.2008 19:29:
Ik ga Bb opbellen en die gaat je hacken, muhahaha! h4x0rzZz!
Je bent net terug van een ban begrijp ik. Wil je er weer eentje ofzo?
Ik ben net terug van een ban inderdaad. Is dat een dreigement ofzo?
Gewijzigd op 01/01/1970 01:00:00 door Sir Psycho Sexy
Code (php)
1
<script src="mootools-release-1.11.js" type="JavaScript"></script>
Dat zet je inderdaad tussen je header tags neer. En dan tussen het volgende komen alle javascripts te staan anders werkt mootools niet:
Code (php)
1
2
3
2
3
window.addEvent('domready', function() {
// HERE IS WHAT YOU READ IN JS CODE
});
// HERE IS WHAT YOU READ IN JS CODE
});
Sir Psycho Sexy schreef op 12.02.2008 19:50:
Ik ben net terug van een ban inderdaad. Is dat een dreigement ofzo?
Je mag het opvatten zoals je zelf graag wilt. Je bent in ieder geval weer behoorlijk irritant bezig.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src='./inc/functions.js' type='text/javascript' />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready( function () {
$("li.menu").hover(
function () {
// functie die wordt uitgevoerd bij mouseenter event
$(this).addClass("hover");
$(this).removeClass("menu");
},
function () {
// functie die wordt uitgevoerd bij mouseleave event
$(this).addClass("menu");
$(this).removeClass("hover");
}
);
});
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready( function () {
$("li.menu").hover(
function () {
// functie die wordt uitgevoerd bij mouseenter event
$(this).addClass("hover");
$(this).removeClass("menu");
},
function () {
// functie die wordt uitgevoerd bij mouseleave event
$(this).addClass("menu");
$(this).removeClass("hover");
}
);
});
</script>
dat zit onder andere in mijn head section(wel de enigste scripts). functions.js is het script dat ik van blanche z'n site heb gejat, die jquery is voor de mouseevents bij lists, en daar hoort de inline script ook bij... hoe en waar zet ik dan die scripts van mootools neer en waar het toggle script?
Gewijzigd op 01/01/1970 01:00:00 door Pieter Joordens
mod-edit:
Je weet dat je bumpt, en toch doe je het???
Gewijzigd op 01/01/1970 01:00:00 door Pieter Joordens