I have three div's left,right and seperator and on dragging div seperator should resize the left and right div's .
The html code is as follows
<div id="left">Left</div>
<div id="seperator"> </div>
<div id="right"> Right</div>
The seperator div is made draggable using following javascript
var dragObject = null;
var mouseOffset = null;
// document.onmousemove = mouseMove;
//document.onmouseup = mouseUp;
var div_id = document.getElementById('seperator');
makeDraggable(div_id);
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
function mouseMove(ev){
ev = ev || window.event;
// var mousePos = mouseCoords(ev);
// mouseOffset = getMouseOffset(this, ev);
if(dragObject){
var div_left = document.getElementById('left');
var div_right = document.getElementById('right');
dragObject.style.position = 'relative';
div_left.style.position = 'relative';
div_left.style.width = ( (div_left.offsetWidth) -( mouseOffset.x) )+"px";
div_right.style.position = 'relative';
div_right.style.width = ((div_right.offsetWidth) + (mouseOffset.x)) + "px";
return false;
}
}
function mouseUp(){
dragObject = null;
}
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
var div_id = document.getElementById('seperator');
div_id.addEventListener('mousemove', mouseMove,true);
div_id.addEventListener('mouseup', mouseUp,true);
return false;
}
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
The code for resizing is done in the function mouseMove()
The code is explained as it on the following link
the link explains the dragging of div
so,I want to resize the left and right div's using div seperator
Related
I have developed a page where I dynamically import images and display them inside a div tag. Now i wanted to draw an rectangle over the image, and it should start from any point on the image.
I referred many sources and tried to implement the idea from it.
<style>
#rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
</style>
<div class="imageside" id="picture"> </div>
<div ID="rubberBand"></div>
In the above code, the image is display at the div id "picture". Till this part of the code works fine.
var pic, rubber, pt = { x: 0, y: 0 };
picture= getpicture();
function getpicture(){
pic= document.getElementById('picture')
pic.innerHTML= getgImage(event.target.dataset.number);
}
function startRubber (evt) {
var ev = evt || window.event,
rs = rubber.style,
bb = pic.innerHTML.getBoundingClientRect();
console.dir(ev);
rs.left = bb.left + 'px';
rs.top = bb.top + 'px';
rs.width = bb.width + 'px';
rs.height = bb.height + 'px';
rs.display = 'block';
pt = { x: ev.clientX - bb.left, y: ev.clientY - bb.top };
return false;
}
function stopRubber () {
rubber.style.display = 'none';
}
function moveRubber (evt) {
var ev = evt || window.event;
rubber.style.left = (evt.clientX - pt.x) + 'px';
rubber.style.top = (evt.clientY - pt.y) + 'px';
}
rubber = document.getElementById('rubberBand');
pic = document.getElementById('picture').innerHTML;
pic.onmousedown = startRubber;
document.onmouseup = stopRubber;
document.onmousemove = moveRubber;
In the above code, the function getpicture() is responsible to display the images dynamically. When i execute the above code, the image displays on the page, but I am not able to draw the rectangle over the image. In console, no errors. Can someone help me out with problem and help me to draw the rectangle over the image.
check this out.
https://jsfiddle.net/2at9n7ye/3/
your issue is that you are accessing the pic variable before you load it.
var pic, rubber, pt = {
x: 0,
y: 0
};
picture = getpicture();
function getpicture() {
pic = document.getElementById('picture');
pic.innerHTML = "<img src='https://i.imgur.com/mvMlmMb.jpg' id='img' width='100px' height='100px'/>";
}
function startRubber(evt) {
var ev = evt || window.event,
rs = rubber.style,
bb = pic.getBoundingClientRect
rs.left = bb.left + 'px';
rs.top = bb.top + 'px';
rs.width = bb.width + 'px';
rs.height = bb.height + 'px';
rs.display = 'block';
pt = {
x: ev.clientX - bb.left,
y: ev.clientY - bb.top
};
return false;
}
function stopRubber() {
rubber.style.display = 'none';
}
function moveRubber(evt) {
var ev = evt || window.event;
rubber.style.left = (evt.clientX - pt.x) + 'px';
rubber.style.top = (evt.clientY - pt.y) + 'px';
}
(function() {
rubber = document.getElementById('rubberBand');
pic = document.getElementById('picture');
pic.addEventListener("mousedown", startRubber);
document.addEventListener("mouseup", stopRubber);
document.addEventListener("mousemove", moveRubber);
})();
I have a <div> element, which should adjust width + height according to the document properties. I need to resize the <div> whenever the user scrolls inside the window.
Is there a possibility to bind the events to this specific object?
var instance = (function() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth || 0,
y = w.innerHeight || e.clientHeight || g.clientHeight || 0,
z = Math.max(g.scrollHeight || 0, e.scrollHeight || 0, g.offsetHeight || 0, e.offsetHeight || 0, g.clientHeight || 0, e.clientHeight || 0);
// private
function getMeById(id) {
return d.getElementById(id);
};
// public
return {
updateContainer: function(id) {
console.log('updateContainer');
var container = getMeById(id);
container.style.position = 'absolute';
container.style.width = x + 'px';
container.style.minHeight = z + 'px';
},
bindScroll: function() {
w.addEventListener('scroll', updateContainer(), false);
}
};
})();
instance.updateContainer("test");
/* #TODO: Bind events to object
w.addEventListener('resize', () => {
console.log('resize');
var container = getMeById("test");
updateContainer(container);
}, true);
w.addEventListener('scroll', () => {
console.log('scroll');
var container = getMeById("test");
updateContainer(container);
}, true);
*/
<div id="test"></div>
As you can see from the bindScroll() function it makes no sense right now.
Is there anyway to achieve the task?
You may pass the id into the eventListener callback through binding it to the updateContainer:
updateContainer: function(id) {
console.log('updateContainer');
var container = getMeById(id);
container.style.position = 'absolute';
container.style.width = x + 'px';
container.style.minHeight = z + 'px';
},
bindScroll: function(id) {
window.addEventListener('scroll', this.updateContainer.bind(this,id), false);
}
So one can do:
instance.bindScroll("testcontainer");
Note: x and z are not live so you may reload the values...
If you add more and more functions, your code could get difficult to manage. You could use inheritance and a constructor instead:
function instance(id){
this.el=document.querySelector(id);
}
instance.prototype={
bindScroll:function(){
window.addEventListener("scroll",this.update.bind(this),false);
return this;
},
update: function() {
var container = this.el;
container.style.position = 'absolute';
container.style.width = x + 'px';
container.style.minHeight = z + 'px';
return this;
}
};
So you could do:
var test=new instance("#test")
test.update().bindScroll();
I'm trying to create onmousemove event inside the image then show the zoomed image in the right side.
Problem:
When I try to mousemove inside the image, the black box and zoomed image are blinking.
The zoomed image is not match in the blackbox.
How do I do that? May computation is wrong.
This is my code.
<div>
<div id="cursor" style="background:black; opacity:0.5; width:100px; height:100px; position:absolute; display:none">
</div>
<div style="float:left;">
<img id="img" src="http://www.animenewsnetwork.com/thumbnails/cover400x200/cms/news/102950/26902290903_3c8f2db0ea_b.jpg" onmousemove="getPos(event)" onmouseout="stopTracking()"/>
</div>
<div id="zoom" style="width:300px; height:300px; zoom:1; float:left;">
qwe
</div>
</div>
<script>
function getPos(e){
var x = e.clientX;
var y = e.clientY;
var width = document.getElementById("img").clientWidth;
var height = document.getElementById("img").clientHeight;
document.getElementById("cursor").style.left = x - 50;
document.getElementById("cursor").style.top = y - 50;
document.getElementById("cursor").style.display = "inline-block";
document.getElementById("zoom").style.background = "url('http://www.animenewsnetwork.com/thumbnails/cover400x200/cms/news/102950/26902290903_3c8f2db0ea_b.jpg') "+x / width * 100+"% "+y / width * 100+"%";
}
function stopTracking(){
document.getElementById("cursor").style.display = "none";
document.getElementById("zoom").style.background = "transparent";
}
</script>
I added time delay of half a second, the blinking is gone.
function getPos(e){
var delay=500; //1/2 second
setTimeout(function() {
//your code to be executed after 1/2 second
var x = e.clientX;
var y = e.clientY;
var width = document.getElementById("img").clientWidth;
var height = document.getElementById("img").clientHeight;
document.getElementById("cursor").style.left = x - 50;
document.getElementById("cursor").style.top = y - 50;
document.getElementById("cursor").style.display = "inline-block";
document.getElementById("zoom").style.background = "url('http://www.animenewsnetwork.com/thumbnails/cover400x200/cms/news/102950/26902290903_3c8f2db0ea_b.jpg') "+x / width * 100+"% "+y / width * 100+"%";
}, delay);
}
catch source from my e-commerce project (i'm using GSAP library for animation u can create custom CSS class with transitions instead):
<div class="grid col-10 rel z300">
<div class="border padt20 padb20 padl20 padr20 zoom--in flex align-center">
<img class="auto" src="img/prod.jpg" data-zoom="img/prod-large.jpg" alt="">
</div>
</div>
export class zoom_in_gallery {
constructor() {
if (!this.setVars()) return;
this.setEvents();
}
setVars() {
let _this = this;
_this.zoom = document.body.getElementsByTagName('section')[0].getElementsByClassName('zoom--in')[0];
if (!this.zoom) return false;
_this.img = this.zoom.firstElementChild;
if (!this.img) return false;
_this.zoom_pop = false;
_this.act = false;
return true;
}
setEvents() {
let _this = this;
function del(el) => {
el = typeof el === 'string' ? document.body.getElementsByClassName(el)[0] : el;
if (!el || !el.parentNode) return;
return el.parentNode.removeChild(el);
}
this.obj.onmove = (e) => {
if (_this.act) return;
let y = e.offsetY ? (e.offsetY) : e.pageY - _this.img.offsetTop,
x = e.offsetX ? (e.offsetX) : e.pageX - _this.img.offsetLeft;
if (!_this.zoom_pop) {
_this.zoom_pop = _this.render(e.target.parentNode, `<div class="top0 right0 abs o-hidden border" style="right:calc(-70%);left:initial;height:${_this.zoom.offsetWidth / 1.5}px;width:${_this.zoom.offsetWidth / 1.5}px"><div style="width:100%;height:100%;background: #fff url(${_this.img.dataset.zoom}) 0 0 / cover scroll no-repeat"></div></div>`);
TweenLite.fromTo(_this.zoom_pop, .3, {autoAlpha: 0}, {autoAlpha: 1});
}
_this.zoom_pop.firstElementChild.style.backgroundPosition = `${x / 3.8}% ${y / 3.8}%`;
};
this.obj.onleave = () => {
if (!_this.zoom_pop || _this.act) return;
_this.act = true;
TweenLite.to(_this.zoom_pop, .3, {
autoAlpha: 0, onComplete: () => {
del(_this.zoom_pop);
_this.zoom_pop = false;
_this.act = false;
}
});
};
this.zoom.addEventListener('mousemove', this.obj.onmove);
this.zoom.addEventListener('mouseout', this.obj.onleave);
}
render(relEl, tpl, cfg = {}) {
if (!relEl) return;
const parse = typeof cfg.parse === 'undefined' ? true : cfg.parse, child;
if (tpl.nodeName === 'TEMPLATE') {
child = document.importNode(tpl.content, true);
} else if (typeof tpl === 'string') {
const range = document.createRange();
range.selectNode(relEl);
child = range.createContextualFragment(tpl);
} else {
child = tpl;
}
if (parse) {
relEl.appendChild(child);
return relEl.lastElementChild;
}
return {rel: relEl, el: child};
}
}
i had a problem on confusing how to put ontouch inside my coding because i want it function on ipad, below is my code
<script language="javascript">
function sig1()
{
if(sig == null)
{
xclear('myCanvas');
}
}
code for clear the line in canvas
<body id="main_body" class="no_guidelines" onload="sig1()" onmouseup="bodyonmouseup">
to let the canvas had fillstyle color and function
<canvas border=1 id="myCanvas" height=200 width=400 onmousedown="onmousedown()" onmouseup="onmouseup()" onmousemove="onmousemove()">Your browser does not support the application</canvas>
canvas that can draw line like signature
var sig = null;
var ele;
function bodyonmouseup(e)
{
var ele;
ele = document.getElementById('myCanvas');
ele.isDown = false;
}
function onmousedown(e)
{
var ele,p;
if (!e) e = window.event;
ele = (e.srcElement);
if (! ele) ele = e.target;
ele.isDown = true;
ele.context = ele.getContext("2d");
ele.context.lineWidth = 1;
ele.context.beginPath();
ele.context.moveTo(e.offsetX,e.offsetY);
sig.line = new Array();
p = new Object();
p.x = e.offsetX;
p.y = e.offsetY;
sig.p = p;
sig.line[sig.line.length] = p;
sig.lines[sig.lines.length] = sig.line;
}
function onmousemove(e)
{
var ele,dx,dy,p;
if (!e) e = window.event;
ele = (e.srcElement);
if (! ele) ele = e.target;
if (! ele.isDown) return;
ele.context.lineTo(e.offsetX,e.offsetY);
ele.context.stroke();
dx = e.offsetX - sig.p.x;
dy = e.offsetY - sig.p.y;
if (dx == 0 && dy == 0) return;
sig.p = new Object();
sig.p.x = e.offsetX;
sig.p.y = e.offsetY;
sig.line[sig.line.length] = sig.p;
}
So i want to know if i want keep both onMouse and ontouch, how i put the ontouch so that the canvas can be draw on ipad?? please help, it is urgent
Use this js. Your finger will be your mouse. They are converting all touch events to mouse events.
jquery-ui-touch-punch
I'm working with a Google Maps example code , this : http://www.wolfpil.de/v3/drag-from-outside.html which has 3 draggable markers outside the map. All I want is to use the revert 'invalid' option to make the markers return to the original position in case the markers do not drop in the map but I've failed to put it in the right line. Could you please give me a hint where do I have to put it to make it work?
function initDrag(e) {
if(!e) var e = window.event;
// Drag image's parent div element
obj = e.target ? e.target.parentNode : e.srcElement.parentElement;
if(obj.className != "drag") {
if(e.cancelable) e.preventDefault();
obj = null;
return;
}
if (obj) {
// The currently dragged object always gets the highest z-index
z_index++;
obj.style.zIndex = z_index.toString();
xpos = e.clientX - obj.offsetLeft;
ypos = e.clientY - obj.offsetTop;
document.onmousemove = moveObj;
}
return false;
}
function moveObj(e) {
if(obj && obj.className == "drag") {
if(!e) var e = window.event;
obj.style.left = e.clientX - xpos + "px";
obj.style.top = e.clientY - ypos + "px";
obj.onmouseup = function() {
var gd = map.getDiv();
var mLeft = gd.offsetLeft;
var mTop = gd.offsetTop;
var mWidth = gd.offsetWidth;
var mHeight = gd.offsetHeight;
var areaLeft = drag_area.offsetLeft;
var areaTop = drag_area.offsetTop;
var oWidth = obj.offsetWidth;
var oHeight = obj.offsetHeight;
// The object's pixel position relative to the document
var x = obj.offsetLeft + areaLeft + oWidth/2;
var y = obj.offsetTop + areaTop + oHeight/2;
// Check if the cursor is inside the map div
if (x > mLeft && x < (mLeft + mWidth) && y > mTop && y < (mTop + mHeight)) {
// Difference between the x property of iconAnchor
// and the middle of the icon width
var anchorDiff = 1;
// Find the object's pixel position in the map container
var g = google.maps;
var pixelpoint = new g.Point(x - mLeft -anchorDiff, y - mTop + (oHeight/2));
// Corresponding geo point on the map
var proj = dummy.getProjection();
var latlng = proj.fromContainerPixelToLatLng(pixelpoint);
// Create a corresponding marker on the map
var src = obj.firstChild.getAttribute("src");
createDraggedMarker(latlng, src);
// Create dragged marker anew
fillMarker();
}
};
}
return false;
}
function fillMarker() {
var m = document.createElement("div");
m.style.position = "absolute";
m.style.width = "32px";
m.style.height = "32px";
var left;
if (obj.id == "m1") {
left = "0px";
} else if (obj.id == "m2") {
left = "50px";
} else if (obj.id == "m3") {
left = "100px";
}
m.style.left = left;
// Set the same id and class attributes again
// m.setAttribute("id", obj.id);
// m.setAttribute((document.all?"className":"class"), "drag");
m.id = obj.id;
m.className = "drag";
// Append icon
var img = document.createElement("img");
img.src = obj.firstChild.getAttribute("src");
img.style.width = "32px";
img.style.height = "32px";
m.appendChild(img);
drag_area.replaceChild(m, obj);
// Clear initial object
obj = null;
}
function highestOrder() {
/**
* The currently dragged marker on the map
* always gets the highest z-index too
*/
return z_index;
}
function createDraggedMarker(point, src) {
var g = google.maps;
var image = new g.MarkerImage(src,
new g.Size(32, 32),
new g.Point(0, 0),
new g.Point(15, 32));
var shadow = new g.MarkerImage("http://maps.gstatic.com/mapfiles/kml/paddle/A_maps.shadow.png",
new g.Size(59, 32),
new g.Point(0, 0),
new g.Point(15, 32));
var marker = new g.Marker({ position: point, map: map,
clickable: true, draggable: true,
raiseOnDrag: false,
icon: image, shadow: shadow, zIndex: highestOrder()
});
g.event.addListener(marker, "click", function() {
actual = marker;
var lat = actual.getPosition().lat();
var lng = actual.getPosition().lng();
iw.setContent(lat.toFixed(6) + ", " + lng.toFixed(6));
iw.open(map, this);
});
g.event.addListener(marker, "dragstart", function() {
// Close infowindow when dragging the marker whose infowindow is open
if (actual == marker) iw.close();
// Increment z_index
z_index++;
marker.setZIndex(highestOrder());
});
}
After the code snippet
fillMarker();
}
add an else statement like this:
fillMarker();
} else {
//if the marker does not land on the map reset marker location
var left;
if (obj.id == "m1") {
left = "0px";
} else if (obj.id == "m2") {
left = "50px";
} else if (obj.id == "m3") {
left = "100px";
}
obj.style.left = left;
obj.style.top = "70px";
}
jsFiddle to full code: http://jsfiddle.net/6ECVs/