html - Tekst i talebobbel uden input og andet - Udvikleren.dk

Tags: html css

<< < 1 2 3 > >>

Bruger #11637 @ 10.04.07 22:00

Halløjsa, jeg har påbegyndt en 2d chat, hvori jeg har tænkt mig at man skulle kunne snakke i en talebobbel, ligesom på Netstationen.dk. Jeg har fundet et script, der får en tekst til at fremkomme i et billede, i mit tilfælde et billede af en talebobbel. For at få teksten frem i taleboblen, skal man skrive i en input. Når man noget tekst i inputet, kommer det altså også i taleboblen.

Mit ønske er at få inputet væk, og alligevel få teksten frem i taleboblen, når man taster noget på tasteturet. Jeg har prøvet med "Type=hidden" i inputet men så kan man slet ikke skrive. Noget andet jeg har prøvet, er at gøre inputet transparent, men når man er i inputet blinker den hersens streg, og for at skrive i inputet, skal det markeres.

Desuden er der lidt andre fejl i koden, der står nederst, som jeg også ønsker at få rettet. Hvis man skriver noget, og så sletter det igen, ønsker jeg at taleboblen skal forsvinde igen. Desuden ser jeg gerne at der er et max. antal tegn pr. talebobbel.

Er der nogen der kan hjælpe mig med alt dette, så vil jeg være dybt taknemmelig.

Kærlig hilsen

Morten

Kode

<head>
<style>
#Bubble {
position : absolute;
top : 50px;
left : 100px;
width : 250px;
height : 125px;
visibility : hidden;
overflow : hidden;
}

#BubbleTable {
background : url(bobbel.gif) no-repeat;
}
</style>
<script language='JavaScript'>
function ShowBubble() {
document.getElementById('Bubble').style.visibility = 'visible';
document.getElementById('BubbleTable').innerHTML = document.getElementById('Besked').value;
setTimeout("document.getElementById('Bubble').style.visibility = 'hidden';",10000);
}
</script>
</head>
<body>
<form action='bobbel.html'>
<input type='text' name='Besked' onKeyPress='ShowBubble();'> <input type='submit' value='Send'>
</form>
<div id='Bubble'>
<table callpadding='0' cellspacing='0' width='250' height='125'>
<tr>
<td id='BubbleTable' align='center' valign='middle'></td>
</tr>
</table>
</div>
</body>

25 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #4442 @ 12.04.07 14:10

Jeg arbejder videre på den. Det er en af de små ting jeg kan lide at lave, javascript altså...

Bruger #11637 @ 12.04.07 14:46

Okay mange tak

Bruger #4442 @ 12.04.07 16:41

Her er en opdateret kode. Den virker i Internet Explorer 7 og Firefox 2.

Kode

<head>
<style>
#Bubble {
position : absolute;
top : 50px;
left : 100px;
width : 250px;
height : 125px;
visibility : hidden;
overflow : hidden;
}
#BubbleTable {
background : url(bobbel.gif) no-repeat;
}
</style>
<script language='JavaScript'>

// Tjekker hvilken browser der bruges, og sætter event captures:
if (navigator.appName == 'Microsoft Internet Explorer'){
document.onkeypress = InternetExplore;
document.onkeydown = blockkeys; 					// Blokerer backspace.
}
if (navigator.appName != 'Microsoft Internet Explorer'){
document.onkeypress = OtherBrowsers;
}

function blockkeys() {
	if (window.event && window.event.keyCode == 8) {
        // try to cancel the backspace
		InternetExplore(event);						// Udfører det der skal udføres. (Sletter et tegn, opdaterer tekst osv.)
        window.event.cancelBubble = true;
        window.event.returnValue = false;
        return false;
    }
}

function InternetExplore(e){
	which = window.event.keyCode;					// Finder koden for tasten.
	
	
	if(which == 16) {								// Hvis der er tastet shift, må den ikke indsætte et tegn.
		return false;
	} else if(which == 13) {						// Hvis der er tastet enter, skal den submitte formen.
		document.getElementById("form").submit();
		return false;
	}
	document.getElementById('Bubble').style.visibility = 'visible';// Viser boblen.
	value = document.getElementById("besked").value;// Henter værdien fra input-boksen.
	
	if(which == 8) {								// Hvis der tastes backspace, skal der slettes et tegn, virker ikke i IE!
		value = value.slice(0,value.length-1);
	} else {										// Ellers skal der indsættes et tegn.
		value += String.fromCharCode(which);
	}

	document.getElementById("besked").value = value;// Input-boksen bliver opdateret.
	
	document.getElementById('BubbleTable').innerHTML = value;// Sætter teksten i boblen til at være lig input-boksen.
	
	if(value.length == 0)							// Er der ingen tekst i input-boksen, bliver boblen lukket.
		setTimeout("document.getElementById('Bubble').style.visibility = 'hidden';",10000);
		
	return false;									// Browseren skal ikke reagerer på tasterne. Virker ikke i IE.

}



function OtherBrowsers(e){
	if(e.which == 16) {								// Hvis der er tastet shift, må den ikke indsætte et tegn.
		return false;
	} else if(e.which == 13) {						// Hvis der er tastet enter, skal den submitte formen.
		document.getElementById("form").submit();
		return false;
	}
	document.getElementById('Bubble').style.visibility = 'visible';// Viser boblen.
	value = document.getElementById("besked").value;// Henter værdien fra input-boksen.
	
	if(e.which == 8) {								// Hvis der tastes backspace, skal der slettes et tegn, virker ikke i IE!
		value = value.slice(0,value.length-1);
		history.go(1);
	} else {										// Ellers skal der indsættes et tegn.
		value += String.fromCharCode(e.which);
	}

	document.getElementById("besked").value = value;// Input-boksen bliver opdateret.
	
	document.getElementById('BubbleTable').innerHTML = value;// Sætter teksten i boblen til at være lig input-boksen.
	
	if(value.length == 0)							// Er der ingen tekst i input-boksen, bliver boblen lukket.
		setTimeout("document.getElementById('Bubble').style.visibility = 'hidden';",10000);
		
	return false;									// Browseren skal ikke reagerer på tasterne. Virker ikke i IE.
}
</script>
</head>
<body>
<form action='bobbel.html' method="post" id="form">
<input type='hidden' id='besked' name="Besked" />
</form>
<div id='Bubble'>
<table callpadding='0' cellspacing='0' width='250' height='125'>
<tr>
<td id='BubbleTable' align='center' valign='middle'></td>
</tr>
</table>
</div>
</body>

EDIT:
Koden ser lidt rodet ud, men det er kun herinde den gør det.

Indlæg senest redigeret d. 12.04.2007 16:42 af Bruger #4442

Bruger #11637 @ 12.04.07 16:50

Mange Tak Nick, det er hvert fald alle 100 point værd

Hvis du har lyst har jeg et par enkelte spørgsmål angående scriptet. Hvordan regulere man hvor mange bogstaver der er pr. linje? og kan man sætte et maks antal bogstaver pr. linje? og sidst, kan man få den til at skifte linje selvom man skriver et meget meget langt ord?

Bruger #11637 @ 13.04.07 14:10

Tak Nick, din programmering har været til meget stor hjælp.
Du skulle tilfældigvis ikke vide om man via javascript, kan positionere et billede, efter et andet billedes position

Bruger #11637 @ 13.04.07 23:08

Og, er det ligeledes noget der hedder rowLength?

Bruger #4442 @ 14.04.07 01:27

Tak Nick, din programmering har været til meget stor hjælp.
Du skulle tilfældigvis ikke vide om man via javascript, kan positionere et billede, efter et andet billedes position ?

Tror det er lettest at du søger efter det på google. Det er blot ganske få linjer kode, som jeg ikke kan i hovedet pt.

Og, er det ligeledes noget der hedder rowLength?

I den kode jeg har lavet er der ikke noget der hedder rowLength. Hvis du mener en variabel der bestemmer linje længden, så skal du bruge lineLength variablen.

Bruger #11637 @ 14.04.07 09:17

Nej, jeg tænkte mere på om man ligeledes, kan bestemme at teksten kun må gåå, f.eks 4 linjer ned

Bruger #11637 @ 14.04.07 15:46

Og, hvis man istedet for id="bubble" bruger name="bubble", hvad skal man så ændre i javaet, for at den forstår det igen

Kode

<div name="Bubble" style="width:10px;height:10px;position:absolute;bottom:50px;left:50px;z-index:2;"><table callpadding="0" cellspacing="0" width="250" height="100"><tr><td name="BubbleTable" valign="middle"></td></tr></table></div>

Bruger #11637 @ 14.04.07 15:46

Og, hvis man istedet for id="bubble" bruger name="bubble", hvad skal man så ændre i javaet, for at den forstår det igen

Kode

document.getElementById(idx).innerHTML = '<div style="width:60px;height:80px;z-index:1;"><img src="Poshmand.gif"><div name="Bubble" style="width:10px;height:10px;position:absolute;bottom:50px;left:50px;z-index:2;"><table callpadding="0" cellspacing="0" width="250" height="100"><tr><td name="BubbleTable" align="center" valign="middle"></td></tr></table></div></div>';

Indlæg senest redigeret d. 14.04.2007 16:33 af Bruger #11637

<< < 1 2 3 > >>

Tekst i talebobbel uden input og andet

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler