Expandera lager.

6 svar · 373 visningar · startad av Jesper T 3 feb. 2003

Jesper TMedlem sedan nov. 20017 144 inlägg

Frågan3 feb. 2003 16:18#1

Skulle vilja visa ett lager som med en knapp till höger kan expandera det till full storlek(full storlek, styrs av textmassorna i lagret). Clipping kanske? Är det ngn som har ngt tips?

____________________________________________
|Här är en text                   [red]visa/dölj[/red] |
|___________________________________________|
____________________________________________
|Här är en text                   [red]visa/dölj[/red] |
|Det visas mer av texten när man expanderar.|
|När man klickar på Minimera så återgår     |
|lagret till ursprungling storlek           |
|___________________________________________|

Jesper TMedlem sedan nov. 20017 144 inlägg

3 feb. 2003 18:18#2

Nu har jag hittat ett script på "The Dynamic Duo", men jag skulle vilja ha flera lager på sidan och styra det hela med getElementById.
Jag skulle också vlija "återställa" med ett till klick.

<html>
<head>
<title></title>
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
}
function clipValues(obj,which) {
	if (ns4) {
		if (which=="t") return obj.clip.top
		if (which=="r") return obj.clip.right
		if (which=="b") return obj.clip.bottom
		if (which=="l") return obj.clip.left
	}
	else if (ie4) {
		var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px")
		if (which=="t") return Number(clipv[0])
		if (which=="r") return Number(clipv[1])
		if (which=="b") return Number(clipv[2])
		if (which=="l") return Number(clipv[3])
	}
}
function clipBy(obj,t,r,b,l) {
	if (ns4) {
		obj.clip.top = clipValues(obj,'t') + t
		obj.clip.right = clipValues(obj,'r') + r
		obj.clip.bottom = clipValues(obj,'b') + b
		obj.clip.left = clipValues(obj,'l') + l
	}
	else if (ie4) obj.clip = "rect("+(this.clipValues(obj,'t')+t)+"px "+(this.clipValues(obj,'r')+r)+"px "+Number(this.clipValues(obj,'b')+b)+"px "+Number(this.clipValues(obj,'l')+l)+"px)"
}
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF" onLoad="init()">

<DIV ID="blockDiv" STYLE="border:1px solid black;position:absolute; left:150; top:80; width:304; height:100; clip:rect(0,304,30,0); background-color:#FFFFCC; layer-background-color:#FF0000;"> 
  Här är en massa text 
  text text text text<a href="javascript:clipBy(block,0,0,400,0)"> visa/dölj</a> text text text text text text text text text text text text 
  text text text text text text text text text text text text text text text text 
  text text text text text text text text text text text text text text text text 
  text text text text text text text text text text text</DIV>

</body>
</html>

Jesper TMedlem sedan nov. 20017 144 inlägg

3 feb. 2003 18:55#3

Ähh, glöm det. Jag gör på något annat sätt!

Peter SMedlem sedan dec. 20025 483 inlägg

3 feb. 2003 20:42#4

Nej, varför det? :e

Här kommer ett försök från mig:

<script type="text/javascript">
<!--

var Layer = {
	state : null,
	content : null,

	init : function(state, content){
		this.state = document.getElementById(state).getElementsByTagName("a")[0];
		this.content = document.getElementById(content);
		this.content.style.display = "none";
	},

	showHide : function(){
		if(this.content.style.display == "none"){
			this.content.style.display = "block";
			this.state.innerHTML = "Minimera";
		} else {
			this.content.style.display = "none";
			this.state.innerHTML = "Expandera";			
		}
	}
};

window.onload = function(){
	Layer.init("state", "content");
};

//-->
</script>

<style type="text/css">
<!--

#main {
	background : #eee;
	border : 1px solid #666;
	width : 400px;
	padding : 3px;
}

#top {
	position : relative;
	width : 100%;
}

#header {
	width : 70%;
	float : left;
}

#state {
	text-align : center;
	font-family : tahoma, arial, sans-serif;
	font-size : 12px;
	font-weight : bold;
	padding-top : 2px;
}

#state a {
	color : #000;
	text-decoration : none;
}

-->
</style>

<body>

<div id="main">
	<div id="top">
		<div id="header">Rubrik...</div>
		<div id="state"><a href="javascript:void(0)" onclick="Layer.showHide()">Expandera</a></div>
	</div>
	<div id="content">En massa text...</div>
</div>

</body>

JojoxxMedlem sedan juni 20004 308 inlägg

4 feb. 2003 06:48#5

Varför så mycket kod...? :)

<style type="text/css">
<!--
#main {
	background : #eee;
	border : 1px solid #666;
	width : 400px;
	padding : 3px;
}
#top a {
	color : #000;
	text-decoration : none;
}
-->
</style>

<div id="main">
	<div id="top" style="width:100%">
		<div style="float:left;">Rubrik...</div>
		<div style="float:right;"><a href="#" onclick="document.getElementById('content').style.display=(document.getElementById('content').style.display=='none')?'block':'none';">Expandera</a></div>
	</div>
	<div id="content" style="display:none;">En massa text...</div>
</div>

Peter SMedlem sedan dec. 20025 483 inlägg

4 feb. 2003 09:37#6

1. Du slipper ha all JavaScript-kod direkt i attributen, vilket leder till punkt 2:
2. Användandet av funktioner tillåter återanvändning av koden.

Dessutom byter inte din kod ut "Expandera" mot "Minimera" då lagret göms/visas.

JojoxxMedlem sedan juni 20004 308 inlägg

4 feb. 2003 11:44#7

Ok då, är det fler block skall det givetvis återanvändas. Minimera/expandera missade jag. Men så här :)

<script language="JavaScript" type="text/javascript">
function showhide(a,id){
	document.getElementById(id).style.display=(document.getElementById(id).style.display=='none')?'block':'none';
	a.innerHTML=(document.getElementById(id).style.display=='none')?'Expandera':'Minimera';
}
</script>
<style type="text/css">
<!--
#main {
	background : #eee;
	border : 1px solid #666;
	width : 400px;
	padding : 3px;
}
#top a {
	color : #000;
	text-decoration : none;
}
-->
</style>

<div id="main">
	<div id="top" style="width:100%">
		<div style="float:left;">Rubrik...</div>
		<div style="float:right;"><a href="#" onclick="showhide(this,'content');">Expandera</a></div>
	</div>
	<div id="content" style="display:none;">En massa text...</div>
</div>