✔ Fenster minimieren (nur noch die Leiste)

B

blck

Mitglied
Hallo ich wollt mal Fragen, ob es sowas wie hier im Forum, um zB die einzelnen Themenfelder sozusagen zu minimieren (also über diese runden Kreise mit den Dreiecken), auch mit Javascript gibt.

Hoffe ihr habt die Frage verstanden,
MfG Blck
 
Ja is mir schon klar, aber ich bräuchte nen relativ einfaches Script. Bin Afänger.
MfG Blck

//edit

Ok ich hab mitlerweile ein Skript aufgetrieben und angepasst, aber wie verhiner ich, dass das Fenster,der div immer oben in die Browserecke springt? Bräuchte sozusagen feste Positionen in die es sich minimiert.
HTML: 
<html>
<head>
<style>
.JSWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}

</style>
<script language=javascript>
function objText(o)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in o )
		s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + o[i] + "<br>");
	s.push('}');
	return s.join('');
}
function debug(msg)
{
	document.getElementById('debug').innerHTML += msg + "<br>";
}

function JSWindow(title, oContent, x, y)
{
	// save arguments
	this.title = title;
	this.oContent = oContent;

	// initialization	
	this.mx = 0;
	this.my = 0;
	
	// create table for window with title-bar and content
	this.oTable = document.createElement("table");
	this.oTable.border = 1;

	// set the position of the window
	this.oTable.style.position = "absolute";
	this.oTable.style.left = x + "px";
	this.oTable.style.top = y + "px";

	// set background to white (default is transparent)
	this.oTable.style.backgroundColor = "white";

	// link from the table to the JSWindow object
	this.oTable.jsWindow = this;

	// if anywhere in the table are is clicked, bring the window to front.
	this.oTable.onmousedown = JSWindow.prototype.onBringToFront;

	// append to document body
	document.body.appendChild(this.oTable);

	// add row for title bar
	var oTR = this.oTable.insertRow(0);
	oTR.className = "JSWindowTitleStyle";

	// title	
	var oTD = oTR.insertCell(0);
	oTD.innerHTML = title;
	oTD.jsWindow = this;
	oTD.onmousedown = JSWindow.prototype.tdOnMouseDown;
	
	// minimize
	this.oMinTD = oTR.insertCell(1);
	this.oMinTD.innerHTML = "_";
	this.oMinTD.onmousedown = JSWindow.prototype.onMinimize;
	this.oMinTD.jsWindow = this;
	
	// add row for window content
	// a single cell the same width as the title bar row
	oTR = this.oTable.insertRow(1);
	oTD = oTR.insertCell(0);
	oTD.colSpan = 3;
	oTD.appendChild(oContent);
}

JSWindow.prototype.onMinimize = function()
{
	this.jsWindow.minimize();
}
JSWindow.prototype.minimize = function()
{
	// hide the content
	this.oContent.style.visibility = "hidden";
	this.oContent.style.position = "absolute";
	document.body.appendChild(this.oContent);
	
	this.oTable.deleteRow(1);
	
	// save current position
	this.saveX = this.oTable.style.left;
	this.saveY = this.oTable.style.top;
	
	// get the "window bar"
	if ( !window.jsWindowBar )
	{
		window.jsWindowBar = document.createElement("span");
		document.body.appendChild(window.jsWindowBar);
	}
	
	window.jsWindowBar.appendChild(this.oTable);
	this.oTable.style.position = "static";
	this.oTable.style.left = "500px";
	this.oTable.style.top = "500px";
	
	this.oMinTD.innerHTML = "#";
	this.oMinTD.onmousedown = JSWindow.prototype.onMaximize;
}
JSWindow.prototype.onMaximize = function()
{
	this.jsWindow.maximize();
}
JSWindow.prototype.maximize = function()
{
	document.body.appendChild(this.oTable);
	this.oTable.style.position = "absolute";
	
	this.oTable.style.left = "500px";
	this.oTable.style.top = "500px";
	
	// add the content again.
	oTR = this.oTable.insertRow(1);
	oTD = oTR.insertCell(0);
	oTD.colSpan = 3;
	
	oTD.appendChild(this.oContent);
	this.oContent.style.position = "static";
	this.oContent.style.visibility = "visible";
	
	this.oMinTD.innerHTML = "_";
	this.oMinTD.onmousedown = JSWindow.prototype.onMinimize;
}

function createWindows()
{
	new JSWindow("Window 1", document.getElementById("Div1"), 500,500);
	new JSWindow("Window 2", document.getElementById("Div2"), 300,0);
	new JSWindow("Window 3", document.getElementById("Div3"), 300,100);
}

</script>
</head>
<body onload="createWindows();">
	<div id="Div1" style="width:250px;height:60px;">
		This is window 1<br>
		blah blah blah blah blah blah blah blah blah blah blah...
	</div>
	<div id="Div2" style="width:300px;height:50px;">

		This is window 2<br>
		<input name="favoritecolor" type=text value=green>
	</div>
	<div id="Div3" style="width:200px;height:100px;">
		This is window 3<br>
		<input id=wName value="New Window">
		<button onclick="createNewWindow();">Create</button>

	</div>
	<div id=debug></div>
</body>
</html>
 
Zuletzt bearbeitet:
blck hat gesagt.:
Ja is mir schon klar, aber ich bräuchte nen relativ einfaches Script. Bin Afänger.
MfG Blck
Zum Vergrößern anklicken....

Einfacher geht's kaum noch:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_blck</title>

<script type="text/javascript">
<!--
function toggle(id) {
obj = document.getElementById(id);
obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
}
//-->
</script>

<style type="text/css">
<!--
* {
font:normal 1em verdana,sans-serif;
}
#control {
width:200px;
padding:2px 5px;
background:#eee;
text-align:right;
font-size:.6em;
}
#box {
display:block;
width:198px;
padding:5px;
border:1px solid #eee;
}
-->
</style>

</head>
<body>

<div id="control"><a href="#" onclick="toggle('box');return false;">[click]</a></div>
<div id="box">box</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück