I'm building this site in which I was asked to have the photographers images randomly sized, ordered and positioned with the capability to click and drag them around. All of this is going pretty smooth except for this one major issue.
Although everything works great in Firefox, when opened in Chrome or Safari (possibly other browsers) any image that isn't visible int the window on immediate load seems to disappear when you attempt to drag it. If you scroll back up after it "vanishes" you'll notice the image is actually being sent to the top of the page while still following your click and drag movements.
I had this error once before and I believe it was fixed by removing some javascript that was no longer necessary. But this time I seemed to have tried every combination of removing certain JS or links to jQuery libraries and still can't find a cure.
Anyone know how this problem can be resolved?
You can view the issue and the code I have in place here: http://www.coreytegeler.com/jb/oddfuture/
EDIT Seems to be solely reliant on the Draggable function. I removed all of the JavaScript codes other than the below and issue still occurs
$(function() {
$( ".vert" ).draggable();
$( ".horiz" ).draggable();
});
EDIT This just looks like it has to have something to do with the issue
var imgInit_x, imgInit_y, mouseInit_x, mouseInit_y, elem;
document.addEventListener('mousedown', startDrag, false);
document.addEventListener('mousedown', drag, false);
document.addEventListener('mousedown', endDrag, false);
function startDrag(e)
{
if (e.target.tagName.toUpperCase == "IMG")
{
elem = e.target;
imgInit_x = elem.style.left;
imgInit_y = elem.style.top;
mouseInit_x = e.layerX || e.offsetX;
mouseInit_y = e.layerX || e.offsetX;
}
}
function drag(e)
{
try
{
currMouse_x = e.layerX || e.offsetX;
currMouse_y = e.layerY || e.offsetY;
elem.style.left = imgInit_x + currMouse_x - mouseInit_x;
elem.style.top = imgInit_y + currMouse_y - mouseInit_y;
}
catch (err){}
}
function endDrag(e)
{
elem = null;
}
When I try to bug your code I get:
Uncaught ReferenceError: detector is not defined
The detector variable does not seems to have been initialized when the issue happens. Could you specify its usage? Also I skimmed through your last Javascript script and couldnt find any purpose to it? Try removing the Javascript, it might resolve your issue.
Related
I am making a custom slider.
All the things works find. But as of now I also want to add ontouch, ontouchmove functionality. I have almost achieve but something is still wrong that's why I am not able to achieve it completely.
Code Snippet
function onDragAction (e) {
e = e || window.event;
if (e.type == 'touchmove') {
caouselPosX2 = caouselPosX1 - e.touches[0].clientX;
caouselPosX1 = e.touches[0].clientX;
} else {
caouselPosX2 = caouselPosX1 - e.clientX;
caouselPosX1 = e.clientX;
}
carouselInneritems.style.transform = 'translateX(' + (carouselInneritems.offsetLeft - caouselPosX2) + 'px)';
}
Kindly try the demo on inspect with mobile resolution.
CodePen
I've had a play around with this and there are two main issues as far as I can see.
onDragAction() needs to call e.stopPropagation() - in the demo you posted it is being called every time a new slide enters underneath the mouse, but you only want it to be called once. This fixes a lot of the glitchiness for me.
You need to have some conditional logic to express what direction you want the slider to go in. At the moment it is calculated by subtraction in every case, which from what I've put together from reading your code means it will always go to the left.
I'm trying to allow an image to be swiped away in four directions (UP, DOWN, LEFT and RIGHT). My code is correct, however I'm unable to even press down and move an image, so I can't even incorporate a simple drag and drop feature which works perfectly in the browser. I'm wondering if I need to enable something or do something with a config file?
Clicking works fine, but I can't drag or interact with any elements in the simulator. I'm making reference to the CSS like below. So I believe everything to be correct in the code. Seems to be a settings issue to allow my java script drag and down functions to work.
#drag1 { -webkit-user-drag: element; }
Please help.
This script worked great.
<script>
var nodeList = document.getElementsByClassName('contents');
for(var i=0;i<nodeList.length;i++) {
var obj = nodeList[i];
obj.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
// Place element where the finger is
event.target.style.left = touch.pageX + 'px';
event.target.style.top = touch.pageY + 'px';
event.preventDefault();
});
}
</script>
jsFiddle
Trying to vertically scroll the div child in Google Chrome, arrived at the end, if you try to continue the scroll is also scrolled the div parent, which does not happen with Mozilla. How to fix it?
With jquery you can disable the overflow when mouse is over the child div.
This way works on Firefox 24 for Mint, and Chromium 28...
http://jsfiddle.net/JcUxs/2/
$('.child').on('mouseover',function(){
$(this).parent().addClass('fixoverflow');
});
$('.child').on('mouseleave',function(){
$(this).parent().removeClass('fixoverflow');
});
css:
.fixoverflow{
overflow: hidden
}
I think that this is the best solution I can achieve (It took 1 hour to understand that the scroll event and the wheel is getting trigger both):
I used flag variable to keep the scroller position.
I used jquery and I noticed just now from the comments that you asked for pure javascript.
Anyway jquery bases on native javascript so I'll edit my answer later and translate it to pure code.
Just confirm that it's good enough for you and i'll translate it.
JavscriptCode:
var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;
$(".child").on('mousewheel', function (event) {
clearTimeout(stopWheelTimer);
event.stopPropagation();
isCanceled = true;
currentPos = $(".parent").scrollTop();
stopWheelTimer = setTimeout(function(){
isCanceled = false;
}, 250);
});
$(".parent").on('mousewheel', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
$(".parent").on('scroll', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
Working Example:
jsFiddle
I have a flash object inside a div, that will zoom it's content when I scroll over it. the problem is that my page also scrolls and I don't know how to fix this problem. I need the page to stand still when I scroll over the flash.
I tried adding this
flashContainer.bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type === 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
} else if (e.type === 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
but because of preventDefault, the flash object won't zoom anymore.
Do you have any suggestions?
may be this could work for you:
$("element").hover(function(){
var scrollT = $(document).scrollTop();
$(document).on("scroll", function(e){
$(document).scrollTop(scrollT);
});
}, function(){
$(document).off("scroll");
});
http://jsfiddle.net/ZFsDY/3/
I stumbled on this issue a few months ago (the old method we used to manage scrolling didn't work on the most recent browsers).
I'm not allowed to publish the code for it, but here a few note on how we did it.
Like in reyaner's answer, we use event listening and preventDefault() to disable the browser auto scrolling, and get the scroll value (but without scrollTop()).
Once we have the value, we send it to the Flash via ExternalInterface.
For it to be possible, the flash object must beforehand add a Callback, a Flash method that can be called by Javascript.
We added a couple of additional interaction between Flash and JS so that the scroll is locked only when the Flash has the focus.
A warning : all browser don't have the same scale for the wheelDelta, and you may find that the zoom speed can vary. To fix this we decided to always use a fixed step each time the event is dispatched, instead that using the delta as-is.
another try:
$("element").bind( 'mousewheel DOMMouseScroll', function ( e ) {
var d = e.wheelDelta || -e.detail;
var s;
if(d < 0) s = 1;
else s = -1;
this.scrollTop += s * 30;
e.preventDefault();
});
http://jsfiddle.net/ZFsDY/5/
Currently I'm working on a website that is designed to run both on mobile devices and on regular computers. The problem that I'm facing is caused by the fact that I need to have a header and a footer with fixed positions.
The first thing that I tried, which seemed the most natural to me, was using position:fixed. It worked very well on my PC but it didn't work on my iphone (with ios4). So I googled it up a bit and found iScroll. iScroll is a JavaScript standalone script meant to solve this exact problem. The problem is that this solution breaks the feature on a non-mobile platform. I also looked at YUI ScrollView but again it was broken on a non-mobile platform.
Currently I solved it by using iScroll only when I detect a mobile browser. But I'm looking for a cleaner and better solution.
Note: iScroll4 doesn't support ie, which I also want to support.
Unfortunately there is no clean solution - you can try detecting "touch events" since those pretty much let you know when the user is going to need iScroll, and fire it up.
An easy way to detect touch events is the following,
var $q = something...;
try {
document.createEvent("TouchEvent");
$q.onmousedown = 'ontouchstart',
$q.onmouseup = 'ontouchend',
$q.onmousemove = 'ontouchmove';
$q.touches = true; //used in other modules as well
//position based on first-finger position
$q.getPageX = function(e){
return e.touches[0].pageX;
};
$q.getPageY = function(e){
return e.touches[0].pageY;
};
} catch (e) {
//KEY BASED DEVICE
$q.onmousedown = 'onmousedown',
$q.onmouseup = 'onmouseup',
$q.onmousemove = 'onmousemove';
$q.touches = false;
//grabbing the position based on Mouse position
$q.getPageX = function(e){
return e.clientX;
};
$q.getPageY = function(e){
return e.clientY;
};
}