---
title: "Ändra storlek på div?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/134366-ändra-storlek-på-div"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "maqe"
published: "2005-09-15T20:58:58.000Z"
updated: "2005-09-16T08:11:27.000Z"
replies: 2
views: 584
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/134366-ändra-storlek-på-div"
---

# Ändra storlek på div?

## #1 — maqe, 2005-09-15T20:58Z

Jag hittade detta [script](http://member.webforum.nu/6596/test.html)  där man med musen kan ändra en storlek på en div men detta funkar inte i FF. Någon som vet vart jag kan hitta ett script som fungerar i både IE och FF?

Permalänk: https://www.webforum.nu/p/134366

## #2 — Peter S, 2005-09-15T21:07Z

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>
```

Permalänk: https://www.webforum.nu/p/1672264

## #3 — maqe, 2005-09-16T08:11Z

> **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

Permalänk: https://www.webforum.nu/p/1672399

---

Tråden på webben: https://www.webforum.nu/amne/javascript/134366-ändra-storlek-på-div
