Tutorial HTML, CSS u. PHP - Forum

[philipp e.]

Hallo,
wie manche wahrscheinlich schon wissen, habe ich eine Funktion in meine Webseite für mein Projekt eingebaut, mit der man einen bestimmten DIV Bereich schließen kann.
Jetzt ist es ein wenig doof, dass man beim Neuladen wieder auf den Button klicken muss.
Kann man das ohne PHP und MySQL lösen?
Hier ist mein bisheriges Skript:

Code: Alles auswählen

<script type="text/javascript">
function window$onload () {
var el = document.getElementById("close");
el.onclick = function () {
document.getElementById("header").style.display="none";
document.getElementById("content").style.padding="100px 20px 20px 20px";   
}
}
window.onload=window$onload;
</script>


Mit freundlichen Grüßen,
Philipp E.

[Sarkkan]

Das geht direkt mit JavaScript über Cookies
Müsste ungefähr so aussehen:

Code: Alles auswählen

function window$onload () {
    var el = document.getElementById("close");
   
    // Wenn der Cookie existiert
    if(document.cookie){
        // Element ausblenden
        document.getElementById("header").style.display="none";
        document.getElementById("content").style.padding="100px 20px 20px 20px";
    } else {
        // Ansonsten verteile das onclick-Event   
        el.onclick = function () {
            document.getElementById("header").style.display="none";
            document.getElementById("content").style.padding="100px 20px 20px 20px";   
            // Mit der besonderheit, dass n Cookie gesetzt wird:
            var date = new Date();
            date = new Date(a.getTime() + 1000 * 60 * 60 * 24 * 5);
            document.cookie = 'close=true; expires=' + date.toGMTString() + ';';
        }
}

[philipp e.]

danke ersteinmal für die info dass es geht.
aber irgendwie funktioniert das skript nicht.
es passiert gar nichts mehr, wenn man auf das bild mit der id close klickt!

[Sarkkan]

Tut mir Leid.. ich habe wohl eine Schließende geschweifte Klammer vergessen <.<

Code: Alles auswählen

window.onload = function (){
    var el = document.getElementById("close");
    // Wenn der Cookie existiert
    if(document.cookie){
        // Element ausblenden
        document.getElementById("header").style.display="none";
        document.getElementById("content").style.padding="100px 20px 20px 20px";
    } else {
        // Ansonsten verteile das onclick-Event
        el.onclick = function () {
            document.getElementById("header").style.display="none";
            document.getElementById("content").style.padding="100px 20px 20px 20px";
            // Mit der besonderheit, dass n Cookie gesetzt wird:
            var date = new Date();
            date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 5);
            document.cookie = 'close=true; expires=' + date.toGMTString() + ';';
        }
    }
}

So läuft es, habe s getestet (:

[philipp e.]

danke!
also ich muss schon sagen, bis schon nen profi!

ich könnte ja noch nen schritt weitergehen und dann ein bild einblenden lassen, um das ganze wieder anzeigen zu lassen.
Wie mach ich das?
Ich hab das versucht, aber bei mir geht dann gar nichts mehr!

[Sarkkan]

Ich würde ja nicht einfach den kompletten Div ausblenden.. (By the way: modernes Webdesignen FTW! Tabellenlayout WTF?! [Spielt darauf an, dass du zum anordnen der Elemente eine Tabelle verwendet hast Das ginge auch ohne Probleme mit nem Float.. aber egal)

Naja.. lass den <marquee>-Tag doch nur ausblenden und ändere dann einfach das src-Attribut des Bildes.
Dafür empfiehlt es sich denen eine ID zu geben Oder du hast Spaß dran dich mit dem JavaScript-Node-System durch mehrere Ebenen zu kämpfen

[philipp e.]

also erstens benutze ich keine Tabellen mehr!!!!
Es geht hier um eine ganz andere seite!
Es wird nicht nur eine Newszeile sondern ein ganzer header ausgeblendet, da is besser ein ganzes DIV auszublenden!

Also gehe ich so vor:
Wenn es angecklickt wurde:
1. ausblenden
2. src des bilds ändern
3. id des bilds ändern

Wenn die andere id angecklickt wurde:
1. einblenden

is das richtig?

[philipp e.]

function window$onload () {
var el = document.getElementById("open");
el.onclick = function () {
document.getElementById("header").style.display="block";
}
}
window.onload=window$onload;


window.onload = function (){
var el = document.getElementById("close");
// Wenn der Cookie existiert
if(document.cookie){
// Element ausblenden
document.getElementById("header").style.display="none";
document.getElementById("content").style.padding="100px 20px 20px 20px";
document.getElementById("close").id="open";
document.getElementById("open").src="png/add.png";
document.getElementById("open").title="Kopf öffnen";
} else {
// Ansonsten verteile das onclick-Event
el.onclick = function () {
document.getElementById("header").style.display="none";
document.getElementById("content").style.padding="100px 20px 20px 20px";
// Mit der besonderheit, dass n Cookie gesetzt wird:
var date = new Date();
date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 5);
document.cookie = 'close=true; expires=' + date.toGMTString() + ';';
document.getElementById("close").Id="open";
document.getElementById("open").src="png/add.png";
document.getElementById("open").title="Kopf öffnen";

}
}
}

Warum klappt das nicht?

[Sarkkan]

Weil du es dir unnötig schwer machst?

Code: Alles auswählen

window.onload = function (){
    // Wenn der Cookie existiert
    if(document.cookie != ""){
        // Element ausblenden
        $("header").style.display = "none";
        $("content").style.padding = "100px 20px 20px 20px";
    }
    
    // Beim Anklicken des  Schalters soll Funktion ausgeführt werden:
    $("switch").onclick = function(){
        toggleHeader();
    }
}

function $(id){
    return document.getElementById(id);
}

function toggleHeader(){
    // Wenn das Element sichtbar ist
    if($("header").offsetHeight > 0){
        $("header").style.display = "none";
        $("content").style.padding = "100px 20px 20px 20px";
        
        with($("switch")){
            // Bezieht sich alles auf "switch"
            src = "png/add.png";
            titel = "Header anzeigen";
        }

        // Und setzte den Cookie
        var date = new Date();
        date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 5);
        document.cookie = 'close=true; expires=' + date.toGMTString() + ';';

    } else {
    // Wenn der Header nicht zu sehen ist, blende ihn ein
        $("header").style.display = "block";
        $("content").style.padding = "20px";

        with($("switch")){
            // Bezieht sich alles auf "switch"
            src = "png/add.png";
            titel = "Header verstecken";
        }

        // Und lösche den Cookie, indem wir ihm einen veralteten Wert geben
        document.cookie = 'close=false; expires=Thu, 01-Jan-70 00:00:01 GMT;';
    }
}
 

Ich habe dem Ding einfach die ID "switch" gegeben.. weil ich damit etwas hin und her schalte
Dann lasse ich überprüfen, ob der Cookie existiert, wenn ja soll der Header ausgeblendet werden.
Und gebe dem Switch immer ein und die selbe Funktion.. die beim klicken dann entscheidet, was gemacht werden soll.

[philipp e.]

klappt aber irgendwie nicht.
es passiert wieder nichts.
ID hab ich natürlich geändert.

[Sarkkan]

Die Fehlerkonsole ist schon was tolles... -.-

Also bei mir klappt alles ohne Probleme.. hast du auch wirklich alle ID's richtig umgeändert??

Den hier klappt alles: Test-Suit

[philipp e.]

es gibt ein problem mit toggle...
das funzt nicht.
außerdem klappt das mit dem cookie auch nicht so ganz.

[philipp e.]

ach quatsch.
Wenn man die Seite neu lädt.
is zwar das ding ausgeblendet aber das falsche Bild!
wenn header ausgeblendet ist, dann kommt das bild, welches zum ausblenden gedacht ist.

An der stelle wo das zweite mal eigenschaften fürs bild erstellt werden hab ichs geändert, geht aber noch net, weil das ja mit dem cookie zu tun hat.

[philipp e.]

Problem alleine gelöst!
Javascript ist eigentlich eine ganz einfache Sprache!