19 svar · 637 visningar · startad av Asa
Jag skulle behöva en kod som gör precis som det när ovanför meddelandefältet här på webforum. Smileyikonen får ju en listruta med bild och text som visas i en listruta. Jag behöver en precis sådan som sedan skickar ner koden till meddelandefältet när man väljer den.
Har försökt kika hur det är gjort på denna sidan men är mycket filer och vet inte vad som hör till vad. Behöver något enklare med mindre kod till tack.
Tack på förhand för er hjälp.
Tack så mycket :) Men det visas dock ej i en listruta.. Men får kika på det med divs och så..
Jag har gjort så här men jag vill att diven som smileysarna är i kommer ovanpå textarean. Är det möjligt? Nu kommer den under. Fel fel...
<script type="text/javascript">
function showhide(divid){
thediv = document.getElementById(divid);
if(thediv.style.display== 'none' ){
thediv.style.display='block'
}else{
thediv.style.display='none'
}
}
var cPos,
fObj,
ieC = Boolean(document.selection && document.selection.createRange);
function smilie(str) {
if (ieC) {
if (typeof cPos != "undefined")
cPos.text = str;
else
fObj.value = str;
}
else if (typeof window.HTMLTextAreaElement != "undefined")
fObj.value = fObj.value.substring(0, fObj.selectionStart) + str + fObj.value.substring(fObj.selectionEnd);
else fObj.value += str;
}
function sC() {
cPos = document.selection.createRange().duplicate();
}
window.onload = function() {
fObj = document.forms["form1"].elements["texten"];
if (ieC) {
fObj.onclick = function() { sC(); }
fObj.onkeyup = function() { sC(); }
fObj.onselect = function() { sC(); }
}
}
</script>
<style>
.dropdown{
border:1px solid #000000;
position:absolute;
background:#c2c9d1;
height: 100px;
width: 180px;
overflow: auto;
z-index:1000;
padding:2px;
}
.dropdown ul{
margin:0px;
padding:0px;
}
.dropdown ul li{
list-style:none;
}
.dropdown ul li{
text-decoration:none;
color:#4b4e55;
display:block;
height:21px;
}
</style>
<form name="form1" id="form1">
<div id="div2">
<a href="#" onClick="showhide('div1')"><img src="../ikoner/glad1.png" border="0"></a><br />
<textarea type="text" name="texten" rows="10" cols="65"></textarea>
</div>
<div id="div1" class="dropdown" style="display:none;">
<ul>
<li><a href="#" onclick="smilie('<img>blixt</img>'); return false;"><img src="../ikoner/blixt.png" border="0"></a> <img>blixt</img></li>
<li><a href="#" onclick="smilie('<img>bok</img>'); return false;"><img src="../ikoner/bok.png" border="0"></a> <img>bok</img></li>
<li><a href="#" onclick="smilie('<img>clock</img>'); return false;"><img src="../ikoner/clock.png" border="0"></a> <img>clock</img></li>
<li><a href="#" onclick="smilie('<img>cup</img>'); return false;"><img src="../ikoner/cup.png" border="0"></a> <img>cup</img></li>
<li><a href="#" onclick="smilie('<img>date</img>'); return false;"><img src="../ikoner/date.png" border="0"></a> <img>date</img></li>
<li><a href="#" onclick="smilie('<img>dator</img>'); return false;"><img src="../ikoner/dator.png" border="0"></a> <img>dator</img></li>
<li><a href="#" onclick="smilie('<img>flag</img>'); return false;"><img src="../ikoner/flag.png" border="0"></a> <img>flag</img></li>
<li><a href="#" onclick="smilie('<img>glad1</img>'); return false;"><img src="../ikoner/glad1.png" border="0"></a> <img>glad1</img></li>
<li><a href="#" onclick="smilie('<img>glad2</img>'); return false;"><img src="../ikoner/glad2.png" border="0"></a> <img>glad2</img></li>
<li><a href="#" onclick="smilie('<img>handla</img>'); return false;"><img src="../ikoner/handla.png" border="0"></a> <img>handla</img></li>
<li><a href="#" onclick="smilie('<img>heart</img>'); return false;"><img src="../ikoner/heart.png" border="0"></a> <img>heart</img></li>
<li><a href="#" onclick="smilie('<img>kamera</img>'); return false;"><img src="../ikoner/kamera.png" border="0"></a> <img>kamera</img></li>
<li><a href="#" onclick="smilie('<img>lampa</img>'); return false;"><img src="../ikoner/lampa.png" border="0"></a> <img>lampa</img></li>
<li><a href="#" onclick="smilie('<img>ledsen</img>'); return false;"><img src="../ikoner/ledsen.png" border="0"></a> <img>ledsen</img></li>
<li><a href="#" onclick="smilie('<img>mobil</img>'); return false;"><img src="../ikoner/mobil.png" border="0"></a> <img>mobil</img></li>
<li><a href="#" onclick="smilie('<img>moln</img>'); return false;"><img src="../ikoner/moln.png" border="0"></a> <img>moln</img></li>
<li><a href="#" onclick="smilie('<img>molning</img>'); return false;"><img src="../ikoner/molning.png" border="0"></a> <img>molning</img></li>
<li><a href="#" onclick="smilie('<img>mote</img>'); return false;"><img src="../ikoner/mote.png" border="0"></a> <img>mote</img></li>
<li><a href="#" onclick="smilie('<img>musik</img>'); return false;"><img src="../ikoner/musik.png" border="0"></a> <img>musik</img></li>
<li><a href="#" onclick="smilie('<img>oops</img>'); return false;"><img src="../ikoner/oops.png" border="0"></a> <img>oops</img></li>
<li><a href="#" onclick="smilie('<img>regn</img>'); return false;"><img src="../ikoner/regn.png" border="0"></a> <img>regn</img></li>
<li><a href="#" onclick="smilie('<img>sno</img>'); return false;"><img src="../ikoner/sno.png" border="0"></a> <img>sno</img></li>
<li><a href="#" onclick="smilie('<img>sol</img>'); return false;"><img src="../ikoner/sol.png" border="0"></a> <img>sol</img></li>
<li><a href="#" onclick="smilie('<img>sport</img>'); return false;"><img src="../ikoner/sport.png" border="0"></a> <img>sport</img></li>
<li><a href="#" onclick="smilie('<img>star</img>'); return false;"><img src="../ikoner/star.png" border="0"></a> <img>star</img></li>
<li><a href="#" onclick="smilie('<img>tarta</img>'); return false;"><img src="../ikoner/tarta.png" border="0"></a> <img>tarta</img></li>
<li><a href="#" onclick="smilie('<img>tel</img>'); return false;"><img src="../ikoner/tel.png" border="0"></a> <img>tel</img></li>
<li><a href="#" onclick="smilie('<img>tunga</img>'); return false;"><img src="../ikoner/tunga.png" border="0"></a> <img>tunga</img></li>
<li><a href="#" onclick="smilie('<img>tv</img>'); return false;"><img src="../ikoner/tv.png" border="0"></a> <img>tv</img></li>
<li><a href="#" onclick="smilie('<img>va</img>'); return false;"><img src="../ikoner/va.png" border="0"></a> <img>va</img></li>
</ul>
</div>
</form>
Originalkoden här:
http://cssdesigner.wordpress.com/2008/10/23/onclick-textbox-show-div/
Du har inte satt ut några positioner med din position: absolute (top: 0; left:0 osv)
din #div2 kan ha position: relative, och placera in din .dropdown div inne i den så kan du positionera ut ifrån det.
Okej, tackar :)
Kan man föra om så att samma smileyfunktion kan användas för flera formulär på samma sida? Som det är nu går det inte...
Det går, men då få du göra någon referens och binda alla dina textareas (fObj sätts i onloaden i exemplet) skall se om jag kan göra någon jQuery version av det (enklast tycker jag :P )
Okej.. Tackar för det :)
http://voigt.se/sandbox/wf/asa/
allt i klassen dropDown li span text är det som kommer att infogas in i textboxarna nu.
Tackar :)
Hoppas jag inte är jobbig nu men kan man göra om så man slipper ha med koden för varje smiley och enbart visa bilderna? Så skickar <img>blixt</img> iallafall till textarean?
sätt en CSS på att dölja <span> elementet i dropdown, eller alt texten på bilden, beskriv exakt hur du skulle vilja ha din HTML kod så kan vi se vad man kan göra.
Jag tror nog jag vill att de skall kunna listas på bredden och när dropdown rutan tar slut så bryts raden automatiskt. Eller ett fast antal smileys per rad. Det som funkar bäst.. Typ så som nedan..
X X X X X X
X X X X X X
X X X X X X
X X X X X X
Det är inte det jag frågar, det är design bit du tar upp, det går att CSS:ar till det, men jag undra hur du vill ha för HTML struktur.
Varje textarea kommer ligga inom en <td></td> tagg. Har en kalender som listas som en vanlig månadskalender med varje dag på en egen rad. Varje dag har en egen <form></form> tagg..
<tr>
<td>
Smiley Textarea Sparaknapp
</td>
</tr>
Nåt mer jag skall posta?
Är inte riktigt det jag är ute efter (fortfarande).. men jag gjorde om javascriptet att den tar alt texten ifrån bilderna, det är det den kommer lägga in i textarean, och CSS:at om så att de listar webforums smilies med lite luft.
Tackar :) Sorry om jag inte fatta hur du menade .. det med HTML strukturen. Haha..
Frågan är hur och var ville du placera din text som skulle infogas, gjorde det till en Lista med bilder med en alt text.
Det ser perfekt ut nu som det är. Alt blir finfint.. :)