webForumDet fria alternativet
Logga in / Bli medlem

Se "Live" vad som har ändrat

JavaScript

12 svar · 601 visningar · startad av SGuncel

SGuncelMedlem sedan jan. 2007217 inlägg
Frågan#1

Jag vill att man ska se hur sin chattema har blivit innan man sparar så jag kan inte mycket om javascript.

Typ när man väljer bakgrundsfärgen grön och text färgen röd så ska allt ändras på tabellen hur gör man det?

Det jag gjorde nu på koden med Id nåt där alla färger står. Det var bara test, skulle testa min fram men det gick inte så bra.

Ursäkta för att jag dubbel posta. Annars var tråden för lång.

SGuncelMedlem sedan jan. 2007217 inlägg
#2

Färger:

<select class="selectchattheme" name="chatthemecolorbackground" onchange="document.getElementById('ThemeColorBack').style='background-color:'+this[this.selectedIndex].value+';'">
							<option value="">
								(färg)
							</option><option value="Black">
								Black
							</option><option value="Navy">
								Navy
							</option><option value="DarkBlue">
								DarkBlue
							</option><option value="MediumBlue">
								MediumBlue
							</option><option value="Blue">
								Blue
							</option><option value="DarkGreen">
								DarkGreen
							</option><option value="Green">
								Green
							</option><option value="Teal">
								Teal
							</option><option value="DarkCyan">
								DarkCyan
							</option><option value="DeepSkyBlue">
								DeepSkyBlue
							</option><option value="DarkTurquoise">
								DarkTurquoise
							</option><option value="MediumSpringGreen">
								MediumSpringGreen
							</option><option value="Lime">
								Lime
							</option><option value="SpringGreen">
								SpringGreen
							</option><option value="Aqua">
								Aqua
							</option><option value="Cyan">
								Cyan
							</option><option value="MidnightBlue">
								MidnightBlue
							</option><option value="DodgerBlue">
								DodgerBlue
							</option><option value="LightSeaGreen">
								LightSeaGreen
							</option><option value="ForestGreen">
								ForestGreen
							</option><option value="SeaGreen">
								SeaGreen
							</option><option value="DarkSlateGray">
								DarkSlateGray
							</option><option value="LimeGreen">
								LimeGreen
							</option><option value="MediumSeaGreen">
								MediumSeaGreen
							</option><option value="Turquoise">
								Turquoise
							</option><option value="RoyalBlue">
								RoyalBlue
							</option><option value="SteelBlue">
								SteelBlue
							</option><option value="DarkSlateBlue">
								DarkSlateBlue
							</option><option value="MediumTurquoise">
								MediumTurquoise
							</option><option value="Indigo">
								Indigo
							</option><option value="DarkOliveGreen">
								DarkOliveGreen
							</option><option value="CadetBlue">
								CadetBlue
							</option><option value="CornflowerBlue">
								CornflowerBlue
							</option><option value="MediumAquamarine">
								MediumAquamarine
							</option><option value="DimGray">
								DimGray
							</option><option value="SlateBlue">
								SlateBlue
							</option><option value="OliveDrab">
								OliveDrab
							</option><option value="SlateGray">
								SlateGray
							</option><option value="LightSlateGray">
								LightSlateGray
							</option><option value="MediumSlateBlue">
								MediumSlateBlue
							</option><option value="LawnGreen">
								LawnGreen
							</option><option value="Chartreuse">
								Chartreuse
							</option><option value="Aquamarine">
								Aquamarine
							</option><option value="Maroon">
								Maroon
							</option><option value="Purple">
								Purple
							</option><option value="Olive">
								Olive
							</option><option value="Gray">
								Gray
							</option><option value="SkyBlue">
								SkyBlue
							</option><option value="LightSkyBlue">
								LightSkyBlue
							</option><option value="BlueViolet">
								BlueViolet
							</option><option value="DarkRed">
								DarkRed
							</option><option value="DarkMagenta">
								DarkMagenta
							</option><option value="SaddleBrown">
								SaddleBrown
							</option><option value="DarkSeaGreen">
								DarkSeaGreen
							</option><option value="LightGreen">
								LightGreen
							</option><option value="MediumPurple">
								MediumPurple
							</option><option value="DarkViolet">
								DarkViolet
							</option><option value="PaleGreen">
								PaleGreen
							</option><option value="DarkOrchid">
								DarkOrchid
							</option><option value="YellowGreen">
								YellowGreen
							</option><option value="Sienna">
								Sienna
							</option><option value="Brown">
								Brown
							</option><option value="DarkGray">
								DarkGray
							</option><option value="LightBlue">
								LightBlue
							</option><option value="GreenYellow">
								GreenYellow
							</option><option value="PaleTurquoise">
								PaleTurquoise
							</option><option value="LightSteelBlue">
								LightSteelBlue
							</option><option value="PowderBlue">
								PowderBlue
							</option><option value="Firebrick">
								Firebrick
							</option><option value="DarkGoldenrod">
								DarkGoldenrod
							</option><option value="MediumOrchid">
								MediumOrchid
							</option><option value="RosyBrown">
								RosyBrown
							</option><option value="DarkKhaki">
								DarkKhaki
							</option><option value="Silver">
								Silver
							</option><option value="MediumVioletRed">
								MediumVioletRed
							</option><option value="IndianRed">
								IndianRed
							</option><option value="Peru">
								Peru
							</option><option value="Chocolate">
								Chocolate
							</option><option value="Tan">
								Tan
							</option><option value="LightGrey">
								LightGrey
							</option><option value="Thistle">
								Thistle
							</option><option value="Orchid">
								Orchid
							</option><option value="Goldenrod">
								Goldenrod
							</option><option value="PaleVioletRed">
								PaleVioletRed
							</option><option value="Crimson">
								Crimson
							</option><option value="Gainsboro">
								Gainsboro
							</option><option value="Plum">
								Plum
							</option><option value="BurlyWood">
								BurlyWood
							</option><option value="LightCyan">
								LightCyan
							</option><option value="Lavender">
								Lavender
							</option><option value="DarkSalmon">
								DarkSalmon
							</option><option value="Violet">
								Violet
							</option><option value="PaleGoldenrod">
								PaleGoldenrod
							</option><option value="LightCoral">
								LightCoral
							</option><option value="Khaki">
								Khaki
							</option><option value="AliceBlue">
								AliceBlue
							</option><option value="Honeydew">
								Honeydew
							</option><option value="Azure">
								Azure
							</option><option value="SandyBrown">
								SandyBrown
							</option><option value="Wheat">
								Wheat
							</option><option value="Beige">
								Beige
							</option><option value="WhiteSmoke">
								WhiteSmoke
							</option><option value="MintCream">
								MintCream
							</option><option value="GhostWhite">
								GhostWhite
							</option><option value="Salmon">
								Salmon
							</option><option value="AntiqueWhite">
								AntiqueWhite
							</option><option value="Linen">
								Linen
							</option><option value="LightGoldenrodYellow">
								LightGoldenrodYellow
							</option><option value="OldLace">
								OldLace
							</option><option value="Red">
								Red
							</option><option value="Fuchsia">
								Fuchsia
							</option><option value="Magenta">
								Magenta
							</option><option value="DeepPink">
								DeepPink
							</option><option value="OrangeRed">
								OrangeRed
							</option><option value="Tomato">
								Tomato
							</option><option value="HotPink">
								HotPink
							</option><option value="Coral">
								Coral
							</option><option value="DarkOrange">
								DarkOrange
							</option><option value="LightSalmon">
								LightSalmon
							</option><option value="Orange">
								Orange
							</option><option value="LightPink">
								LightPink
							</option><option value="Pink">
								Pink
							</option><option value="Gold">
								Gold
							</option><option value="PeachPuff">
								PeachPuff
							</option><option value="NavajoWhite">
								NavajoWhite
							</option><option value="Moccasin">
								Moccasin
							</option><option value="Bisque">
								Bisque
							</option><option value="MistyRose">
								MistyRose
							</option><option value="BlanchedAlmond">
								BlanchedAlmond
							</option><option value="PapayaWhip">
								PapayaWhip
							</option><option value="LavenderBlush">
								LavenderBlush
							</option><option value="SeaShell">
								SeaShell
							</option><option value="Cornsilk">
								Cornsilk
							</option><option value="LemonChiffon">
								LemonChiffon
							</option><option value="FloralWhite">
								FloralWhite
							</option><option value="Snow">
								Snow
							</option><option value="Yellow">
								Yellow
							</option><option value="LightYellow">
								LightYellow
							</option><option value="Ivory">
								Ivory
							</option><option value="White">
								White
							</option>
							</select>
SGuncelMedlem sedan jan. 2007217 inlägg
#3

Html koden (tabellen):

<table width="100%"  border="0" cellspacing="0" cellpadding="0" height="71" id="ThemeColorBack" background="<%=ObjRS("Background")%>">
	<tr>
		<td width="58" height="71" style="padding: 3px;" valign="top">
			<img src="../_Grafik/Pix.gif" width="3" height="20">	
			<img src="../ingenbild.gif">
			<td>
				<table width="100%"  border="0" cellspacing="0" cellpadding="0" height="14">
					<tr>
						<td width="981" height="14" valign="top" style="padding: 3px;">
							<a href="../profile.asp?usrId=<%=Server.HtmlEncode(Session("UsrID"))%>"><%=Server.HtmlEncode(Session("UsrTLAlias"))%></a>&nbsp; 
							|&nbsp; <strong>23:23 den 27 november 2007</strong>                    
						</td>
			</td>
                	</tr>
                </table>
                
              <table width="100%"  border="0" cellspacing="0" cellpadding="0" height="56">
                <tr>
                  <td width="259" height="56" valign="top" style="padding: 3px;">
                	test meddelande
                  </td>
                </tr>
              </table>
		</td>
	</tr>
</table>
voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#4
<script type="text/javascript" language="JavaScript">
function changeColor(color)
{
	document.getElementById("ThemeColorBack").bgColor = color;
}
</script>

<select class="selectchattheme" name="chatthemecolorbackground" onchange="changeColor(this[this.selectedIndex].value);">
SGuncelMedlem sedan jan. 2007217 inlägg
#5

Hur gör t.ex. om jag vill ändra:
meddelande text färgen, storlek och font..
Dinns det någon sida där man kan läsa hur man gör? :)

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#6

googla?

function changeTextColor(color){
	document.getElementById("ThemeColorBack").style.color = color;
}

för text färgen.

SGuncelMedlem sedan jan. 2007217 inlägg
#7

Jo, men vad ska man typ googla?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#8

Sök efter "Javascript change font size" kanske?
"Javascript tutorial change styles" mm..

SGuncelMedlem sedan jan. 2007217 inlägg
#9

Kan man inte ha så här:

<td width="259" height="56" valign="top" style="padding: 3px;" id="ThemeMessageFontSize ThemeMessageFontColor ThemeColorBack">

Så här ser Javascript koden ut:

 <script LANGUAGE="JavaScript" TYPE="text/javascript">
function changeColor(color)
{
	document.getElementById("ThemeColorBack").bgColor = color;
}

function changeTextColor(color){
	document.getElementById("ThemeMessageFontColor").style.color = color;
} [B]Här är rad 52[/B]

function changeTextSize(size) {
	document.getElementById('ThemeMessageFontSize').style.fontSize = size;
}
</script>

Får fel när jag försöker ha tre funktion på en cell.
Bakgrunds färg kan jag ändra, men när jag ska ändra färgen och storleken på texten får jag fel. Fel meddelande: Line 52 Object required

The_HulkMedlem sedan juni 20031 837 inlägg
#10

Du kan inte ha flera ID på samma html-tagg.

<td width="259" height="56" valign="top" style="padding: 3px;" id="ThemeMessageFontSize">

Låter som du inte riktigt har förstått vad ID-taggen är till för. Den används för att sätta ett ID på en html-tagg så man kan leta upp en specifik html-tagg i html-dokumentet.

 <script LANGUAGE="JavaScript" TYPE="text/javascript">
function changeColor(color)
{
	document.getElementById("ThemeMessageFontSize").bgColor = color;
}

function changeTextColor(color){
	document.getElementById("ThemeMessageFontSize").style.color = color;
}

function changeTextSize(size) {
	document.getElementById('ThemeMessageFontSize').style.fontSize = size;
}
</script>
SGuncelMedlem sedan jan. 2007217 inlägg
#11

Tackar för allt lösning. Men har något annat fråga.

<input type="text" name="ThemeMessageImageBack" class="inputchattheme" onchange="changeBgImage(this[this.selectedIndex].value);">

När man skriver in länk ska det ändras till bakgrund. Hur gör man det? Såg att det inte var samma som select :)

The_HulkMedlem sedan juni 20031 837 inlägg
#12

SGuncel skrev:

Tackar för allt lösning. Men har något annat fråga.

<input type="text" name="ThemeMessageImageBack" class="inputchattheme" onchange="changeBgImage(this[this.selectedIndex].value);">

När man skriver in länk ska det ändras till bakgrund. Hur gör man det? Såg att det inte var samma som select :)

<input type="text" name="ThemeMessageImageBack" class="inputchattheme" onchange="changeBgImage(this.value);">

Nu vet jag inte vad funktionen changeBgImage gör eller vilka parametrar den ska ta emot. Vill du ha ut värdet av textboxen använder du this.value

SGuncelMedlem sedan jan. 2007217 inlägg
#13

Den gör så att man kan ha eget bakgrund. Man ska klistra in länken där.

261 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
116 ms — deklarationer (db)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)