Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Javascript: Body class auslesen und dann eine Box färben

Frage Entwicklung JavaScript

Mitglied: smackee

smackee (Level 1) - Jetzt verbinden

19.02.2015, aktualisiert 02.03.2015, 930 Aufrufe, 16 Kommentare, 1 Danke

Hallo zusammen

Ich habe da eine kleine Frage.

Nun ich verwende die Software Xibo.
Ich habe eine Div Box welches ich mit CSS erstellt habe.

01.
 
02.
div.on { 
03.
text-align:center; 
04.
background:#0FF; 
05.
border:1px solid #0AA; 
06.
width:35px; 
07.
height:35px; 
08.
-webkit-border-radius:15px; 
09.
-moz-border-radius:35px; 
10.
border-radius:15px; 
11.
font-family:arial; 
12.
color:#0AA; 
13.
14.
 
und ich möchte gerne das "background:#0FF;" dem
01.
 <BODY class=" "> 
anpasst.
Jedoch soll sie aber eine andere Seite auslesen und nicht die Seite auf welche ich das Javascript haben werde.

Seite1 besitzt das
01.
 <BODY class="red"> 

Seite2 sollte das Javascript besitzen mit den DIV boxen welche sich das rot färbt, da auf Seite 1
01.
 <BODY class="red"> 
ist.

Ist das möglich?
Ich habe da ein Anfang aber komme jedoch nicht weiter:
01.
if( document.body.className.match('red') ){  
02.
 
03.
}
Mitglied: s7mahess
19.02.2015 um 14:04 Uhr
Versuch mal deine Formulierung anzupassen, ich wüsste jetzt viele Lösungen, aber ich verstehe die Frage nicht (nach 3 maligen lesen).
Bitte warten ..
Mitglied: smackee
19.02.2015 um 15:57 Uhr
Zitat von s7mahess:

Versuch mal deine Formulierung anzupassen, ich wüsste jetzt viele Lösungen, aber ich verstehe die Frage nicht (nach 3
maligen lesen).

Hallo

Nun also, ich habe 2 Seiten. Die Seite1 und die Seite2.
Die Seite1 besitzt einen Body Tag dessen Class "red" ist. Also <BODY class="red"></body>
Die Seite2 besitzt die von mir erstellte DIV BOX welches ich mithilfe von CSS erstellt habe.

Nun sollte die die BOX auf Seite2 sich dem Body Class der Seite1 anpassen. Ist also der Body class=red, sollte sich der Background meine DIV BOX auf RED umstellen.

Der Grund ist folgender; meine Xymon Seite (Monitoringtool) ändert den Body class Tag je nach Status der Server, und deswegen kann der BODY CLASS red, green, yellow oder purple sein.

Ich hoffe ich konnte einbisschen genauer werden.

Vielen Dank für deine Hilfe.
Gruss
Bitte warten ..
Mitglied: 114757
LÖSUNG 19.02.2015, aktualisiert 26.02.2015
Moin,
hier ein Beispiel. Vorausgesetzt deine Seite welche du abfragen willst liegt auf der gleichen Domain wo das Script läuft. Wenn nicht, greifen Cross-Site-Scripting Sicherheitsmechnissmen und nur Seiten welche dies mit dem CORS Header (Access-Control-Allow-Origin: *) erlauben, können dann abgefragt werden !! Ansonsten würde ich es dann via PHP machen...
01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>Demo</title> 
06.
</head> 
07.
<style type="text/css"> 
08.
.red { background-color: red;} 
09.
</style> 
10.
<script type="text/javascript"> 
11.
function checkClass(){ 
12.
	var url = "http://domain.xyz/seite1.php"; 
13.
	var xhr = new XMLHttpRequest(); 
14.
	xhr.open('GET',url); 
15.
	xhr.responseType = 'document'; 
16.
	xhr.onload = function(e) { 
17.
		var doc = this.response; 
18.
		if (doc.body.className.match(/red/i)){ 
19.
			document.getElementById("test").className = "red";	 
20.
21.
	}; 
22.
	xhr.send(); 
23.
24.
</script> 
25.
 
26.
<body onLoad="checkClass()"> 
27.
<div id="test" style="width:200px; height: 200px; border: 1px solid gray"></div> 
28.
</body> 
29.
</html>
Gruß jodel32
Bitte warten ..
Mitglied: smackee
26.02.2015, aktualisiert um 09:05 Uhr
Zitat von 114757:

Moin,
hier ein Beispiel. Vorausgesetzt deine Seite welche du abfragen willst liegt auf der gleichen Domain wo das Script läuft.
Wenn nicht, greifen Cross-Site-Scripting Sicherheitsmechnissmen und nur Seiten welche dies mit dem
CORS Header (Access-Control-Allow-Origin: *) erlauben,
können dann abgefragt werden !! Ansonsten würde ich es dann via PHP machen...
01.
> <!doctype html> 
02.
> <html> 
03.
> <head> 
04.
> <meta charset="utf-8"> 
05.
> <title>Demo</title> 
06.
> </head> 
07.
> <style type="text/css"> 
08.
> .red { background-color: red;} 
09.
> </style> 
10.
> <script type="text/javascript"> 
11.
> function checkClass(){ 
12.
> 	var url = "http://domain.xyz/seite1.php"; 
13.
> 	var xhr = new XMLHttpRequest(); 
14.
> 	xhr.open('GET',url); 
15.
> 	xhr.responseType = 'document'; 
16.
> 	xhr.onload = function(e) { 
17.
> 		var doc = this.response; 
18.
> 		if (doc.body.className.match(/red/i)){ 
19.
> 			document.getElementById("test").className = "red";	 
20.
> 		} 
21.
> 	}; 
22.
> 	xhr.send(); 
23.
> } 
24.
> </script> 
25.
>  
26.
> <body onLoad="checkClass()"> 
27.
> <div id="test" style="width:200px; height: 200px; border: 1px solid gray"></div> 
28.
> </body> 
29.
> </html> 
30.
> 
Gruß jodel32

Okay zu erst einmal vielen Dank für die Idee.
Jedoch funktioniert das ganze irgendwie nicht so wie es sollte.

Also ich habe ein Seite1 sieht so aus:
01.
  
02.
<html> 
03.
<head> 
04.
<title>Titel</title> 
05.
</head> 
06.
<body class="red"> 
07.
 
08.
</body>
Und die Seite2 so:
01.
  
02.
<html> 
03.
<head> 
04.
<title>Titel</title> 
05.
 
06.
<style type="text/css"> 
07.
 
08.
div.on { 
09.
text-align:center; 
10.
background:#0FF; 
11.
border:1px solid #0AA; 
12.
width:35px; 
13.
height:35px; 
14.
-webkit-border-radius:15px; 
15.
-moz-border-radius:35px; 
16.
border-radius:15px; 
17.
font-family:arial; 
18.
color:#0AA; 
19.
20.
 
21.
</style> 
22.
</head> 
23.
<body> 
24.
<div class="on">1</div> 
25.
</body> 
26.
</html>
Nun sollte background:#0FF; aus dem CSS zu RED werden.

EDIT:
Habe herausgefunden das es warscheinlich am nicht gleichen Netz liegt. Wie kann ich das machen das es auch mit anderen Netzen funktioniert. Habe das irgendwie nicht ganz begriffen.. ^^
Bitte warten ..
Mitglied: 114757
LÖSUNG 26.02.2015, aktualisiert um 11:05 Uhr
Habe herausgefunden das es warscheinlich am nicht gleichen Netz liegt.
Wie kann ich das machen das es auch mit anderen Netzen funktioniert. Habe das irgendwie nicht ganz begriffen..
Genau Stichwort: "CORS Header" , wie oben geschrieben. Wenn du der Admin von Seite1 bist, dann musst du die Seite z.B. via PHP mit dem richtigen Header ausliefern:
01.
<?php 
02.
    header('Access-Control-Allow-Origin: *'); 
03.
?>
Dann klappt das 100% Im Link steht das ebenfalls ...

Eine Antwort von Seite 1 auf eine Anfragte sollte dann im Header so aussehen:

7cb4107c3e6b87d8ac2a9e2cb125d6bc - Klicke auf das Bild, um es zu vergrößern

Wobei man das ganze natürlich auch auf die anfragende Domain einschränken kann, anstatt ein Sternchen zu verwenden. Hol dir die Daten der Seite direkt mit PHP, da gelten diese Cross-Site-Scripting-Einschränkungen nicht.

Gruß jodel32
Bitte warten ..
Mitglied: smackee
26.02.2015 um 09:39 Uhr
Zitat von 114757:

> Habe herausgefunden das es warscheinlich am nicht gleichen Netz liegt.
> Wie kann ich das machen das es auch mit anderen Netzen funktioniert. Habe das irgendwie nicht ganz begriffen..
Genau Stichwort: "CORS Header" , wie oben geschrieben. Wenn du der Admin von Seite1 bist, dann musst du die Seite z.B.
via PHP mit dem richtigen Header ausliefern:
01.
> <?php 
02.
>     header('Access-Control-Allow-Origin: *'); 
03.
> ?> 
04.
> 
Dann klappt das 100% Im Link steht das ebenfalls ...

Eine Antwort von Seite 1 auf eine Anfragte sollte dann im Header so aussehen:

7cb4107c3e6b87d8ac2a9e2cb125d6bc - Klicke auf das Bild, um es zu vergrößern

Wobei man das ganze natürlich auch auf die anfragende Domain einschränken kann, anstatt ein Sternchen zu verwenden.

Gruß jodel32

Okay so muss ich also auf Seite1 eins den Header mit dem Code ergänzen.
Aber muss ich dann im JavaScript nicht einen "createCORSRequest" oder ähnlich machen?
Bitte warten ..
Mitglied: 114757
LÖSUNG 26.02.2015, aktualisiert um 11:05 Uhr
Zitat von smackee:
Okay so muss ich also auf Seite1 eins den Header mit dem Code ergänzen.
Ja, aber nicht im nur einfach in die HTML-Seite schreiben, dein Server muss schon PHP unterstützen bzw. parsen !
Aber muss ich dann im JavaScript nicht einen "createCORSRequest" oder ähnlich machen?
NEIN! Obiges Script läuft dann sofort ...hier einwandfrei getestet.
Bitte warten ..
Mitglied: smackee
26.02.2015, aktualisiert um 09:59 Uhr
Zitat von 114757:

> Zitat von smackee:
> Okay so muss ich also auf Seite1 eins den Header mit dem Code ergänzen.
Ja, aber nicht im nur einfach in die HTML-Seite schreiben, dein Server muss schon PHP unterstützen bzw. parsen !
> Aber muss ich dann im JavaScript nicht einen "createCORSRequest" oder ähnlich machen?
NEIN! Obiges Script läuft dann sofort ...hier einwandfrei getestet.

Okay funktioniert soweit.
Wie sieht es aus wenn ich jetzt noch "yellow" und "green" möcht hinzufügen?

EDIT:

Vielleicht ist es am Besten wenn ich meinen ganzen Code zeige:
01.
  
02.
<html> 
03.
<head> 
04.
<title>Countdown</title> 
05.
 
06.
<style type="text/css"> 
07.
 
08.
div.on { 
09.
text-align:center; 
10.
background:#0FF; 
11.
border:1px solid #0AA; 
12.
width:35px; 
13.
height:35px; 
14.
-webkit-border-radius:15px; 
15.
-moz-border-radius:35px; 
16.
border-radius:15px; 
17.
font-family:arial; 
18.
color:#0AA; 
19.
20.
 
21.
div.off { 
22.
text-align:center; 
23.
background:#FFF; 
24.
border:1px solid #0AA; 
25.
width:35px; 
26.
height:35px; 
27.
-webkit-border-radius:15px; 
28.
-moz-border-radius:15px; 
29.
border-radius:15px; 
30.
font-family:arial; 
31.
color:#CCC; 
32.
33.
 
34.
</style> 
35.
 
36.
<script language="Javascript"> 
37.
 
38.
var countdown; 
39.
var countdown_number; 
40.
var countdown_number_zwei 
41.
var countdown_number_element; 
42.
var countdown_number_old; 
43.
 
44.
function countdown_init() { 
45.
    countdown_number = 1; 
46.
    countdown_trigger(); 
47.
48.
 
49.
function countdown_trigger() { 
50.
    if(countdown_number < 7) { 
51.
        countdown_number_old = "A" + ( countdown_number - 1 );     	 
52.
       	countdown_number_element = "A" + countdown_number; 
53.
         
54.
        document.getElementById(countdown_number_element).className = "on";  
55.
        if(countdown_number >1){ 
56.
           document.getElementById(countdown_number_old).className = "off";  
57.
58.
        if(countdown_number < 7) { 
59.
            countdown = setTimeout('countdown_trigger()', 11000); 
60.
            countdown_number = countdown_number + 1; 
61.
62.
        
63.
64.
     
65.
66.
 
67.
function countdown_clear() { 
68.
    clearTimeout(countdown); 
69.
70.
 
71.
</script> 
72.
 
73.
</head> 
74.
<body onload="countdown_init()"><font face="Arial" size=1> 
75.
<div id="A1" class="off" ><font size=6>1</font></div> <br><br> 
76.
<div id="A2" class="off" ><font size=6>2</font></div> <br><br> 
77.
<div id="A3" class="off" ><font size=6>3</font></div> <br><br> 
78.
<div id="A4" class="off" ><font size=6>4</font></div> <br><br> 
79.
<div id="A5" class="off" ><font size=6>5</font></div> <br><br> 
80.
<div id="A6" class="off" ><font size=6>6</font></div> <br><br> 
81.
</font> 
82.
</body> 
83.
</html>
Also ich habe hier 6 x eine Box die standardmässig mit der class="off" sind.
Jetzt will ich aber das diese sich verändern je nach dem Body Status.
Wie du siehst habe ich eine Art Countdown, die Box werden für eine ein paar Sekunden angzeigt und dann geht es zur nächsten Box.

Wie kann ich das realisieren?
Bitte warten ..
Mitglied: 114757
LÖSUNG 26.02.2015, aktualisiert um 11:05 Uhr
01.
               if (doc.body.className.match(/red/i)){ 
02.
			document.getElementById("test").className = "red";	 
03.
04.
                if (doc.body.className.match(/green/i)){ 
05.
			document.getElementById("test").className = "green";	 
06.
07.
                if (doc.body.className.match(/yellow/i)){ 
08.
			document.getElementById("test").className = "yellow";	 
09.
		}
Bitte warten ..
Mitglied: smackee
26.02.2015 um 10:00 Uhr
Zitat von 114757:

01.
>                if (doc.body.className.match(/red/i)){ 
02.
> 			document.getElementById("test").className = "red";	 
03.
> 		} 
04.
>                 if (doc.body.className.match(/green/i)){ 
05.
> 			document.getElementById("test").className = "green";	 
06.
> 		} 
07.
>                 if (doc.body.className.match(/yellow/i)){ 
08.
> 			document.getElementById("test").className = "yellow";	 
09.
> 		} 
10.
> 

Und natürlich muss ich im CSS noch die für jede Farbe einen Eintrag machen.
Ich habe noch mein vorheriger Post bearbeitet, da ist noch eine weitere Frage.

Gruss und vielen Dank für die Hilfe!
Bitte warten ..
Mitglied: 114757
LÖSUNG 26.02.2015, aktualisiert um 11:05 Uhr
01.
  
02.
<html> 
03.
<head> 
04.
<title>Countdown</title> 
05.
 
06.
<style type="text/css"> 
07.
 
08.
div.on { 
09.
text-align:center; 
10.
background:#0FF; 
11.
border:1px solid #0AA; 
12.
width:35px; 
13.
height:35px; 
14.
-webkit-border-radius:15px; 
15.
-moz-border-radius:35px; 
16.
border-radius:15px; 
17.
font-family:arial; 
18.
color:#0AA; 
19.
20.
 
21.
div.off { 
22.
text-align:center; 
23.
background:#FFF; 
24.
border:1px solid #0AA; 
25.
width:35px; 
26.
height:35px; 
27.
-webkit-border-radius:15px; 
28.
-moz-border-radius:15px; 
29.
border-radius:15px; 
30.
font-family:arial; 
31.
color:#CCC; 
32.
33.
.red{background-color:red !important} 
34.
.green{background-color:green !important} 
35.
.yellow{background-color:yellow !important} 
36.
</style> 
37.
 
38.
<script language="Javascript"> 
39.
var countdown; 
40.
var countdown_number; 
41.
var countdown_number_zwei 
42.
var countdown_number_element; 
43.
var countdown_number_old; 
44.
 
45.
function countdown_init() { 
46.
    countdown_number = 1; 
47.
    countdown_trigger(); 
48.
49.
 
50.
function countdown_trigger() { 
51.
	getClassname(function(res){ 
52.
		if (res.match(/red|green|yellow/i)){ 
53.
			if(countdown_number < 7) { 
54.
				countdown_number_old = "A" + ( countdown_number - 1 );     	 
55.
				countdown_number_element = "A" + countdown_number; 
56.
				var elActive = document.getElementById(countdown_number_element); 
57.
				var elOld = document.getElementById(countdown_number_old); 
58.
				elActive.className = "on"; 
59.
				elActive.className += " " + res; 
60.
				if(countdown_number > 1){ 
61.
				   elOld.className = "off";  
62.
63.
64.
			if(countdown_number < 7) { 
65.
				countdown = setTimeout('countdown_trigger()', 11000); 
66.
				countdown_number += 1; 
67.
			}			 
68.
69.
	}); 
70.
	 
71.
72.
 
73.
function countdown_clear() { 
74.
    clearTimeout(countdown); 
75.
76.
 
77.
var getClassname = function(result){ 
78.
	var url = "http://www.domain.de/seite1.php"; 
79.
	var xhr = new XMLHttpRequest(); 
80.
	xhr.open('GET',url); 
81.
	xhr.responseType = 'document'; 
82.
	xhr.onload = function(e) { 
83.
		doc = this.response; 
84.
		result(doc.body.className); 
85.
	}; 
86.
	xhr.send(); 
87.
88.
</script> 
89.
 
90.
</head> 
91.
<body onload="countdown_init()"><font face="Arial" size=1> 
92.
<div id="A1" class="off" ><font size=6>1</font></div> <br><br> 
93.
<div id="A2" class="off" ><font size=6>2</font></div> <br><br> 
94.
<div id="A3" class="off" ><font size=6>3</font></div> <br><br> 
95.
<div id="A4" class="off" ><font size=6>4</font></div> <br><br> 
96.
<div id="A5" class="off" ><font size=6>5</font></div> <br><br> 
97.
<div id="A6" class="off" ><font size=6>6</font></div> <br><br> 
98.
</font> 
99.
</body> 
100.
</html>
Bitte warten ..
Mitglied: smackee
26.02.2015, aktualisiert um 10:47 Uhr
Zitat von 114757:

01.
>   
02.
> <html> 
03.
> <head> 
04.
> <title>Countdown</title> 
05.
>  
06.
> <style type="text/css"> 
07.
>  
08.
> div.on { 
09.
> text-align:center; 
10.
> background:#0FF; 
11.
> border:1px solid #0AA; 
12.
> width:35px; 
13.
> height:35px; 
14.
> -webkit-border-radius:15px; 
15.
> -moz-border-radius:35px; 
16.
> border-radius:15px; 
17.
> font-family:arial; 
18.
> color:#0AA; 
19.
> } 
20.
>  
21.
> div.off { 
22.
> text-align:center; 
23.
> background:#FFF; 
24.
> border:1px solid #0AA; 
25.
> width:35px; 
26.
> height:35px; 
27.
> -webkit-border-radius:15px; 
28.
> -moz-border-radius:15px; 
29.
> border-radius:15px; 
30.
> font-family:arial; 
31.
> color:#CCC; 
32.
> } 
33.
> .red{background-color:red !important} 
34.
> .green{background-color:green !important} 
35.
> .yellow{background-color:yellow !important} 
36.
> </style> 
37.
>  
38.
> <script language="Javascript"> 
39.
> var countdown; 
40.
> var countdown_number; 
41.
> var countdown_number_zwei 
42.
> var countdown_number_element; 
43.
> var countdown_number_old; 
44.
>  
45.
> function countdown_init() { 
46.
>     countdown_number = 1; 
47.
>     countdown_trigger(); 
48.
> } 
49.
>  
50.
> function countdown_trigger() { 
51.
> 	getClassname(function(res){ 
52.
> 		if (res.match(/red|green|yellow/i)){ 
53.
> 			if(countdown_number < 7) { 
54.
> 				countdown_number_old = "A" + ( countdown_number - 1 );     	 
55.
> 				countdown_number_element = "A" + countdown_number; 
56.
> 				var elActive = document.getElementById(countdown_number_element); 
57.
> 				var elOld = document.getElementById(countdown_number_old); 
58.
> 				elActive.className = "on"; 
59.
> 				elActive.className += " " + res; 
60.
> 				if(countdown_number > 1){ 
61.
> 				   elOld.className = "off";  
62.
> 				} 
63.
> 			} 
64.
> 			if(countdown_number < 7) { 
65.
> 				countdown = setTimeout('countdown_trigger()', 11000); 
66.
> 				countdown_number += 1; 
67.
> 			}			 
68.
> 		} 
69.
> 	}); 
70.
> 	 
71.
> } 
72.
>  
73.
> function countdown_clear() { 
74.
>     clearTimeout(countdown); 
75.
> } 
76.
>  
77.
> var getClassname = function(result){ 
78.
> 	var url = "http://www.domain.de/seite1.php"; 
79.
> 	var xhr = new XMLHttpRequest(); 
80.
> 	xhr.open('GET',url); 
81.
> 	xhr.responseType = 'document'; 
82.
> 	xhr.onload = function(e) { 
83.
> 		doc = this.response; 
84.
> 		result(doc.body.className); 
85.
> 	}; 
86.
> 	xhr.send(); 
87.
> } 
88.
> </script> 
89.
>  
90.
> </head> 
91.
> <body onload="countdown_init()"><font face="Arial" size=1> 
92.
> <div id="A1" class="off" ><font size=6>1</font></div> <br><br> 
93.
> <div id="A2" class="off" ><font size=6>2</font></div> <br><br> 
94.
> <div id="A3" class="off" ><font size=6>3</font></div> <br><br> 
95.
> <div id="A4" class="off" ><font size=6>4</font></div> <br><br> 
96.
> <div id="A5" class="off" ><font size=6>5</font></div> <br><br> 
97.
> <div id="A6" class="off" ><font size=6>6</font></div> <br><br> 
98.
> </font> 
99.
> </body> 
100.
> </html> 
101.
> 

Woow, das ging schnell und klappt sogar, vielen vielen Dank!!
Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
A1 = Seite1
A2 = Seite2
A3 = Seite3
A4 = Seite4 welches aber nicht kontroliert werden soll und den class = on erhalten soll.
usw.?
Bitte warten ..
Mitglied: 114757
LÖSUNG 26.02.2015, aktualisiert um 11:05 Uhr
Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
Ist das hier ein Wunschkonzert ??!
Lern mal Javascript ...
Bitte warten ..
Mitglied: smackee
26.02.2015 um 11:05 Uhr
Zitat von 114757:

> Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
Ist das hier ein Wunschkonzert ??!
Lern mal Javascript ...

Stimmt auch wieder, also ich versuch selber.
Vielen dank für deine Hilfe!!

Gruss
Bitte warten ..
Mitglied: smackee
02.03.2015 um 09:01 Uhr
Hallo zusammen

Ich habe einbisschen rumgeschaut und gesucht und konnte leider kein passendes Beispiel Script finden welches mir weiter hilft. Es ist ja nicht so als ob ich keine Vorarbeiten geleistet habe ich habe den falschen Weg genommen..

Es wäre toll wenn mir jemand beim Anpassen des Scripts helfen kann, da ich ja auch was lernen will wäre es toll um eine kleine Erklärung.

Gruss und vielen Dank
Bitte warten ..
Mitglied: smackee
05.03.2015, aktualisiert um 10:31 Uhr
Hallo zusammen

Also ich habe schon etwas geschaft jedoch brauche ich einen kleinen Rat.

01.
<html> 
02.
<head> 
03.
<title>Allgemeine Elemente formatieren mit CSS</title> 
04.
 
05.
<style type="text/css"> 
06.
 
07.
/* Für Countdown */ 
08.
div.on { 
09.
text-align:center; 
10.
background:#0FF; 
11.
border:1px solid #0AA; 
12.
width:35px; 
13.
height:35px; 
14.
-webkit-border-radius:15px; 
15.
-moz-border-radius:35px; 
16.
border-radius:15px; 
17.
font-family:arial; 
18.
color:#0AA; 
19.
20.
 
21.
div.off { 
22.
text-align:center; 
23.
background:#FFF; 
24.
border:1px solid #0AA; 
25.
width:35px; 
26.
height:35px; 
27.
-webkit-border-radius:15px; 
28.
-moz-border-radius:15px; 
29.
border-radius:15px; 
30.
font-family:arial; 
31.
color:#CCC; 
32.
33.
 
34.
/* Für Big Brother */ 
35.
.red {  
36.
text-align:center; 
37.
background-color: red; 
38.
border:1px solid #0AA; 
39.
width:35px; 
40.
height:35px; 
41.
-webkit-border-radius:15px; 
42.
-moz-border-radius:35px; 
43.
border-radius:15px; 
44.
font-family:arial; 
45.
46.
.yellow { 
47.
text-align:center;  
48.
background-color: yellow; 
49.
border:1px solid #0AA; 
50.
width:35px; 
51.
height:35px; 
52.
-webkit-border-radius:15px; 
53.
-moz-border-radius:35px; 
54.
border-radius:15px; 
55.
font-family:arial; 
56.
57.
.green {  
58.
text-align:center; 
59.
background-color: green; 
60.
border:1px solid #0AA; 
61.
width:35px; 
62.
height:35px; 
63.
-webkit-border-radius:15px; 
64.
-moz-border-radius:35px; 
65.
border-radius:15px; 
66.
font-family:arial; 
67.
68.
.purple {  
69.
text-align:center; 
70.
background-color: purple; 
71.
border:1px solid #0AA; 
72.
width:35px; 
73.
height:35px; 
74.
-webkit-border-radius:15px; 
75.
-moz-border-radius:35px; 
76.
border-radius:15px; 
77.
font-family:arial; 
78.
79.
 
80.
</style> 
81.
<!-- Countdown --> 
82.
<script language="Javascript"> 
83.
 
84.
var countdown; 
85.
var countdown_number; 
86.
var countdown_number_zwei 
87.
var countdown_number_element; 
88.
var countdown_number_old; 
89.
 
90.
function countdown_init() { 
91.
    countdown_number = 1; 
92.
    countdown_trigger(); 
93.
94.
 
95.
function countdown_trigger() { 
96.
    if(countdown_number < 7) { 
97.
        countdown_number_old = "A" + ( countdown_number - 1 );     	 
98.
       	countdown_number_element = "A" + countdown_number; 
99.
         
100.
        document.getElementById(countdown_number_element).className = "on";  
101.
        if(countdown_number >1){ 
102.
           document.getElementById(countdown_number_old).className = "off";  
103.
104.
        if(countdown_number < 7) { 
105.
            countdown = setTimeout('countdown_trigger()', 11000); 
106.
            countdown_number = countdown_number + 1; 
107.
108.
        
109.
110.
     
111.
112.
 
113.
function countdown_clear() { 
114.
    clearTimeout(countdown); 
115.
116.
 
117.
</script> 
118.
<!-- Big Brother --> 
119.
<script type="text/javascript"> 
120.
function checkClassA1(){ 
121.
	var url = "URL1"; 
122.
	var xhr = new XMLHttpRequest(); 
123.
	xhr.open('GET',url); 
124.
	xhr.responseType = 'document'; 
125.
	xhr.onload = function(e) { 
126.
		var doc = this.response; 
127.
		if (doc.body.className.match(/red/i)){ 
128.
			document.getElementById("A1").className = "red";	 
129.
130.
		if (doc.body.className.match(/yellow/i)){ 
131.
			document.getElementById("A1").className = "yellow";	 
132.
133.
		if (doc.body.className.match(/green/i)){ 
134.
			document.getElementById("A1").className = "green";	 
135.
136.
		if (doc.body.className.match(/purple/i)){ 
137.
			document.getElementById("A1").className = "purple";	 
138.
139.
	}; 
140.
	xhr.send(); 
141.
142.
function checkClassA2(){ 
143.
	var url = "URL2"; 
144.
	var xhr = new XMLHttpRequest(); 
145.
	xhr.open('GET',url); 
146.
	xhr.responseType = 'document'; 
147.
	xhr.onload = function(e) { 
148.
		var doc = this.response; 
149.
		if (doc.body.className.match(/red/i)){ 
150.
			document.getElementById("A2").className = "red";	 
151.
152.
		if (doc.body.className.match(/yellow/i)){ 
153.
			document.getElementById("A2").className = "yellow";	 
154.
155.
		if (doc.body.className.match(/green/i)){ 
156.
			document.getElementById("A2").className = "green";	 
157.
158.
		if (doc.body.className.match(/purple/i)){ 
159.
			document.getElementById("A2").className = "purple";	 
160.
161.
	}; 
162.
	xhr.send(); 
163.
164.
function checkClassA3(){ 
165.
	var url = "URL3"; 
166.
	var xhr = new XMLHttpRequest(); 
167.
	xhr.open('GET',url); 
168.
	xhr.responseType = 'document'; 
169.
	xhr.onload = function(e) { 
170.
		var doc = this.response; 
171.
		if (doc.body.className.match(/red/i)){ 
172.
			document.getElementById("A3").className = "red";	 
173.
174.
		if (doc.body.className.match(/yellow/i)){ 
175.
			document.getElementById("A3").className = "yellow";	 
176.
177.
		if (doc.body.className.match(/green/i)){ 
178.
			document.getElementById("A3").className = "green";	 
179.
180.
		if (doc.body.className.match(/purple/i)){ 
181.
			document.getElementById("A3").className = "purple";	 
182.
183.
	}; 
184.
	xhr.send(); 
185.
186.
function checkClassA4(){ 
187.
	var url = "URL4"; 
188.
	var xhr = new XMLHttpRequest(); 
189.
	xhr.open('GET',url); 
190.
	xhr.responseType = 'document'; 
191.
	xhr.onload = function(e) { 
192.
		var doc = this.response; 
193.
		if (doc.body.className.match(/red/i)){ 
194.
			document.getElementById("A4").className = "red";	 
195.
196.
		if (doc.body.className.match(/yellow/i)){ 
197.
			document.getElementById("A4").className = "yellow";	 
198.
199.
		if (doc.body.className.match(/green/i)){ 
200.
			document.getElementById("A4").className = "green";	 
201.
202.
		if (doc.body.className.match(/purple/i)){ 
203.
			document.getElementById("A4").className = "purple";	 
204.
205.
	}; 
206.
	xhr.send(); 
207.
208.
</script> 
209.
</head> 
210.
<body onload="countdown_init();checkClassA1();checkClassA2();checkClassA3();checkClassA4()"><font face="Arial" size=1> 
211.
<div id="A1" class="off" ><font size=6>1</font></div><font size=4><br><br></font> 
212.
<div id="A2" class="off" ><font size=6>2</font></div><font size=4><br><br></font> 
213.
<div id="A3" class="off" ><font size=6>3</font></div><font size=4><br><br></font> 
214.
<div id="A4" class="off" ><font size=6>4</font></div><font size=4> <br><br></font> 
215.
<div id="A5" class="off" ><font size=6>5</font></div><font size=4><br><br></font> 
216.
<div id="A6" class="off" ><font size=6>6</font></div><font size=4><br><br></font> 
217.
<!-- 
218.
<div id="A7" class="off" ><font size=6>7</font></div> <br><br> 
219.
<div id="A8" class="off" ><font size=6>8</font></div> <br><br> 
220.
<div id="A9" class="off" ><font size=6>9</font></div> <br><br> 
221.
--> 
222.
</font> 
223.
</body> 
224.
</html>
Hier ist mein Code, mehrere URL's können eingebunden werden, jedoch bringe ich das mit den Farben nicht zu stande. Es würde auch schon genügen wenn bei (Zeile 100 - 102):

01.
document.getElementById(countdown_number_element).className = "on";  
02.
        if(countdown_number >1){ 
03.
           document.getElementById(countdown_number_old).className = "off";
Statt className = "off" die Klasse übernimmt welches vorhin schon verwendet wurde z.B. "green"

Hat mir jemand einen Rat?
Bitte warten ..
Neuester Wissensbeitrag
Internet

Unbemerkt - Telekom Netzumschaltung! - BNG - Broadband Network Gateway

(3)

Erfahrungsbericht von ashnod zum Thema Internet ...

Ähnliche Inhalte
JavaScript
gelöst HTML-Javascript - Auslesen von Formularfeldern (1)

Frage von internet2107 zum Thema JavaScript ...

Batch & Shell
Eventlog Druckjobs mit VBS auslesen (2)

Frage von joni2000de zum Thema Batch & Shell ...

Batch & Shell
gelöst Appx aus Image auslesen und entfernen (9)

Frage von Markus2016 zum Thema Batch & Shell ...

Microsoft Office
Registerkarte in Excel automatisch färben (10)

Frage von ralfkausk zum Thema Microsoft Office ...

Heiß diskutierte Inhalte
Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...

Grafikkarten & Monitore
Tonprobleme bei Fernseher mit angeschlossenem Laptop über HDMI (11)

Frage von Y3shix zum Thema Grafikkarten & Monitore ...

Microsoft Office
Keine Updates für Office 2016 (11)

Frage von Motte990 zum Thema Microsoft Office ...