Develop Reference

how to run a function only for the clicked element and not for the whole class

I am looking for a way to resize individually several div on a page (like a browser window, that you can resize from a bottom corner), keeping the same proportions/ratio. I made the code work for a class .handle and .dragger, but all the div with the same class are being modified at the same time, while I would like it to be executed only for the div we click on.
Here is the code to resize that I'm working with:
$(".handle").bind('mousedown', draggerDown);
$("body").bind('mouseup', draggerUp);
function calculateNewSize(size) {
// {currHeight, currWidth, newHeight, newWidth, offsetX, offsetY}
var newWidth;
var newHeight;
if (Math.abs(size.offsetX) > Math.abs(size.offsetY)) {
newWidth = size.currWidth + size.offsetX;
newHeight = newWidth * (size.currHeight / size.currWidth);
} else {
newHeight = size.currHeight + size.offsetY;
newWidth = newHeight * (size.currWidth / size.currHeight);
}
return {
"height": newHeight,
"width": newWidth
};
}
function draggerDown() {
event.stopPropagation();
event.preventDefault();
currentX = event.pageX;
currentY = event.pageY;
currentHeight = $(".dragger").height();
currentWidth = $(".dragger").width();
$("body").bind('mousemove', draggerMove);
}
function draggerMove() {
var draggerElements = document.getElementsByClassName("dragger");
for (var n = 0; n < draggerElements.length; ++n) {
var targetStyle = window.getComputedStyle(draggerElements[n], null);
var newHeight = currentHeight + (event.pageY - currentY);
var newWidth = currentWidth + (event.pageX - currentX);
// AT THIS POINT, THE LOGIC COMES IN.
// CUSTOMIZE 'calculateNewSize' function above
var newSize = calculateNewSize({
"currHeight": currentHeight,
"currWidth": currentWidth,
"newHeight": newHeight,
"newWidth": newWidth,
"offsetX": (event.pageX - currentX),
"offsetY": (event.pageY - currentY)
});
currentHeight = newSize.height;
currentWidth = newSize.width;
newHeight = newSize.height;
newWidth = newSize.width;
// AT THIS POINT, THE LOGIC IS DONE.
// SIZES SHOULD BE COOL NOW
$(".dragger").css("height", newHeight + "px");
$(".dragger").css("width", newWidth + "px");
console.log($(".dragger").height());
currentX = event.pageX;
currentY = event.pageY;
}
}
function draggerUp() {
$("body").unbind('mousemove');
}
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "xUAZ5"
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
}
I am trying to do it with that methodology (from another project) but I don't really know if it could work with the previous code:
var u;
for(var i=1; i<13; i++) {
var specificClass= document.getElementsByClassName("class"+i);
for (u = 0; u < specificClass.length; u++) {
specificClass[u].addEventListener("click", thefunction);
}
}
function thefunction(evenement) {
// alert(evenement.target.classList)
var clickedElement = document.getElementsByClassName(evenement.target.classList);
for (u = 0; u < clickedElement.length; u++) {
clickedElement[u].style etc.
}
}
In that case I would these two groups of class: handle1, handle2, handle3,... and dragger1, dragger2, dragger3...
Here is my simplified html body:
<div class="draggableDiv dragger div1">
<div class="handle"></div>
</div>
<div class="draggableDiv dragger div2">
<div class="handle"></div>
</div>
Any other methodology is very welcomed of course, this is only what I've been trying :)
Let me know if you would need more details
Thanks!

Dragging elements on a scaled div

I've tried using jquery's built in draggable and I've tried using custom drag functions with no avail. Both have their respected issues and I will try to highlight both of them.
Basically, I am trying to allow the dragging of an element that is on a scaled div container. The following methods work okay on a scaled element that is less than around 2. But if you go any higher than that, we see some issues.
Any help would be appreciated. Thank you for your time.
HTML
<div id="container">
<div id="dragme">Hi</div>
</div>
Method 1 (Jquery draggable function)
I've tried the jquery draggable function as you can see in this jsfiddle example.
The problems I found in this example are the following:
Biggest concern: The droppable container does not change when it is scaled up. So if the element is being dragged over part of the scaled container that isn't a part of it's original size, it will fail.
When you click to drag a div, it teleports a little bit away from the mouse and is not a seamless drag.
JS
var percent = 2.5;
$("#dragme").draggable({
zIndex: 3000,
appendTo: 'body',
helper: function (e, ui) {
var draggable_element = $(this),
width = draggable_element.css('width'),
height = draggable_element.css('height'),
text = draggable_element.text(),
fontsize = draggable_element.css('font-size'),
textalign = draggable_element.css('font-size');
return $('<div id="' + draggable_element.id + '" name="' + draggable_element.attr('name') + '" class="text">' + text + '</div>').css({
'position': 'absolute',
'text-align': textalign,
'background-color': "red",
'font-size': fontsize,
'line-height': height,
'width': width,
'height': height,
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
});
},
start: function (e, ui) {
$(this).hide();
},
stop: function (e, ui) {
$(this).show();
}
});
$("#container").droppable({
drop: function (event, ui) {
var formBg = $(this),
x = ui.offset.left,
y = ui.offset.top,
drag_type = ui.draggable.attr('id');
var element_top = (y - formBg.offset().top - $(ui.draggable).height() * (percent - 1) / 2) / percent,
element_left = (x - formBg.offset().left - $(ui.draggable).width() * (percent - 1) / 2) / percent;
$(ui.draggable).css({
'top': element_top,
'left': element_left
});
}
});
Method 2 - Custom drag function
I've tried using a custom drag function but it unusable after around a 2 scale.
jsfiddle on a scale(2) - Looks like the draggable div is having a seizure.
jsfiddle on a scale(2.5) - The draggable div flys away when you try to drag it.
JS
(function ($) {
$.fn.drags = function (opt) {
opt = $.extend({
handle: "",
cursor: "move"
}, opt);
if (opt.handle === "") {
var $el = this;
} else {
var $parent = this;
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
if (opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
$(this).addClass('active-handle')
var $drag = $parent.addClass('draggable');
}
var
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
follow = function (e) {
$drag.offset({
top: e.pageY + pos_y - drg_h,
left: e.pageX + pos_x - drg_w
})
};
$(window).on("mousemove", follow).on("mouseup", function () {
$drag.removeClass('draggable');
$(window).off("mousemove", follow);
});
e.preventDefault(); // disable selection
}).on("mouseup", function () {
if (opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle');
$parent.removeClass('draggable');
}
});
}
})(jQuery);
$("#dragme").drags({}, function (e) {});

Here are a few of my findings to make sure dragging on a scaled container works for method one. The only caveat is to make sure you have var percent as the scaled percentage declared before any of these actions happen.
First, use this code at the top of your javascript. This wil help making sure that the droppable area works with a sacled container.
$.ui.ddmanager.prepareOffsets = function( t, event ) { var i, j, m = $.ui.ddmanager.droppables[ t.options.scope ] || [], type = event ? event.type : null, list = ( t.currentItem || t.element ).find( ":data(ui-droppable)" ).addBack(); droppablesLoop: for ( i = 0; i < m.length; i++ ) { if ( m[ i ].options.disabled || ( t && !m[ i ].accept.call( m[ i ].element[ 0 ], ( t.currentItem || t.element ) ) ) ) { continue; } for ( j = 0; j < list.length; j++ ) { if ( list[ j ] === m[ i ].element[ 0 ] ) { m[ i ].proportions().height = 0; continue droppablesLoop; }  } m[ i ].visible = m[ i ].element.css( "display" ) !== "none"; if ( !m[ i ].visible ) { continue; } if ( type === "mousedown" ) { m[ i ]._activate.call( m[ i ], event ); } m[ i ].offset = m[ i ].element.offset(); m[ i ].proportions({ width: m[ i ].element[ 0 ].offsetWidth * percent, height: m[ i ].element[ 0 ].offsetHeight * percent }); } };
Here are a few functions that are necessary to fix the drag so it works on a scaled container.
function dragFix(event, ui) { var changeLeft = ui.position.left - ui.originalPosition.left, newLeft = ui.originalPosition.left + changeLeft / percent, changeTop = ui.position.top - ui.originalPosition.top, newTop = ui.originalPosition.top + changeTop / percent; ui.position.left = newLeft; ui.position.top = newTop; }
function startFix(event, ui) { ui.position.left = 0; ui.position.top = 0;  var element = $(this); }
You will want this if you want to enable the element to be resizable on a scaled container.
function resizeFix(event, ui) { var changeWidth = ui.size.width - ui.originalSize.width, newWidth = ui.originalSize.width + changeWidth / percent, changeHeight = ui.size.height - ui.originalSize.height, newHeight = ui.originalSize.height + changeHeight / percent;  ui.size.width = newWidth; ui.size.height = newHeight; }
To make an element draggable, I use the following function.
$("ELEMENT").resizable({ minWidth: - ($(this).width()) * 10, minHeight: - ($(this).height()) * 10, resize: resizeFix, start: startFix });
$("ELEMENT").draggable({ cursor: "move", start: startFix, drag: dragFix }); }

A similar problem is mentioned here: jquery - css "transform:scale" affects '.offset()' of jquery
It seems the problem arises from the fact that jQuery fails to return exact size for scaled elements and therefore failing setting right offset values to the element.
To solve this, he is suggesting first setting scale to 1 and setting offset and then again resetting scale value.
But this alone does not solve the problem here. Since mouse position is taken while it is scaled, position values should also be divided by scale value.
Here is an edited version of code:
var scl = 2.5;
var
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top/scl + drg_h - e.pageY/scl,
pos_x = $drag.offset().left/scl + drg_w - e.pageX/scl;
follow = function(e) {
var size = {
top:e.pageY/scl + pos_y - drg_h+scl*2,
left:e.pageX/scl + pos_x - drg_w+scl*2
};
$drag.parent().css("transform","scale(1)");
$drag.offset(size);
$drag.parent().css("transform","scale("+scl+")");
};
Note: I only replaced scale value for transform tag, since I am using chrome. You can also replace all instances or instead you can use a different class with 1 scale value.
JSFiddle is also here.

Here is an example of simple drag with scaling, however, in prue dom.
<style>
#dragme {
position:absolute;
border:1px solid red;
background:pink;
left:10px;
top:20px;
width:100px;
height:200px;
}
#container {
transform: scale(2,2) translate(100px,100px);
position:relative;
border:1px solid green;
background:grey;
width:200px;
height:300px;
}
</style>
<body>
<div id="container">
<div id="dragme">Hi</div>
</div>
<script>
var dragme=document.getElementById("dragme");
var container=document.getElementById("container");
dragme.onmousedown=function Drag(e){
this.ini_X = this.offsetLeft-e.clientX/2;
this.ini_Y = this.offsetTop-e.clientY/2;
container.onmousemove = move;
container.onmouseup = release;
return false;
}
function move(e){
e.target.style.left = e.clientX/2 + e.target.ini_X + 'px';
e.target.style.top = e.clientY/2 + e.target.ini_Y + 'px';
}
function release(){
container.onmousemove=container.onmouseup=null;
}
</script>
</body>

Custom Javascript not working in Chrome

Browsed a lot, fiddled with it a lot. Came to the conclusion others may see the mistake that I am blind to.
The code is supposed to move the sidebar according to window height, sidebar height, content height, etc.
This is the code:
$(document).ready(function() {
var windowheight = $(window).height();
var identheight = $(".ident").height();
var sidebarheight = $(".sidebar").height();
var mainheight = $(".main").height();
var pos = $(window).scrollTop();
var diff = (((sidebarheight + 20) + identheight) - windowheight);
var cur = ((sidebarheight + 20) + (pos - diff)) - 2;
var max = (mainheight + 30);
contentScroll();
$(window).resize(function(){
windowheight = $(window).height();
identheight = $(".ident").height();
sidebarheight = $(".sidebar").height();
mainheight = $(".main").height();
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
$(window).scroll(function (){
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
function contentScroll() {
if (sidebarheight < mainheight) {
if (diff < identheight) {
if (pos >= identheight) {
$('.sidebar').css({
'margin-top' : (pos - identheight) + 'px'
});
}
} else {
if (pos >= diff && cur <= max) {
$('.sidebar').css({
'margin-top' : (pos - diff) + 'px'
});
}
if (pos <= diff) {
$('.sidebar').css({
'margin-top' : '0px'
});
}
}
}
}
});
I'm aware of it not being perfect, it's still in the rough phase. It works perfectly fine in FireFox, but not in chrome. The function is being called (tested with alerts). It just doesn't do anything.
Probably something about chrome reading syntax different.
If anyone that see's my mistake would kindly point me to it, it's been too long for me to keep cracking my head open over this.
This is the mock-website in question: http://klok-bremen.de/fff/

Use $(window).load instead of $(document).ready because the parent elements' heights will change after the images load.

define start to finish positions

I am creating a new "whack-a-mole" style game where the children have to hit the correct numbers in accordance to the question. So far it is going really well, I have a timer, count the right and wrong answers and when the game is started I have a number of divs called "characters" that appear in the container randomly at set times.
I have been given a theme of bubbles so they want me to make the "characters" start at the bottom and animate upwards. Any ideas how I would achieve this?
Here is the code that currently maps the divs to there positions in the canvas...
function moveRandom(id) {
var cPos = $('#container').offset();
var cHeight = $('#container').height();
var cWidth = $('#container').width();
var pad = parseInt($('#container').css('padding-top').replace('px', ''));
var bHeight = $('#' + id).height();
var bWidth = $('#' + id).width();
maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;
minY = cPos.top + pad;
minX = cPos.left + pad;
newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);
$('#' + id).css({
top: newY,
left: newX
}).fadeIn(1000, function() {
setTimeout(function() {
$('#' + id).fadeOut(1000);
window.cont++;
}, 7000);
});
Here is my most recent fiddle: http://jsfiddle.net/pUwKb/15/

The part below actually set the CSS (and thus the position of your element).
$('#' + id).css({
top: newY,
left: newX }).fadeIn(1000, function() {
setTimeout(function() {
$('#' + id).fadeOut(1000);
window.cont++;
}, 7000); });
You should add a function move who uses a movement variable. Small example:
function move(movement, id) {
$('#' + id).css({
top: this.css('top') + movement.y,
left: this.css('left') + movement.x
}).fadeIn(1000, function() {
setTimeout(function() {
$('#' + id).fadeOut(1000);
window.cont++;
}, 7000);
});
}
Where in movement should be an object something the like of {x: 30, y: 0} which would result in a 30 pixels movement to the right. Hope it helps!

jQuery Else / If Prevent Inheriting Styles

I am wondering how I prevent elements from retaining the same inline styles in my else / if breakpoints.
What I am doing is trying to change styling based on window width. Very much the same approach as CSS media queries, except I need to increment a numeric value, which is something I cannot do with CSS, hence the jQuery.
When I get to my final else if - where I apply an opacity to the first 5 articles - if I resize my browser back down to the less than 720px, those articles retain the opacity, which I do not want.
Any help is greatly appreciated.
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize >= 1 && windowSize <= 479) {
var posTop = 0;
$('#main article').each(function() {
$(this).css('top', posTop + 'px');
posTop += 160;
});
} else if (windowSize >= 480 && windowSize <= 719) {
var posTop = 0;
$('#main article').each(function() {
$(this).css('top', posTop + 'px');
posTop += 240;
});
} else if (windowSize >= 720 && windowSize <= 959) {
$('#main article').slice(0, 5).each(function() {
$(this).css('opacity', 0.4);
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});​

Add $('#main article').css('opacity', 1); at the begining of checkWidth function. By the way, you should rename this function, because what it does is not how it sounds. And there is no need in posTop variable and last each loop. My variant with some refactoring:
$(document).ready(function() {
function changeStylesDependsOnWidth() {
$('#main article').css('opacity', 1);
var windowSize = $(window).width();
if (windowSize >= 1 && windowSize <= 479) {
$('#main article').each(function(i) {
$(this).css('top', i * 160 + 'px');
});
} else if (windowSize >= 480 && windowSize <= 719) {
$('#main article').each(function(i) {
$(this).css('top', i * 240 + 'px');
});
} else if (windowSize >= 720 && windowSize <= 959) {
$('#main article').slice(0, 5).css('opacity', 0.4);
}
}
changeStylesDependsOnWidth();
$(window).resize(changeStylesDependsOnWidth);
});​