div Layer

S

StefanK

Active member
ID: 36765
L
24 April 2006
25
0
Hallo Leute,

Ich habe folgendes Problem.

Ich möchte ger das ich einen div layer der klein im hintergrund verborgen (nicht sichtbar) ist, bei klicken auf einen Link soll dieser div Layer Herauszoomen.

Weiß aber net so richtig wie ich es machen soll.

Hier mal ein bildchen zum besseren verständniss.

layer.jpg


Hoffe man erkennt was und man weiß was ich mein.

MfG
Stefan
 
Hi,

Das lässt sich mit Javascript lösen.
Gedankenanstoss:
Das kleine Layer wird unsichtbar gemacht (visibility:hidden).
Mit dem Klick auf einem Link wird eine JS Funktion gestartet, die das Layer einblendet (style.visibility = 'visible') und das Layer vergrößert (z.B. durch einen timeout, sodass die Funktion bis zu einem bestimmten Maß immer wiederholt wird und das Layer Stück für Stück vergrößert).
 
Das hört sich eigentlich ganz gut und verständlich an, nur JavaScript hmm!!
Vielleicht nen kleines beispiel Script auf diversen Seiten, da selbst schreiben net so mein bestes ist.

:yawn:

MfG
Stefan
 
Mit Scriptaculous (basierend auf Prototype) geht das relativ simpel:
HTML: 
<html>
<head>
	<title>Div-Test</title>

	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous/scriptaculous.js?load=effects" type="text/javascript"></script>

<script type="text/javascript">
var Layer = {
	show: function() {
		$('layer').morph('width: 300px; height: 500px; color: #000000; background-color: #FFDD00; border: 1px solid #FF0000;');
	},
	hide: function() {
		$('layer').morph('width: 0px; height: 0px; color: #FFFFFF; background-color: #FFFFFF; border: 1px solid #FFFFFF;');
	}
}
</script>

<style type="text/css">
#layer {
	position: absolute;
	left: 200px;
	top: 10px;
	overflow: hidden;
	white-space: nowrap;
}
</style>
</head>
<body>
	<div id="buttons">
		<button onclick="Layer.show();">auf</button>
		<button onclick="Layer.hide();">zu</button>
	</div>
	<div id="layer" style="width: 0px; height: 0px; border: 1px solid #FFFFFF; background-color: #FFFFFF; color: #FFFFFF;">
		lorem ipsum bla
	</div>
</body>
</html>
 
Mit Javascript ist es zwar einfacher umzusetzen,es geht aber auch ohne.
Setze einfach den Inhalt des versteckten Layers z.B in die HTML-Tags <p></p>
und setze 2 CSS-Definitionen.Einen für den normalen Zustand mit display:blocked und einen für den Hover-Zustand.
 
tleilax schrieb:
Mit Scriptaculous (basierend auf Prototype) geht das relativ simpel:
HTML: 
<html>
<head>
	<title>Div-Test</title>

	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous/scriptaculous.js?load=effects" type="text/javascript"></script>

<script type="text/javascript">
var Layer = {
	show: function() {
		$('layer').morph('width: 300px; height: 500px; color: #000000; background-color: #FFDD00; border: 1px solid #FF0000;');
	},
	hide: function() {
		$('layer').morph('width: 0px; height: 0px; color: #FFFFFF; background-color: #FFFFFF; border: 1px solid #FFFFFF;');
	}
}
</script>

<style type="text/css">
#layer {
	position: absolute;
	left: 200px;
	top: 10px;
	overflow: hidden;
	white-space: nowrap;
}
</style>
</head>
<body>
	<div id="buttons">
		<button onclick="Layer.show();">auf</button>
		<button onclick="Layer.hide();">zu</button>
	</div>
	<div id="layer" style="width: 0px; height: 0px; border: 1px solid #FFFFFF; background-color: #FFFFFF; color: #FFFFFF;">
		lorem ipsum bla
	</div>
</body>
</html>
Zum Vergrößern anklicken....


Ja das sieht super aus, ist zwar nicht ganz das Zommen was ich wollte, aber war wohl auch etwas falsch im Bild, wollte es von der mitte herraus wenn das möglich wäre.

Und noch ne frage, muss es nen Button dieser Art sein oder geht es auch mit nem normalem Textlink?

MfG
Stefan
 
Achja ich vergass, wenn ich dann auf einen anderen Link klicke das das erste wieder zu geht und der zweite auf.

MfG
Stefan
 
Ich hab das Beispiel grad mal "etwas" erweitert:
HTML: 
<html>
<head>
	<title>Div-Test</title>

	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous/scriptaculous.js?load=effects" type="text/javascript"></script>

<script type="text/javascript">
var Layer = Class.create();
Layer.prototype = {
	initialize: function(container) {
		this.container_element = $(container).update('<div class="layer_content"></div>').down('div').hide();
		this.url='';

		$$('a.layered').invoke('observe', 'click', function(event) {
			this.showLayer(Event.element(event).readAttribute('href'));
			Event.element(event).blur();
			Event.stop(event);
		}.bindAsEventListener(this)).each(function(element) {
			if ($(element).readAttribute('href').indexOf('#')==0) {
				$($(element).readAttribute('href').substring(1)).hide();
			}
		});

		$$('a.hidelayer').invoke('observe', 'click', function(event) {
			this.hideLayer();
			Event.element(event).blur();
			Event.stop(event);
		}.bindAsEventListener(this));

		this.showLayer(document.location.hash);;
	},
	showLayer: function(url) {
		if (this.url==url || this.hideLayer({afterFinish: this.showLayer.bind(this, url)})) {
			return;
		}
		this.url=url;
		if (!url.indexOf('#')) {
			location.hash = url;
			new Effect.Grow(this.container_element.update($(url.substr(1)).innerHTML));
		} else {
			location.hash = '#';
			new Ajax.Updater(this.container_element, this.url, {
				onSuccess: function() {
					new Effect.Grow(this.container_element);
				}.bind(this)
			});
		}
	},
	hideLayer: function(options) {
		this.url='';
		if (this.container_element.visible()) {
			new Effect.Shrink(this.container_element, options||{});
			return true;
		}
		return false;
	}
}
Event.observe(window, 'load', function() {
	new Layer('layer');
});
</script>

<style type="text/css">
#layer {
	position: absolute;
	left: 200px;
	top: 10px;
}
.layer_content {
	width: 300px;
	height: 500px;
	color: #000000;
	background-color: #FFDD00;
	border: 1px solid #FF0000;
}
</style>
</head>
<body>
	<div id="navigation">
		<ul>
			<li><a href="1.html" class="layered">Link 1</a></li>
			<li><a href="2.html" class="layered">Link 2</a></li>
			<li><a href="3.html" class="layered">Link 3</a></li>
			<li><a href="#static_content_0" class="layered">Static 0</a></li>
			<li><a href="#static_content_1" class="layered">Static 1</a></li>
			<li><a href="#static_content_2" class="layered">Static 2</a></li>
			<li><a href="#static_content_3" class="layered">Static 3</a></li>
		</ul>
		<a href="#" class="hidelayer">Schliessen</a>
	</div>
	<div id="layer"></div>
	<div id="static_content_0" class="layer_content">
		Static content 0
	</div>
	<div id="static_content_1" class="layer_content">
		Static content 1
	</div>
	<div id="static_content_2" class="layer_content">
		Static content 2
	</div>
	<div id="static_content_3" class="layer_content">
		Static content 3
	</div>
</body>
</html>
Ist mir grad zu spät für Dokumentation, aber ich denke, die generelle Funktionsweise wird ersichtlich. Anhand des Klassenzusatzes "layered" bei einem Link wird entschieden, ob ein AJAX-Request auf die angegebene Datei stattfindet und der Inhalt angezeigt oder ob der Inhalts des Divs mit der angegebenen ID angezeigt wird.

Einfach mal ein bisschen im HTML rumspielen, dann dürfte das Prinzip klarer werden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben