10 svar · 260 visningar · startad av Jesper T
Jag skulle behöva en "cross browser"-funktion för att dra ut lager med musen. När man drar i över eller underkant så skall lagret förstoras eller förminskas i 15pixels-steg(endast i vertikal riktning). En fördel skulle vara att man även kan flytta hela lagret, even det med 15pixels-steg i vertikal riktining.
Några tips?
Några tips?
Fortfarande ingen som vet?
Inte riktigt vad du söker men kanske ett steg i rätt riktnig. http://www.webforum.nu/showthread.php?s=&postid=518490#post518490
Själv väldigt nyfiken på en lösning av ditt problem eftersom det är ungefär samma sak som jag söker.
Tack solbulle. Jag har kammat till det hela lite, men jag skulle vilja att den dras ut i 15pixlars-steg. Går det att ordna?
<html>
<head>
<script>
document.onmousemove = cropIt
document.onmousedown = lockIt
document.onmouseup = unLockIt
xlock = 0;
inPos = 0;
function cropIt(e){
element = document.getElementById("foo")
y = (document.all)? event.y : e.pageY;
status=inPos
if( (element.offsetHeight - (y - parseInt(element.style.top))) < 0 &&
(element.offsetHeight - (y - parseInt(element.style.top))) >-9 ){
document.body.style.cursor="se-resize";
inPos = 1;
}
else{
document.body.style.cursor="default";
inPos = 0;
}
if(xlock==1){
element.style.height = y - parseInt(element.style.top)
document.position.pos.value=element.style.height;
}
}
function lockIt(){
if(inPos == 1){
xlock =1
}
}
function unLockIt(){
xlock = 0
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="foo" style="position:absolute;top:50px; left:50px; width:120px; height:120px; overflow:hidden; border:1px solid #CCCCCC;">
</div><form name="position" method="post" action="">
<input type="text" name="pos" value="">
</form>
</body>
</html>
if(xlock==1){
element.style.height =Math.ceil((y-parseInt(element.style.top))/15)*15
document.position.pos.value=element.style.height;
}
Wow, det gick.
Går det dessutom att ha flera lager på samma sida som går att storleksändra?
<html>
<head>
<script>
document.onmousemove = cropIt
document.onmousedown = lockIt
document.onmouseup = unLockIt
xlock = 0;
inPos = 0;
var element=false;
function cropIt(e){ if(element){
y = (document.all)? event.y : e.pageY;
status=inPos
if( (element.offsetHeight - (y - parseInt(element.style.top))) < 0 &&
(element.offsetHeight - (y - parseInt(element.style.top))) >-9 ){
document.body.style.cursor="se-resize";
inPos = 1;
}
else{
document.body.style.cursor="default";
inPos = 0;
}
if(xlock==1){
element.style.height =Math.ceil((y-parseInt(element.style.top))/15)*15
document.position.pos.value=element.style.height;
}
}}
function lockIt(){
if(inPos == 1){
xlock =1
}
}
function unLockIt(){
xlock = 0
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div
id="foo"
onmouseover="element=this;"
style="position:absolute;top:50px; left:50px; width:120px; height:120px; overflow:hidden; border:1px solid #CCCCCC;">
</div>
<div
id="bar"
onmouseover="element=this;"
style="position:absolute;top:50px; left:250px; width:120px; height:120px; overflow:hidden; border:1px solid #CCCCCC;">
</div>
<form name="position" method="post" action="">
<input type="text" name="pos" value="">
</form>
</body>
</html>
En höjdare....förutom att det endast funkar när sidan inte scrollas. Om jag har scrollat ner en bit på sidan så funkar det inte.
Lösning?
Ändra;
y = (document.all)? event.y : e.pageY;
till;
y = (document.all)? event.y+document.body.scrollTop : e.pageY+pageYOffset;
Du verkar ju kunna ALLT! :) :) :)