Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag11.11.2012 um 17:31 (UTC)    
Titel: Usern Hintergrundfarbe bleibend ändern lassen

Hallo!
Ich hab mir was neues für meine Seite ausgsedacht. Und zwar wollte ich es machen, dass meine Homepage-Besucher die Hintergrundfarbe meiner Homepage einfach ändern können.
Das ist mir jetzt auch schon gelungen - siehe beispielsweise http://holz-osterholzer.de.tl/neue-werbung.htm - doch wie schaffe ich es, dass beim aktualisieren einer Seite der Farbwert übernommen wird und nicht wieder die Standarthintergrundfarbe zurückgesetzt wird?
Ich hätte mir gedacht, dass sich der User dann den ganzen Aufenthalt - den er also auf meiner Seite verbringt, eine Hintergrundfarbe wählen kann und diese nicht bei jedem Klicken auf eine neue Seite wieder einstellen muss...

Geht das?
Wenn ja, wie?

Hier der Code den ich hab:
Code:
<script type="text/javascript">
function generator(form) {document.body.style.backgroundColor = form.bgcolor.value;document.body.style.backgroundImage = 'url('+form.bgimage.value+')';document.body.style.backgroundRepeat = form.bodywh.value;}
</script>
<form method="post" action="#" name="Generator">
    <table>
        <tbody>
            <tr>
                <td>Ändere die Hintergrundfarbe - gib<br /> dazu irgend einen beliebigen <br /> HEX-Zahlen-Farbwert ein:</td>
                <td><input style="text-align: center; width: 85px; font-size: 14px" name="bgcolor" value="#FFFFFF" type="text" /></td>
            </tr>
       
            <tr>
            </tr>
        </tbody>
    </table>
    <br />
    <br />
    <input type="button" onclick="javascript:generator(this.form)" value="Hintergrund ändern" />
</form></div>


Schon mal DANKE für euer Bemühen!

Lg, Loisi
______________
Leben heißt nicht zu warten, bis der Sturm vorüberzieht, sondern zu lernen, im Regen zu tanzen!
Beitrag11.11.2012 um 18:25 (UTC)    
Titel:

Mit Javascript kann man das mit Cookies umsetzen:
http://www.w3schools.com/js/js_cookies.asp
Da findet man sicher auch viele gute Beispiele mit Google.

Alternativ kannst du auch Html5 mit local storage verwenden:
http://www.w3schools.com/html/html5_webstorage.asp

Wird vom IE ab 8.0 unterstützt.

mfg Philipp
______________
Forenregeln, FAQ, Suchfunktion
Beitrag12.11.2012 um 18:17 (UTC)    
Titel:

Hallo Philipp!

Danke für die beiden Links.
Hab mich bereits ein wenig eingelesen. Cookies sind eine feine Sache - das weis ich mittlerweile schon. Da könnte man ja jede Menge damit machen.

Doch irgendwie bin ich nicht auf das gestoßen, was ich auf meinen Fall umwandeln könnte. Wie die einzelne Fariable ist, die die Hintergrundfarbe abspeichert - keine Ahnung. Wie ich dies dann auch im Code einsetzen muss, kann ich mit meinen bescheidenen Kenntnissen bisher auch noch nicht direkt rauslesen.

Da bleibt mir dann wahrscheinlich nichts anderes übrig, also von ganz von vorne mit diesem Code-Gebiet anzufangen, oder?

Oder weis jedmand bereits den Code? Wink
______________
Leben heißt nicht zu warten, bis der Sturm vorüberzieht, sondern zu lernen, im Regen zu tanzen!
Beitrag12.11.2012 um 19:29 (UTC)    
Titel:

Hier der Code mit localStorage:
Code:
<form method="post" action="#" name="Generator" id="generator" style="display: none;">
    <table>
        <tbody>
            <tr>
                <td>Ändere die Hintergrundfarbe - gib<br /> dazu irgend einen beliebigen <br /> HEX-Zahlen-Farbwert ein:</td>
                <td><input style="text-align: center; width: 85px; font-size: 14px" name="bgcolor" value="#FFFFFF" type="text" /></td>
            </tr>
       
            <tr>
            </tr>
        </tbody>
    </table>
    <br />
    <br />
    <input type="button" onclick="javascript:generator(this.form)" value="Hintergrund ändern" />
</form>
<script type="text/javascript">
//Funktion checkt ob der Browser die entsprechende Html5 Funktion untersuetzt
function checkHtml5Support() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

function generator(form) {
  //Wert der Input-Box einer Variablen zuweisen
  var colorValue = form.bgcolor.value;
  //Wert der Variable dem Hintergrund zuweisen
  document.body.style.backgroundColor = colorValue;
  //Wert der Variable lokal beim Benutzer unter dem key "backColor" speichern
  localStorage.setItem("backColor", colorValue);
}

//Wenn der Browser Html5 unterstuetzt, dann...
if(checkHtml5Support) {
  //Mache das form des Generators wieder sichtbar
  //standardaessig ist dieses naemlich nicht sichtbar, damit auch nur User die Farbe aendern koennen, deren Browser auch das speichern unterstuetzt
  document.getElementById("generator").style.display = "block";
  //Hole die Hintergrundfarbe lokal vom Benutzter und weisse diese auch dem Hintergrund zu
  document.body.style.backgroundColor = localStorage.getItem("backColor");
}
</script>

Könnte man besser und übersichtlicher machen, aber es erfüllt seinen Zweck Wink
Habe auch zum besseren Verständniss ein paar Kommentare hinterlassen.

Zitat:
Da bleibt mir dann wahrscheinlich nichts anderes übrig, also von ganz von vorne mit diesem Code-Gebiet anzufangen, oder?

Wenns dich interessiert und du vor hast mehr auf dem Gebiet zu machen, auf jeden Fall Wink
Ich halte es zumindest für sehr spannend Wink

mfg Philipp
______________
Forenregeln, FAQ, Suchfunktion


Zuletzt bearbeitet von philipp7 am 12.11.2012, 20:30, insgesamt 3-mal bearbeitet
Beitrag12.11.2012 um 19:43 (UTC)    
Titel:

Hallo Philipp!
Vielen, vielen, vielen Dank!
Du bist echt super. Funktioniert einwandfrei - genau so wollte ichs haben.

Das Thema ist echt interesannt - da kann man ja fast alles umsetzen. Das hier animiert mich nun wirklich, mich damit noch genauer auseinanderzusetzen. Das ist ja gigantisch. Mit ein bisschen Code so was zu erstellen. Fantastisch!

Danke nochmal Philipp!

Very Happy
______________
Leben heißt nicht zu warten, bis der Sturm vorüberzieht, sondern zu lernen, im Regen zu tanzen!
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de