Ändra storlek på div?
2 svar · 582 visningar · startad av maqe
Det fattas en enhetsbeteckning på ett ställe:
<!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" xml:lang="en" lang="en">
<head>
<title>Horizontal resize</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
<!--
var curWidth = 0;
var curX = 0;
var newX = 0;
var mouseButtonPos = "up";
//Function 'setPos(...) gets the original div width.
function setPos(e) {
//For handling events in ie vs. w3c.
curEvent = ((typeof event == "undefined")? e: event);
//Sets mouse flag as down.
mouseButtonPos = "down";
//Gets position of click.
curX = curEvent.clientX;
//Get the width of the div.
var tempWidth = document.getElementById("treeView").style.width;
//Get the width value.
var widthArray = tempWidth.split("p");
//Set the current width.
curWidth = parseInt(widthArray[0]);
}
//Function getPos(...) changes the width of the div while the mouse button is pressed.
function getPos(e){
if( mouseButtonPos == "down" ) {
//For handling events in ie vs. w3c.
curEvent = ((typeof event == "undefined")? e: event);
//Get new mouse position.
newX = curEvent.clientX;
//Calculate movement in pixels.
var pixelMovement = parseInt(newX - curX);
//Determine new width.
var newWidth = parseInt(curWidth + pixelMovement);
//Enforce a minimum width.
newWidth = ((newWidth < 150)? 150: newWidth);
//Set the new width.
document.getElementById("treeView").style.width = newWidth + "px";
//Set the new left of the splitter bar.
document.getElementById("splitterBar").style.left = parseInt(document.getElementById("treeView").style.width) + 10 + "px";
}
}
//-->
</script>
<style type="text/css">
body {height:100%;}
#treeView{
position:absolute;
top:30px;
left:10px;
height: 150px;
width:250px;
border: 1px solid #808080;
overflow: hidden;
}
/*status bar style to act as the bottom border of the div*/
#splitterBar{
cursor: e-resize;
position:absolute;
display:block;
background-color: #c0c0c0;
top:30px;
left:262px;
margin-top:0px;
height:152px;
padding:0;
width: 4px;
}
</style>
</head>
<!--onmousemove and onmouseup are on the body tag whereas onmousedown is on the "splitterBar" div-->
<body onmousemove="getPos(event)" onmouseup="mouseButtonPos='up'">
<div id="treeView" style="height:150px; width:250px">
<p>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br></p>
</div>
<div onmousedown="setPos(event)" id="splitterBar"></div>
</body>
</html>
Peter S skrev:
Det fattas en enhetsbeteckning på ett ställe:
<!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" xml:lang="en" lang="en"> <head> <title>Horizontal resize</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> <!-- var curWidth = 0; var curX = 0; var newX = 0; var mouseButtonPos = "up"; //Function 'setPos(...) gets the original div width. function setPos(e) { //For handling events in ie vs. w3c. curEvent = ((typeof event == "undefined")? e: event); //Sets mouse flag as down. mouseButtonPos = "down"; //Gets position of click. curX = curEvent.clientX; //Get the width of the div. var tempWidth = document.getElementById("treeView").style.width; //Get the width value. var widthArray = tempWidth.split("p"); //Set the current width. curWidth = parseInt(widthArray[0]); } //Function getPos(...) changes the width of the div while the mouse button is pressed. function getPos(e){ if( mouseButtonPos == "down" ) { //For handling events in ie vs. w3c. curEvent = ((typeof event == "undefined")? e: event); //Get new mouse position. newX = curEvent.clientX; //Calculate movement in pixels. var pixelMovement = parseInt(newX - curX); //Determine new width. var newWidth = parseInt(curWidth + pixelMovement); //Enforce a minimum width. newWidth = ((newWidth < 150)? 150: newWidth); //Set the new width. document.getElementById("treeView").style.width = newWidth + "px"; //Set the new left of the splitter bar. document.getElementById("splitterBar").style.left = parseInt(document.getElementById("treeView").style.width) + 10 + "px"; } } //--> </script> <style type="text/css"> body {height:100%;} #treeView{ position:absolute; top:30px; left:10px; height: 150px; width:250px; border: 1px solid #808080; overflow: hidden; } /*status bar style to act as the bottom border of the div*/ #splitterBar{ cursor: e-resize; position:absolute; display:block; background-color: #c0c0c0; top:30px; left:262px; margin-top:0px; height:152px; padding:0; width: 4px; } </style> </head> <!--onmousemove and onmouseup are on the body tag whereas onmousedown is on the "splitterBar" div--> <body onmousemove="getPos(event)" onmouseup="mouseButtonPos='up'"> <div id="treeView" style="height:150px; width:250px"> <p>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br>resize me horizontally.<br></p> </div> <div onmousedown="setPos(event)" id="splitterBar"></div> </body> </html>
Ahh okay, tack för hjälpen