Jquery geen flauw benul van
je klikt dan op een smiley en dan krijg je een lijst met afbeeldingen
als je daar dan op klikt dan komt er in het textvlak de :P ( ubbcode ) te staan
maar ik heb mischien 1% verstand van jquery en het is toch noodzakelijk om het te gebruiken
kan iemand mij dan helpen
als je de relevante code nodig hebt dan zal ik het plaatsen
Deze voegt tekst toe op de plek waar je cursor zit in een textarea.
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
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
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA/NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)
+ myValue
+ this.value.substring(endPos, this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA/NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)
+ myValue
+ this.value.substring(endPos, this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
Je roept hem zo op:
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function() {
$('a').click(function() {
$('textarea').insertAtCaret('text');
});
});
$('a').click(function() {
$('textarea').insertAtCaret('text');
});
});
En hoever ben je al met het smiley lijstje?
Dan kan je met jquery $('.dediv').show(); doen.
Je kan dit natuurlijk ook animeren of er een toggle aan vast zetten.
relevante 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
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<?php
//Deze functie hebben we later nodig voor de UBB code
Echo '
<script language="JavaScript">
function ubb() {
return;
}
function Invoegen2(ubb) {
var edit;
var HuidigeTekst = document.form1.news.value;
edit = HuidigeTekst+ubb+" ";
document.form1.news.value=edit;
document.form1.news.focus();
return;
}
</script>
';
?>
<?php
// Lees.php
// Database connectie maken met database
include('includes/conn.php');
include('includes/ubb.php');
// Alles uit db halen laatste bericht als eerste.
$sql = mysql_query("SELECT
*,
id
FROM
news
ORDER BY
id
DESC $pages->limit
");
// Als de query is gelukt
if($sql)
{
// Als er items zijn
if(mysql_num_rows($sql) > 0)
{
// Items neerzetten
while($rec = mysql_fetch_assoc($sql))
{
// Alles echoën
echo '<b>Naam:</b> '.$rec['user'];
Echo "<br>";
echo '<b>Gepost op:</b> '.$rec['datum'];
Echo "<br>";
Echo "<br>";
echo nl2br('<b>Bericht: </b>'.ubb_gastenboek($rec['news']));
// Lijntje
echo '<br><hr><br>';
}
}
// Anders
else
{
// Geen berichten
echo 'Er zijn nog geen nieuws berichten!.';
}
}
// Anders
else
{
// MySql error
echo 'Er is een fout opgetreden in de query: <br />';
echo mysql_error();
}
# Als er is gesubmit
if( $_SERVER['REQUEST_METHOD'] == 'POST' )
{
# Velden leeg check
if($_POST['user'] == "" )
{
$errors[] = 'Je bent je naam vergeten!';
}
if($_POST['news'] == "" )
{
$errors[] = 'laat het veld news niet leeg !';
}
if($_POST['news'] == "Typ hier je nieuws!" )
{
$errors[] = 'laat het veld news niet leeg !';
}
if( !isset( $errors ) )
{
$qry = "INSERT INTO
news
(
user,
news,
ip,
datum
)
VALUES
(
'".mysql_real_escape_string( $_POST['user'] )."',
'".mysql_real_escape_string( $_POST['news'] )."',
'".$_SERVER['REMOTE_ADDR']."',
NOW()
)";
if( mysql_query( $qry ) )
{
Echo "Het nieuw is succesvol verwerkt, bedankt voor je inzending!";
echo '
<form action="" method="post">
<label>Naam:</label>
<input type="text" size="12" maxlength="12" name="user">
<br />
<label>News:</label>
<textarea name="news" rows="4" cols="50">Typ hier je nieuws!</textarea>
<br />
<input type="submit" value="Post" name="Post">
</form>';
}
else
{
echo 'Foutjeee :( ' . mysql_error( );
}
}
else
{
foreach( $errors as $error )
{
echo $error.'<br />';
}
}
}
else
{
# Het formulier
?>
<table>
<TR><TD>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[b][/b]');">
<img src="http://www.phphulp.nl/img/icon/editor/bold.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[i][/i]');">
<img src="http://www.phphulp.nl/img/icon/editor/italic.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[u][/u]');">
<img src="http://www.phphulp.nl/img/icon/editor/underline.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[s][/s]');">
<img src="http://www.phphulp.nl/img/icon/editor/strikethrough.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[img][/img]');">
<img src="http://www.phphulp.nl/img/icon/editor/image.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[quote][/quote]');">
<img src="http://www.phphulp.nl/img/icon/editor/quote.gif" width="16px" height="16px" border="0">
</a>
<img src="http://www.mafiaway.nl/images/smilies/smilesmile.gif">
</TD></TR>
</table>
<?php
echo '
<form name="form1" action="" method="post">
<label>Naam:</label>
<input type="text" size="12" maxlength="12" name="user">
<br />
<label>News:</label>
<textarea name="news" rows="4" cols="50">Typ hier je nieuws!</textarea>
<br />
<input type="submit" value="Post" name="Post">
</form>
';
}
?>
//Deze functie hebben we later nodig voor de UBB code
Echo '
<script language="JavaScript">
function ubb() {
return;
}
function Invoegen2(ubb) {
var edit;
var HuidigeTekst = document.form1.news.value;
edit = HuidigeTekst+ubb+" ";
document.form1.news.value=edit;
document.form1.news.focus();
return;
}
</script>
';
?>
<?php
// Lees.php
// Database connectie maken met database
include('includes/conn.php');
include('includes/ubb.php');
// Alles uit db halen laatste bericht als eerste.
$sql = mysql_query("SELECT
*,
id
FROM
news
ORDER BY
id
DESC $pages->limit
");
// Als de query is gelukt
if($sql)
{
// Als er items zijn
if(mysql_num_rows($sql) > 0)
{
// Items neerzetten
while($rec = mysql_fetch_assoc($sql))
{
// Alles echoën
echo '<b>Naam:</b> '.$rec['user'];
Echo "<br>";
echo '<b>Gepost op:</b> '.$rec['datum'];
Echo "<br>";
Echo "<br>";
echo nl2br('<b>Bericht: </b>'.ubb_gastenboek($rec['news']));
// Lijntje
echo '<br><hr><br>';
}
}
// Anders
else
{
// Geen berichten
echo 'Er zijn nog geen nieuws berichten!.';
}
}
// Anders
else
{
// MySql error
echo 'Er is een fout opgetreden in de query: <br />';
echo mysql_error();
}
# Als er is gesubmit
if( $_SERVER['REQUEST_METHOD'] == 'POST' )
{
# Velden leeg check
if($_POST['user'] == "" )
{
$errors[] = 'Je bent je naam vergeten!';
}
if($_POST['news'] == "" )
{
$errors[] = 'laat het veld news niet leeg !';
}
if($_POST['news'] == "Typ hier je nieuws!" )
{
$errors[] = 'laat het veld news niet leeg !';
}
if( !isset( $errors ) )
{
$qry = "INSERT INTO
news
(
user,
news,
ip,
datum
)
VALUES
(
'".mysql_real_escape_string( $_POST['user'] )."',
'".mysql_real_escape_string( $_POST['news'] )."',
'".$_SERVER['REMOTE_ADDR']."',
NOW()
)";
if( mysql_query( $qry ) )
{
Echo "Het nieuw is succesvol verwerkt, bedankt voor je inzending!";
echo '
<form action="" method="post">
<label>Naam:</label>
<input type="text" size="12" maxlength="12" name="user">
<br />
<label>News:</label>
<textarea name="news" rows="4" cols="50">Typ hier je nieuws!</textarea>
<br />
<input type="submit" value="Post" name="Post">
</form>';
}
else
{
echo 'Foutjeee :( ' . mysql_error( );
}
}
else
{
foreach( $errors as $error )
{
echo $error.'<br />';
}
}
}
else
{
# Het formulier
?>
<table>
<TR><TD>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[b][/b]');">
<img src="http://www.phphulp.nl/img/icon/editor/bold.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[i][/i]');">
<img src="http://www.phphulp.nl/img/icon/editor/italic.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[u][/u]');">
<img src="http://www.phphulp.nl/img/icon/editor/underline.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[s][/s]');">
<img src="http://www.phphulp.nl/img/icon/editor/strikethrough.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[img][/img]');">
<img src="http://www.phphulp.nl/img/icon/editor/image.gif" width="16px" height="16px" border="0">
</a>
<a href="javascript:ubb();" onClick="javascript:Invoegen2('[quote][/quote]');">
<img src="http://www.phphulp.nl/img/icon/editor/quote.gif" width="16px" height="16px" border="0">
</a>
<img src="http://www.mafiaway.nl/images/smilies/smilesmile.gif">
</TD></TR>
</table>
<?php
echo '
<form name="form1" action="" method="post">
<label>Naam:</label>
<input type="text" size="12" maxlength="12" name="user">
<br />
<label>News:</label>
<textarea name="news" rows="4" cols="50">Typ hier je nieuws!</textarea>
<br />
<input type="submit" value="Post" name="Post">
</form>
';
}
?>
alvast bedankt :)
de smilies kan ik zelf wel maar het javascript lukt mij niet
ik heb eigenlijk nog nooit iets met jquery gedaan dus ik heb die 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
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
<script language="JavaScript">
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA/NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)
+ myValue
+ this.value.substring(endPos, this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
</script>
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA/NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)
+ myValue
+ this.value.substring(endPos, this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
</script>
die moet ik dan bovenin zetten? bij de andere of is dit al fout
en hoe moet
en dan hoe moet ik ervoor zorgen dat het werkt op de smiley van regel 184
dat is hetgene wat ik niet begrijp
ik denk dat ik het via<div> moet doen maar hoe pas ik het toe
Gewijzigd op 12/11/2010 15:32:10 door Jordi Kroon
Hier heb ik wat voorbeeldjes gemaakt van jQuery tooltip, met de tooltip functie:
http://waldio.110mb.com/js/tooltip.html
Je kan ook een tooltip makkelijk zelf maken met jQuery:
http://waldio.110mb.com/js/jQuery/tooltip_image.html
[PS]Wil je misschien precies uitleggen wat je wilt? Want dan kan ik wel even een jQ code voor je maken
Gewijzigd op 12/11/2010 15:38:05 door Wouter J
dan verschijnt er onder die smiley een soort balkje waar allemaal smileys op staan
dan kan je met je muis over die balk gaan waar de smileys in staan
dan klik je op die smiley die je wilt en dan komt hij in de textbox te staan
dan komt er dus een :P tekentje of een :B
Toevoeging op 12/11/2010 15:44:38:
ja klopt ik haal de plaatjes van phphulp omdat dat zegmaar de plaatjes van de bb codes zijn
je hebt je plaatje met een linkje voor je smiley.
je hebt een divje met alle smileys.
dat divje verstop je als je de pagina binnenkomt (display: none;). wanneer een persoon op het linkje klikt, dan laat je het divje zien mbv js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var toggle = 0;
if(je klik detectie ding)
{
if(toggle == 0)
{
// laat je het divje zien
toggle = 1;
}
else
{
// laat het divje weggaan
toggle = 0;
}
}
if(je klik detectie ding)
{
if(toggle == 0)
{
// laat je het divje zien
toggle = 1;
}
else
{
// laat het divje weggaan
toggle = 0;
}
}
Ontopic:
Jquery heeft ook documentatie, lezen is leren.
Gewijzigd op 13/11/2010 00:59:37 door Bas IJzelendoorn