Div nicht nur einmal ausblenden?

Yamram · 10. April 2011

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

<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 · 10. April 2011

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

Code

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() + ';'; 
        }
}

Alles anzeigen

Yamram · 11. April 2011

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 · 11. April 2011

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

Code

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() + ';';
        }
    }
}

Alles anzeigen

So läuft es, habe s getestet

Yamram · 11. April 2011

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 · 12. April 2011

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

Yamram · 12. April 2011

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?

Yamram · 12. April 2011

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

Warum klappt das nicht?

Sarkkan · 12. April 2011

Weil du es dir unnötig schwer machst?

PHP

<span class="syntaxdefault">window</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">onload </span><span class="syntaxkeyword">= function (){<br />    </span><span class="syntaxcomment">// Wenn der Cookie existiert<br />    </span><span class="syntaxkeyword">if(</span><span class="syntaxdefault">document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">cookie </span><span class="syntaxkeyword">!= </span><span class="syntaxstring">""</span><span class="syntaxkeyword">){<br />        </span><span class="syntaxcomment">// Element ausblenden<br />        </span><span class="syntaxkeyword">$(</span><span class="syntaxstring">"header"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">display </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"none"</span><span class="syntaxkeyword">;<br />        $(</span><span class="syntaxstring">"content"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">padding </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"100px 20px 20px 20px"</span><span class="syntaxkeyword">;<br />    }<br />    <br />    </span><span class="syntaxcomment">// Beim Anklicken des  Schalters soll Funktion ausgeführt werden:<br />    </span><span class="syntaxkeyword">$(</span><span class="syntaxstring">"switch"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">onclick </span><span class="syntaxkeyword">= function(){<br />        </span><span class="syntaxdefault">toggleHeader</span><span class="syntaxkeyword">();<br />    }<br />}<br /><br />function $(</span><span class="syntaxdefault">id</span><span class="syntaxkeyword">){<br />    return </span><span class="syntaxdefault">document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">getElementById</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">id</span><span class="syntaxkeyword">);<br />}<br /><br />function </span><span class="syntaxdefault">toggleHeader</span><span class="syntaxkeyword">(){<br />    </span><span class="syntaxcomment">// Wenn das Element sichtbar ist<br />    </span><span class="syntaxkeyword">if($(</span><span class="syntaxstring">"header"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">offsetHeight </span><span class="syntaxkeyword">> </span><span class="syntaxdefault">0</span><span class="syntaxkeyword">){<br />        $(</span><span class="syntaxstring">"header"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">display </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"none"</span><span class="syntaxkeyword">;<br />        $(</span><span class="syntaxstring">"content"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">padding </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"100px 20px 20px 20px"</span><span class="syntaxkeyword">;<br />        <br />        </span><span class="syntaxdefault">with</span><span class="syntaxkeyword">($(</span><span class="syntaxstring">"switch"</span><span class="syntaxkeyword">)){<br />            </span><span class="syntaxcomment">// Bezieht sich alles auf "switch"<br />            </span><span class="syntaxdefault">src </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"png/add.png"</span><span class="syntaxkeyword">;<br />            </span><span class="syntaxdefault">titel </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"Header anzeigen"</span><span class="syntaxkeyword">;<br />        }<br /><br />        </span><span class="syntaxcomment">// Und setzte den Cookie<br />        </span><span class="syntaxkeyword">var </span><span class="syntaxdefault">date </span><span class="syntaxkeyword">= new </span><span class="syntaxdefault">Date</span><span class="syntaxkeyword">();<br />        </span><span class="syntaxdefault">date </span><span class="syntaxkeyword">= new </span><span class="syntaxdefault">Date</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">date</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">getTime</span><span class="syntaxkeyword">() + </span><span class="syntaxdefault">1000 </span><span class="syntaxkeyword">* </span><span class="syntaxdefault">60 </span><span class="syntaxkeyword">* </span><span class="syntaxdefault">60 </span><span class="syntaxkeyword">* </span><span class="syntaxdefault">24 </span><span class="syntaxkeyword">* </span><span class="syntaxdefault">5</span><span class="syntaxkeyword">);<br />        </span><span class="syntaxdefault">document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">cookie </span><span class="syntaxkeyword">= </span><span class="syntaxstring">'close=true; expires=' </span><span class="syntaxkeyword">+ </span><span class="syntaxdefault">date</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">toGMTString</span><span class="syntaxkeyword">() + </span><span class="syntaxstring">';'</span><span class="syntaxkeyword">;<br /><br />    } else {<br />    </span><span class="syntaxcomment">// Wenn der Header nicht zu sehen ist, blende ihn ein<br />        </span><span class="syntaxkeyword">$(</span><span class="syntaxstring">"header"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">display </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"block"</span><span class="syntaxkeyword">;<br />        $(</span><span class="syntaxstring">"content"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">padding </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"20px"</span><span class="syntaxkeyword">;<br /><br />        </span><span class="syntaxdefault">with</span><span class="syntaxkeyword">($(</span><span class="syntaxstring">"switch"</span><span class="syntaxkeyword">)){<br />            </span><span class="syntaxcomment">// Bezieht sich alles auf "switch"<br />            </span><span class="syntaxdefault">src </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"png/add.png"</span><span class="syntaxkeyword">;<br />            </span><span class="syntaxdefault">titel </span><span class="syntaxkeyword">= </span><span class="syntaxstring">"Header verstecken"</span><span class="syntaxkeyword">;<br />        }<br /><br />        </span><span class="syntaxcomment">// Und lösche den Cookie, indem wir ihm einen veralteten Wert geben<br />        </span><span class="syntaxdefault">document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">cookie </span><span class="syntaxkeyword">= </span><span class="syntaxstring">'close=false; expires=Thu, 01-Jan-70 00:00:01 GMT;'</span><span class="syntaxkeyword">;<br />    }<br />}<br /> </span><span class="syntaxdefault"></span>

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.

Yamram · 12. April 2011

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

Sarkkan · 12. April 2011

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

Yamram · 12. April 2011

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

Yamram · 12. April 2011

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.

Yamram · 12. April 2011

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

Div nicht nur einmal ausblenden?

Jetzt mitmachen!

Teilen