I have some code that's not working on my site but works when I test it elsewhere. In addition, on my site elements are duplicating twice, in testing it doesn't. I've tried implementing through a text widget, then placing code on the actual page. The problem is
Duplicate elements
The words should be draggable but aren't.
Malfunctioning widget area
desktop
https://codepen.io/adsler/pen/bGEbzxP
var dragItem;
var container = document.querySelector("#container");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
dragItem = e.target;
if (dragItem.xOffset == undefined) {
dragItem.xOffset = 0;
}
if (dragItem.yOffset == undefined) {
dragItem.yOffset = 0;
}
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - dragItem.xOffset;
initialY = e.touches[0].clientY - dragItem.yOffset;
} else {
initialX = e.clientX - (dragItem.xOffset || 0);
initialY = e.clientY - (dragItem.xOffset || 0);
}
console.log(initialX);
console.log(initialY);
// if (e.target === dragItem) {
active = true;
// }
}
function dragEnd(e) {
active = false;
}
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {
currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}
dragItem.xOffset = currentX;
dragItem.yOffset = currentY;
setTranslate(currentX, currentY, dragItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
#container {
width: 100%;
height: 400px;
background- color: white;
display: flex;
align- items: center;
justify- content: center;
overflow: hidden;
border- radius: 7px;
touch- action: none;
}
.container div {
width: 100px;
height: 0px;
background- color: transparent;
border: 0px solid rgba(136, 136, 136, 0.5);
border- radius: 50%;
touch- action: none;
user- select: none;
text-align: center;
}
.container div:active {
background- color: white;
}
.container div:hover {
cursor: pointer;
border- width: 0px;
}
#gd {
background-color: yellow;
}
#websites {
background-color: blue;
}
#Identity {
background-color: #ff0af3;
}
<div id="outerContainer">
<div id="container">
<div>
<div id="gd">Hello and</div>
<div>
<div id="websites">welcome</div>
<div>
<div id="Identity">to 4309</div>
</div>
</div>
</div>
</div>
</div>
Finally decided to implement the code on the home page (it's a WordPress site) and the widget area appears to be malfunctioning, but it's not showing up at all now. I have several containers so changed the container to container6. Didn't work. Tried removing DOCTYPE and html tags, as the page would already have DOCTYPE and I'd be calling it twice. Didn't work. Normally i implement home page changes through a text widget, but homepage code implementation should work also.
Related
I'm trying to write some code to create a drag and drop minigame. So far I'm having a problem with the touchable part of the code. When I added the draggable option (with cursor only) it worked perfectly.
But I tried to add some touchable code (to allow people on phones or tablets to use it as well) using this tuto : https://www.kirupa.com/html5/drag.htm .
I have one major problem though : the dragged item is going faster than the cursor the further you go from the dragstart point.
You can see the problem here with the javascript below : http://jsfiddle.net/0n8x6gue/1/
var container = document.querySelector("#section");
var activeItem = null;
var active = false;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.target !== e.currentTarget) {
active = true;
// item avec lequel on interagit
activeItem = e.target;
if (activeItem !== null) {
if (!activeItem.xOffset) {
activeItem.xOffset = 0;
}
if (!activeItem.yOffset) {
activeItem.yOffset = 0;
}
if (e.type === "touchstart") {
activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
} else {
console.log("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
#bloc_page {
width: 75%;
margin: auto;
min-width: 900px;
}
#section {
display: flex;
height: 500px;
border: solid 1px;
}
h1 {
text-align: center;
}
/* Jeu */
.yobi.ui-draggable-dragging {
border: dashed rgba(53, 187, 243, 0.9);
}
#propositions {
height: 100%;
width: 25%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
}
.yobi {
border: solid rgba(53, 187, 243, 0.9);
padding: 8px;
margin: 10px;
font-size: 24px;
font-weight: bold;
text-align: center;
list-style-type: none;
background-color: white;
user-select: none;
}
:hover {
border-color: rgba(255, 134, 172, 0.9);
cursor: pointer;
}
:active {
cursor: none;
}
<!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title>
<!--Titre de la page dans l'onglet en haut-->
<link href="main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js" async></script>
<script>
(window.jQuery || document.write('<script src="/scripts/jquery-3.6.0.min.js"><\/script>'));
</script>
<!--Charger jQuery depuis fichier local si le CDN est indisponible-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="bloc_page">
<header>
<h1>Les Jours de la Semaine - 曜日</h1>
</header>
<section id="section">
<div id="propositions">
<ul>
<li class="yobi">げつようび</li>
<li class="yobi">かようび</li>
<li class="yobi">すいようび</li>
<li class="yobi">もくようび</li>
<li class="yobi">きんようび</li>
<li class="yobi">どようび</li>
<li class="yobi">にちようび</li>
</ul>
</div>
</section>
</div>
</body>
</html>
Looks like the problem is in setTranslate function.
Your block already moves by setting activeItem.currentX and activeItem.currentY variables and then translates its position.
In your case it leads to double movement: your block moves 2x faster than the cursor.
To fix your problem, you can change your drag function this way:
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
if (e.type === "touchmove") {
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
}
Using pointer events, I can't find the right event to trigger for finger-based touches on smartphones (tested with Chrome Android and Chrome Devtools with mobile emulation).
What I need: A "hover" event if you touch action passes through an element while holding the finger down moving over the screen.
That is, put your finger down outside the element, move through it, and move finger up only after completely passing through the element.
I attached a code snipped to clearify: I don't need events for the blue elements, I would only need respective "in/out" events for the red element in the snippet. The sample JS code will fire for the mouse, but on mobile it does not trigger any console.infos.
var elem = document.querySelector(".element");
elem.addEventListener("pointerover", function() {
console.clear();
console.info("pointerover triggered");
});
elem.addEventListener("pointerenter", function() {
console.clear();
console.info("pointerenter triggered");
});
elem.addEventListener("pointerleave", function() {
console.clear();
console.info("pointerleave triggered");
});
.outer {
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align:center;
touch-action: none;
}
.start {
position: relative;
top:0px;
left:0px;
width: 100px;
height: 20px;
background-color: blue;
}
.element {
position: relative;
top: 20px;
left: 0px;
width: 100px;
height: 20px;
background-color: red;
}
.end {
position: relative;
top: 40px;
right: 0;
width: 100px;
height: 20px;
background-color: blue;
}
<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
I hope that I understand you correctly. I wrote and tested for you two different solutions: pointerevents and touch events. In each move event from this events you can detect the current element with the function document.elementFromPoint().
Solution with pointerevents
Maybe you can use pointerevents – they work in Chrome Devtools with mobile emulation, but not work on my Android device (I think my device is too old). Or maybe you can use it with Pointer Events Polyfill. The Browser compatibility for pointerevents you can see here.
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('pointerdown', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'pointer-START';
}
});
document.addEventListener('pointermove', function(e)
{
elementFromPoint = document.elementFromPoint(e.pageX - window.pageXOffset, e.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'pointer-MOVE';
}
});
document.addEventListener('pointerup', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});
.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}
<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>
Solution with touch events
But you can use touch events too. Unfortunatelly, the events touchenter and touchleave were deleted from the specification and because of them we have to write a workaround using document.elementFromPoint() too.
The following snippet works only in the mobile emulation (tested with Chrome Devtools) or on devices which support touch events (tested with Android).
var elementFromPoint,
isFingerDown = false,
isThroughElemMoved = false,
elem = document.querySelector('.element'),
output = document.querySelector('#output');
document.addEventListener('touchstart', function(e)
{
if(elem != e.target)
{
isFingerDown = true;
output.innerHTML = 'touch-START';
}
});
document.addEventListener('touchmove', function(e)
{
var touch = e.touches[0];
elementFromPoint = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
if(elem == elementFromPoint)
{
isThroughElemMoved = true;
output.innerHTML = 'touch-MOVE';
}
});
document.addEventListener('touchend', function(e)
{
if(isFingerDown && isThroughElemMoved && elem != elementFromPoint)
output.innerHTML = 'It is done!';
isFingerDown = isThroughElemMoved = false;
});
.outer
{
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align: center;
/*touch-action: none*/
}
.outer div{position: relative; left: 0; height: 20px}
.start{top: 0; background: blue}
.element{top: 20px; background: red}
.end{top: 40px; background: blue}
<div class="outer">
<div class="start">Start touch here</div>
<div class="element">Move over here</div>
<div class="end">End touch here</div>
</div>
<br><br>
<div id="output">info</div>
Maybe the following links can help you:
Get element from point when you have overlapping elements?
How to find out the actual event.target of touchmove javascript
event?
Try this
<script>
var startElem = document.querySelector(".start");
var endElem = document.querySelector(".end");
var elem = document.querySelector(".element");
var started = false;
var passedThroughStart = false;
var passedThroughEnd = false;
var ended = false;
startElem.addEventListener("pointerdown", function(e){
started = true;
});
window.addEventListener("pointermove", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = elem.getBoundingClientRect();
if( !passedThroughStart &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top && y < bounds.top + bounds.height
){
passedThroughStart = true;
}
if( passedThroughStart && !passedThroughEnd &&
x > bounds.left && x < bounds.left + bounds.width &&
y > bounds.top + bounds.height
){
passedThroughEnd = true;
}
})
window.addEventListener("pointerup", function(e) {
var x = e.clientX;
var y = e.clientY;
var bounds = endElem.getBoundingClientRect();
ended = ( x > bounds.left && x < bounds.left + bounds.width && y > bounds.top && y < bounds.top + bounds.height)
if( started && passedThroughStart && passedThroughEnd && ended ){
console.log("Hooray!");
}
started = false;
passedThroughStart = false;
passedThroughEnd = false;
ended = false;
});
</script>
Alternatively use pointerenter and pointerleave rather than pointermove
elem.addEventListener('pointenter', function(e) {
passedThroughStart = true;
}
elem.addEventListener('pointleave', function(e) {
passedThroughEnd = true;
}
How to move or drag the span into the Div element. My element structure is the Div -> Span. Here I need to drag the Span inside the div element without drag beyond that div. I have tried this by calculating pixels but didn't give a solution. I don't need a native onDrag method.
I need to calculate pixels and drag the Span inside the Div. Here is my code.
var handleClick = false;
window.dragging = function(event) {
if (handleClick) {
var bar = document.getElementsByClassName('bar')[0],
handle = document.getElementsByClassName('handle')[0];
var left = bar.offsetWidth - handle.offsetWidth;
tops = (bar.offsetWidth - handle.offsetWidth);
pixel = left < ((pixel - 0) / 1.233445) ? left : ((pixel - 0) / 1.233445);
handle.style.left = pixel + "px";
}
}
document.addEventListener('mouseup', function() {
handleClick = false;
});
window.handlersDown = function() {
handleClick = true;
}
.bar {
width: 100px;
height: 30px;
border: 1px solid;
position: relative;
}
.handle {
width: 20px;
height: 20px;
left: 2px;
top: 5px;
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
}
<div class="bar">
<span class="handle" onmousedown="handlersDown()" onmousemove="dragging(event)"></span>
</div>
I have modified your code a bit and changed the selectors from class to ID. I also would advice you to use external libraries to make it more easy for you. Besides that I also removed the event listeners inside your HTML and translate them to Javascript. Is this what you want?
window.onload = addListeners();
function addListeners(){
document.getElementById('handle').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', spanMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', spanMove, true);
}
function spanMove(e){
var bar = document.getElementById('bar')
var span = document.getElementById('handle');
// variables
var bar_width = bar.offsetWidth;
var handle_width = span.offsetWidth;
// stop scroll left if the minimum and maximum is reached
if(e.clientX < bar_width - handle_width - 1 && e.clientX > 1){
span.style.left = e.clientX + 'px';
}
}
#bar {
width: 100px;
height: 30px;
border: 1px solid;
position: relative;
}
#handle {
width: 20px;
height: 20px;
left: 2px;
top: 5px;
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
}
<div id="bar">
<span id="handle"></span>
</div>
In 2020, following solution works perfectly on last version of Chrome, Opera, Firefox and Edge Chromium.
window.onload = addListeners();
function addListeners()
{
var div = document.getElementById('div');
var span = document.getElementById('span');
span.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
//compute space between left border of <div> and left border of <span>
// this value is also used to compute space at right
iMinLeft = span.offsetLeft;
// compute max left value allowed so that span remains in <div>
iMaxLeft = div.clientWidth - span.offsetWidth - iMinLeft;
}
function onMouseDown(e)
{
if (e.which === 1) // left button is pressed
{
e.preventDefault();
window.addEventListener('mousemove', onMouseMove, true);
// save mouse X position to compute deplacement
posMouseX = e.clientX;
span.style.background = "yellow";
}
}
function onMouseMove(e)
{
e.preventDefault();
//compute mouse deplacement
deltaX = posMouseX - e.clientX;
//compute new left position of <span> element
iNewLeft = span.offsetLeft - deltaX;
if (iNewLeft < iMinLeft)
{
iNewLeft = iMinLeft;
}
else
{
if (iNewLeft > iMaxLeft)
{
iNewLeft = iMaxLeft;
}
}
span.style.left = iNewLeft + 'px';
// save mouse X position to compute NEXT deplacement
posMouseX = e.clientX;
}
function onMouseUp(e)
{
if (e.which === 1) // left button is pressed
{
e.preventDefault();
span.style.background = "white";
window.removeEventListener('mousemove', onMouseMove, true);
}
}
#div
{
width: 200px;
height: 50px;
border: 1px solid;
position: relative;
left: 50px;
}
#span
{
cursor: pointer;
font-size: 30px;
width: auto;
height: 40px;
left: 2px;
top: 5px;
position: absolute;
}
<div id="div">
<span id="span">😃</span>
</div>
JavaScript line e.preventDefault(); is necessary to avoid <span> to become 'blue' when dragging.
CSS code cursor: pointer; is only to see that unicode is clickable.
Javascript line if (e.which === 1) has been added to prevent emoticon to move when RIGHT mouse button is clicked.
The rectangle around emoticon when <span> is dragged move without being shifted (see previous solution) and space remaining in left or in right are equal.
Thanks to w3schools-exemple
I'm using Responsive File Manager for a web file manager in my project.
It is working fine.
Problem
My problem is when I open the image, It shows the preview in lightbox modal.
How can I make it Image as an image gallery like navigating between Image?
<a class="tip-right preview" title="<?php echo trans('Preview')?>" data-url="<?php echo $src;?>" data-toggle="lightbox" href="#previewLightbox">
<i class=" icon-eye-open"></i>
</a>
JS
Here a piece code JS code which is in include.js file
r.on("click", ".preview", function() {
var e = jQuery(this);
return 0 == e.hasClass("disabled") && jQuery("#full-img").attr("src", decodeURIComponent(e.attr("data-url")))
HTML
<div id="previewLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img id="full-img" src="">
</div>
</div>
Fiddle Here
From my experience there isn't much you can do in terms of editing their manager.
However, it is quite easy to make your own with some CSS and Javascript.
Fiddle
Learning Tutorial
HTML:
<div id="slider" class="slider">
<div class="wrapper">
<div id="items" class="items">
<span class="slide"><img src="image1"/></span>
<span class="slide"><img src="image2"/></span>
<span class="slide"><img src="image3"/></span>
</div>
</div>
<a id="prev" class="control prev"></a>
<a id="next" class="control next"></a>
</div>
CSS:
.slider {
width: 300px;
height: 200px;
}
.wrapper {
overflow: hidden;
position: relative;
background: #222;
z-index: 1;
}
#items {
width: 10000px;
position: relative;
top: 0;
left: -300px;
}
#items.shifting {
transition: left .2s ease-out;
}
.slide {
width: 300px;
height: 200px;
cursor: pointer;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 1s;
position: relative;
}
.control {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
background: #fff;
border-radius: 20px;
margin-top: -20px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.prev,
.next {
background-size: 22px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.prev {
background-image: url(ChevronLeft.png);
left: -20px;
}
.next {
background-image: url(ChevronRight-512.png);
right: -20px;
}
.prev:active,
.next:active {
transform: scale(0.8);
}
Javascript:
var slider = document.getElementById('slider'),
sliderItems = document.getElementById('items'),
prev = document.getElementById('prev'),
next = document.getElementById('next');
slide(slider, sliderItems, prev, next);
function slide(wrapper, items, prev, next) {
var posX1 = 0,
posX2 = 0,
posInitial,
posFinal,
threshold = 100,
slides = items.getElementsByClassName('slide'),
slidesLength = slides.length,
slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
firstSlide = slides[0],
lastSlide = slides[slidesLength - 1],
cloneFirst = firstSlide.cloneNode(true),
cloneLast = lastSlide.cloneNode(true),
index = 0,
allowShift = true;
// Clone first and last slide
items.appendChild(cloneFirst);
items.insertBefore(cloneLast, firstSlide);
wrapper.classList.add('loaded');
// Mouse and Touch events
items.onmousedown = dragStart;
// Touch events
items.addEventListener('touchstart', dragStart);
items.addEventListener('touchend', dragEnd);
items.addEventListener('touchmove', dragAction);
// Click events
prev.addEventListener('click', function () { shiftSlide(-1) });
next.addEventListener('click', function () { shiftSlide(1) });
// Transition events
items.addEventListener('transitionend', checkIndex);
function dragStart (e) {
e = e || window.event;
e.preventDefault();
posInitial = items.offsetLeft;
if (e.type == 'touchstart') {
posX1 = e.touches[0].clientX;
} else {
posX1 = e.clientX;
document.onmouseup = dragEnd;
document.onmousemove = dragAction;
}
}
function dragAction (e) {
e = e || window.event;
if (e.type == 'touchmove') {
posX2 = posX1 - e.touches[0].clientX;
posX1 = e.touches[0].clientX;
} else {
posX2 = posX1 - e.clientX;
posX1 = e.clientX;
}
items.style.left = (items.offsetLeft - posX2) + "px";
}
function dragEnd (e) {
posFinal = items.offsetLeft;
if (posFinal - posInitial < -threshold) {
shiftSlide(1, 'drag');
} else if (posFinal - posInitial > threshold) {
shiftSlide(-1, 'drag');
} else {
items.style.left = (posInitial) + "px";
}
document.onmouseup = null;
document.onmousemove = null;
}
function shiftSlide(dir, action) {
items.classList.add('shifting');
if (allowShift) {
if (!action) { posInitial = items.offsetLeft; }
if (dir == 1) {
items.style.left = (posInitial - slideSize) + "px";
index++;
} else if (dir == -1) {
items.style.left = (posInitial + slideSize) + "px";
index--;
}
};
allowShift = false;
}
function checkIndex (){
items.classList.remove('shifting');
if (index == -1) {
items.style.left = -(slidesLength * slideSize) + "px";
index = slidesLength - 1;
}
if (index == slidesLength) {
items.style.left = -(1 * slideSize) + "px";
index = 0;
}
allowShift = true;
}
}
I looked for solutions to this problem for a long time, found some and I thought I understand but apparently I don't. I'd like to make a canvas that ppl can use to sign to confirm a booking. But I can't get the line to follow the user's cursor. My code looks like this:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Signature Test</title>
<link rel="stylesheet" href="../css/test.css">
<script src="../js/jquery-3.2.0.js"></script>
</head>
<body>
<header id="header">
</header>
<section id="content">
<canvas id="signaturePad">DSorry your browser is rubbish</canvas>
</section>
<footer>
</footer>
<script src="../js/test.js"></script>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
}
header
{
border: 1px solid black;
width: 100%;
height: 50px;
}
#content
{
border: 1px solid blue;
width: 100%;
height: 300px;
position: relative;
}
#content #signaturePad
{
border: 1px solid red;
width: 200px;
height: 200px;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
}
footer
{
border: 1px solid black;
width: 100%;
height: 50px;
}
And finally the JS:
var canvas = document.getElementById("signaturePad");
var context = canvas.getContext("2d");
var radius = 1;
var dragging = false;
context.lineWidth = 2*radius;
function displayMousePosition(mouseX, mouseY) {
var header = document.getElementById("header");
header.innerHTML = "X : " + mouseX + "<br />Y : " + mouseY;
}
function getMousePosition(e) {
var mouseX = 0,
mouseY = 0,
elmX = 0,
elmY = 0,
obj = this;
//get mouse position on document crossbrowser
if (!e){e = window.event;}
if (e.pageX || e.pageY){
mouseX= e.pageX;
mouseY = e.pageY;
} else if (e.clientX || e.clientY){
mouseX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
//get parent element position in document
if (obj.offsetParent){
do{
elmX += obj.offsetLeft;
elmY += obj.offsetTop;
} while (obj = obj.offsetParent);
}
displayMousePosition(mouseX, mouseY);
return [mouseX, mouseY];
}
var putPoint = function(e) {
if(dragging) {
var offset = $("#signaturePad").offset();
var mouseX = getMousePosition(e)[0];
var mouseY = getMousePosition(e)[1];
context.lineTo(mouseX, mouseY);
context.stroke();
context.beginPath();
context.arc(mouseX, mouseY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(mouseX, mouseY);
}
}
$(document).on("mousedown", "#signaturePad", function(e) {
dragging = true;
putPoint(e);
});
$(document).on("mouseup", "#signaturePad", function() {
dragging = false;
context.beginPath();
});
$(document).on("mousemove", "#signaturePad", function(e) {
putPoint(e);
});
And the fiddle if you wanna see it live: https://jsfiddle.net/Cellendhyll/yxguemf0/7/