Hintergrundfarbe selbst festlegen und eingestellt lassen

Igel..nuff..nuff

Liebe Forengemeinde

Ich hab mal ein Anliegen, eher ein Problem, mit dem ich schon den ganzen Tag beschäftigt bin und selbst Google mir nicht weiter helfen konnte (zumindest nicht für mich verständlich und nachvollziehbar).

Ich möchte mir eine Lokale "Thunderbird" Startseite erstellen (alternativ auf für Firefox) und habe soweit schon einiges geschafft (hab absolut keine html/css/Java Kenntnisse)
Hier ist der komplette Quelltext:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Thunderbird Startseite</title>
  <style>
select.Menue{
font-family: Calibri;
font-size: 10pt;
font-style: normal;
font-weight: bold;
}
option.Menue0{
background-color:#CC0033;
}
option.Menue1{
background-color:#FFFFCC;
}
option.Menue2{
background-color:#CCFFCC;
}
option.Menue3{
background-color:#CCFFFF;
}
option.Menue4{
background-color:#FF33FF;
}
option.Menue5{
background-color:#FFD700;
}
option.Menue6{
background-color:#FFFFFF;
}
  </style>
</head>
<body>
<div style="position: absolute; top: 600px; left: 1000px;">
<form name="Farbwahl">
  <select class="Menue"
 onchange="document.bgColor=this.options[selectedIndex].value">
  <option class="Menue0" value="#CC0033">Rot
  </option>
  <option class="Menue1" value="#FFFFCC">Gelb
  </option>
  <option class="Menue2" value="#CCFFCC">Gr&uuml;n
  </option>
  <option class="Menue3" value="#CCFFFF">Blau
  </option>
  <option class="Menue4" value="#FF33FF">Pink
  </option>
  <option class="Menue5" value="#FFD700">Orange
  </option>
  <option class="Menue6" value="#FFFFFF">Wei&szlig;
  </option>
  </select>
</form>
</div>
<div
 style="text-align: left; position: absolute; top: 75px; font-family: Times New Roman; left: 100px; width: 455px;">
<big><big><big><big>Thunderbird
Startseite</big></big></big> </big></div>
<div style="position: absolute; top: 10px; left: 910px;"><img
 style="width: 180px; height: 180px;" alt=""
 src="http://www.thunderbird-mail.de/_grafik/mailicon256.png"> </div>
<div style="position: absolute; top: 220px; left: 900px;">
<iframe
 src="http://www.schulferien.org/Uhrzeit/uhrzeit_partner.html?size=30&amp;ccolor=#0000FF&amp;bgcolor=#FFFFFF"
 name="Uhrframe" marginheight="0" marginwidth="0"
 frameborder="0" height="100" scrolling="no"
 width="250"> </iframe></div>
</body>
</html>

Alles anzeigen

Jetzt wird sich einer sagen, was mein Problem ist, weil die Seite ja an sich gut aussieht, nur möcht ich halt, dass die per Dropdown Menü ausgewählte Hintergrundfarbe beim nächsten öffnen erhalten bleibt.
Ich weiß bereits, dass es mittels Cookie gehen soll und ich hab auch schon damit experimentiert, nur funktionierte es leider nicht und ich weiß einfach nicht was der Fehler ist.

Könnte mir jemand das Cookiescript in meinen Quelltext implementieren, sodass es dann funktioniert? und vorallem farblich markieren was du eingefügt hast, damit ich verstehen kann, was ich vieleicht falsch gemacht habe das wäre echt Klasse :T

synaptic

also wir sind hier ein hilfeforum nd kein machs-dir-forum
am einfachsten ist, wenn du den hexwert der farbe oder den klassennamen im cookie speicherst und dann beim laden der seite das ganze ausliest, um es zu verarbeiten.

dir jetzt nen code zu schreiben ist der falsche ansatz, weil du daraus nichts lernst

und für die zukunft lies bitte auch die namen der forenbereiche und die erklärung dazu..
wenn du nen script problem hast, schreib deinen thread im script-forum (achtung.. das is das für php, javascript etc und nicht das scriptarchiv)

zeige was du hast und dann sag wo dein problem ist...

ich geh ja auch nich zu nem hobbyschreiner und sag: hey ich bekomm keine türzarge gebaut, mach du mir das mal ich geb dir auch nichts dafür.
wenn du nen job hast, poste den job und die gegenleistungs ins jobforum

Igel..nuff..nuff

Entschuldigung, wollte nicht so rüber kommen, dass mir einer die Webseite fertig zusammenbasteln soll.
Ich wollt eigendlich nur wissen, was ich wo einfügen muss, damit die Hintergrundfarbe gespeichert bleibt.

Auf der SEITE hab ich mich bereits belesen, die sogar genau mein Problem beschreibt, ich hab auch alle für mich nachvollziehbaren Möglichkeiten durchprobiert, nur bin ich nicht zur Lösung gekommen.
Ich hoffe eigentlich, das mich einer aufklärt, was ich wo wie einsetzen muss und vorallem warum, weil das konnte mir bis jetzt keine Seite verständlich erklären.

synaptic

also du brauchst eine funktion die die hintergrundfarbe und ggf andere style-anweisungen nach der entsprechenden auswahl setzt und ebenfalls mit dem setzen dieser sachen sollte diese funktion ein cookie setzen mit den infos, die du brauchst um später diesen style wiederherstellen zu können.

dann brauchst du ein script, was beim laden ausgeführt wird, dieses cookie ausliest und dann das gleiche macht wie die funktion vorher: den entsprechenden style setzen....

wenn du dem coockie ne laaaange lebensdauer mitgibst brauchste es net erneuen, wenn der user auf deine seite kommt..

das hier wird dir beim umgang mit keksen helfen..
http://www.html-world.de/program/js_e_6.php

Igel..nuff..nuff

Danke schonmal der schnellen Antwort
Ich hab mir auch die Seite komplett durchgelesen, nur versteh ich irgendwie die Zusammenhänge nicht, also meine damit, was muss ich wohin schreiben, also in den Head-Bereich oder in den Body-Bereich
dann versteh ich auch nicht ganz, was

HTML

var a = new Date();
a = new Date(a.getTime() +1000*60*60*24*365);
document.cookie = 'meincookie=meinwert; expires='+ 
                  a.toGMTString()+';';

also speziell: 'meincookie=meinwert; expires='
bedeuten soll und wie ich es speziell auf meinen Quelltext anwenden soll?

Am ende ist es ganz einfach, aber ich find irgendwie den Faden nicht, bitte verzeifelt nicht an mir

synaptic

aaalso deine script-anweisungen funktionen etc kommen in ein script-tag
da hab ich auch was für dich, was dir evtl des ganze erleichtern wird..

http://home.arcor.de/synaptic/JS_basics/

und die variable meinwert is bei dir da nich gesetzt...

offtopic:
und ich glaube ich werde meinen arcor-space lediglich zum hosten von files nutzen... jetzt kloppen die schon überall ihre kack werbung rein und sagen nichma bescheid... grml

scher dich nich ums design.. da gibts keins..
aber da wird dir zumindest erklärt, wie du javascripte einbindest.

Igel..nuff..nuff

Also ich hab mich auf deiner Seite belesen und mal in Kombination mit der SEITE meinen Quelltext bearbeitet und sieht jetzt so aus:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Thunderbird Startseite</title>
  <style>
select.Menue{
font-family: Calibri;
font-size: 10pt;
font-style: normal;
font-weight: bold;
}
option.Menue0{
background-color:#CC0033;
}
option.Menue1{
background-color:#FFFFCC;
}
option.Menue2{
background-color:#CCFFCC;
}
option.Menue3{
background-color:#CCFFFF;
}
option.Menue4{
background-color:#FF33FF;
}
option.Menue5{
background-color:#FFD700;
}
option.Menue6{
background-color:#FFFFFF;
}
  </style>
</head>
<body>
<!-- Beginn des angepassten Cookie-Skriptes -->
<script type="text/javascript">
/* <![CDATA[ */
function writeCookie('thunderbird', 'select class='Menue'', 128) {
var expire = '';
if(hours != null) {
expire = new Date((new Date()).getTime() + 128 * 3600000);
expire = '; expires=' + expire.toGMTString();
}
document.cookie = 'thunderbird' + '=' + escape(value) + expire;
}
/* ]]> */
</script><!-- Ende des angepassten Cookie-Skriptes -->
<div style="position: absolute; top: 600px; left: 1000px;">
<form name="Farbwahl">
  <select class="Menue"
 onchange="document.bgColor=this.options[selectedIndex].value; writeCookie('thunderbird', this.options[selectedIndex].value , 128);">
  <option class="Menue0" value="#CC0033">Rot </option>
  <option class="Menue1" value="#FFFFCC">Gelb </option>
  <option class="Menue2" value="#CCFFCC">Gr&uuml;n
  </option>
  <option class="Menue3" value="#CCFFFF">Blau </option>
  <option class="Menue4" value="#FF33FF">Pink </option>
  <option class="Menue5" value="#FFD700">Orange </option>
  <option class="Menue6" value="#FFFFFF">Wei&szlig;
  </option>
  </select>
</form>
</div>
<div
 style="text-align: left; position: absolute; top: 75px; font-family: Times New Roman; left: 100px; width: 455px;"><big><big><big><big>Thunderbird
Startseite</big></big></big> </big></div>
<div style="position: absolute; top: 10px; left: 910px;"><img
 style="width: 180px; height: 180px;" alt=""
 src="mailicon256.png"> </div>
<div style="position: absolute; top: 220px; left: 900px;">
<iframe
 src="http://www.schulferien.org/Uhrzeit/uhrzeit_partner.html?size=30&amp;ccolor=#0000FF&amp;bgcolor=#FFFFFF"
 name="Uhrframe" marginheight="0" marginwidth="0"
 frameborder="0" height="100" scrolling="no"
 width="250"> </iframe></div>
</body>
</html>

Alles anzeigen

Nur schreibt er kein Cookie (also ich find es zumindest nicht in der Cookie-Übersicht vom Firefox/Thunderbird)

Hab ich noch was vergessen?

desweiteren hab ich noch diese Befehlszeile, die der Seite sagt, dass sie die im cookie hinterlegte Hintergrundfarbe laden soll
also diese Zeile:

HTML

<body onLoad="document.bgColor=readCookie('thunderbird');">

Nur egal wo ich die hinschreibe (außer in die <body> Klammer) löscht immer NVU diese Befehlszeile, ich weiß nur nicht warum

synaptic

also dir fehlte die komplette funktion readCookie, dann haste die writeCookie so geschrieben, dass die keine parameter übernimmt..
hab des jetzt mal alles umgeschrieben, is aber so nur für diese eine funktionsweise!
wenn du des allgemeingültiger haben möchtest, dann müsstest du dir die beiden funktionen von deiner verlinkten website so kopieren, wie sie sind und dann die aufrufe entsprechend anpassen..

was dein nvu da baut, kapier ich net.. aber ich nutz auh notepad++

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Thunderbird Startseite</title>
  <style>
select.Menue{
font-family: Calibri;
font-size: 10pt;
font-style: normal;
font-weight: bold;
}
option.Menue0{
background-color:#CC0033;
}
option.Menue1{
background-color:#FFFFCC;
}
option.Menue2{
background-color:#CCFFCC;
}
option.Menue3{
background-color:#CCFFFF;
}
option.Menue4{
background-color:#FF33FF;
}
option.Menue5{
background-color:#FFD700;
}
option.Menue6{
background-color:#FFFFFF;
}
  </style>
 <!-- Beginn des angepassten Cookie-Skriptes -->
<script type="text/javascript">
    /* <![CDATA[ */
    function writeCookie(name, value, hours) {
        var expire = '';
        if(hours != null) {
            expire = new Date((new Date()).getTime() + 128 * 3600000);
            expire = '; expires=' + expire.toGMTString();
        }
        document.cookie = name + '=' + escape(value) + expire;
    }

    function readCookie() {
     var cookieValue = '';
     var search = 'thunderbird' + '=';
     if(document.cookie.length > 0) {
         offset = document.cookie.indexOf(search);
         if(offset != -1) {
             offset += search.length;
             end = document.cookie.indexOf(';', offset);
             if(end == -1) end = document.cookie.length;
             cookieValue = unescape(document.cookie.substring(offset, end));

         }
     }
     document.body.style.background = cookieValue;
     return cookieValue;
 }
 
 window.onload =readCookie;
    /* ]]> */
</script><!-- Ende des angepassten Cookie-Skriptes -->
</head>


<body>


<div style="position: absolute; top: 600px; left: 1000px;">
<form name="Farbwahl">
  <select class="Menue"
 onchange="document.bgColor=this.options[selectedIndex].value; writeCookie('thunderbird', this.options[selectedIndex].value , 128);">
  <option class="Menue0" value="#CC0033">Rot </option>
  <option class="Menue1" value="#FFFFCC">Gelb </option>
  <option class="Menue2" value="#CCFFCC">Gr&uuml;n
  </option>
  <option class="Menue3" value="#CCFFFF">Blau </option>
  <option class="Menue4" value="#FF33FF">Pink </option>
  <option class="Menue5" value="#FFD700">Orange </option>
  <option class="Menue6" value="#FFFFFF">Wei&szlig;
  </option>
  </select>
</form>
</div>
<div
 style="text-align: left; position: absolute; top: 75px; font-family: Times New Roman; left: 100px; width: 455px;"><big><big><big><big>Thunderbird
Startseite</big></big></big> </big></div>
<div style="position: absolute; top: 10px; left: 910px;"><img
 style="width: 180px; height: 180px;" alt=""
 src="mailicon256.png"> </div>
</body>
</html>

Alles anzeigen

Igel..nuff..nuff

also musste ich das Skript doch in den Head schreiben?!!

Ich hab jetzt auch mal Notepad++ verwendet und er markiert einzelnes anders als nvu, find ich persönlich sogar besser, weil ich jetzt irgendwie die zusammenhänge besser verstehen kann......wie welcher Wert mit was arbeitet

Und danke für die Hilfe

synaptic

nee musste nich, aber ich find javascripte im kopf einfach besser.
manche scripte müssen auch in den body geschrieben werden oder evtl nur teile davon..

nem javascript ist es zu 95% egal wo es in der seite steht

Igel..nuff..nuff

Aso....okay das is schonmal gut zu wissen

Das mit dem Keks klappt prima, dafür dank ich dir echt rießig

Nur hab ich festgestellt, dass wen eine Farbe eingestellt ist, also im Cookie gespeichert ist und natürlich von ihm auch ausgegeben wird und man danach die Farbe wechselt, wird sie nicht sofort (also optisch) geändert, sondern man muss die Seite neu laden.......rein von der Logik her stimm ich dem auch zu, weil dem Skript ja nicht gesagt wird, das es nach dem ändern auch die Seite neu laden muss, oder doch nicht?
Ich hab auch auf deiner Seite weiter gelesen, um den Quelltext von dem Fehler zu befreien......aber hmmm......ich bekomm's irgendwie doch nicht hin

Es hat ja aber an sich was mit der Zeile:

HTML

<select class="Menue"
  onchange="document.bgColor=this.options[selectedIndex].value; writeCookie('thunderbird', this.options[selectedIndex].value , 128);">

zu tun, weil nachdem es im Cookie geschrieben ist, aktualisiert er nur den Wert, gibt es aber eben nicht zeitgleich aus.......oder bin ich doch wieder auf dem falschen Weg?

Igel..nuff..nuff

Also Synaptic

ich hab es jetzt hinbekommen
Bin durch Zufall darauf gekommen, ich hatte mir einen Button gebastelt, der die Seite neu lädt, damit konnt ich recht gut leben, hat mich zumindest nicht weiter gestört
Jetzt aber, als ich auch Hintergrundgrafiken verwenden wollte, die natürlich auch im Cookie gespeichert werden sollen, bin ich dahinter gestiegen und klappt alles prima

Also dank dir nochmal für deinen anstupser im JavaSkript, wegen dem Cookie

synaptic

jau kein ding...
du kannst das ganze natürlich noch differenzierter machen, indem du verschiedene stylesheets baust und diese dann dynamisch, sei es mit javascript oder sei es mit php, anhand des cookies ausliest und einbindest..

da schreibste dann halt nur blau, rot, lila oder so in des keksdings und dann wählste anhand des codes aus, welches stylesheet geladen werden soll

Igel..nuff..nuff

Oh Gott

Ich glaub das is mir schon wieder zu hoch ich bin schonmal froh, überhaupt soweit gekommen zu sein, wie ich jetzt bin gerade, weil ich garkeine Ahnung habe bzw. jetzt mittlerweile ein wenig

Ich werd mal morgen die html posten, so wie sie jetzt ist, mit allen Elementen, die ich bereits eingebaut habe mal sehen was du dazu sagt, so als Profi

synaptic

kannste auch php nutzen oder nur html und js?

Igel..nuff..nuff

an programmiersprachen kann ich garkeine
hab nur bei php die Forensprache, also:

[CODE*][*B][*COLOR=SeaGreen]Text wird Grün[/COLOR][/B]
[*URL='http://www.google.de']Google[/URL][/CODE]
(ohne den sternchen, weil der würde es sonst ausführen)

den Spass halt
aber das is ja auch nüscht

Igel..nuff..nuff

ich hab es doch noch schnell fertsch gemacht

in der angehängten ZIP-Datei sind die wichtigen bilder und eben die html Datei

Bin mal gespannt, wass de dazu sagt

synaptic

ich würd noch etwas daran feilen, wenn du das fenster kleiner machst siehste was ich meine

Igel..nuff..nuff

darauf hab ich auch schon geachtet, die Bilder rastern sich runter, wenn die Fenstergröße verringert wird

Was mich eher stört bzw. würd ich gern noch ändern, dass die Diashow eher eine Slideshow ist, also mit einem sanften Übergang.
Und desweiteren das ich nicht für jedes Bild in der Diashow einzeln den Pfad angeben muss, sondern, das eben alle bilder in dem speziellen Ordnerpfad nacheinander geladen werden (ich weiß, dass es jetzt http// links sind, hab ich nur eingefügt, damit der Dateianhang nicht so groß wird)
Ich weiß nur nicht wie ich das realisieren kann, ich steig einfach nicht bei den Variablen durch

synaptic

geb ich dir doch direkt 3 tips...
jquery fadeIn() fadeOut()

ach und sogar nen vierten tip.. mach am besten nen eigenen thread dafür auf
so schwer is das alles nich

Tags