I have to prevent dragable handles in range slider form overlapping . It is vanilla js plugin.
I tried to disable updating offset if the difference between two handles position is lower than 20px. It works sometimes, but the barrier is not precise. The movement is choppy when the handles are near to each other.The handle cannot be dragged immediately, but after few movements.
Here are the fragments of the plugin code:
// HELPERS
// map slider range to value range
Number.prototype.map = function(in_min, in_max, out_min, out_max) {
return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
// round to nearest multiple
Number.prototype.roundTo = function(num) {
var resto = this % num;
if (resto <= (num / 2)) {
return this - resto;
} else {
return this + num - resto;
}
}
//EVENTS
var EVmove = ('ontouchstart' in document.documentElement) ? 'touchmove' : 'mousemove',
EVmove = ('ontouchstart' in document.documentElement) ? 'touchmove' : 'mousemove',
EVend = ('ontouchstart' in document.documentElement) ? 'touchend' : 'mouseup';
document.addEventListener(EVmove, actions.move, false);
document.addEventListener(EVend, function() {
return movebar = false;
}, false);
document.addEventListener(EVstart, function() {
return movebar = true;
}, false);
var movebar = true;
// MOVE HANDLE
actions.move = function(event) {
var clientX = ('ontouchstart' in document.documentElement) ? event.touches[0].clientX : event.clientX;
leftOffset = clientX - posX;
// move handle bar
if (movebar) {
element.style.left = leftOffset + "px";
var v = leftOffset.map(0, elWidth, 0, window.range); // 0
var value = v.roundTo(step);
output.innerHTML = value.toFixed(2);
// prevent handles ovelaping
if (vsOpts.range) {
var diff = Math.abs(parseInt(handle1.offsetLeft) - parseInt(handle2.offsetLeft));
if (diff < 20) {
movebar = false;
}
}
}
}
I solved it by assigning position of the opposite handle as a limit position of the current handle
document.addEventListener(EVstart, function(event) {
if (event.target.id == "vslider-handle1") {
useHandle1 = true
} else {
useHandle1 = false
}
return movebar = true;
}, false);
}
handle1Limit=parseInt(handle2.offsetLeft);
handle2Limit=parseInt(handle1.offsetLeft);
handle1Pos= parseInt(handle1.offsetLeft);
handle2Pos= parseInt(handle2.offsetLeft);
if(useHandle1){
if(handle1Pos>=handle1Limit){
handle1.style.left = handle1Limit + "px";
handle2.style.left = handle1Limit + "px";
}
}
else{
if(handle2Pos<=handle2Limit){
handle2.style.left = handle2Limit + "px";
handle1.style.left = handle2Limit + "px";
}
}
I built a magnifying glass in JavaScript, which works well when I click on it or click and dragging it, but it should not hide from the screen.
$(".menu-left-preview-box-preview").bind('click', function (e) {
window.location = "page" + ($(this).index() + 1) + ".html";
});
var native_width = 0;
var native_height = 0;
var magnifyIsMouseDown = false;
$(".magnify").parent().mousedown(function (e) {
magnifyIsMouseDown = true;
});
$(".magnify").mousemove(function (e) {
if (magnifyIsMouseDown) {
if (!native_width && !native_height) {
var image_object = new Image();
image_object.src = $(".small").attr("src");
native_width = image_object.width;
native_height = image_object.height;
} else {
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$(".large").fadeIn(100);
} else {
$(".large").fadeOut(100);
}
if ($(".large").is(":visible")) {
var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".large").width() / 2;
var py = my - $(".large").height() / 2;
$(".large").css({ left: px, top: py, backgroundPosition: bgp });
}
}
}
});
$(".magnify").parent().mouseup(function (e) {
magnifyIsMouseDown = false;
$(".large").fadeOut(100);
});
$(".magnify").parent().mouseleave(function (e) {
$(".large").fadeOut(100);
});
manageSlide();
By default the magnifying glass must be there on the screen. The magnifying glass can be dragged and after it's dropped it must remain there at it's dropped position.
On clicking and dragging the magnify glass is working well, but it should not hide from the screen. It should be there on screen.
Provide handle of magnify glass with that circle (in design).
Working example: http://jsfiddle.net/mohsin80/4ww8efx5/
I replaced the if (magnifyIsMouseDown) { by if (isDragging) { and created the following methods:
var isDragging = false;
$(".magnify").parent().mouseup(function(e) {
isDragging = false;
});
$(".magnify").parent().mousedown(function(e) {
isDragging = true;
});
To make a simulated drag event with jQuery.
Here is the fiddle. Hope it helped :)
I have a script that hover over a thumbnail and it will show an enlarged image. This work just fine in IE, Chrome, and Safari. But in Firefox however it is not working correctly. It will show the image, but it will not hover next to the image correctly. It will stay in an absolute location on the page and not follow the true body value. It should be in a fixed location like it is in IE or chrome.
I was wondering if there is a Mozilla or Firefox specific exception I need to add. Here is my code:
// Simple Image Trail script- By JavaScriptKit.com
var offsetfrommouse = [15, 10]; //image x,y offsets from cursor position in pixels.
var myimageheight = 250;
var myimagewidth = 250;
if (document.getElementById || document.all) {
document.write('<div id="DynPreviewPlace"></div>');
}
function gettrailobj() {
if (document.getElementById)
return document.getElementById("DynPreviewPlace").style
else if (document.all)
return document.all.DynPreviewPlace.style
}
function gettrailobjnostyle() {
if (document.getElementById)
return document.getElementById("DynPreviewPlace")
else if (document.all)
return document.all.DynPreviewPlace
}
function truebody() {
if (window.getComputedStyle && !window.globalStorage && !window.opera) {
return (!window.chrome && window.getComputedStyle && document.compatMode != "CSS1Compat") ? document.documentElement : document.body
} else if () {} else {
return (!window.chrome && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
}
function showtrail(imagename, title, width, height) {
document.onmousemove = followmouse;
(height == 0) ? height = myimageheight : '';
width += 15
height += 30
myimageheight = height
myimagewidth = width
newHTML = '<div class="DynPreviewWraper" style="width:' + width + 'px;"><div id="DynPreviewContainer"><div class="DynPreviewLoader"><div align="center">Loading preview...</div><div class="DynPreviewLoaderBg"><div id="DynProgress"> </div></div></div></div>';
newHTML = newHTML + '<h2 class="DynPreviewTitle">' + ' ' + title + '</h2>'
newHTML = newHTML + '<img onload="javascript:remove_loading();" src="' + imagename + '" class="DynPreviewTempLoad" alt="" />';
newHTML = newHTML + '<!--[if lte IE 6.5]><iframe></iframe><![endif]--></div>';
gettrailobjnostyle().innerHTML = newHTML;
gettrailobj().display = "block";
}
function hidetrail() {
gettrailobj().innerHTML = " ";
gettrailobj().display = "none"
document.onmousemove = ""
gettrailobj().left = "-500px"
}
function followmouse(e) {
var xcoord = offsetfrommouse[0]
var ycoord = offsetfrommouse[1]
var docwidth = document.all ? truebody().scrollLeft + truebody().clientWidth : pageXOffset + window.innerWidth - 15
var docheight = document.all ? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
if (typeof e != "undefined") {
if (docwidth - e.pageX < myimagewidth + 2 * offsetfrommouse[0]) {
xcoord = e.pageX - xcoord - myimagewidth;
} else {
xcoord += e.pageX;
}
if (docheight - e.pageY < (myimageheight + 110)) {
ycoord += e.pageY - Math.max(0, (110 + myimageheight + e.pageY - docheight - truebody().scrollTop));
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined") {
if (docwidth - event.clientX < myimagewidth + 2 * offsetfrommouse[0]) {
xcoord = event.clientX + truebody().scrollLeft - xcoord - myimagewidth;
} else {
xcoord += truebody().scrollLeft + event.clientX
}
if (docheight - event.clientY < (myimageheight + 110)) {
ycoord += event.clientY + truebody().scrollTop - Math.max(0, (110 + myimageheight + event.clientY - docheight));
} else {
ycoord += truebody().scrollTop + event.clientY;
}
}
var docwidth = document.all ? truebody().scrollLeft + truebody().clientWidth : pageXOffset + window.innerWidth - 15
var docheight = document.all ? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (ycoord < 0) {
ycoord = ycoord * -1;
}
gettrailobj().left = xcoord + 'px';
gettrailobj().top = ycoord + 'px';
}
var t_id = setInterval(animate, 20);
var pos = 0;
var dir = 2;
var len = 0;
function animate() {
var elem = document.getElementById('DynProgress');
if (elem != null) {
if (pos == 0) len += dir;
if (len > 32 || pos > 79) pos += dir;
if (pos > 79) len -= dir;
if (pos > 79 && len == 0) pos = 0;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('DynPreviewContainer');
targelem.style.display = 'none';
targelem.style.visibility = 'hidden';
var t_id = setInterval(animate, 60);
}
This is driving me crazy. I have been trying everything. You can see a page that the problem is at here: https://www.woodenduckshoppe.com/shoppe/christmas-decorations/
Your truebody function is running different code in different
browsers. Have you tried not doing that? – Boris Zbarsky 15 hours ago
I have been trying to figure out what to write there. I just don't know what to put for just firefox/mozilla. That is the only browser having the problem.
I see that the truebody isn't being read in Firefox, I just don't know why or how to fix it.
So I am making a little game where you have to press Ctrl to stop a div from jumping randomly.
However I can't get it working...
The jumpRandom function works fine, until i put the randomJump(){return false;}; inside the if (event.ctrlKey) {}. What should I do to get it working?
js:
$(document).ready(function() {
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
$( "#goal" ).bind('mouseenter keypress', function(event) {
if (event.ctrlKey) {
randomJump(){return false;};
}
});
$('#goal').mouseenter(randomJump);
function randomJump(){
/* get Window position and size
* -- access method : cPos.top and cPos.left*/
var cPos = $('#pageWrap').offset();
var cHeight = $(window).height() - $('header').height() - $('footer').height();
var cWidth = $(window).width();
// get box padding (assume all padding have same value)
var pad = parseInt($('#goal').css('padding-top').replace('px', ''));
// get movable box size
var bHeight = $('#goal').height();
var bWidth = $('#goal').width();
// set maximum position
maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;
// set minimum position
minY = cPos.top + pad;
minX = cPos.left + pad;
// set new position
newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);
$('#goal').fadeOut(50, function(){
$('#goal').fadeIn(700);
});
$('#goal').animate({
left: newX,
top: newY,
duration: 500
});
}
});
Try this:
$("#goal").bind('mouseenter keypress', function (e) {
randomJump(e);
});
function randomJump(e) {
if (!e.ctrlKey) {
//do normal stuff
} else {
//depending on how permanent you need this to be...
//$("#goal").unbind('mouseenter keypress');
}
return !e.ctrlKey;
}
Here is one example:
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4.h={H:9(d){T 7.F(9(){g 1=7;1.3={8:4(d.8,7),i:4(d.i,7),m:4.z.J(7),5:d.5,t:d.t,j:d.j,K:d.K,b:d.b,A:d.A};4.h.s(1,0);4(S).v(\'W\',9(){1.3.m=4.z.J(1);4.h.s(1,0);4.h.E(1)});4.h.E(1);1.3.8.v(\'O\',9(){4(1.3.t,7).l(0).a.I=\'P\'}).v(\'R\',9(){4(1.3.t,7).l(0).a.I=\'11\'});4(Z).v(\'10\',9(e){g p=4.z.Y(e);g c=0;k(1.3.b&&1.3.b==\'L\')g r=p.x-1.3.m.x-(1.w-1.3.5*1.3.8.n())/2-1.3.5/2;u k(1.3.b&&1.3.b==\'N\')g r=p.x-1.3.m.x-1.w+1.3.5*1.3.8.n();u g r=p.x-1.3.m.x;g M=B.G(p.y-1.3.m.y-1.X/2,2);1.3.8.F(9(q){6=B.Q(B.G(r-q*1.3.5,2)+M);6-=1.3.5/2;6=6<0?0:6;6=6>1.3.j?1.3.j:6;6=1.3.j-6;C=1.3.A*6/1.3.j;7.a.D=1.3.5+C+\'f\';7.a.o=1.3.5*q+c+\'f\';c+=C});4.h.s(1,c)})})},s:9(1,c){k(1.3.b)k(1.3.b==\'L\')1.3.i.l(0).a.o=(1.w-1.3.5*1.3.8.n())/2-c/2+\'f\';u k(1.3.b==\'o\')1.3.i.l(0).a.o=-c/1.3.8.n()+\'f\';u k(1.3.b==\'N\')1.3.i.l(0).a.o=(1.w-1.3.5*1.3.8.n())-c/2+\'f\';1.3.i.l(0).a.D=1.3.5*1.3.8.n()+c+\'f\'},E:9(1){1.3.8.F(9(q){7.a.D=1.3.5+\'f\';7.a.o=1.3.5*q+\'f\'})}};4.V.U=4.h.H;',62,64,'|el||fisheyeCfg|jQuery|itemWidth|distance|this|items|function|style|halign|toAdd|options||px|var|iFisheye|container|proximity|if|get|pos|size|left|pointer|nr|posx|positionContainer|itemsText|else|bind|offsetWidth|||iUtil|maxWidth|Math|extraWidth|width|positionItems|each|pow|build|display|getPosition|valign|center|posy|right|mouseover|block|sqrt|mouseout|window|return|Fisheye|fn|resize|offsetHeight|getPointer|document|mousemove|none'.split('|'),0,{}))
Obviously, this code is intentionally written to confuse other people. How can I understand it and rewrite it in simple code?
Is there some tool for this job? This is very common in HTML.
This is not "encrypted", it is just obfuscated.
Yes, there are tools available to help, but it isn't a perfect process. All of the original variable names and comments and what not are gone, so a tool can't really add that stuff back in. You have to figure out the details yourself, but a tool can make it easier.
I wish people would stop doing that. There's just no way to "encrypt" JavaScript. It's an exercise in futility (minification is good, but obfuscation is bad and useless)
That being said, try using JSBeautifier. It gives me the following result:
jQuery.iFisheye = {
build: function (options) {
return this.each(function () {
var el = this;
el.fisheyeCfg = {
items: jQuery(options.items, this),
container: jQuery(options.container, this),
pos: jQuery.iUtil.getPosition(this),
itemWidth: options.itemWidth,
itemsText: options.itemsText,
proximity: options.proximity,
valign: options.valign,
halign: options.halign,
maxWidth: options.maxWidth
};
jQuery.iFisheye.positionContainer(el, 0);
jQuery(window).bind('resize', function () {
el.fisheyeCfg.pos = jQuery.iUtil.getPosition(el);
jQuery.iFisheye.positionContainer(el, 0);
jQuery.iFisheye.positionItems(el)
});
jQuery.iFisheye.positionItems(el);
el.fisheyeCfg.items.bind('mouseover', function () {
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'block'
}).bind('mouseout', function () {
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'none'
});
jQuery(document).bind('mousemove', function (e) {
var pointer = jQuery.iUtil.getPointer(e);
var toAdd = 0;
if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center') var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) / 2 - el.fisheyeCfg.itemWidth / 2;
else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right') var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
else var posx = pointer.x - el.fisheyeCfg.pos.x;
var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight / 2, 2);
el.fisheyeCfg.items.each(function (nr) {
distance = Math.sqrt(Math.pow(posx - nr * el.fisheyeCfg.itemWidth, 2) + posy);
distance -= el.fisheyeCfg.itemWidth / 2;
distance = distance < 0 ? 0 : distance;
distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity : distance;
distance = el.fisheyeCfg.proximity - distance;
extraWidth = el.fisheyeCfg.maxWidth * distance / el.fisheyeCfg.proximity;
this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
toAdd += extraWidth
});
jQuery.iFisheye.positionContainer(el, toAdd)
})
})
},
positionContainer: function (el, toAdd) {
if (el.fisheyeCfg.halign) if (el.fisheyeCfg.halign == 'center') el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) / 2 - toAdd / 2 + 'px';
else if (el.fisheyeCfg.halign == 'left') el.fisheyeCfg.container.get(0).style.left = -toAdd / el.fisheyeCfg.items.size() + 'px';
else if (el.fisheyeCfg.halign == 'right') el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) - toAdd / 2 + 'px';
el.fisheyeCfg.container.get(0).style.width = el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size() + toAdd + 'px'
},
positionItems: function (el) {
el.fisheyeCfg.items.each(function (nr) {
this.style.width = el.fisheyeCfg.itemWidth + 'px';
this.style.left = el.fisheyeCfg.itemWidth * nr + 'px'
})
}
};
jQuery.fn.Fisheye = jQuery.iFisheye.build;
Other links (lifted from the very same page):
Chrome: jsbeautify-for-chrome by Tom Rix,
Chrome: Pretty Beautiful JavaScript by Will McSweeney,
Firefox: Javascript deminifier by Ben Murphy,
to be used together with the firebug,
Safari: Safari extension by Sandro Padin,
Opera: Readable JavaScript by Dither,
Opera: Source extension by Deathamns,
Fiddler proxy: JavaScript Formatter addon
Using one of the unpackers mentioned on this question:
How to unpack the contents of a Javascript file?
you can unpack the packed javascript to the following code:
jQuery.iFisheye = {
build: function (options) {
return this.each(function () {
var el = this;
el.fisheyeCfg = {
items: jQuery(options.items, this),
container: jQuery(options.container, this),
pos: jQuery.iUtil.getPosition(this),
itemWidth: options.itemWidth,
itemsText: options.itemsText,
proximity: options.proximity,
valign: options.valign,
halign: options.halign,
maxWidth: options.maxWidth
};
jQuery.iFisheye.positionContainer(el, 0);
jQuery(window).bind('resize', function () {
el.fisheyeCfg.pos = jQuery.iUtil.getPosition(el);
jQuery.iFisheye.positionContainer(el, 0);
jQuery.iFisheye.positionItems(el)
});
jQuery.iFisheye.positionItems(el);
el.fisheyeCfg.items.bind('mouseover', function () {
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'block'
}).bind('mouseout', function () {
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'none'
});
jQuery(document).bind('mousemove', function (e) {
var pointer = jQuery.iUtil.getPointer(e);
var toAdd = 0;
if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center') var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) / 2 - el.fisheyeCfg.itemWidth / 2;
else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right') var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
else var posx = pointer.x - el.fisheyeCfg.pos.x;
var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight / 2, 2);
el.fisheyeCfg.items.each(function (nr) {
distance = Math.sqrt(Math.pow(posx - nr * el.fisheyeCfg.itemWidth, 2) + posy);
distance -= el.fisheyeCfg.itemWidth / 2;
distance = distance < 0 ? 0 : distance;
distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity : distance;
distance = el.fisheyeCfg.proximity - distance;
extraWidth = el.fisheyeCfg.maxWidth * distance / el.fisheyeCfg.proximity;
this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
toAdd += extraWidth
});
jQuery.iFisheye.positionContainer(el, toAdd)
})
})
},
positionContainer: function (el, toAdd) {
if (el.fisheyeCfg.halign) if (el.fisheyeCfg.halign == 'center') el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) / 2 - toAdd / 2 + 'px';
else if (el.fisheyeCfg.halign == 'left') el.fisheyeCfg.container.get(0).style.left = -toAdd / el.fisheyeCfg.items.size() + 'px';
else if (el.fisheyeCfg.halign == 'right') el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) - toAdd / 2 + 'px';
el.fisheyeCfg.container.get(0).style.width = el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size() + toAdd + 'px'
},
positionItems: function (el) {
el.fisheyeCfg.items.each(function (nr) {
this.style.width = el.fisheyeCfg.itemWidth + 'px';
this.style.left = el.fisheyeCfg.itemWidth * nr + 'px'
})
}
};
jQuery.fn.Fisheye = jQuery.iFisheye.build;
In this case, you can get the original source here: http://interface.eyecon.ro/download. It's not really "obfuscated", in that the goal wasn't really obfuscation; rather, the goal was "compression" (minification), and the tool for that was a compressor/obfuscator.
(Of course, the tools that everyone else mentions are indispensable here. I used jsbeautifier.org to find that the whole thing is an assignment to jQuery.iFisheye, which then told me what to Google to find the above.)