I have a debugger log that I've written in JavaScript for a project I'm working on. The log is basically an <aside> tag in HTML5 that only shows when needed. I wanted to play around with the idea of being able to move the log around the screen, as it may overlap certain things (which is fine for my project). However, I can't seem to figure out how to use HTML5 to properly drag and drop the tag so that it can be placed anywhere on the screen (well, or within a <div> element).
After reading on HTML5's drag and drop support, I have a basic understanding of how it works, but I'm not sure where to start when it comes to allowing the div to be placed anywhere (it's z-index is a high value, so as I said, overlapping is fine).
Any suggestions?
Oh, and I'd like to try and avoid using external libraries for this project, wherever possible. I'm trying to do this in pure JavaScript/HTML5.
Drag and drop doesn't move elements around, if you want the element to move when you drop it then you have to set the new position of the element in the drop event. I've done an example which works in Firefox and Chrome, here are the key points:
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
The dragstart event works out the offset of the mouse pointer from the left and top of the element and passes it in the dataTransfer. I'm not worrying about passing the ID because there's only one draggable element on the page - no links or images - if you have any of that stuff on your page then you'll have to do a little more work here.
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('dragme');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
event.preventDefault();
return false;
}
The drop event unpacks the offsets and uses them to position the element relative to the mouse pointer.
The dragover event just needs to preventDefault when anything is dragged over. Again, if there is anything else draggable on the page you might need to do something more complex here:
function drag_over(event) {
event.preventDefault();
return false;
}
So bind it to the document.body along with the drop event to capture everything:
var dm = document.getElementById('dragme');
dm.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false);
If you want this to work in IE you'll need to convert the aside to an a element, and, of course, all the event binding code will be different. The drag and drop API doesn't work in Opera, or on any mobile browsers as far as I'm aware. Also, I know you said you don't want to use jQuery, but cross browser event binding and manipulating element positions are the sort of things that jQuery makes much easier.
Thanks for your answer. It works great in Chrome and Firefox. I tweaked it to work in IE.Below is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Fri, 27 Jun 2014 21:02:23 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
li
{
position: absolute;
left: 0;
top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
width: 200px;
background: rgba(255,255,255,0.66);
border: 2px solid rgba(0,0,0,0.5);
border-radius: 4px; padding: 8px;
}
</style>
<script>
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
var str = (parseInt(style.getPropertyValue("left")) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top")) - event.clientY) + ',' + event.target.id;
event.dataTransfer.setData("Text", str);
}
function drop(event) {
var offset = event.dataTransfer.getData("Text").split(',');
var dm = document.getElementById(offset[2]);
dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
event.preventDefault();
return false;
}
function drag_over(event) {
event.preventDefault();
return false;
}
</script>
</head>
<body ondragover="drag_over(event)" ondrop="drop(event)">
<ul>
<li id="txt1" draggable="true" ondragstart="drag_start(event)"> Drag this text </li><br>
<li id="txt2" draggable="true" ondragstart="drag_start(event)"> Drag me</li>
</ul>
<p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>
<p>In almost every computation a great variety of arrangements for the succession of the processes is possible, and various considerations must influence the selections amongst them for the purposes of a calculating engine. One essential object is to choose that arrangement which shall tend to reduce to a minimum the time necessary for completing the calculation.</p>
<p>Many persons who are not conversant with mathematical studies imagine that because the business of [Babbage’s Analytical Engine] is to give its results in numerical notation, the nature of its processes must consequently be arithmetical and numerical, rather than algebraical and analytical. This is an error. The engine can arrange and combine its numerical quantities exactly as if they were letters or any other general symbols; and in fact it might bring out its results in algebraical notation, were provisions made accordingly.</p>
<p>The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform. It can follow analysis, but it has no power of anticipating any analytical revelations or truths. Its province is to assist us in making available what we are already acquainted with.</p>
</body>
</html>
I adjusted a bit robertc's great answer for cases of multiple items. Here the secondclass name is just for another position.
<aside draggable="true" class="dragme" data-item="0">One</aside>
<aside draggable="true" class="dragme second" data-item="1">Two</aside>
Add the data-item attribute to the setDatafunction.
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY) + ',' + event.target.getAttribute('data-item'));
}
Target the element that is dragged.
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementsByClassName('dragme');
dm[parseInt(offset[2])].style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
dm[parseInt(offset[2])].style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
event.preventDefault();
return false;
}
And loop through all elements with a class dragme.
var dm = document.getElementsByClassName('dragme');
for (var i = 0; i < dm.length; i++) {
dm[i].addEventListener('dragstart', drag_start, false);
document.body.addEventListener('dragover', drag_over, false);
document.body.addEventListener('drop', drop, false);
}
pen
Related
I'm not sure how to explain what I exactly want (which makes it really hard to google for as well), but I would like to create a table with each cell a specific width and height (let's say 40x40 pixels).
This table will be way larger than the viewport, so it would need some scrolling, but I don't want scrollbars (this part ain't a problem), but a way to drag the table around "behind the viewport".
To make it a bit more complex, I need to be able to center a specific cell and know which cell is centered too (although if I know for example that the table is on left: -520px; I can calculate what the situation is).
Long story short, I'm looking for something that looks and works like maps.google.com, but then with a table and cells instead of a canvas or divs.
What you're trying to achieve is relatively simple. You have a container div element with position: relative; overflow: hidden applied via CSS and the content set to position: absolute. For example:
<div class="wrapper">
<div class="content-grid">
... your grid HTML ...
</div>
</div>
You then need to set up some mouse/touch tracking javascript, you can find plenty of examples around Stack Overflow or Google, which monitors the position of the mouse at mousedown or touchstart events and then tests this repeatedly on an interval to see where the pointer is and update the content-grid top and left position, until mouseup or touchend.
You can make this animation smooth using CSS transition on left and top.
The tricky bit is calculating the position for the centre cell. For this I would recommend calculating a central zone, the size of your grid cells (i.e. 40x40) in the middle of your container element. Then checking if any grid cell is currently more than 1/4 inside that zone, and treating it as the "central" element.
Here is a basic example for position a cell within a grid within a wrapper: https://jsfiddle.net/tawt430e/1/
Hope that helps!
I was a bit disappointed to see the down votes of my question at first. I can imagine that stackoverflow has a lot of issues with new people just trying to get their code written here, but that's not what I asked.
Anyway, with the "you share the problem, you share the solution", mindset, I fixed the code with help of tw_hoff and it all works now. It even saves the coordinates in the local storage so this example HTML keeps you in the same position if you refresh the page. I added the two example images I used as well (store the left one as farm.png, the right one as tile.png, same directory as the html page).
The actual code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Game map demo</title>
<style>
body { margin: 0; padding: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="map" style="position: absolute; overflow: hidden; width: 100%; height: 100%; background-color: darkgreen;">
<div id="content" style="white-space: nowrap;">
</div>
</div>
<script>
for(i = 0; i < 20; i++) {
for(j = 0; j < 20; j++) {
var tile;
if((i == 4 || i == 5) && (j == 2 || j == 3)) {
tile = 'farm';
} else {
tile = 'tile';
}
$("#content").append('<div style="background: url(\'' + tile + '.png\'); width: 128px; height: 128px; position: absolute; margin-left: ' + (i * 128) + 'px; margin-top: ' + (j * 128) + 'px;"></div>');
}
}
$("body").css("-webkit-user-select","none");
$("body").css("-moz-user-select","none");
$("body").css("-ms-user-select","none");
$("body").css("-o-user-select","none");
$("body").css("user-select","none");
var down = false;
var current_left = 0;
var current_top = 0;
if(localStorage.getItem("current_left") && localStorage.getItem("current_top")) {
current_left = Number(localStorage.getItem("current_left"));
current_top = Number(localStorage.getItem("current_top"));
console.log(current_left);
$("#content").css('marginLeft', (current_left) + 'px');
$("#content").css('marginTop', (current_top) + 'px');
}
$(document).mousedown(function() {
down = true;
}).mouseup(function() {
down = false;
});
var cache_pageX;
var cache_pageY;
$( "#map" ).mousemove(function( event ) {
if(down == true) {
current_left += (-1 * (cache_pageX - event.pageX));
if(current_left > 0)
current_left = 0;
if(current_left < (-2560 + $("#map").width()))
current_left = (-2560 + $("#map").width());
current_top += (-1 * (cache_pageY - event.pageY));
if(current_top > 0)
current_top = 0;
if(current_top < (-2560 + $("#map").height()))
current_top = (-2560 + $("#map").height());
localStorage.setItem("current_left", current_left);
localStorage.setItem("current_top", current_top);
$("#content").css('marginLeft', (current_left) + 'px');
$("#content").css('marginTop', (current_top) + 'px');
}
cache_pageX = event.pageX;
cache_pageY = event.pageY;
});
</script>
</body>
</html>
It still needs some work, and of course a lot of work to be actually used in a game, but this part works and I hope if someone else ever might have the same issue and searches for it on stackoverflow my solutions gives them a push in the right direction :).
Thanks for those that helped!
I have an alphabetical scrolling bar (ASB) in my app, which most smartphones have in their Contacts app.
Now, I have no problem to scroll to specific item when my finger touchstart touchend click etc.. on the ASB.
But, I have problem on capturing hover or mouseover event on my smartphone.
I have tried touchstart touchswipe touchend mouseenter mousemove or hover with no lucks.
Here's the Fiddle or Codepen to play around on your mobile.
Any suggestion is appreciated.
TL;DR; touchmove, touchstart and touchend are the events that made this possible.
I've found that people keep telling me that it's not possible on non-native app to provide the functionality of hover event on smartphone.
But, the modern smartphone browsers have actually provided the functionalities. I realized that the solution is literally lying in a very simple place. And with few tweaks, I've figured how I can simulate this behavior to cross-platform even though it's a bit cheating.
So, Most oftouchevents are passing the arguments that have the needed information where the user touches on the screen.
E.g
var touch = event.originalEvent.changedTouches[0];
var clientY = touch.clientY;
var screenY = touch.screenY;
And since I know the height of every button on my ASB, I can just calculate where the user hovers the element on.
Here's the CodePen to try it easier on mobile touch devices. (Please note this only works on touch devices, you can still use chrome on toggled device mode)
And this is my final code,
var $startElem, startY;
function updateInfo(char) {
$('#info').html('Hover is now on "' + char + '"');
}
$(function() {
var strArr = "#abcdefghijklmnopqrstuvwxyz".split('');
for (var i = 0; i < strArr.length; i++) {
var $btn = $('<a />').attr({
'href': '#',
'class': 'btn btn-xs'
})
.text(strArr[i].toUpperCase())
.on('touchstart', function(ev) {
$startElem = $(this);
var touch = ev.originalEvent.changedTouches[0];
startY = touch.clientY;
updateInfo($(this).text());
})
.on('touchend', function(ev) {
$startElem = null;
startY = null;
})
.on('touchmove', function(ev) {
var touch = ev.originalEvent.changedTouches[0];
var clientY = touch.clientY;
if ($startElem && startY) {
var totalVerticalOffset = clientY - startY;
var indexOffset = Math.floor(totalVerticalOffset / 22); // '22' is each button's height.
if (indexOffset > 0) {
$currentBtn = $startElem.nextAll().slice(indexOffset - 1, indexOffset);
if ($currentBtn.text()) {
updateInfo($currentBtn.text());
}
} else {
$currentBtn = $startElem.prevAll().slice(indexOffset - 1, indexOffset);
if ($currentBtn.text()) {
updateInfo($currentBtn.text());
}
}
}
});
$('#asb').append($btn);
}
});
#info {
border: 1px solid #adadad;
position: fixed;
padding: 20px;
top: 20px;
right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
No hover detected
</div>
<div id="asb" class="btn-group-vertical">
</div>
The hover event is triggered with click/touch events on mobile phone, because you can not simply hover an element on a touch screen.
You can demonstrate this behaviour by simply using the css hover and/or focus selectors to modify content, you can see, that before clicking elements remain the same, but after clicking they retain modified styles.
bind touchstart on a parent. Something like this will work:
$('body').bind('touchstart', function() {});
You don't need to do anything in the function, leave it empty. This will be enough to get hovers on touch, so a touch behaves more like :hover and less like :active.
Similar question How do I simulate a hover with a touch in touch enabled browsers?
The code you provided in your Fiddle or Codepen is working fine. So what's the fuss?
Well, in mostly air or touch-triggering gadgets like smartphones and tablets, you cannot simply use the hover thing function because you can't hover thing on it to make some events. You can only use the hover function when you are using for example a detachable keyboard for tablet (or something that uses mouse or finger scroller).
Inside a position:relativeelement box, I have
a absolutely positioned element parent at top:0 with a couple of static p and h1..h6inside. Those may all have different margin/padding values.
a few absolutely positioned elements where element name and content matches exactly one of the elements from above list #1.
The goal is to set the y-value of the 2nd element such that it exactly overlaps with the corresponding one from the set in 1. .
I've taken this approach (using closure, but anything could be used really), starting with an Array of elements contentfor generating list #1:
goog.dom.removeChildren(parent);
for (var i=0; i<content.length; i++) {
offsets.push(parent.offsetHeight);
goog.dom.appendChild(parent, content[i]);
}
return offsets;
Then, using the values from offsets:
var matchedElm = source[i].cloneNode(true);
goog.style.setStyle(matchedElm, {"top": offsets[i] + "px"});
goog.dom.appendChild(box, matchedElm);
Now this works for various paddings and margin=0, but fails when margins are non-0 on the p and h1..6. I have also tried "scrollHeight" but nothing seems to take into account margins.
I've then tried getting offsetTop directly from the rendered elements in list #1, but this seems to yield exact same results as above procedure to fill offsets.
How can I make the overlap work? I'm looking for a native javascript or closure-library solution.
What you are looking for may be goog.style.getPageOffset and because your overlapping element is absolutely positioned with a top setting you may have to deduct the top margin of the element you want to overlap using goog.style.getMarginBox. Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="game" data-something="hello"></div>
<script type="text/javascript" src="js/goog/base.js"></script>
<script type="text/javascript">
goog.require("goog.dom");
goog.require("goog.style");
</script>
</body>
<div id="contentToOverLap" style="position:absolute;top:30px;left:30px">
<h1 style="margin:10px;padding:2px">h1 10px mar and 2px pad</h1>
</div>
<div id="overlappingContent" style="display:inline">
<h1 style="color:red;margin:15px;padding:2px;position:absolute">
h1 15px mar and 2px pa
</h1>
</div>
<script type="text/javascript">
(function () {
var pH = goog.dom.$("contentToOverLap").children[0];
var cH = goog.dom.$("overlappingContent").children[0];
var box = goog.style.getPageOffset(pH);
console.log("box is:", box);
var mar = goog.style.getMarginBox(cH);
console.log("mar is:", mar);
var t = box.y - mar.top;
var l = box.x - mar.left;
goog.style.setStyle(cH, { "top": t + "px", "left": l + "px" });
})();
</script>
</html>
I'm working on different approaches to solving the well-known controversial removal of "requestAnimationFrame" in jQuery, where animate was reverted to use setTimeout/setInterval rather than the upcoming requestAnimationFrame API. This of course causes some known issues where animations get queued up when that page's browser tab is not in focus (Since I WANT this effect of animations halting when the page's tab is out of focus, it becomes a problem). One solution is to wrap everything in a cross-browser requestAnimFrame shim of the real "requestAnimationFrame" and another is to generate unique IDs for the animated element plus a timestamp and only run the animations when the window is focused.
This is a quick and dirty demo of the frustrating problem I've been having with the second approach of focus listeners and ID passing:
http://jsfiddle.net/bcmoney/NMgsc/17
UPDATE (main problem solved): http://jsfiddle.net/bcmoney/NMgsc/
The barebones code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>window.focus listener EXAMPLE - jsFiddle demo by bcmoney</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
body { overflow:hidden; }
#container { width:100%; height:100%; }
#animated { width:120px; position:absolute; left:2px; top:20px; padding:50px; background:skyblue; color:white }
</style>
<script type='text/javascript'>//<![CDATA[
$(function(){
var animation = 1;
var startTime = undefined;
var FPS = 60; //frames per second
var AVAILABLE_WIDTH = $("#container").width() || "800px";
var animation = null;
var FOCUSED = false;
var timestamp = new Date().getTime();
var PAGE_ID = $("body").attr("id") + "-animated-"+timestamp;
function continueScrolling(p) {
console.log('FUNCTION p: '+p);
if (FOCUSED === true && p === PAGE_ID) {
animation = setTimeout(scrollRight.bind(p), FPS);
} else {
clearTimeout(animation);
$('#animated').stop(true, true);
}
}
var scrollRight = function(p) {
time = +new Date;
startTime = (startTime !== undefined) ? startTime : time-FPS;
move = ((time - startTime)/10 % AVAILABLE_WIDTH)+"px";
console.log('P:'+p+' | T:'+time+' | ST:'+startTime+' | W:'+AVAILABLE_WIDTH+'\n'+move);
$('#animated').animate({
"left":move
},
1000/FPS,
"linear",
function() {
console.log('CALLBACK p: '+p);
continueScrolling(p);
}
);
}
$(window).blur(function(){
FOCUSED = false;
$('#stop').click();
});
$(window).focus(function(){
FOCUSED = true;
$('#start').click();
});
$('#start').click(function() {
scrollRight(PAGE_ID);
});
$('#stop').click(function() {
$('#animated').stop(true, true);
clearTimeout(animation);
});
});//]]>
</script>
</head>
<body id="slider">
<a id="start" href="#start">Start</a> | <a id="stop" href="#stop">Stop</a>
<div id="container">
<div id="animated">Animated content</div>
</div>
</body>
</html>
I've only recently realized the unique IDs may not be required and threw out my initial investigation of them with focus listeners, in favor of the shim approach for now; however this tinkering pointed out another potential problem with jQuery (or more likely my understanding thereof), passing parameters to a callback function in jQuery and ensuring the value of the parameter gets propagated through the context of the animation.
As you can see, the animation starts up and stops because the value "p" is no longer passed. I'm no expert on closures but I saw them proposed here as one solution as well as using $.proxy (which I tried from here before taking a break and posting to SO in frustration). I've never had this problem with $.ajax or $.getJSON callbacks, even when chaining API calls, but for some reason I can't seem to get the callback parameter to maintain its value for subsequent calls to the continueScrolling function. Any help from some JS/jQuery ninjas would be greatly appreciated...
setTimeout need a function for first argument:
animation = setTimeout(function(){scrollRight(p)}, FPS);
http://jsfiddle.net/K2nfM/
Edit: I put this snippet of code in jsbin: http://jsbin.com/eneru
I am trying to let the user resize (only vertically) a DIV element with jQuery. I read about jQuery UI, I tried it, and in some minutes, I had it working. But the library is adding a ~25KB overhead that I would like to avoid, since I only want simple vertical resizing.
So I tried to do it on my own. Here it is the HTML, I am using inline styling for clarity:
<div id="frame" style="border: 1px solid green; height: 350px">
<div style="height: 100%">Lorem ipsum blah blah</div>
<span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>
As you can see, there is a little bar under the DIV element, so the user can drag it up or down to resize the DIV. Here it is the Javascript code (using jQuery):
$(document).ready(function(){
var resizing = false;
var frame = $("#frame");
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
$("#frame-grip").mouseup(function(e) {
resizing = false;
});
$("#frame-grip").mousedown(function(e) {
resizing = true;
});
$("#frame-grip").mousemove(function(e) {
if(resizing) {
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
}
});
});
It works, more or less, but if you drag the bar too fast, it stops following the mouse movement and everything breaks.
It is the first time I try to do something serious (ahem) with JS and jQuery, so I may be doing something dumb. If so, please do tell me :)
You are doing something dumb: You're trying to do it yourself.
Hear me out, hear me out: Javascript across browsers is a horrible, horrible thing. There are many engines in many versions with many different operating systems, all of which have many subtleties, all of which make Javascript pretty much hell to work with. There is a perfectly good reason why librabries such as jQuery (and their extensions) have exploded in popularity: a lot of great programmers have spent a lot of hours abstracting all these horrible inconsistencies away so we don't have to worry about it.
Now, I am not sure about your user base, maybe you are catering to old housewives that still have dialup. But for the most part in this day and age the 25KB hit on the initial page load (as it will be cached afterwards) for the peace of mind that this is going to work in all browsers consistently is a small price to pay. There is no such thing as "simple" resizing when it comes to Javascript, so you're better off using UI.
I worked on a similar thing and managed to get it to work with maximum and minimum height and to me seems to work very fluid, this was my code.
$(document).ready(function()
{
var resizing = false;
var frame = $("#frame").height();
$(document).mouseup(function(event)
{
resizing = false;
frame = $("#frame").height();
});
$("#frame-grip").mousedown(function(event)
{
resizing = event.pageY;
});
$(document).mousemove(function(event)
{
if (resizing)
{
$("#frame").height(frame + resizing - event.pageY);
}
});
});
live example of how I used it, pull the red button, lacked images so i replaced with simple color. http://jsbin.com/ufuqo/23
I agree with Paolo about using UI, but here are some modifications to your code to get it working:
$(document).ready(function(){
var resizing = false;
var frame = $("#frame");
$(document).mouseup(function(e) {
resizing = false;
});
$("#frame-grip").mousedown(function(e) {
e.preventDefault();
resizing = true;
});
$(document).mousemove(function(e) {
if(resizing) {
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
}
});
});
You can save having a do-nothing handler called when you're not resizing, by only binding the mousemove function when you are actually dragging:
$(document).ready(function(){
var resizing = function(e) {
var frame = $("#frame");
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
return false;
}
var stopResizing = function(e) {
$(document).unbind("mouseover", resizing);
}
$("#frame-grip").mouseup(stopResizing);
$("#frame-grip").mousedown(function(e) {
e.preventDefault();
$(document).bind("mouseover", resizing).mouseup(stopResizing);
});
});
(sample at http://jsbin.com/ufuqo)