Javascript Rahmenbreite verändern

theonehorst

unregistriert
Thread Starter
Dabei seit
12.01.2005
Beiträge
2.579
Reaktionspunkte
43
Moin ich spiele gerade an wenig mit dem Design meiner Seite.
Wenn man einen Link drück, dann wird die Seite breiter.

Dies geschieht wei folgt:

function breit()
{
$wp = '600px';
document.getElementById('rahmen').style.width = $wp;
}

Frage: Wie mache ich es am besten, dass bei nochmaligem Drücken die Breite wieder auf 370 zurückgeht.
 
Ich würde zwei CSS-Klassen „schmal“ und „breit“ anlegen.

dann gibst Du dem Element die Klasse, anstatt dem direkten Wert.

So kannst Du per If-Abfrage schauen, ob das Element gerade „breit“ oder „schmal“ ist.

Schicke Seite. Mit lightbox v2, was Du für die Photos nutzt, kann man übrigens auch Photoserien anlegen, so dass man sich komplett durch die Bilder klicken kann und nicht jedes erst wieder schließen muss.
 
Wo liegt das Problem?

Code:
var breite;
var breit = false;

function aendere_breite()
{
if(breit)
{   
breite = 500;
breit = false;
}
else
{
breite = 600;
breit = true;
}

document.getElementById('rahmen').style.width = breite + "px";
}

(ungetestet...)
 
Zuletzt bearbeitet:
Sorry, habe gerade gemerkt, dass
der Opera einen Teil des Scriptes
offensichtlich abgeschnitten hat...

Hab es geaendert, so sollte es funk-
tionieren.
 
Schon mal Danke...Klappt leider noch nicht. Bin aber auch keine Java-Experte, eher sehr sehr blutiger Anfänger:

Ich hab jetzt das drin:

Code:
<script language="JavaScript">
<!--

var breite;
var breit = false;

function aendere_breite()
{
if(breit)
{   
breite = 370;
breit = false;
}
else
{
breite = 600;
breit = true;
}
}
document.getElementById('rahmen').style.width = breite + "px";
}


//-->
</script>

Und rufe es so auf:

Code:
<a href="javascript:;" onMouseOver="Bildwechsel(8,Maus_Drauf11)" onMouseOut="Bildwechsel(8,Maus_Nichts11)" onclick="aendere_breite()"><img src="pics/ad.png"></a>
 
ganz spontag würde ich sagen, dass die vorletzte geschweifte Klammer zu weg muss.
 
Klappt super. Kann man da noch was machen, das er sich die letzte Breite merkt. So ala Cookies?
 
theonehorst schrieb:
Klappt super. Kann man da noch was machen, das er sich die letzte Breite merkt. So ala Cookies?

Jup. Geht auch nur mit Cookies. Es sei denn, Du willst Deine Seite mit Login/Passwort personalisieren. Dann kannst Du auch eine Datenbank zur Hilfe nehmen :D

Horsti, Du musst Deine Headergrafik noch anpassen!

2nd
 
Kannst du mir nen Tip geben wie. Ich bau noch an nem langen Header.
 
Ok, ich versuchs mal :)

Mit Cookies hbe ich schon öfters gearbeitet, allerdings ohne JS. Das Problem bei dieser Funktion an Deiner Seite ist, dass Du die Breitenänderung per JS ausführst. Für Cookies brauchst Du eine Serveraktion durch ein Script, das bleibt ja bei JS aus - jedenfalls ohne zusätzliche Techniken.

2 Möglichkeiten gibt es meiner Meinung nach:

1.) Du setzt einen normalen Link mit der Breitenänderung in einer GET-Variable ein, also z. B. h**p://www.nasendackel.de/?page_id=149&breite=breit. Die GET Variable verarbeitest Du per PHP und $_GET, speicherst ein Cookie und läßt die Seite mit der neuen Breite darstellen.

Nachteil: Du generierst einen kompletten Page Reload. Allerdings fällt das JS für die Breitenänderung dann weg (könnte auch ein Vorteil sein :D).

2.) Du arbeitest mit AJAX, d.h. Deine JS Funktion bleibt und gleichzeitig wird die neue Breite per XMLHttpRequest an ein PHP Script geschickt. Dieses speichert dann das Cookie und fertig. Auf dem Rückweg musst Du dann per PHP das Cookie auslesen und bei der Generierung der Seite berücksichtigen.

Generell zum Arbeiten mit Cookies:

Cookie schreiben
PHP:
setcookie ("contentBreite", $breite, mktime ()+3600);

Cookie lesen
PHP:
$breite = $_COOKIE["contentBreite"];

Über den letzen Parameter der setcookie-Funktion kannst Du die gewünschte Gültigkeitsdauer einstellen.

2nd
 
Ok. Da versuch ich mal mitarbeiten. Danke Kollege...:D
 
Jakobs Methode macht meine Methode 2 überflüssig - so ist es am smartesten. Ich sage ja, ich habe noch nicht mit Cookies und JS gearbeitet, wenn es geht, bleibe ich auf dem Server mit der Applikationslogik :)

2nd
 
Ja, ist mir eigentlich auch lieber, aber hier im Forum tu ich immer gern so als ob ;)
 
Zuletzt bearbeitet:
Zurück
Oben Unten