We Keep Coding

How to move parent div when child div touches parent div boundaries

I have three div's in the following code.
<div id="wrap">
<div id="outer">
<div id="inner">
</div>
</div>
</div>
Here "inner" div is moving with mouseMove event. How can I move "outer" div along with "inner" div when "inner" div touches the top and left of "outer" div but "outer" div should not move when "inner" div inside or don't touch "outer" div?
var innerDiv = $('#inner');
var outerDiv = $('#outer');
var outDim = outerDiv.offset();
outDim.right = (outDim.left + outerDiv.width());
outDim.bottom = (outDim.top + outerDiv.height());
$(document).on('mousemove', function(e) {
var x = (e.clientX) - 15;
var y = (e.clientY) - 15;
var x_allowed = x >= outDim.left && x <= (outDim.right - innerDiv.width());
var y_allowed = y >= outDim.top && y <= (outDim.bottom - innerDiv.height());
if (y_allowed) {
innerDiv.css({
top: y + 'px',
});
} else {
//fine tune tweaks
if (y >= outDim.top) {
innerDiv.css({
top: (outDim.bottom - innerDiv.height()) + 'px',
});
}
if (y <= (outDim.bottom - innerDiv.height())) {
innerDiv.css({
top: outDim.top + 'px',
});
}
}
if (x_allowed) {
innerDiv.css({
left: x + 'px'
});
} else {
//fine tune tweaks
if (x >= outDim.left) {
innerDiv.css({
left: outDim.right - innerDiv.width() + 'px',
});
}
if (x <= (outDim.right - innerDiv.width())) {
innerDiv.css({
left: outDim.left + 'px',
});
}
}
});
#wrap {
height: 200px;
width: 200px;
border: 2px solid black;
}
#outer {
height: 100px;
width: 100px;
border: 2px solid blue;
margin: 0 auto;
}
#inner {
height: 40px;
width: 40px;
border: 2px solid red;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="outer">
<div id="inner">
</div>
</div>
</div>
Fiddle link

How to trigger droppable event on dragging element over with jQuery UI?

I'm making a huge project which should be good regarding performance like every software. But I'm struggling about drag and drop objects.
Let me start with my code.
Here is my HTML:
<div class="drag-me"></div>
<div class="drop-on-me"></div>
Here is my JavaScript:
$('.drag-me').draggable();
$('.drop-on-me').hover(function(){
let el = $(this);
el.droppable({
drop: function(){
console.log("dropped!");
}
});
}, function(){
let el = $(this);
el.droppable('destroy');
});
Codepen Example
I need to trigger droppable event on hovering while dragging objects, because there are so many droppable objects in the page and it consumes much of RAM with the browser and the page crashes.
How can I trigger while I'm hovering with draggable object?

You will need to do a level of collision detection. The drag event can block out some other events, like hover from bubbling up. Consider the following code snippet.
$(function() {
function getBounds(el) {
var p = {
tl: $(el).position()
};
p['tr'] = {
top: p.tl.top,
left: p.tl.left + $(el).width()
};
p['bl'] = {
top: p.tl.top + $(el).height(),
left: p.tl.left
};
p['br'] = {
top: p.bl.top,
left: p.tr.left
};
return p;
}
function isOver(el, map) {
var myPos = getBounds(el);
var tObj = false;
$.each(map, function(k, v) {
if (myPos.tl.left > v.tl.left && myPos.tl.left < v.tr.left && myPos.tl.top > v.tl.top && myPos.tl.top < v.bl.top) {
console.log("Over", k);
tObj = $(".drop-on-me").eq(k);
}
});
return tObj;
}
function makeDrop(el) {
if (!$(el).hasClass("ui-droppable")) {
$(el).droppable({
addClasses: false,
drop: function() {
console.log("Item Dropped.");
},
out: function() {
$(this).droppable("destroy");
}
});
}
}
var dropPositions = [];
$(".drop-on-me:visible").each(function(i, el) {
dropPositions.push(getBounds(el));
});
console.log("Mapping complete.", dropPositions);
$('.drag-me').draggable({
start: function() {
console.log("Drag Start.");
},
stop: function() {
console.log("Drag Stop.");
},
drag: function(e, ui) {
var target = isOver(ui.helper, dropPositions);
if (target) {
console.log("Make Drop, Index: " + target.index());
makeDrop(target);
}
}
});
});
.drag-me {
width: 30px;
height: 30px;
background-color: rgba(255, 0, 0, 0.75);
border: 1px solid #000;
border-radius: 3px;
z-index: 300;
}
.drop-on-me {
width: 100px;
height: 100px;
background-color: rgba(0, 0, 255, 0.75);
border: 1px solid #000;
border-radius: 3px;
position: absolute;
}
.drop-on-me.top {
left: 80px;
top: 10px;
}
.drop-on-me.mid {
left: 40px;
top: 120px;
}
.drop-on-me.bot {
left: 240px;
top: 640px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="drag-me"></div>
<div class="drop-on-me top"></div>
<div class="drop-on-me mid"></div>
<div class="drop-on-me bot"></div>

Need the image to be in the same position in both divs

I need the image in the both divs below to be in the same position even if the other div changes height or width. I have tried calculating top and left to % from px but still it is not working. I have also tried calculating the % of how big or small other div is and adding or removing the top and left to the image in other div and still no luck.
To check the issue, drag the image around inside the first div and click on submit. Now the image inside the bottom div should be in the same position as the above div, same top and left distance.
Please help. Thanks.
Here is the fiddle : https://jsfiddle.net/kashyap_s/gLdt62nh
var zoomLevel = 1;
$("#myimage").draggable({
start: function() {
},
stop: function() {
}
});
$('#save').click(function() {
var topcss = $('#myimage').css('top');
var leftcss = $('#myimage').css('left');
var transformcss = zoomLevel;
topcss = topcss.replace('px', '');
leftcss = leftcss.replace('px', '');
topcss = parseInt(topcss);
leftcss = parseInt(leftcss);
var parentWidth = $('#dragDiv').outerWidth()
var parentHeight = $('#dragDiv').outerHeight()
console.log('leftcss', leftcss, 'width', parentWidth)
console.log('topcss', topcss, 'height', parentHeight)
var percentLeft = leftcss / parentWidth * 100;
var percentTop = topcss / parentHeight * 100;
console.log('percentLeft', percentLeft, 'percentTop', percentTop)
transformcss = parseFloat(transformcss).toFixed(2);
var result = {
"top": topcss,
"left": leftcss,
'percentTop': percentTop,
'percentLeft': percentLeft,
'parentWidth': parentWidth,
'parentHeight': parentHeight,
"transform": "scale(" + transformcss + ")"
};
var output = JSON.stringify(result);
console.log('output', output)
$("#newimg").css({
'left': leftcss
});
$("#newimg").css({
'top': topcss
});
});
.transperentimage {
width: 497px;
height: 329px;
border: 1px solid black;
margin: 0 auto;
}
#bigimg {
width: 651px;
height: 431px;
border: 1px solid black;
margin: 0 auto;
}
img {
border: 2px solid red;
padding: 3px;
width: auto;
height: auto;
cursor: move;
max-height: 180px;
}
#newimg {
position: absolute;
max-height: 180px;
width: auto!important;
height: auto!important;
max-width: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transperentimage" id="dragDiv">
<img id="myimage" src="agent.png">
</div>
<button id="save">Save</button>
<div id="bigimg">
<img id="newimg" src="agent.png" />
</div>

$(function() {
$("#logo1").draggable({
containment: "parent",
drag: function() {
}
});
});
function setpos() {
var image1_w = $("#logo1").width();
var div1_w = $(".div1").width();
var image2_w = $("#logo2").width();
var div2_w = $(".div2").width();
var image1_h = $("#logo1").height();
var div1_h = $(".div1").height();
var image2_h = $("#logo2").height();
var div2_h = $(".div2").height();
var div1_aw = div1_w - image1_w;
var div2_aw = div2_w - image2_w;
var div1_ah = div1_h - image1_h;
var div2_ah = div2_h - image2_h;
var div
var xPos = $('#logo1').css('left');
var yPos = $('#logo1').css('top');
var ratio_w = parseFloat(div1_aw) / parseFloat(div2_aw);
var ratio_h = parseFloat(div1_ah) / parseFloat(div2_ah);
//let act = 1.39;
var div2_nw = parseFloat(xPos) / ratio_w;
var div2_nh = parseFloat(yPos) / ratio_h;
$("#posX").text('Div left:' + div2_nw);
$("#posA").text('Div Top:' + div2_nh);
$("#logo2").css({
'left': div2_nw,
'top': div2_nh
});
}
.div1 {
width: 497px;
height: 329px;
border: 1px solid black;
}
.div2 {
width: 651px;
height: 431px;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<p>Drag my logo.</p>
<div class="div1">
<img src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" style=" position: relative; left: 0px; top: 0px;" width="100" id="logo1">
</div>
<br>
<div class="div2">
<img style="position: relative;left: 0px;top: 0px" src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" width="100" id="logo2">
</div>
<br>
<button onclick="setpos();">
Save
</button>
<div id="posX">
</div>
<div id="posA">
</div>
<div id="posz">
</div>
<div id="posZ1">
</div>
Solved! check this out
HTML
<p>Drag my logo.</p>
<div class="div1">
<img src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" style=" position: relative; left: 0px; top: 0px;" width="100" id="logo1">
</div>
<br>
<div class="div2">
<img style="position: relative;left: 0px;top: 0px" src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" width="100" id="logo2">
</div>
<br>
<button onclick="setpos();">
Save
</button>
<div id="posX"></div>
<div id="posA"></div>
JS CODE
$( function() {
$( "#logo1" ).draggable(
{
containment: "parent",
drag: function() {
}
}
);
} );
function setpos()
{
var image1_w = $("#logo1").width();
var div1_w = $(".div1").width();
var image2_w = $("#logo2").width();
var div2_w = $(".div2").width();
var image1_h = $("#logo1").height();
var div1_h = $(".div1").height();
var image2_h = $("#logo2").height();
var div2_h = $(".div2").height();
var div1_aw = div1_w-image1_w;
var div2_aw = div2_w-image2_w;
var div1_ah = div1_h-image1_h;
var div2_ah = div2_h-image2_h;
var div
var xPos = $('#logo1').css('left');
var yPos = $('#logo1').css('top');
var ratio_w = parseFloat(div1_aw)/parseFloat(div2_aw);
var ratio_h = parseFloat(div1_ah)/parseFloat(div2_ah);
//let act = 1.39;
var div2_nw = parseFloat(xPos)/ratio_w;
var div2_nh = parseFloat(yPos)/ratio_h;
$("#posX").text('Div left:' + div2_nw);
$("#posA").text('Div Top:' + div2_nh);
$("#logo2").css({ 'left' : div2_nw, 'top' : div2_nh});
}
CSS
.div1{
width: 497px;
height: 329px;
border: 1px solid black;
}
.div2{
width: 651px;
height: 431px;
border: 1px solid black;
}

For your newimg, the parent must have a position that is relative. This way, the absolute positioning will be relative to the parent and not the body.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
Consider the following code.
$(function() {
var zoomLevel = parseFloat(1 - ($("#dragDiv").outerWidth() / $("#bigimg").outerWidth()).toFixed(2));
function log(str) {
if ($(".log").length) {
$(".log").html(str);
} else {
$("<div>", {
class: "log"
}).html(str).appendTo("body");
}
}
function getPos(el) {
var par = $(el).parent();
var pos = {
top: parseInt($(el).css("top")),
left: parseInt($(el).css("left")),
zoom: "scale(" + (1 + zoomLevel) + ")",
parWidth: par.outerWidth(),
parHeight: par.outerHeight()
};
pos['perLeft'] = parseFloat((pos.left / pos.parWidth).toFixed(2)) * 100;
pos['perTop'] = parseFloat((pos.top / pos.parHeight).toFixed(2)) * 100;
return pos;
}
$("#myimage").draggable({
containment: "parent",
drag: function(e, ui) {
log("Left: " + ui.position.left + ", Top: " + ui.position.top);
},
start: function() {
// coordinates('#myimage');
},
stop: function() {
// coordinates('#myimage');
var p = getPos(this);
$(this).attr("title", JSON.stringify(p));
}
});
$('#save').click(function() {
var result = getPos($("#myimage"));
var output = JSON.stringify(result);
var nLeft = Math.round(result.perLeft * (1 + zoomLevel)) + "%";
var nTop = Math.round(result.perTop * (1 + zoomLevel)) + "%"
console.log(output, nLeft, nTop);
$("#newimg").css({
left: nLeft,
top: nTop
});
var p = getPos($("#newimg"));
$("#newimg").attr("title", JSON.stringify(p));
});
});
.transperentimage {
width: 497px;
height: 329px;
border: 1px solid black;
margin: 0 auto;
}
#bigimg {
width: 651px;
height: 431px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
img {
border: 2px solid red;
padding: 3px;
width: auto;
height: auto;
cursor: move;
/* max-width: 100%; */
max-height: 180px;
}
#newimg {
position: absolute;
max-height: 180px;
width: auto!important;
height: auto!important;
max-width: 100%!important;
}
.log {
font-size: 11px;
font-family: "Arial";
position: absolute;
top: 3px;
left: 3px
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="transperentimage" id="dragDiv">
<img id="myimage" src="https://i.imgur.com/4ILisqH.jpg">
</div>
<button id="save">Save</button>
<div id="bigimg">
<img id="newimg" src="https://i.imgur.com/4ILisqH.jpg" />
</div>
See More: https://www.w3schools.com/css/css_positioning.asp
Updated
Looking at it further, I am guessing that you might be trying to reposition the bigimg in relationship to myimage position. This requires scaling the percentage.
For example, if we move myimage to the far left, it will be at left: 247, and this is roughly 49% of 499px. 49% of 653 is around 319, and this would not place the image where we want it. We want it at 401.
bigimg is about 24% larger than dragDiv, so we need to scale our percentage. 49 * 1.24 = 60.74, round up to 61. 653 * .61 = 398.33 so better yet not perfect.

Target a selector to do a drag & drop

When I click I create a point in a div.
I would like to be able to move this point in a drag and drop way.
In my code I have created an orange item that I can move but I can't do it with the points I create, I can't target it.
Moreover I would like that when I move the point, once set, that the new coordinates are saved instead of the old ones and that when the point is set, it opens an url (no matter say google) but I don't know if it's possible.
$(document).ready(function() {
let count = 0;
let resultArray = [];
let addPoint = false;
let url;
$(".button").on('click', function() {
addPoint = !addPoint
});
$(".div1").click(function(ev) {
if (addPoint == true) {
$(".div1").append(
$(`<div>${count + 1}</div>`).css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '16px',
borderRadius: '12px',
background: 'blue',
color: 'white',
textAlign: 'center',
fontSize: '14px',
padding: '3px'
})
);
count = count + 1
url = "<a href='https://www.google.fr' target='blank'>url</a>"
$("#myTBody").append(
"<tr><td>" + count + "</td><td>" + ev.pageX + "</td><td>" + ev.pageY +
"</td><td>" + url + "</td></tr>"
)
let point = {
id: count,
x: ev.pageX,
y: ev.pageY,
url: url
}
resultArray.push(point);
// $("tr").on('click', function () {
// console.log($(this).children(":first").text())
// });
}
});
const el = document.querySelector(".item");
el.addEventListener('mousedown', mousedown);
function mousedown(e) {
window.addEventListener('mousemove', mousemove);
window.addEventListener('mouseup', mouseup);
let prevX = e.clientX;
let prevY = e.clientY;
function mousemove(e) {
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;
const rect = el.getBoundingClientRect();
el.style.left = rect.left - newX + "px";
el.style.top = rect.top - newY + "px";
prevX = e.clientX;
prevY = e.clientY;
}
function mouseup(e) {
window.removeEventListener("mousemove", mousemove);
window.removeEventListener("mouseup", mouseup);
}
}
});
.button {
padding: 10px;
}
.item {
height: 40px;
width: 40px;
position: absolute;
background: orange;
}
.div1 {
width: 400px;
height: 200px;
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">Add a point</button>
<div class="item"></div>
<div class="div1">
</div>
<table>
<thead id="myTHead">
<tr>
<th>PointID</th>
<th>PointX</th>
<th>PointY</th>
<th>URL</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>

This might be above and beyond what you're looking to do. Consider using the jQuery UI library so you can make use of Draggable. Consider the following example.
$(function() {
let count = 0;
let resultArray = [];
let url;
function makePoint(trg, cnt, ev) {
var p = $("<div>", {
class: "point"
}).css({
top: ev.pageY + 'px',
left: ev.pageX + 'px'
}).html(cnt).appendTo(trg);
p.draggable({
containment: "parent",
stop: function(e, ui) {
var i = parseInt($(this).text());
updatePoint(i, e);
}
});
return {
id: cnt,
x: ev.pageX,
y: ev.pageY
};
}
function updatePoint(id, ev) {
$.each(resultArray, function(k, o) {
if (id == o.id) {
o.x = ev.pageX;
o.y = ev.pageY;
$("#myTBody tr:eq(" + k + ") td:eq(1)").html(ev.pageX);
$("#myTBody tr:eq(" + k + ") td:eq(2)").html(ev.pageY);
};
});
}
$(".button").click(function() {
$("input", this).prop("checked", !$("input", this).prop("checked"));
if ($("input", this).is(":checked")) {
$(".ui-draggable").draggable("disable");
} else {
$(".ui-draggable").draggable("enable");
}
$(this).toggleClass("clicked");
});
$(".div1").click(function(e) {
if ($(".button input").is(":checked")) {
let point = makePoint($(".div1"), ++count, e);
point.url = "<a href='https://www.google.fr' target='blank'>url</a>";
resultArray.push(point);
$("#myTBody").append(
"<tr><td>" + count + "</td><td>" + point.x + "</td><td>" + point.y +
"</td><td>" + point.url + "</td></tr>"
)
}
});
$(".item").draggable({
containment: ".div1"
});
});
.button {
padding: .2em .4em;
border: 1px solid #6c6c6c;
border-radius: 3px;
background-color: #eee;
width: auto;
max-width: 100px;
cursor: pointer;
}
.button input {
display: none;
}
.item {
height: 40px;
width: 40px;
position: absolute;
background: orange;
}
.div1 {
width: 400px;
height: 200px;
background-color: grey;
}
.point {
position: absolute;
width: 16px;
border-radius: 12px;
background: blue;
color: white;
text-align: center;
font-size: 14px;
padding: 3px;
cursor: default;
}
.clicked {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="button"><input type="checkbox"><span class="label">Add a Point</span></div>
<div class="item"></div>
<div class="div1">
</div>
<table>
<thead id="myTHead">
<tr>
<th>PointID</th>
<th>PointX</th>
<th>PointY</th>
<th>URL</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>
You can see I made a few small changes. Using a checkbox allows for a failover in a sense. This also gives a toggled look / style so the user knows when they are able to add a point.
Using jQuery Draggable, this just makes managing the draggable elements a lot easier. The Item is draggable from the start. When Adding a Point, no dragging allowed. Once toggled off, all items can be dragged. Moving a point updates the Array and the Table.

Programatically resize the H div and C div along with the resizer

When I click-drag (#cssNav) to the right, it is not moving proportionately along with the #html and #css div.
This might be something very obvious, but still am not able to figure it out, what am I missing here, please help?
Note: I don't want to use display:flex
codepen
$("#htmlNav").on("mousedown", dragStartH);
$("#cssNav").on("mousedown", dragStartH);
$("#jsNav").on("mousedown", dragStartH);
function dragStartH(e) {
e.preventDefault();
dragMeta = {};
dragMeta.pageX0 = e.pageX;
dragMeta.elem = this;
dragMeta.offset0 = $(this).offset();
dragMeta.codeWindow = "#" + $(e.target).attr("id").replace("Nav", "");
function handle_dragging(e) {
var change = e.pageX - dragMeta.pageX0;
var left = dragMeta.offset0.left + change;
$(dragMeta.elem).offset({ left: left });
$("#css").width($("#css").width() - change + "px");
$("#html").width($("#html").width() + change + "px");
}
function handle_mouseup(e) {
$("body")
.off("mousemove", handle_dragging)
.off("mouseup", handle_mouseup);
}
$("body").on("mouseup", handle_mouseup).on("mousemove", handle_dragging);
}
$(document).ready(function() {
var widthPercent = ($(window).width() - 30) / 3;
$("#html").width(widthPercent + "px");
$("#css").width(widthPercent + "px");
$("#js").width(widthPercent + "px");
});
html, body {
height: 100%;
margin: 0;
}
.container{
width:100%;
height: 100%;
background-color:#343;
display: flex;
flex-direction: column;
color: #fff;
margin: 0;
}
#preview, #code{
background-color:#433;
height: 50%;
width: 100%;
margin: 0;
}
#code{
border-bottom: #333 solid 2px;
width: 100%
}
#previewNav, #codeNav{
background-color:#bbb;
height: 10px;
width: 100%;
cursor: row-resize;
}
#html{
background-color: #BFB;
}
#css{
background-color: #FBB;
}
#js{
background-color: #BBF;
}
#html, #css, #js{
float: left;
width: 32%;
height: 100%;
}
#htmlNav, #cssNav, #jsNav{
background-color:#bbb;
float: left;
height:100%;
width: 10px;
cursor: col-resize;
z-index:10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="codeNav"></div>
<div id="code">
<div id="htmlNav"></div>
<div id="html">H</div>
<div id="cssNav"></div>
<div id="css">C</div>
<div id="jsNav"></div>
<div id="js">J</div>
</div>
<div id="previewNav"></div>
<div id="preview">P</div>
</div>

This is how I would do it:
Keep track of which handle you press with navTypeand check if the user is holding its mouse down with dragging.
Then when the user moves the mouse in the document and it is holding its mouse down (dragging) it will move the #html, #css and #js accordingly
Change your javascript into this:
var mouseX, prevMouseX, navType, change;
var dragging = false;
$("#cssNav").mousedown(function () {
dragging = true;
navType = "css";
});
$("#jsNav").mousedown(function () {
dragging = true;
navType = "js";
});
$(document).mousemove(function (e) {
mouseX = e.pageX;
if(dragging){
e.preventDefault();
change = mouseX - prevMouseX;
if(navType == "css" && ($("#css").width() - (change)) > 0 && ($("#html").width() + (change)) > 0){
var hw = $("#html").width();
var cw = $("#css").width();
$("#html").width(hw + change);
$("#css").width(cw - change);
} else if(navType == "js" && ($("#css").width() + (change)) > 0 && ($("#js").width() - (change)) > 0){
var cw = $("#css").width();
var jw = $("#js").width();
$("#css").width(cw + change);
$("#js").width(jw - change);
}
}
prevMouseX = mouseX;
}).mouseup(function () {
dragging = false;
}).mouseleave(function () {
dragging = false;
});