such a problem I made an adaptive website for the mobile version and faced the problem that drag and drop does not work there, this is the code that makes it work on the PC version, but how to implement it for mobile devices, I honestly do not know:
const dragstart2=function(event){
event.dataTransfer.setData('id',event.target.id)
console.log(event.target.id)
}
const images2=document.querySelectorAll('#zone1 img') //коллекция
console.log(images2)
Array.from(images2).forEach((element)=>{element.addEventListener('dragstart',dragstart2)})
const dragover2=function(event){
event.preventDefault()
}
const drop2=function(event){
event.preventDefault()
if(event.target.tagName==='IMG') return;
let imageId=event.dataTransfer.getData('id')
console.log(imageId)
event.target.appendChild(document.getElementById(imageId))
}
//====================
const cells2=document.querySelectorAll('#containerPazl .col7')
Array.from(cells2).forEach((element)=>{
element.addEventListener('dragover',dragover2)
element.addEventListener('drop',drop2)
});
I will be very grateful for your help
enter image description here
It's just a puzzle, but how to make this code work in the mobile version of the browser, I don't understand everything I've tried and nothing
Related
so I have a webpage which should work on both desktop and mobile devices. I'm having quite a bit of trouble making the buttons work, however.
This is how a button looks like:
<a class="button" id="upload-media-button" onclick='uploadMedia();'>Upload</a>
And this is the uploadMedia code:
var uploadMedia = function() {
if(!isUploadFormVisible){
alert(isUploadFormVisible);
event.preventDefault();
event.stopPropagation();
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
} else {
alert(isUploadFormVisible);
event.preventDefault();
dropperForm = document.getElementById("upload-form");
dropperForm.className = 'hidden';
isUploadFormVisible = 0;
$("body").removeClass("modal-open");
refreshMedia(true);
}
}
The funny thing is that the buttons work fine on desktop and it partially works on mobile as well (if instead of onclick='uploadMedia(); I do onclick='alert(whatever); the alert is displayed successfully). I've spent most of yesterday and today trying to fix the issue, but it is simply not working.
I've tried something like this as well:
$(document).ready(function() {
$('#upload-media-button').on('click touchstart', function(){
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
});
}
And this still doesn't work.
Edit:
Even though the answer helped me fix the issue, it was only a momentary fix: this was absolutely unbelievable and I was really confused on how to make those damn buttons work. I had tried everything.
By investigating the issue, I found out that this problem never appeared on desktop (with both static file compression off and on), however, on mobile, compression did make a difference as without it it worked fine.
The conclusion to this investigation is clear: check your code for syntax errors. I was missing maybe a dozen semicolons and the console didn't complain whatsoever (in fact it worked ok on desktop w/ compression).
Anyways, if you use compression like me, make sure to grab the source from the compressed file and run it through JSHint (or whatever works for you), to check for syntax errors.
Now I get why people hate JS.
An <a> tag with no href attribute is not a tap target for touchscreens.
Add href="#" (with a suitable event.preventDefault(); call) or href="javascript:void(0);" to make it an actual, clickable (tappable) thing.
I use this code for that it can open div boxes and shadows on div boxes when you slide over it.
if (!("ontouch" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
$('html').on('touch touchend', function(e) {
$(this).toggleClass('over');
});
But I noticed that on a samsung galaxy 5 it doesn't work as good as on an iphone.
When using an iphone it just works on sliding over it. BUT on an android on windows touch phone you really have to press it a little to have the same effect. Is there a way to fix this?
You can test it on my webste https://www.gester.nl if you have both phones.
Thanks for the answers in advance.
Greetings from Holland.
jQuery takes care of most cross browser problems like this - you have it so use it.. Also, you might mean ontouchstart rather than ontouch.
if (!("ontouchstart" in document.documentElement)) {
$(document.documentElement).addClass("no-touch");
}
$('html').on('touch touchend', function(e) {
$(this).toggleClass('over');
});
A couple of days i found an issue that my jquery wasn't responding on ios devices. Now i found what the problem was. It was a perfect working code. Now i thought i will not include this on mobile so i used this code
This is the code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) === false ) {
var muziek = getCookie("Muziek");
// Save progression when leaving window
window.onbeforeunload = () => {
var prog = $('#muziek audio')[0].currentTime;
console.log("current time = ", prog);
sessionStorage.setItem('audioProgression', prog);
};
}
I test this on the google element inspector on the different sizes and it worked. But on my ipad it still doesn't, is there a way i can use this code to run and not block the jquery on my ios device? I do not need the music in the ios devices or other mobile/tablet devices. But i still need it on my computer browser. Does anybody know a way i can solve this?
Kind regards
Dylan
Hi, particulary I am having a problem with HighCharts / HighStock not scrolling on the x-axis to display hidden data such as the times contained here:
It works just fine in Chrome browser on my Desktop. Whenever I scroll the overthrow-polyfill.js error shows itself. This is not a library I included myself as I can't find any mention of overthrow in all my code.
Sidenote: I do have angular touch and fastclick in the mix as well, but removing them did not help either
I've got the same problem on mobile device. After couple of hour i have found that scrolling is available just on mousemove event, but not on touch event. To fix this I have added the same listeners on touch events.
Highcharts.Pointer.prototype.onContainerTouchStart = Highcharts.Pointer.prototype.onContainerMouseDown;
var onContainerMouseMove = Highcharts.Pointer.prototype.onContainerMouseMove;
Highcharts.Pointer.prototype.onContainerTouchMove = function(e) {
onContainerMouseMove.call(this, e);
if ("touchstart" === this.chart.mouseIsDown) {
this.drag(e);
}
};
I'm developing a plugin for a website building program, and am building the preview page for it. It's sort of a parallax scrolling plugin and the issue I'm having is that in Safari, when you scroll down to a certain point, it wont allow you to scroll any further. It's fine in firefox and chrome, but I saw the same issue in opera. I've managed to narrow it down to the function that's causing it, but I have no idea why or how to fix it.
When I comment out this function, the page scrolls fine, but it doesn't remove the empty divs like I need it to do:
function removeStuff() {
$('.conP').each(function(){
var divDad = $(this),
divses = $(this).children();
if (divses.hasClass('empty'))
divDad.remove();
});
}
here's the preview page where the issue can be observed:
http://reveriesrefined.com/myftp/dack_stev/
//////////EDIT:
I've simplified the code to this:
$('.conP_%id% > .empty').parent().remove();
however, it's still causing scrolling issues in safari and opera, but not the other browsers.
Any help is VERY VERY appreciated!
Actually, I found the issue already. Somehow even though commenting out the function mentioned above seemed to solve it, it was actually a line of code in another function.
I had this function:
function autoPlay() {
var backDiv = $('#outterLax div:first');
backDiv.hide();
$('.conP').hide();
backDiv.remove();
$('#outterLax').append(backDiv);
backDiv.show();
}
but the line:
$('.conP').hide();
was unnecessary as that was already being accomplished elsewhere in my code.