✔ Cookie setzen und Inhalt ersetzen

F

fixxxxxi

Erfahrenes Mitglied
Hallo,

ich habe mir in miener index.php ein Javascript gebastelt welches super funktioniert und folgendermaßen aussieht:

Code: 
<!-- FAQ - KONTAKT ANFANG-->
<script type="text/javascript">
         function close(pageElement) {
            document.getElementById(pageElement).style.visibility='hidden';
            document.getElementById(pageElement).innerHTML = "";
         }
      </script>

<div id="faqkontakt">
  <div style="background: transparent url(images/blase.gif) no-repeat scroll left -20px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
    <h2 style="margin: 0pt 0pt 0pt 12px; padding: 12px 12px 0pt 24px; background: transparent url(images/symb_win.png) no-repeat scroll 0pt 11px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><a href="javascript:close('faqkontakt');" style="float: right;">
    <img src="images/info_1.gif" onmouseover="this.src='images/info_2.gif'" onmouseout="this.src='images/info_1.gif'" alt="Schliessen" style="border: 0pt none ;"></a><a style="color: rgb(51, 51, 51); text-decoration: none; font-family: Arial,sans-serif; font-style: normal; font-variant: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal; font-weight: bold;">Irgendetwas unklar?</a></h2>
    <p style="margin: 0pt 0pt 0pt 12px; padding: 4px 12px 0pt 0pt; background: transparent url(images/blase.gif) no-repeat scroll right -30px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><a href="index.php?site=faq" target="_self" style="color: rgb(51, 51, 51); text-decoration: none; font-family: Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;">
    Bitte schau zuerst in die FAQ's, bevor du Dich im IRC, Teamspeak oder ICQ, fragend an die Admins wendest. 
    <br>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer_2.gif" style="border: 0pt none ;"></a>
    <a href="index.php?site=cup_chat" ><img src="images/mirc_2.png" onmouseover="this.src='images/mirc.gif'" onmouseout="this.src='images/mirc_2.png'" title="IRC #to-nacht" alt="IRC Kontakt" style="border: 0pt none ;"></a>
    <a href="index.php?site=static&staticID=2" ><img src="images/icq_2.png" onmouseover="this.src='images/icq.gif'" onmouseout="this.src='images/icq_2.png'" title="ICQ" alt="ICQ Kontakt" style="border: 0pt none ;"></a>
    <a href="teamspeak://78.46.39.118:3000" ><img src="images/ts_2.png" onmouseover="this.src='images/ts.png'" onmouseout="this.src='images/ts_2.png'" title="TS&sup2;" alt="Teamspeak&sup2;" style="border: 0pt none ;"></a>
</a>
    </a>
    </p>
  </div>
  <p style="margin: 0pt; padding: 0pt; background: transparent url(images/blase.gif) no-repeat scroll left bottom; height: 28px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;</p></div>
<!-- FAQ - KONTAKT ENDE-->

Ich möchte den Inhalt der "Blase" jedoch bei jedem Aufruf anders anzeigen lassen. Ich habe mir gedacht, vllt mit einem Cookie zu arbeiten, der auf dem Rechner gesetzt weird, in dem der letzte Inhalt gespeichert wurde.

Im Prinzip sind es nur zwei Inhalte. Der eine so wie er im Javascript oben und auf dem angehängtem Screen zu sehen ist, und der andere Inhalt wird so ähnlich sein, nur mit anderen Bildern und Text.

Wie kann ich das realisieren?

LG Chris
 

Anhänge

  • Unbenannt-2.jpg
    Unbenannt-2.jpg
    71,1 KB · Aufrufe: 18
Das hat zwar nichts mit Java zu tun, aber warum nicht einfach ein Zufallsgenerator?
Hab noch nie gesehen das mit JS ein Cookie gesetzt werden kann, dachte man kann den Browser nur im Header darum bitten.
 
Hmmm... das mit dem Cokkie war ja auch nur ne Idee. Mit einem Zufallsgenerator wär natürlich super. Nur steh ich da vor dem nächstem Problem.

Ich habe zwar diverse Scripte gefunden, aber diese wechseln einfach nur per Zufall Bild oder/und Text. Jedoch keine kompletten div's.
 
Ist zwar bei JS schon ein Jahr her, aber das müsste doch so in etwa gehen:

Java: 
function machwas()
{
	var randomize = Math.round(Math.random); //Entweder 0 oder 1, Zufallszahl gerundet.

	if(randomize == 0)
	{
		Document.getElementById('fragediv').innerHTML = "Der Inhalt des ersten Divs";
	}
	elseif(randomize == 1)
	{
		Document.getElementById('fragediv').innerHTML = "Der Inhalt des zweiten Divs";
	}
}

Ist zwar jetzt eigendlich Psydocode, aber so in etwa müsste es soweit ich mich errinnere hinhauen.
 
So?

Code: 
<script type="text/javascript">
function machwas()
{
    var randomize = Math.round(Math.random); //Entweder 0 oder 1, Zufallszahl gerundet.
 
    if(randomize == 0)
    {
        Document.getElementById('fragediv').innerHTML = "  <div><p>test123</p></div>";
    }
    elseif(randomize == 1)
    {
        Document.getElementById('fragediv').innerHTML = "  <div><p>test456</p></div>";
    }
}
</script>

Nur was ich net verstehe, wie ich die Funktion dann aufrufe. Weil so passiert garnix :P
 
Dann schau in die Fehlerkonsole, (unter FF, wies in Opera heißt weiß ich nicht, unter IE einfach links unten klicken, einen anderen Browser außer die FF-Abarten verwendest du ja hoffentlich nicht).
Wie gesagt, ist nur Pseudocode und eigendlich nur geraten.
 
Die Fehlerkonsole zeigt keine Fehler an! Ums noch mal deutlcih zu machen - meine testhtml sieht nun so aus:

HTML: 
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
<script type="text/javascript">
function machwas()
{
    var randomize = Math.round(Math.random); //Entweder 0 oder 1, Zufallszahl gerundet.
 
    if(randomize == 0)
    {
        Document.getElementById('fragediv').innerHTML = "  <div><p>test123</p></div>";
    }
    elseif(randomize == 1)
    {
        Document.getElementById('fragediv').innerHTML = "  <div><p>test456</p></div>";
    }
}
</script>
  </body>
</html>

Dieses script wird ja nirgends aufgerufen. Wie soll denn da auch ne Ausgabe erfolgen. So erhalte ich lediglich ne leere weiße Seite! Wir muss die html aussehen?
 
Hi,

Alternativ-Vorschlag für eine zufällige Textausgabe:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>tutorials.de | demo_fixxxxxi</title>

<script type="text/javascript">
<!--
function swap() {
var numtext=2;
rndtext=new Array("<p>foo<\/p>", "<p>bar<\/p>");
x=(Math.floor(Math.random()*numtext));
randomtext=(rndtext[x]);
document.getElementById("textBox").innerHTML = randomtext;
}

window.onload = function(){
swap();
}
//-->
</script>

</head>
<body>

<div id="textBox"></div>

</body>
</html>


mfg Maik
 
Danke für hilfreiche Antwort. Vom Prinzip her die richtige Richtung. Nur möchte ich an der Stelle von bla und blub ein div einsetzen.

bla wäre:

Code: 
<div id="faqkontakt">
  <div style="background: transparent url(images/blase.gif) no-repeat scroll left -20px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
    <h2 style="margin: 0pt 0pt 0pt 12px; padding: 12px 12px 0pt 24px; background: transparent url(images/symb_win.png) no-repeat scroll 0pt 11px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><a href="javascript:close('faqkontakt');" style="float: right;">
    <img src="images/info_1.gif" onmouseover="this.src='images/info_2.gif'" onmouseout="this.src='images/info_1.gif'" alt="Schliessen" style="border: 0pt none ;"></a><a style="color: rgb(51, 51, 51); text-decoration: none; font-family: Arial,sans-serif; font-style: normal; font-variant: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal; font-weight: bold;">Irgendetwas unklar?</a></h2>
    <p style="margin: 0pt 0pt 0pt 12px; padding: 4px 12px 0pt 0pt; background: transparent url(images/blase.gif) no-repeat scroll right -30px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><a href="index.php?site=faq" target="_self" style="color: rgb(51, 51, 51); text-decoration: none; font-family: Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;">
    Bitte schau zuerst in die FAQ's, bevor du Dich im IRC, Teamspeak oder ICQ, fragend an die Admins wendest. 
    <br>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer.gif" style="border: 0pt none ;"></a>
<a><img src="images/leer_2.gif" style="border: 0pt none ;"></a>
    <a href="index.php?site=cup_chat" ><img src="images/mirc_2.png" onmouseover="this.src='images/mirc.gif'" onmouseout="this.src='images/mirc_2.png'" title="IRC #to-nacht" alt="IRC Kontakt" style="border: 0pt none ;"></a>
    <a href="index.php?site=static&staticID=2" ><img src="images/icq_2.png" onmouseover="this.src='images/icq.gif'" onmouseout="this.src='images/icq_2.png'" title="ICQ" alt="ICQ Kontakt" style="border: 0pt none ;"></a>
    <a href="teamspeak://78.46.39.118:3000" ><img src="images/ts_2.png" onmouseover="this.src='images/ts.png'" onmouseout="this.src='images/ts_2.png'" title="TS&sup2;" alt="Teamspeak&sup2;" style="border: 0pt none ;"></a>
</a>
    </a>
    </p>
  </div>
  <p style="margin: 0pt; padding: 0pt; background: transparent url(images/blase.gif) no-repeat scroll left bottom; height: 28px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;</p>

Und blub wäre:

Code: 
<div id="faqkontakt">
  <div style="background: transparent url(images/blase.gif) no-repeat scroll left -20px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
    <h2 style="margin: 0pt 0pt 0pt 12px; padding: 12px 12px 0pt 24px; background: transparent url(images/symb_win.png) no-repeat scroll 0pt 11px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><a href="javascript:close('faqkontakt');" style="float: right;">
    <img src="images/info_1.gif" onmouseover="this.src='images/info_2.gif'" onmouseout="this.src='images/info_1.gif'" alt="Schliessen" style="border: 0pt none ;"></a><a style="color: rgb(51, 51, 51); text-decoration: none; font-family: Arial,sans-serif; font-style: normal; font-variant: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal; font-weight: bold;">Test</a></h2>
    <p style="margin: 0pt 0pt 0pt 12px; padding: 4px 12px 0pt 0pt; background: transparent url(images/blase.gif) no-repeat scroll right -30px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><a href="http://www.test.de" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; font-family: Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;">
    test test test test test test test! 
    <br>
</a>
    </a>
    </p>
  </div>
  <p style="margin: 0pt; padding: 0pt; background: transparent url(images/blase.gif) no-repeat scroll left bottom; height: 28px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;</p>

also nicht nur trext sondern textcode. Wie funktioniert das?
 
Erstens spielt sich dein "variabler Inhalt" in dem p-Element ab, also brauchst du dieses Element, wie auch den Rest des "umgebenden" HTML-Codes nicht im Script auszulagern, und zweitens kann die innerHTML-Eigenschaft HTML-Tags enthalten, wie ich es in meinem Beispiel demonstriere, und wofür sie nunmal auch vorgesehen ist.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück