Sidebar zum ein- und ausblenden

A

awnetti

Mitglied
Hallo zusammen,

ich möchte gerne in einer Internetpräsenz eine ein- und ausblendbare Sidebar, wie man sie von google.maps kennt, bauen. Leider finde ich keine Beschreibung wie diese von google.maps erstellt wurde und der Quelltext ist für meine Kenntnisse leider viel zu Kompliziert, als dass ich ihn verstehen würde.

Da „Sidebar“ wohl ein weitläufiger Begriff ist finde ich im Web alles Möglich dazu nur nicht das was ich brauche. Mein erster Gedanke wäre ein DIV-Container, der mit Javascript ein- und ausgeblendet wird.

Kann mir jemand sagen ob mein Lösungsansatz eine gute Möglichkeit ist oder kann/sollte man es irgendwie anders/besser lösen?
Hat sowas schon mal jemand versucht? Vielleicht sogar hier im Forum unter einem anderen Suchbegriff als "Sidebar"?

Danke in Voraus
 
So, geschafft! ^^
Das Script mit display "none/block" ist fertig und funktioniert soweit gut.
(Sollte jemand aber noch irgendwelche Fehler oder was unnötiges entdecken bin ich für jeden Tipp dankbar! Bin z.B. nicht sicher ob ich überhaupt noch "document.all" abfragen muss?)

Jetzt ergibt sich allerdings ein anderes Problem, das ich nicht verstehe.

Ich habe noch ein Script, das die Browsergröße ausliest und sich daraus die Höhe für die beiden Container "Context" und "Map" ergibt, welche nach jedem resize aktualisiert wird. Das klappt auch, bis ich mit dem Button "Hide" die Funktion displayModus() auslöse. Wenn ich danach den Browser in seiner Größe verändere, wird das auslesen der Browsergröße und das anpassen der beiden Div-Container nicht mehr korrekt ausgeführt.

Hab es mir mal mit Alert ausgegeben und festgestellt, dass er nach dem resize in die Funktion buildNew() und winWidth() kommt aber auch nicht mehr weiter.

Könnte mir jemand sagen woran das liegt! Habe überhaupt keine Idee :confused:

Hier das Javascipt und das HTML:

HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS-Layout mit Sidebar</title>

<script type="text/javascript">

function winWidth() {
alert("function winWidth");
 	if (window.innerWidth) {
 		return window.innerWidth;
 	} 
	else if (document.body && document.body.offsetWidth) {
		return document.body.offsetWidth;
 	} 
	else {
		return 0;
	}
}

function winHeight() {
alert("function winHeight");
	if (window.innerHeight) {
		return window.innerHeight;
	} 
	else if (document.body && document.body.offsetHeight) {
		return document.body.offsetHeight;
	} 
	else {
		return 0;
	}
}


if (!window.alteWeite && window.innerWidth) {
	window.onresize = buildNew;
	Weite = winWidth();
	Hoehe = winHeight();
}
 
function buildNew() {
alert("function buildNew");
	if (Weite != winWidth() || Hoehe != winHeight())
		location.href = location.href;
}

// DISPLAY Button --- START ---

var system
	
if (document.all){
	system = document.all
}

if (document.getElementById && !document.all) {
 	system = document.getElementsByTagName("*")
}

function setWinName() {
	if (parent.name=="True") {
		//alert("1. WindowName: " + parent.name);
		parent.name="True";
		changeClass("einblenden","ausblenden"); // content ausblenden
		document.getElementById("modShow").style.display="block"; // Button Hide ausblenden
		document.getElementById("modHide").style.display="none"; // Button Show einblenden
	}
	else if (parent.name=="False" || parent.name=="") {
		//alert("2. WindowName: " + parent.name);
		parent.name="False";
		changeClass("ausblenden","einblenden"); // content einblenden
		document.getElementById("modShow").style.display="none"; // Button Hide einblenden
		document.getElementById("modHide").style.display="block"; // Button Show ausblenden
	}
	//alert("3. WindowName: " + parent.name);
}
	
function displayModus() {
	if (parent.name=="True"){
		parent.name="False";
		changeClass("ausblenden","einblenden");
		//alert("4. WindowName: " + parent.name);
	}
	else {
		parent.name="True";
		changeClass("einblenden","ausblenden");
		//alert("5. WindowName: " + parent.name);
	}
	//alert("6. WindowName: " + parent.name);
	setDisplayButton();
}

function setDisplayButton(){
	var link5  = document.getElementById("modShow").style.display;
	var link6  = document.getElementById("modHide").style.display; 
	document.getElementById("modShow").style.display = link6;
	document.getElementById("modHide").style.display = link5;	
}

function changeClass(ist,soll){
	for (i=0;i<system.length;i++) {
		if (system[i].className==ist){
			system[i].className=soll;
		}
	}
}

// DISPLAY Button --- ENDE ---

</script>

<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}

body {overflow:hidden;}

html, body {height: 100%;}

div {text-align: left;}

div#header {
position:absolute;
left:0;
top:0;
height: 80px;
width:100%;
background-color:#00CC66;
z-index:3;
}

div#context {
position:absolute;
left:0;
top:80px;
width: 250px;
background-color:#999999;
z-index:2;
overflow:auto;
}

div#map {
position:absolute;
left:0;
top:80px;
width: 100%;
background-color:#FFFFCC;
z-index:1;
text-align:right;
}

.ausblenden {display:none;}
.einblenden {display:block;}

#modShow, #modHide {
position:absolute;
left:0;
top:80px;
background-color:#FF0000;
z-index:2;
text-align:left;
padding:2px 2px 2px 2px;
}

#modHide {left:250px;}

a:link, a:visited, a:hover, a:active {color: #000000;}

-->
</style>

</head>
<body onLoad="setWinName();newDivHeight();">

<script type="text/javascript">
if (!window.Weite && document.body && document.body.offsetWidth) {
  window.onresize = buildNew;
  Weite = winWidth();
  Hoehe = winHeight();
}

var Header=80;
var Abzug=Hoehe-Header;

function newDivHeight() {
  if (document.getElementById) {
  alert("function newDivHeight document.getElementById");
		  document.getElementById("map").style.height = Abzug+"px";
		  document.getElementById("context").style.height = Abzug+"px";
		} 
		else if (document.all) {
		alert("function newDivHeight document.all");
		  document.all["map"].style.height = Abzug+"px";
		  document.all["context"].style.height = Abzug+"px";
		}
}
</script>

<div id="header">
<h2>Header</h2><br>
<script type="text/javascript">
document.write("Weite: " + Weite + " H&ouml;he: " + Hoehe);
</script>
</div>

<div id="context" class="einblenden">
<h2>Context</h2>
<p>Weit  hinten, hinter den Wortbergen, fern der L&auml;nder Vokalien und Konsonantien leben  die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der K&uuml;ste des  Semantik, eines gro&szlig;en Sprachozeans. Ein kleines B&auml;chlein namens Duden flie&szlig;t  durch ihren Ort und versorgt sie mit den n&ouml;tigen Regelialien. Es ist ein  paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.  Nicht einmal von der allm&auml;chtigen Interpunktion werden die Blindtexte  beherrscht - ein geradezu unorthographisches Leben.<br>
Eines Tages aber beschloss eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum,  hinaus zu gehen in die weite Grammatik. Der gro&szlig;e Oxmox riet ihr davon ab, da  es dort wimmele von b&ouml;sen Kommata, wilden Fragezeichen und hinterh&auml;ltigen  Semikoli, doch das Blindtextchen lie&szlig; sich nicht beirren. Es packte seine  sieben Versalien, schob sich sein Initial in den G&uuml;rtel und machte sich auf den  Weg.</p>
</div>

<span id='modShow' style='display:none;'><a href='#' onClick='displayModus();'>Show</a></span>
<span id='modHide' style='display:block;'><a href='#' onClick='displayModus();'>Hide</a></span>

<div id="map">
<h2>Map</h2>
</div>

</body>
</html>

Danke!
 
Naja, beim onresize rufst du buildNew() auf. Sofern sich die Breite des Fensters geändert hat, kommt ja folgendes ins Spiel:
Code: 
function buildNew() {
	if (Weite != winWidth() || Hoehe != winHeight())
		location.href = location.href;
}

Da die erste alternative Bedingung erfüllt ist, brauch die 2. nicht mehr berücksichtigt werden, es wird also nicht auf winHeight() zugegriffen.

die Zeile
Code: 
location.href = location.href;
bewirkt garnichts....ergo gibt es nichts, was sonst beim onresize aufgerufen werden sollte.
Ich glaube das ist der Knackpunkt, du möchtest reloaden, tust es aber nicht wirklich. Zum reloaden verwende
Code: 
location.reload()
...obgleich ich der Meinung bin, dass du darauf verzichten solltest und lieber ein sich per CSS anpassendes Layout verwenden solltest :)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück