Ebenen und Scrollbalken – Anzeige im Browser

[Grobie]

Hallo,

nachdem ich gesucht und nichts gefunden habe hier mein Problem:

Ebenen mit Text bekommen einen Scrollbalken wenn der Text zu lang ist – das soll auch so sein. Der Scrollbalken ist bei einigen Browsern aber immer zu sehen, auch wenn die Ebene ausgeblendet ist – und das soll natürlich nicht so sein.

Die Ebene verschwindet aber der Scrollbalken ist immer noch zu sehen bei Firefox 2.0.0.9 (Mac) und Netscape (Mac).
Bei Safari 3.0.3 (Mac), IE 7 (Windows) und Netscape 7.1 (Windows) werden die Scrollbalken zusammen mit der Ebene ausgeblendet, so wie ich es haben möchte.

Ist das jetzt ein Problem der Browser oder kann ich das irgendwie in GoLive einstellen? Ich arbeite mit GoLive CS2 am Mac.

Hier ist eine Beispiel, um zu zeigen, was ich meine:
http://www.jens-bahr.de/scrollbalkentest

Kann mir jemand helfen und erklären wie ich es schaffe, dass der Scrollbalken in allen Browsern zusammen mit der Ebene ausgeblendet wird?

Schöne Grüße,
Jens

[UweB]

Hallo Jens,
das muss ein Fehler in FF/Netscrape für MAC sein. Im FF für Windows verschwinden natürlich auch die Scrollbalken, wenn die Ebene ausgeblendet ist.
Ich vermute mal, dass der Fensterinhalt nicht richtig neu aufgebaut wird. Denn wo keine Ebene ist, kann auch kein Scrollbalken zurückbleiben.
Mal sehen, ob sich noch jemand mit MAC meldet.

Gruß
Uwe

[Grobie]

Ich vermute mal, dass der Fensterinhalt nicht richtig neu aufgebaut wird. Denn wo keine Ebene ist, kann auch kein Scrollbalken zurückbleiben.

Hallo Uwe,

danke für die Antwort. Ich dachte auch wo keine Ebene, da kein Scrollbalken.

Aber die Scrollbalken sind von Anfang an da. Auch bei Ebenen die auf "nicht sichtbar" gestellt sind (und die im CSS-Editor unter "Blockeigenschaften" - "Abschneiden" - "Überlauf" auf "automatisch" stehen). Deshalb denke ich nicht, dass es was mit dem "Neuaufbau" zu tun hat. Von jeder Ebene im Dokument (deren Überlauf auf automatisch steht) werden die Scrollbalken von Anfang an angezeigt – auch wenn die Ebenen auf "nicht sichtbar" stehen.

Die Beispielseite (http://www.jens-bahr.de/scrollbalkentest) ist so aufgebaut, dass es drei Ebenen gibt, wobei die dritte Ebene auf "nicht sichtbar" steht.

Für die, die mein Problem nicht sehen können gibt es auch zwei Screenshots, so wie Firefox und Netscape am Mac die Seite anzeigen:
Beim öffnen der Seite: http://www.jens-bahr.de/Scrollbalkentest/Screen1.gif
Und wenn man klickt: http://www.jens-bahr.de/Scrollbalkentest/Screen2.gif

Die unteren Scrollbalken sind eine nicht sichtbare Ebene... Ihr könnt Euch jetzt bestimmt auch vorstellen, wie eine Seite mit 20 Ebenen bei mir aussieht...

Gruß, Jens

[UweB]

Hallo Jens,
das hier ist zwar von Dez. 2006, scheint aber genau auf dein Problem zu zutreffen.
Die Lösung ist recht einfach, nur darfst du dann natürlich nicht die Aktion benutzen.
Vielleicht findet sich ja hier doch noch ein MAC User, der den Fehler bestätigen kann, oder eine andere Lösung für dich hat.

Gruß
Uwe

[Grobie]

Hallo Uwe,

vielen vielen Dank für die Mühe. Diese Seite hatte ich auch schon gefunden – komischerweise zeigt auch Safari bei der Ausgangsseite von "lina" die Balken falsch an. Bei meiner Seite zeigt Safari die Balken ja richtig an, das hat GoLive richtig hinbekommen, nur bei den Mac-Browsern Firefox und Netscape klappt's nicht.

Für mich ist es leider zu kompliziert dieses Script in meine eigentliche Seite zu übernehmen. Meine eigentliche Seite um die es geht hat ein von GoLive generiertes Script (CSScriptLib.js) mit einer Länge von 503 Zeilen. Die Funktion "CSShowHide" greift auf "CSSetStyleVis" und "CSGetStyleVis" zurück darin taucht "div.style.overflow" garnicht auf. Daher kann ich die Lösung aus dem anderen Forum nicht einfach durch Ersetzen übernehmen. Hier ein Auszug aus meiner "CSScriptLib.js":

function CSSetStyleVis(s,v) {
if (CSIsW3CDOM){CSIDOM();document.getElementById(s).style.visibility=(v==0)?"hidden":"visible";}
else if(IsIE())CSIEStyl(s).visibility=(v==0)?"hidden":"visible";
else CSNSStyl(s).visibility=(v==0)?'hide':'show';
}
function CSGetStyleVis(s) {
if (CSIsW3CDOM) {CSIDOM();return(document.getElementById(s).style.visibility=="hidden")?0:1;}
else if(IsIE())return(CSIEStyl(s).visibility=="hidden")?0:1;
else return(CSNSStyl(s).visibility=='hide')?0:1;
}
function CSShowHide(action) {
if (action[1] == '') return;
var type=action[2];
if(type==0) CSSetStyleVis(action[1],0);
else if(type==1) CSSetStyleVis(action[1],1);
else if(type==2) {
if (CSGetStyleVis(action[1]) == 0) CSSetStyleVis(action[1],1);
else CSSetStyleVis(action[1],0);
}
}

Ich (mit meinen dilettantischen Fähigkeiten) glaube da liegt irgendwo das Problem. Aber die von GoLive generierten Aktionen umzuschreiben übersteigt meine Fähigkeiten. Ich bin ja nur ein GoLive-Anwender und hätte gerne eine Lösung, die ich über das Programm hinbekomme, ohne in den schon generierten Codes "herumzupfuschen".

Liebe Mac-User, bitte helft mir. Hat jemand eine andere Lösung parat?

Gruß, Jens

[UweB]

komischerweise zeigt auch Safari bei der Ausgangsseite von "lina" die Balken falsch an.

Wo liest du das? ich sehe da keinen Hinweis in Bezug zu Safari.
Bei Ina´s Seite geht es um den Zusammenhang von "visibility: hidden" und "overflow: auto". Das trifft auf deine Seite genauso zu.
Das Verändern von von GoLive erzeugtem Javascript kannst du vergessen. Das ist noch komplizierter als ein eigenes Script.

Ich habe deinen Quellcode mal an drei Stellen verändert (Die Änderungen sind mit Kommentaren versehen). Sieh dir das mal im FF für MAC an. Ich vermute, dass der Fehler da nicht auftritt. Die Übernahme der Änderungen in deine "echten" Seiten sollte nicht allzu schwer sein.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>EbeneScrolltest</title>
		<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
		<style type="text/css" media="screen"><!--
#Ebene1 { background-color: #800000; height: 292px; width: 292px; left: 18px; top: 18px; position: absolute; visibility: visible; }
#Ebene2 { background-color: #f00; height: 300px; width: 300px; left: 330px; top: 18px; position: absolute; overflow: auto; visibility: visible; }
/* AENDERUNG 1: overflow: none für verstecktes Element */
#Ebene3 { background-color: #ff89ff; height: 300px; width: 300px; left: 18px; top: 340px; position: absolute; overflow: none; visibility: hidden; }
/* AENDERUNG 1 ENDE */ 
--></style>
<!-- AENDERUNG 2: Script ausgetauscht -->
	<script type="text/javascript"><!--
		function showhide(element) {
			var div=document.getElementById(element);
			if (!div) return;
			if(div.style.visibility == 'hidden'){
			 div.style.visibility = 'visible';
			 div.style.overflow = 'auto';
			}
			else {
			 div.style.visibility = 'hidden';
			  div.style.overflow = 'hidden';
			}
			}
// --></script>
<!-- AENDERUNG 2 ENDE -->

		</csactiondict>
	</head>

	<body>
		<div id="Ebene1">
			<!-- AENDERUNG 3: neues Script bei OnClick eingefügt -->
			<div style="position:relative;width:292px;height:293px;-adbe-g:p;" onclick="showhide('Ebene2')")>
			<!-- AENDERUNG 3 ENDE -->
				<div style="position:absolute;top:112px;left:48px;width:192px;height:96px;-adbe-c:c">
					<div align="center">
						Klicken zum <br />

						Ein- und Ausblenden</div>
				</div>
			</div>
		</div>
		<div id="Ebene2">
			<div style="position:relative;width:392px;height:1240px;-adbe-g:p;">
				<div style="position:absolute;top:32px;left:16px;width:352px;height:1207px;-adbe-c:c">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam velit pede, pharetra in, molestie non, feugiat id, metus. Integer eget nunc ac libero vehicula rutrum. Nulla egestas purus sit amet risus. Vivamus non tellus a neque tempor sodales. Donec lobortis quam vitae pede semper faucibus. In hac habitasse platea dictumst. Sed molestie. Maecenas ut enim. Proin dignissim. In lacinia, eros a rhoncus tincidunt, massa dolor sodales tellus, at tincidunt nisl sapien non ligula. Suspendisse potenti.<br />

					Suspendisse auctor luctus dolor. Cras nonummy. Nam egestas. Integer felis dui, pellentesque vitae, vulputate vitae, pulvinar ut, velit. Nunc hendrerit semper pede. Proin odio. Duis ac erat ut enim ultricies luctus. Etiam nec arcu vitae justo bibendum elementum. Phasellus dictum, nisi et dictum euismod, mauris nunc egestas arcu, et tempor orci neque vel nunc. Maecenas pretium metus ac libero. Donec et tellus in nunc molestie iaculis. Maecenas vulputate ullamcorper enim. Proin vitae lectus. Donec mattis, mauris nec auctor tristique, turpis sapien molestie nulla, et hendrerit nibh mauris ut dui. Duis egestas erat ac mi. Aenean suscipit. Etiam iaculis enim at tellus. Morbi dapibus est ac turpis.<br />
					Vestibulum euismod tortor. Vestibulum at dui nec nulla lobortis rutrum. Morbi velit. In vehicula. Suspendisse nec ligula vitae augue rhoncus feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nec metus. Nunc pede odio, consectetuer eu, rutrum quis, fermentum in, ipsum. Nam lobortis, augue ut dictum dapibus, est nibh vehicula nunc, non malesuada sapien lacus ut orci. Sed interdum, erat id varius venenatis, ipsum neque malesuada neque, nec accumsan dolor dui convallis est. In risus. Praesent purus. Aenean sit amet sem at lacus ultricies aliquet. Vivamus nunc quam, sagittis at, ornare eget, pulvinar ac, nibh. Integer quis nulla. In quam massa, placerat et, laoreet vitae, hendrerit ut, urna. Nam ac urna aliquet odio adipiscing facilisis. Nunc pretium auctor mauris. Integer quis dui.<br />
					Duis ornare, lectus a commodo mattis, nibh ligula porttitor magna, vitae tristique libero augue ac ipsum. Cras bibendum, odio eget luctus fringilla, arcu urna laoreet ante, eu molestie tellus augue vitae ante. Nulla massa augue, gravida id, mollis et, ornare eget, sem. Praesent viverra. Aenean lacus nisi, euismod ut, lacinia eget, pulvinar eu, mauris. Nam mi. Mauris quam eros, elementum sed, vulputate vel, eleifend nec, elit. Sed pharetra lacus quis tortor. Sed sapien lectus, facilisis eget, mollis non, tempus in, nisi. Donec venenatis convallis velit. Vivamus vehicula adipiscing turpis. Quisque nulla. Cras neque arcu, blandit at, fermentum gravida, gravida et, erat.<br />
					Aenean nec dui. In scelerisque, metus at aliquet tempus, nisl sem consectetuer dui, ut sollicitudin leo neque sit amet risus. Vivamus porttitor laoreet metus. In mattis sollicitudin pede. Curabitur vitae erat. Donec vulputate. Curabitur fringilla diam ac pede. Aenean a odio. Nunc arcu sem, consequat ut, semper semper, feugiat eu, ipsum. Donec rhoncus ante ac libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eu nibh. Vivamus at enim vel tortor malesuada imperdiet. Fusce et nulla nec lorem sodales elementum. Donec molestie auctor eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean hendrerit urna id ligula. Nam nisl diam, ullamcorper sit amet, fringilla a, dapibus nec, leo.<br />
				</div>
			</div>
		</div>

		<div id="Ebene3">
			<div style="position:relative;width:395px;height:1206px;-adbe-g:p;">
				<div style="position:absolute;top:16px;left:16px;width:369px;height:1189px;-adbe-c:c">
					 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam velit pede, pharetra in, molestie non, feugiat id, metus. Integer eget nunc ac libero vehicula rutrum. Nulla egestas purus sit amet risus. Vivamus non tellus a neque tempor sodales. Donec lobortis quam vitae pede semper faucibus. In hac habitasse platea dictumst. Sed molestie. Maecenas ut enim. Proin dignissim. In lacinia, eros a rhoncus tincidunt, massa dolor sodales tellus, at tincidunt nisl sapien non ligula. Suspendisse potenti.<br />
					Suspendisse auctor luctus dolor. Cras nonummy. Nam egestas. Integer felis dui, pellentesque vitae, vulputate vitae, pulvinar ut, velit. Nunc hendrerit semper pede. Proin odio. Duis ac erat ut enim ultricies luctus. Etiam nec arcu vitae justo bibendum elementum. Phasellus dictum, nisi et dictum euismod, mauris nunc egestas arcu, et tempor orci neque vel nunc. Maecenas pretium metus ac libero. Donec et tellus in nunc molestie iaculis. Maecenas vulputate ullamcorper enim. Proin vitae lectus. Donec mattis, mauris nec auctor tristique, turpis sapien molestie nulla, et hendrerit nibh mauris ut dui. Duis egestas erat ac mi. Aenean suscipit. Etiam iaculis enim at tellus. Morbi dapibus est ac turpis.<br />
					Vestibulum euismod tortor. Vestibulum at dui nec nulla lobortis rutrum. Morbi velit. In vehicula. Suspendisse nec ligula vitae augue rhoncus feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nec metus. Nunc pede odio, consectetuer eu, rutrum quis, fermentum in, ipsum. Nam lobortis, augue ut dictum dapibus, est nibh vehicula nunc, non malesuada sapien lacus ut orci. Sed interdum, erat id varius venenatis, ipsum neque malesuada neque, nec accumsan dolor dui convallis est. In risus. Praesent purus. Aenean sit amet sem at lacus ultricies aliquet. Vivamus nunc quam, sagittis at, ornare eget, pulvinar ac, nibh. Integer quis nulla. In quam massa, placerat et, laoreet vitae, hendrerit ut, urna. Nam ac urna aliquet odio adipiscing facilisis. Nunc pretium auctor mauris. Integer quis dui.<br />
					Duis ornare, lectus a commodo mattis, nibh ligula porttitor magna, vitae tristique libero augue ac ipsum. Cras bibendum, odio eget luctus fringilla, arcu urna laoreet ante, eu molestie tellus augue vitae ante. Nulla massa augue, gravida id, mollis et, ornare eget, sem. Praesent viverra. Aenean lacus nisi, euismod ut, lacinia eget, pulvinar eu, mauris. Nam mi. Mauris quam eros, elementum sed, vulputate vel, eleifend nec, elit. Sed pharetra lacus quis tortor. Sed sapien lectus, facilisis eget, mollis non, tempus in, nisi. Donec venenatis convallis velit. Vivamus vehicula adipiscing turpis. Quisque nulla. Cras neque arcu, blandit at, fermentum gravida, gravida et, erat.<br />

					Aenean nec dui. In scelerisque, metus at aliquet tempus, nisl sem consectetuer dui, ut sollicitudin leo neque sit amet risus. Vivamus porttitor laoreet metus. In mattis sollicitudin pede. Curabitur vitae erat. Donec vulputate. Curabitur fringilla diam ac pede. Aenean a odio. Nunc arcu sem, consequat ut, semper semper, feugiat eu, ipsum. Donec rhoncus ante ac libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eu nibh. Vivamus at enim vel tortor malesuada imperdiet. Fusce et nulla nec lorem sodales elementum. Donec molestie auctor eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean hendrerit urna id ligula. Nam nisl diam, ullamcorper sit amet, fringilla a, dapibus nec, leo.<br />
				</div>
			</div>
		</div>
		<p></p>
	</body>

</html>

Gruß
Uwe

[Grobie]

Hallo Uwe,

und schon wieder vielen Dank, dass Du versuchst mir zu helfen.

Wo liest du das? ich sehe da keinen Hinweis in Bezug zu Safari.

Ich hab mir die beiden Codes auch in Safari angeschaut.

Das Verändern von von GoLive erzeugtem Javascript kannst du vergessen. Das ist noch komplizierter als ein eigenes Script.

Naja, ich habe eine fast fertige Seite mit einigen iFrames. Diese iFrames möchte ich umwandeln in Ebenen mit Scrollbalken. Das funktioniert ja auch, nur dass man die Scrollbalken am Mac (bis auf Safari) immer sieht. Das Dokument hat einen Quellcode von ca. 550 Zeilen, wovon sich (bis jetzt) ca. 300 mit dem Ein- und Ausblenden von zur Zeit 26 Ebenen beschäftigen bzw. die sich auf das von GoLive erzeugtem Javascript (CSScriptLib.js mit einer Länge von 503 Zeilen) beziehen.
Das mit dem eigenen Script funktioniert nicht, bzw.: ich blicke da gar nicht durch...

Deine Änderungen in meinem Quellcode bei der Beispieldatei funktionieren übrigens gut. Aber die Einstellung "overflow: none" in der Ebenendefinition für die versteckte Ebene ist damit ja auch in Stein gemeisselt und ich werde, falls ich die Ebene doch aktivieren möchte keine Scrollbalken haben... Außerdem habe ich es in meinem eigentlichen Dokument hauptsächlich mit "Einblenden" und "Ausblenden" von Ebenen zu tun und nicht mit "Wechseln" wie in meinem kleinen Beispiel.

Ein Gedanke von mir:
Im von GoLive generiertem Script taucht nicht einmal der Befehl "overflow" auf. Gibt es da keine Möglichkeit generell einmal div.style.overflow = 'hidden'; oder sowas wie (document.getElementById(s).style.overflow=="hidden"; zu schreiben? So dass generell erstmal der "overflow" komplett versteckt wird (und damit auch alle Scrollbalken) und erst beim Aktivieren der jeweiligen Ebenen gezeigt wird?
Also ich würde schon gerne nur einmal im von GoLive erzeugtem Javascript (CSScriptLib.js) eine Änderung machen, die sich auf das ganze Dokument auswirkt als alle meine Links und Ebenendefinitionen und Ebenen etc. im Quellcode zu ändern.
Ich denke ja auch, dass das Problem bei "visibility: hidden" und "overflow: auto" liegt. Dumm nur, dass GoLive nicht den Befehl "overflow" ins Script schreibt...

Schöne Grüße, Jens

[UweB]

Hallo Jens,

Im von GoLive generiertem Script taucht nicht einmal der Befehl "overflow" auf

Richtig, das ist das Problem. GoLive passt nur die Sichtbarkeit an.
Natürlich würde sich mit viel Geduld die CSScriptLib.js entsprechend verändern lassen. Nur überschreibt GoLive das bei nächster Gelegenheit wieder. Diese Datei ist eben nicht zum Verändern vorgesehen. Ein Ausweg wäre die veränderte Funktion zu kopieren und einer anderen Datei unterzubringen. Dann wäre der Aufruf aber wieder genauso wie mit der selbstgeschriebenen Datei, und die hast du ja schon. Was ist denn am Aufruf der Funktion so schwer?

Gruß
Uwe

[Grobie]

Hallo Uwe,

Was ist denn am Aufruf der Funktion so schwer?

Diese Funktion löst das Problem nicht.
Diese Funktion funktioniert nur bei Ebenen, die beim ersten Aufruf der Seite sichtbar sind. Ich habe aber 26 Ebenen, die erstmal nicht sichtbar sind und irgendwann aktiviert werden können. Das heißt, ich sehe erstmal 26 verschiedene leere Scrollbalken (wenn die Ebenen nicht genau übereinander liegen). Erst wenn ich alle Ebenen einmal aktiviert und dann dann wieder deaktiviert habe, verschwinden auch die Scrollbalken, weil erst dann der "overflow" auf "hidden" gesetzt wird.

Gruß, Jens

[UweB]

?
Was ist daran so schwer alle Ebenen zunächst mit "overflow: hidden" anzulegen?

Ich bezweifel allerdings, dass du überhaupt den richtigen Ansatz für dein Problem gefunden hast.
Ich vermute im Moment, du hast da 26 "Buttons" mit denen du jeweils einen Inhalt sichtbar machen willst. In diesem Fall wäre es sinnvoller eine Musterseite anzulegen und von dieser dann 26 einzelne Seiten abzuleiten, die alle gleich aussehen, aber andere Inhalte anzeigen.

Gruß
Uwe