---
title: "Smiley i listruta med bild och text"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/179434-smiley-i-listruta-med-bild-och-text"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Asa"
published: "2009-07-17T09:37:22.000Z"
updated: "2009-07-19T13:12:32.000Z"
replies: 19
views: 640
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/179434-smiley-i-listruta-med-bild-och-text"
---

# Smiley i listruta med bild och text

## #1 — Asa, 2009-07-17T09:37Z

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.

Permalänk: https://www.webforum.nu/p/179434

## #2 — voigtann1, 2009-07-17T09:45Z

<http://www.webforum.nu/showthread.php?t=129595&highlight=smilies>

Permalänk: https://www.webforum.nu/p/2193255

## #3 — Asa, 2009-07-17T10:14Z

Tack så mycket :) Men det visas dock ej i en listruta.. Men får kika på det med divs och så..

Permalänk: https://www.webforum.nu/p/2193260

## #4 — Asa, 2009-07-17T11:01Z

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('&lt;img&gt;blixt&lt;/img&gt;'); return false;"><img src="../ikoner/blixt.png" border="0"></a> &nbsp; &lt;img&gt;blixt&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;bok&lt;/img&gt;'); return false;"><img src="../ikoner/bok.png" border="0"></a> &nbsp; &lt;img&gt;bok&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;clock&lt;/img&gt;'); return false;"><img src="../ikoner/clock.png" border="0"></a> &nbsp; &lt;img&gt;clock&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;cup&lt;/img&gt;'); return false;"><img src="../ikoner/cup.png" border="0"></a> &nbsp; &lt;img&gt;cup&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;date&lt;/img&gt;'); return false;"><img src="../ikoner/date.png" border="0"></a> &nbsp; &lt;img&gt;date&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;dator&lt;/img&gt;'); return false;"><img src="../ikoner/dator.png" border="0"></a> &nbsp; &lt;img&gt;dator&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;flag&lt;/img&gt;'); return false;"><img src="../ikoner/flag.png" border="0"></a> &nbsp; &lt;img&gt;flag&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;glad1&lt;/img&gt;'); return false;"><img src="../ikoner/glad1.png" border="0"></a> &nbsp; &lt;img&gt;glad1&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;glad2&lt;/img&gt;'); return false;"><img src="../ikoner/glad2.png" border="0"></a> &nbsp; &lt;img&gt;glad2&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;handla&lt;/img&gt;'); return false;"><img src="../ikoner/handla.png" border="0"></a> &nbsp; &lt;img&gt;handla&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;heart&lt;/img&gt;'); return false;"><img src="../ikoner/heart.png" border="0"></a> &nbsp; &lt;img&gt;heart&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;kamera&lt;/img&gt;'); return false;"><img src="../ikoner/kamera.png" border="0"></a> &nbsp; &lt;img&gt;kamera&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;lampa&lt;/img&gt;'); return false;"><img src="../ikoner/lampa.png" border="0"></a> &nbsp; &lt;img&gt;lampa&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;ledsen&lt;/img&gt;'); return false;"><img src="../ikoner/ledsen.png" border="0"></a> &nbsp; &lt;img&gt;ledsen&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;mobil&lt;/img&gt;'); return false;"><img src="../ikoner/mobil.png" border="0"></a> &nbsp; &lt;img&gt;mobil&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;moln&lt;/img&gt;'); return false;"><img src="../ikoner/moln.png" border="0"></a> &nbsp; &lt;img&gt;moln&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;molning&lt;/img&gt;'); return false;"><img src="../ikoner/molning.png" border="0"></a> &nbsp; &lt;img&gt;molning&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;mote&lt;/img&gt;'); return false;"><img src="../ikoner/mote.png" border="0"></a> &nbsp; &lt;img&gt;mote&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;musik&lt;/img&gt;'); return false;"><img src="../ikoner/musik.png" border="0"></a> &nbsp; &lt;img&gt;musik&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;oops&lt;/img&gt;'); return false;"><img src="../ikoner/oops.png" border="0"></a> &nbsp; &lt;img&gt;oops&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;regn&lt;/img&gt;'); return false;"><img src="../ikoner/regn.png" border="0"></a> &nbsp; &lt;img&gt;regn&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;sno&lt;/img&gt;'); return false;"><img src="../ikoner/sno.png" border="0"></a> &nbsp; &lt;img&gt;sno&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;sol&lt;/img&gt;'); return false;"><img src="../ikoner/sol.png" border="0"></a> &nbsp; &lt;img&gt;sol&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;sport&lt;/img&gt;'); return false;"><img src="../ikoner/sport.png" border="0"></a> &nbsp; &lt;img&gt;sport&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;star&lt;/img&gt;'); return false;"><img src="../ikoner/star.png" border="0"></a> &nbsp; &lt;img&gt;star&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;tarta&lt;/img&gt;'); return false;"><img src="../ikoner/tarta.png" border="0"></a> &nbsp; &lt;img&gt;tarta&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;tel&lt;/img&gt;'); return false;"><img src="../ikoner/tel.png" border="0"></a> &nbsp; &lt;img&gt;tel&lt;/img&gt;</li>

									<li><a href="#" onclick="smilie('&lt;img&gt;tunga&lt;/img&gt;'); return false;"><img src="../ikoner/tunga.png" border="0"></a> &nbsp; &lt;img&gt;tunga&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;tv&lt;/img&gt;'); return false;"><img src="../ikoner/tv.png" border="0"></a> &nbsp; &lt;img&gt;tv&lt;/img&gt;</li>
									<li><a href="#" onclick="smilie('&lt;img&gt;va&lt;/img&gt;'); return false;"><img src="../ikoner/va.png" border="0"></a> &nbsp; &lt;img&gt;va&lt;/img&gt;</li>

						</ul>
	</div>
</form>
```

Originalkoden här:
<http://cssdesigner.wordpress.com/2008/10/23/onclick-textbox-show-div/>

Permalänk: https://www.webforum.nu/p/2193264

## #5 — voigtann1, 2009-07-17T11:16Z

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.

Permalänk: https://www.webforum.nu/p/2193266

## #6 — Asa, 2009-07-17T11:30Z

Okej, tackar :)

Permalänk: https://www.webforum.nu/p/2193267

## #7 — Asa, 2009-07-17T14:05Z

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...

Permalänk: https://www.webforum.nu/p/2193278

## #8 — voigtann1, 2009-07-17T15:01Z

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 )

Permalänk: https://www.webforum.nu/p/2193288

## #9 — Asa, 2009-07-17T15:02Z

Okej.. Tackar för det :)

Permalänk: https://www.webforum.nu/p/2193289

## #10 — voigtann1, 2009-07-19T12:17Z

<http://voigt.se/sandbox/wf/asa/>

allt i klassen dropDown li span text är det som kommer att infogas in i textboxarna nu.

Permalänk: https://www.webforum.nu/p/2193410

## #11 — Asa, 2009-07-19T12:23Z

Tackar :)

Permalänk: https://www.webforum.nu/p/2193412

## #12 — Asa, 2009-07-19T12:29Z

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?

Permalänk: https://www.webforum.nu/p/2193413

## #13 — voigtann1, 2009-07-19T12:37Z

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.

Permalänk: https://www.webforum.nu/p/2193414

## #14 — Asa, 2009-07-19T12:41Z

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

Permalänk: https://www.webforum.nu/p/2193415

## #15 — voigtann1, 2009-07-19T12:48Z

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.

Permalänk: https://www.webforum.nu/p/2193416

## #16 — Asa, 2009-07-19T12:53Z

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?

Permalänk: https://www.webforum.nu/p/2193417

## #17 — voigtann1, 2009-07-19T13:05Z

Ä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.

Permalänk: https://www.webforum.nu/p/2193418

## #18 — Asa, 2009-07-19T13:09Z

Tackar :) Sorry om jag inte fatta hur du menade .. det med HTML strukturen. Haha..

Permalänk: https://www.webforum.nu/p/2193419

## #19 — voigtann1, 2009-07-19T13:11Z

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.

Permalänk: https://www.webforum.nu/p/2193420

## #20 — Asa, 2009-07-19T13:12Z

Det ser perfekt ut nu som det är. Alt blir finfint..  :)

Permalänk: https://www.webforum.nu/p/2193421

---

Tråden på webben: https://www.webforum.nu/amne/javascript/179434-smiley-i-listruta-med-bild-och-text