Develop Reference

Problem with adding multiple images to the elements (javascript loop Issue)

I would like to add multiple photos from the Array in this code to the elements, but it adds just one photo from the Array to the first Element.
I tried adding for loop, but I dont know where to start and where to end the loop. Could you please take a look to the code using the link (codepen)?
thank you
let zoomLevel = 1;
const images = [
{
thumb: 'http://localhost:8080/links/works/Print/001.webp',
hires: 'http://localhost:8080/links/works/Print/001.webp'
},
{
thumb: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp',
hires: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp'
}
]
// set to random image
let img = images[Math.floor(Math.random() * images.length)];
image.getElementsByTagName('a')[0].setAttribute('href', img.hires);
image.getElementsByTagName('img')[0].setAttribute('src', img.thumb);
const preloadImage = url => {
let img = new Image();
img.src = url;
}
preloadImage(img.hires);
const enterImage = function(e) {
zoom.classList.add('show', 'loading');
clearTimeout(clearSrc);
let posX, posY, touch = false;
if (e.touches) {
posX = e.touches[0].clientX;
posY = e.touches[0].clientY;
touch = true;
} else {
posX = e.clientX;
posY = e.clientY;
}
You can check this better using Codepen HERE.

const image = document.querySelectorAll('.image');
/* Store the number of all elements with css class 'image' */
let imageElementsCount = image.length;
for (index = 0; index < imageElementsCount; index++)
{
let arrayElementPos = Math.floor(Math.random() * images.length);
/* Receive the requested element from array with image objects */
let imageObject = images[arrayElementPos];
preloadImage(imageObject.hires);
/* Assign received image properties to your html element */
image[index].getElementsByTagName('a')[0].setAttribute('href', imageObject.hires);
image[index].getElementsByTagName('img')[0].setAttribute('src', imageObject.thumb);
image[index].addEventListener('mouseover', enterImage);
image[index].addEventListener('touchstart', enterImage);
image[index].addEventListener('mouseout', leaveImage);
image[index].addEventListener('touchend', leaveImage);
image[index].addEventListener('mousemove', move);
image[index].addEventListener('touchmove', move);
image[index].addEventListener('wheel', e =>
{
e.preventDefault();
e.deltaY > 0 ? zoomLevel-- : zoomLevel++;
if (zoomLevel < 1) zoomLevel = 1;
if (zoomLevel > 5) zoomLevel = 5;
console.log(`zoom level: ${zoomLevel}`);
zoom.style.transform = `scale(${zoomLevel})`;
});
}
The loop is working until all founded divs got an assignment.
ToDos:
Remove in line
const image = document.querySelectorAll('.image')[0];
the [0].
Next step: Take a look into the body of for loop. Remove your lines of code in your original code

Thank you #Reporter, but I've allready done this editing my code for two days. :)
const zoo = document.querySelectorAll('.zoom');
const zooImg = document.querySelectorAll('.zoom-image');
const pic = document.querySelectorAll(".image");
let clearSrc;
let zoomLevel = 1;
const digiImgs = [{
thumb: 'https://tasvir-graphic.de/links/works/digital/MuZe.webp',
hires: 'https://tasvir-graphic.de/links/works/digital/MuZe.webp'
},
{
thumb: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp',
hires: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp'
},
{
thumb: 'https://tasvir-graphic.de/links/works/digital/takeCare.webp',
hires: 'https://tasvir-graphic.de/links/works/digital/takeCare.webp'
},
]
// set to random image
for (var i = 0; i < pic.length; i++) {
let img = digiImgs[i];
pic[i].getElementsByTagName('a')[0].setAttribute('href', img.hires);
pic[i].getElementsByTagName('img')[0].setAttribute('src', img.thumb);
const preloadImage = url => {
let img = new Image();
img.src = url;
}
preloadImage(img.hires);
const enterImage = function (e) {
var zoo = this.parentNode.childNodes[3];
zoo.classList.add('show', 'loading');
clearTimeout(clearSrc);
let posX, posY, touch = false;
if (e.touches) {
posX = e.touches[0].clientX;
posY = e.touches[0].clientY;
touch = true;
} else {
posX = e.clientX;
posY = e.clientY;
}
touch
?
zoo.style.top = `${posY - zoo.offsetHeight / 1.25}px` :
zoo.style.top = `${posY - zoo.offsetHeight / 2}px`;
zoo.style.left = `${posX - zoo.offsetWidth / 2}px`;
let originalImage = this.getElementsByTagName('a')[0].getAttribute('href');
var zoImg = this.parentNode.childNodes[3].childNodes[1];
zoImg.setAttribute('src', originalImage);
// remove the loading class
zoImg.onload = function () {
setTimeout(() => {
zoo.classList.remove('loading');
}, 500);
}
}
const leaveImage = function () {
// remove scaling to prevent non-transition
var zoImg = this.parentNode.childNodes[3].childNodes[1];
var zoo = this.parentNode.childNodes[3];
zoo.style.transform = null;
zoomLevel = 1;
zoo.classList.remove('show');
clearSrc = setTimeout(() => {
zoImg.setAttribute('src', '');
}, 250);
}
const move = function (e) {
e.preventDefault();
var zoImg = this.parentNode.childNodes[3].childNodes[1];
var zoo = this.parentNode.childNodes[3];
let posX, posY, touch = false;
if (e.touches) {
posX = e.touches[0].clientX;
posY = e.touches[0].clientY;
touch = true;
} else {
posX = e.clientX;
posY = e.clientY;
}
// move the zoom a little bit up on mobile (because of your fat fingers :<)
touch ?
zoo.style.top = `${posY - zoo.offsetHeight / 1.25}px` :
zoo.style.top = `${posY - zoo.offsetHeight / 2}px`;
zoo.style.left = `${posX - zoo.offsetWidth / 2}px`;
let percX = (posX - this.offsetLeft) / this.offsetWidth,
percY = (posY - this.offsetTop) / this.offsetHeight;
let zoomLeft = -percX * zoImg.offsetWidth + (zoo.offsetWidth / 2),
zoomTop = -percY * zoImg.offsetHeight + (zoo.offsetHeight / 2);
zoImg.style.left = `${zoomLeft}px`;
zoImg.style.top = `${zoomTop}px`;
}
pic[i].addEventListener('mouseover', enterImage);
pic[i].addEventListener('touchstart', enterImage);
pic[i].addEventListener('mouseout', leaveImage);
pic[i].addEventListener('touchend', leaveImage);
pic[i].addEventListener('mousemove', move);
pic[i].addEventListener('touchmove', move);
pic[i].addEventListener('wheel', e => {
var zoo = e.target.parentNode.parentNode.parentNode.childNodes[3];
console.log(zoo);
e.preventDefault();
e.deltaY > 0 ? zoomLevel-- : zoomLevel++;
if (zoomLevel < 1) zoomLevel = 1;
if (zoomLevel > 3) zoomLevel = 3;
console.log(`zoom level: ${zoomLevel}`);
zoo.style.transform = `scale(${zoomLevel})`;
});
}
but there is a problem with the touch. When I touch using mobile, the photo works like a link and opens the photo. How to use preventDefault Touch?

How can I treat different canvas-drawing as one , and how can I trace the sequence among them?

I have a scenario in which I am having a canvas, I am dragging some drawing from the left side of the canvas and dropping it on the right side of it and if I am dropping one box near to another one it also clubbing together. Now I need to do two more things -
First, as soon as I am clubbing one with another I want to give this set, of more than one boxes, a treatment of one box. meaning that if I am dragging any one of the box which are clubbed together, whole set of the boxes should be dragged together.
second, as and when I am dropping the boxes I want to generate some plain text based on the box which has been dropped, for example if I dropped "first box", the plain text should be something like "you dropped first box first". And this thing I need to do on the sequence, meaning if the second box is appearing first the text according to that box should appear first.
Here is the code which I have completed
<script type="text/javascript">
window.onload = function(){
draw();
}
</script>
<body style="margin: 0;padding:0;clear:both; cursor: pointer">
<canvas id="canvas" tabindex="1" style="float:left" ></canvas>
<div id="plainEnglish" tabindex="2" style="float: left;"></div>
</body>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
c.width = 600;
c.height = 300;
//My mouse coordinates
var x,y;
c.addEventListener("mousedown",down);
c.addEventListener("mousemove",move);
c.addEventListener("mouseup",up);
var r = 0;
function counter() {
r++;
console.log(r);
}
//I'll save my boxes in this array
var myBoxes = new Array();
// Those boxes which I have moved to droppable area of the canvas.
var myDroppedBoxes = new Array();
//This function describes what a box is.
//Each created box gets its own values
function box(x,y,w,h,rgb,text) {
this.x = x,
this.y = y;
this.xS = x; //saving x
this.yS = y; //saving y
this.w = w;
this.h = h;
this.rgb = rgb;
this.text = text;
//to determine if the box is being draged
this.draging = false;
this.isBeingDragged = false;
}
//Let's make some boxes!!
myBoxes[0] = new box(20,20,75,20,"#6AA121","First");
myBoxes[1] = new box(20,50,75,20,"#6AA121", "Second");
myBoxes[2] = new box(20,80,75,20,"#6AA121","third");
//here we draw everything
function draw() {
ctx.clearRect(0,0,c.width,c.height);
//Dropable area
ctx.fillStyle="red";
ctx.fillRect(c.width/2,0,c.width,c.height);
//Boxes!
for (var i = 0; i<myBoxes.length; i++) {
var b = myBoxes[i];
if (b.draging) { //box on the move
//Also draw it on the original spot
ctx.fillStyle=b.rgb;
ctx.fillRect(b.xS,b.yS,b.w,b.h);
ctx.strokeRect(b.xS,b.yS,b.w,b.h);
ctx.font = "14px Arial";
ctx.strokeText(b.text, b.xS + 5 , b.yS + 15);
}
ctx.fillStyle=b.rgb;
ctx.fillRect(b.x,b.y,b.w,b.h);
ctx.strokeRect(b.x,b.y,b.w,b.h);
ctx.font = "14px Arial";
ctx.strokeText(b.text, b.x + 5 , b.y + 15);
}
for(var i = 0; i< myDroppedBoxes.length; i++) {
var b = myDroppedBoxes[i];
ctx.fillStyle=b.rgb;
ctx.fillRect(b.x,b.y,b.w,b.h);
ctx.strokeRect(b.x,b.y,b.w,b.h);
ctx.font = "14px Arial";
ctx.strokeText(b.text, b.x + 5 , b.y + 15);
}
}
function down(event) {
event = event || window.event;
x = event.pageX - c.offsetLeft,
y = event.pageY - c.offsetTop;
for (var i = 0; i<myBoxes.length; i++) {
var b = myBoxes[i];
if (x>b.xS && x<b.xS+b.w && y>b.yS && y<b.yS+b.h) {
myBoxes[i].draging = true;
myBoxes[i].isBeingDragged = true;
}
}
for (var i = 0; i<myDroppedBoxes.length; i++) {
var b = myDroppedBoxes[i];
if (x>b.x && x<b.x + b.w && y>b.y && y<b.y + b.h) {
b.draging = true;
b.isBeingDragged = true;
}
}
draw();
}
function move(event) {
event = event || window.event;
x = event.pageX - c.offsetLeft,
y = event.pageY - c.offsetTop;
for (var i = 0; i<myBoxes.length; i++) {
var b = myBoxes[i];
if (b.draging && b.isBeingDragged) {
myBoxes[i].x = x;
myBoxes[i].y = y;
if (b.x>c.width/2) {
var length = myDroppedBoxes.length ;
myDroppedBoxes[length] = new box(x,y,b.w,b.h,b.rgb,b.text);
myDroppedBoxes[length].draging = true;
myDroppedBoxes[length].isBeingDragged = true;
b.x = b.xS;
b.y = b.yS;
b.isBeingDragged = false;
}
}
}
for (var i = 0; i<myDroppedBoxes.length; i++) {
var b = myDroppedBoxes[i];
if (b.draging && b.isBeingDragged) {
b.x = x;
b.y = y;
}
}
draw();
}
function up(event) {
event = event || window.event;
x = event.pageX - c.offsetLeft,
y = event.pageY - c.offsetTop;
for (var i = 0; i< myBoxes.length; i++) {
var b = myBoxes[i];
if (b.draging && b.isBeingDragged) {
//Let's see if the rectangle is inside the dropable area
if (b.x < c.width/2) {
myBoxes[i].x = b.xS;
myBoxes[i].y = b.yS;
myBoxes[i].draging = false;
b.isBeingDragged = false;
}
}
}
for (var i = 0; i< myDroppedBoxes.length; i++) {
var b = myDroppedBoxes[i];
if ( b.isBeingDragged) {
//Let's see if the rectangle is inside the dropable area
if (b.x>c.width/2) {
b.x = x;
b.y = y;
clubLegos(b);
plainTextMaker();
b.isBeingDragged = false;
}
else {
//No it's not, sending it back to its original spot
myDroppedBoxes.splice(i,1);
}
}
}
draw();
}
function clubLegos(b) {
// this loop is for checking that the box is lying near to which other box.
for(var j = 0; j < myDroppedBoxes.length; j++) {
var z = myDroppedBoxes[j];
if(!z.isBeingDragged) {
if(((x > z.x) && (x < (z.x + z.w))) && ((y > (z.y - 15)) && (y < (z.y + z.h + 10)))) {
b.x = z.x;
if( (y - z.y) >= 0) {
b.y = (z.y + z.h);
console.log("inside if " + y + " " + z.y);
}
else {
console.log("inside else " + y + " " + z.y);
b.y = (z.y - z.h);
}
}
}
}
}
function plainTextMaker() {
plainEnglishDiv = document.getElementById("plainEnglish");
plainEnglishDiv.innerHTML = "<h3>Here I am generating some plain text based on each drag and drop</h3>";
}
</script>
</html>
Here is the JS Fiddle for the same -
http://jsfiddle.net/akki166786/wa52f9pm/
Any help is greatly appreciated.
Thanks in advance.

Give each of your box objects something similar to Html's class.
This way you can drag every box with the same "class" simultaneously.
Add a club: property to each box.
// at top of app set a counter to make new clubs
var nextClub=0;
// each new box gets a unique "club"
function box(x,y,w,h,rgb,text) {
...
club:(nextClub++),
...
In clubLegos(b) when you're attaching dragged box b to another box z, also give the dropped box (b) & any member of (z)'s group a brand new club id:
// give the dropped box (b) & any member of (z)'s group a brand new club id
...if attaching b to z
b.club=nextClub;
for(var i=0;i<myBoxes.length;i++){
var bb=myBoxes[i];
if(bb.club==z.club){
bb.club=nextClub;
}
}
nextClub++;
This way, for example, if the mousedown has the user starting to drag a box with club==2, then you can add each myBoxes with club==2 into your dragging array and every box with club==2 will be dragged simultaneously.

HTML5 & javascript - drawImage seems to trigger after animation completed

I'm trying to create the following animation:
- when the page loads, I load the 2 components of my logo and draw them onto the canvas
- after clicking the animate button, both images should smoothly move up to the top of the page and shrink
However, it seems that the drawImage() only takes place somewhere after the entire animation has been completed even though I can see it being executed at the right time in the console. Commenting out the clearRect function also shows me that every frame is actually drawn onto the screen, but sadly they all appear together after the animation should be completed.
I'm pretty new to canvases and relevant tutorials on such animations are scarce and don't get me much further.
Here's the relevant script:
<script type="text/javascript">
var logoCanvas;
var logoContext;
var direction = 1;
var logoAnimationDuration = 2000; //millisec
var frameSpeed = 30/1000; //frames per second
var logoImageRatio = 0;
var logoTextRatio = 0;
var initialLogoImageHeight = 0;
var initialLogoTextHeight = 0;
var initialLogoImageTop = 0;
var initialLogoImageLeft = 0;
var initialLogoTextTop = 0;
var initialLogoTextLeft = 0;
var newLogoImageLeft = 0;
var logoImageWidth = 0;
var logoImageHeight = 0;
var logoTextWidth = 0;
var logoTextHeight = 0;
var logoImageTop = 0;
var logoImageLeft = 0;
var logoTextTop = 0;
var logoTextLeft = 0;
var logoImageLoaded = false;
var logoTextLoaded = false;
var logoImage = new Image();
var logoText = new Image();
function AnimateFrontPageCanvas() {
if(logoCanvas.height <= $('#Page_0').height()) {
logoCanvas.height = $('#Page_0').height();
return;
}
if(logoImageHeight <= $('#Page_0').height() - 4) {
return;
}
if(logoImageTop <= 2) {
return;
}
//logoCanvas.height = parseFloat(logoCanvas.height) - (parseFloat(window.innerHeight) - parseFloat($('#Page_0').height())) * 1/frameSpeed * 1/logoAnimationDuration;
logoContext.clearRect(0, 0, logoCanvas.width, logoCanvas.height);
AnimateLogo();
setTimeout(AnimateFrontPageCanvas(), 1/frameSpeed);
}
function AnimateLogo() {
AnimateLogoImage();
AnimateLogoText();
}
function AnimateLogoImage() {
logoImageHeight = logoImageHeight - (initialLogoImageHeight - $('#Page_0').height() + 4) * (1/frameSpeed) * (1/logoAnimationDuration);
logoImageWidth = logoImageHeight*logoImageRatio;
logoImageTop = logoImageTop - (initialLogoImageTop - 2)*(1/frameSpeed) * (1/logoAnimationDuration);
logoImageLeft = logoImageLeft - (initialLogoImageLeft - newLogoImageLeft) * (1/frameSpeed) * (1/logoAnimationDuration);
logoContext.drawImage(logoImage, logoImageLeft, logoImageTop, logoImageWidth, logoImageHeight);
var time = new Date();
time = time.getTime();
console.log('logoimage drawn: ' + time);
}
function AnimateLogoText() {
logoTextHeight = logoTextHeight - (initialLogoTextHeight - $('#Page_0').height() + 4) * (1/frameSpeed) * (1/logoAnimationDuration);
logoTextWidth = logoTextHeight*logoTextRatio;
logoTextTop = logoTextTop - (initialLogoTextTop - 2) * (1/frameSpeed)*(1/logoAnimationDuration);
logoTextLeft = logoTextLeft - (initialLogoTextLeft - newLogoTextLeft)*(1/frameSpeed)*(1/logoAnimationDuration);
logoContext.drawImage(logoText, logoTextLeft, logoTextTop, logoTextWidth, logoTextHeight);
var time = new Date();
time = time.getTime();
console.log('logotext drawn: ' + time);
}
function InitiateFrontPageCanvas() {
logoImage.onload = function() {
logoImageLoaded = true;
AfterImagesLoadedActions();
}
logoImage.src = '/site_mats/images/logo_image.png';
logoText.onload = function() {
logoTextLoaded = true;
AfterImagesLoadedActions();
}
logoText.src = '/site_mats/images/logo_text.png';
}
function AfterImagesLoadedActions() {
if(logoImageLoaded && logoTextLoaded) {
logoImageRatio = logoImage.width/logoImage.height;
logoTextRatio = logoText.width/logoText.height;
if(logoImage.width > 0.8*logoCanvas.width) {
logoImage.width = 0.8*logoCanvas.width;
logoImage.height = logoImage.width/logoImageRatio;
}
if(logoText.width > 0.8*logoCanvas.width) {
logoText.width = 0.8*logoCanvas.width;
logoText.height = logoText.width/logoTextRatio;
}
if(parseFloat(logoImage.height) + parseFloat(logoText.height) > 0.66*logoCanvas.height) {
var x = (0.66*logoCanvas.height)/(parseFloat(logoImage.height) + parseFloat(logoText.height));
logoImage.height = x*logoImage.height;
logoImage.width = logoImage.height*logoImageRatio;
logoText.height = x*logoText.height;
logoText.width = logoText.height*logoTextRatio;
}
initialLogoImageHeight = logoImage.height;
initialLogoTextHeight = logoText.height;
logoImageHeight = logoImage.height;
logoImageWidth = logoImage.width;
logoTextHeight = logoText.height;
logoTextWidth = logoText.width;
initialLogoImageTop = parseFloat((logoCanvas.height-(parseFloat(logoImageHeight)+parseFloat(logoTextHeight)))/2);
initialLogoImageLeft = parseFloat((logoCanvas.width-logoImageWidth)/2);
initialLogoTextTop = parseFloat(((logoCanvas.height-(parseFloat(logoImageHeight)+parseFloat(logoTextHeight)))/2)+parseFloat(logoImageHeight));
initialLogoTextLeft = parseFloat((logoCanvas.width-logoImageWidth)/2);
logoImageTop = initialLogoImageTop;
logoImageLeft = initialLogoImageLeft;
logoTextTop = initialLogoTextTop;
logoTextLeft = initialLogoTextLeft;
newLogoImageLeft = parseFloat(2);
newLogoTextLeft = parseFloat((logoCanvas.width-$('#Page_0').height()*logoTextRatio)/2);;
logoContext.drawImage(logoText, logoTextLeft, logoTextTop, logoTextWidth, logoTextHeight);
logoContext.drawImage(logoImage, logoImageLeft, logoImageTop, logoImageWidth, logoImageHeight);
//remove onload from image objects
logoImage.onload = null;
logoText.onload = null;
}
}
function SetFrontPageCanvas() {
logoCanvas = document.getElementById('LogoCanvas');
logoContext = logoCanvas.getContext('2d');
logoCanvas.width = window.innerWidth;
logoCanvas.height = window.innerHeight;
logoContext.clearRect(0, 0, logoCanvas.width, logoCanvas.height);
InitiateFrontPageCanvas();
}
window.onload = function() {
SetFrontPageCanvas();
};
$(document).ready(function() {
windowWidth = $(window).width();
windowHeight = $(window).height();
});
$(window).resize(function() {
//alert($(window).width() + ' - ' + $(window).height());
logoImageLoaded = false;
logoTextLoaded = false;
SetFrontPageCanvas();
windowWidth = $(window).width();
windowHeight = $(window).height();
});
</script>
And here's the relevant html:
<canvas id="LogoCanvas" style="position:absolute;top:0;left:0;z-index:1;"></canvas>
<div id="Page_0" style="position:absolute;top:0;left:0;z-index:5;width:100%;height:90px;">
<div align="center" style="position:fixed;bottom:5px;z-index:100;width:100%;">
<input type="button" onClick="AnimateFrontPageCanvas()" value="Animate">
</div>
If desired, the code can also be seen in action here: http://villa-gloria-katouna.com/site_mats/animation.php

Bind events to all elements in class instead of just to one id

I developed this interaction / script that scales whatever element is passed to it and if that element is pinched in on, it scales down / less.
This is how the script is initialised ( passing two arguments the container and the item to be scaled / transformed:
$(function(){
var zoom = new collapse('#zoom','#zoom :first');
var zoom2 = new collapse('#zoom2','#zoom2 :first');
var zoom3 = new collapse('#zoom3','#zoom3 :first');
});
It works fine as above on single IDs, but I need it to work on a class.
I tried this:
$(function(){
var zoom = new collapse('#zoom','.polaroid');
});
But that causes the whole script not to work because all the elements in that class are being passed instead of one as with an id.
This would only select the first item in the class so it won't work:
$(function(){
var zoom = new collapse('#zoom','.polaroid :first');
});
How can I change my script so that it is applied to all members of the .polaroid class in the #main container?
Here is my script:
function collapse(container, element){
container = $(container).hammer({
prevent_default: true,
scale_threshold: 0
});
element = $(element);
var displayWidth = container.width();
var displayHeight = container.height();
var MIN_ZOOM = 0;
var MAX_ZOOM = 1;
var scaleFactor = 1;
var previousScaleFactor = 1;
var startX = 0;
var startY = 0;
var translateX = 0;
var translateY = 0;
var previousTranslateX = 0;
var previousTranslateY = 0;
var time = 1;
var tch1 = 0,
tch2 = 0,
tcX = 0,
tcY = 0,
toX = 0,
toY = 0,
cssOrigin = "";
container.bind("transformstart", function(event){
e = event;
tch1 = [e.touches[0].x, e.touches[0].y],
tch2 = [e.touches[1].x, e.touches[1].y];
tcX = (tch1[0]+tch2[0])/2,
tcY = (tch1[1]+tch2[1])/2;
toX = tcX;
toY = tcY;
var left = $(element).offset().left;
var top = $(element).offset().top;
cssOrigin = (-(left) + toX)/scaleFactor +"px "+ (-(top) + toY)/scaleFactor +"px";
});
container.bind("transform", function(event){
scaleFactor = previousScaleFactor * event.scale;
scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));
transform(event);
});
container.bind("transformend", function(event){
previousScaleFactor = scaleFactor;
if(scaleFactor > 0.42){
$(element).css('-webkit-transform', 'scaleY(1.0)').css('transform', 'scaleY(1.0)');
}
});
function transform(e){
var cssScale = "scaleY("+ scaleFactor +")";
element.css({
webkitTransform: cssScale,
webkitTransformOrigin: cssOrigin,
transform: cssScale,
transformOrigin: cssOrigin,
});
if(scaleFactor <= 0.42){
$(element).animate({height:0}, function(){
$(this).remove();
});
}
}
}

Wrap it as a jquery plugin:
$.fn.collapse = function(filter) {
return this.each(function(){
collapse(this,filter);
});
}
$("#zoom,#zoom1,#zoom2").collapse(".polaroid");
or if each of the zoom elements had a common class,
$(".zoomel").collapse(".polaroid");

You have to run collapse for each element.
element = $(element);
element.each(function(){
//each element would be this here
var $this= $(this);
//do whatever you want with $this
})

Javascript only works in IE Quirks, 7 and Chrome and Firefox. Doesn't work in IE 8 or 9 Standards

My code makes a number of divisions appear to orbit around an invisible horizontal axis on a plane. How it works: it fires a mouseevent listener onMouseDown, and captures the X of the user's cursor relative to the window. onMouseUp is simulated by a setTimeout function that is called 90 milliseconds later, it does the same and then subtracts the two values to determine the distance and direction to spin.
My question is: Why does it work correctly in FF, Chrome, and IE Quirks and IE 7 Standards, but not IE 8 Standards or IE 9 Standards?
IE8: the model breaks down and the divisons float away outside the containing boundary division. IE9: No response from the JS whatsoever.
The following contains the entire javascript on the page, which can be found # http://electrifiedpulse.com/360.html :
<script type=text/javascript>
var objectCount = 8; var pixel = new Array(); var size = new Array();
var command = "Stop"; var panel = new Array('0','Back','Front','Front','Back','Front','Back','Front','Back');
var quadrant = new Array(); var originalSize = 50;
var WindowWidth = 360; var WindowWidthHalf = WindowWidth/2; var sTime=0; var s1=0; var scrollSpeed;
var myX, myY;
function myMove(evt) {
if (window.event){myX = event.clientX;myY = event.clientY;}
else{myX = evt.clientX;myY = evt.clientY;}
}
document.onmousemove = myMove;
if (!window.event) {document.captureEvents(Event.MOUSEMOVE);}
function iScrollStop(){
sTime = sTime - 10;
document.getElementById('I_CONTROLS').innerHTML = sTime + ", " + scrollSpeed;
if(sTime<=0) command = "Stop";
else setTimeout(function(){iScrollStop()},10);
}
function iScrollPause(){
setTimeout(function(){this.checkPause()},100);
this.checkPause = function(){if(s1>sTime){command="Stop"; sTime=0; s1=0;}}
}
var iInitialX; //var d='Up';
function iScrollListen(d){
if(d=='Down'){ iInitialX = myX; setTimeout(function(){iScrollListen('Up')},90); iScrollPause();
}else if(d=='Up'){
var spinDirection = 'Right';
var iDifference = myX - iInitialX; if(iDifference < 0){ spinDirection = 'Left'; iDifference = Math.abs(iDifference);}
if (command!=spinDirection){sTime=0;s1=0;} var doScroll=0; if(command=='Stop') doScroll=1;
command = spinDirection; s1=sTime; sTime+=(iDifference*15); if(s1<=0)iScrollStop();
if(doScroll==1) iScroll();
}
}
function iScrollControl(c){command = c; if((c=='Left')||(c=='Right')) iScroll();}
function iScroll(){
scrollSpeed=(sTime<=1)? 1 : Math.ceil(sTime/1000);
if(scrollSpeed>=10)scrollSpeed=10;
scrollSpeed = 15 - scrollSpeed;
if(command=='Left') pixelDirection=2;
else if(command=='Right') pixelDirection=(0-2);
pixelDirectionNeg = (0-pixelDirection);
for(i=1;i<=objectCount;i++){
iObj = document.getElementById("iObject" + i);
pixel[i] = iObj.offsetLeft;
if((pixel[i]>=WindowWidthHalf)&&(pixel[i]<=WindowWidth)){
if(panel[i]=="Front") quadrant[i] = 4;
else quadrant[i] = 3;
}
if((pixel[i]>=0)&&(pixel[i]<=WindowWidthHalf)){
if(panel[i]=="Front") quadrant[i] = 1;
else quadrant[i] = 2;
}
if(quadrant[i]==1){
iObj.style.left = pixel[i]-pixelDirection;
size[i] = (pixel[i]-pixelDirection)*(1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirection<=0){quadrant[i]=2; panel[i]='Back';}
if(pixel[i]-pixelDirection>=WindowWidthHalf){quadrant[i]=4; panel[i]='Front';}
}
if(quadrant[i]==2){
iObj.style.left = pixel[i]-pixelDirectionNeg;
size[i] = (pixel[i]-pixelDirectionNeg)*(-1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirectionNeg<=0){quadrant[i]=1; panel[i]='Front';}
if(pixel[i]-pixelDirectionNeg>=WindowWidthHalf){quadrant[i]=3; panel[i]='Back';}
}
if(quadrant[i]==3){
iObj.style.left = pixel[i]-pixelDirectionNeg;
size[i] = (WindowWidth-(pixel[i]-pixelDirectionNeg))*(-1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirectionNeg<=WindowWidthHalf){quadrant[i]=2; panel[i]='Back';}
if(pixel[i]-pixelDirectionNeg>=WindowWidth){quadrant[i]=4; panel[i]='Front';}
}
if(quadrant[i]==4){
iObj.style.left = pixel[i]-pixelDirection;
size[i] = (WindowWidth-(pixel[i]-pixelDirection))*(1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirection<=WindowWidthHalf){quadrant[i]=1; panel[i]='Front';}
if(pixel[i]-pixelDirection>=WindowWidth){quadrant[i]=3; panel[i]='Back';}
}
}
if((command=='Left')||(command=='Right')) setTimeout(function(){iScroll()},scrollSpeed);
}
function Attribute(iObj,s){
iObj.style.width = s; iObj.style.height = s; iObj.style.top='50%'; iObj.style.marginTop = (0-(s/2))+"px"; iObj.style.zIndex = s;
}
</script>
I don't know what may or may not be relevant to you, so I included the entire script. If you want you could ignore the longest function,
iScroll()

#RyanStortz. Try to register events in this maner:
var isMouseCaptured=false;
function i_boundary_mousedown(ev) {
isMouseCaptured=true;
iScrollListen("Down");
}
function doc_mousemove(ev) {
if(isMouseCaptured) {
ev=ev||event;
myX=ev.clientX;
myY=ev.clientY;
}
}
function doc_mouseup(ev) {
if(isMouseCaptured) {
isMouseCaptured=false;
ev=ev||event;
myX=ev.clientX;
myY=ev.clientY;
}
}
var i_boundaryObj=document.getElementById('I_BOUNDARY');
if(window.addEventListener) {
i_boundaryObj.addEventListener('mousedown',i_boundary_mousedown,false);
document.addEventListener('mousemove',doc_mousemove,false);
document.addEventListener('mouseup',doc_mouseup,false)
}
else if(window.attachEvent) {
i_boundaryObj.attachEvent('onmousedown',i_boundary_mousedown)
document.attachEvent('onmousemove',doc_mousemove);
document.attachEvent('onmouseup',doc_mouseup)
}
else ;//
Add for DIV with class "I_BOUNDARY" id attribute "I_BOUNDARY" and remove onmousedown attribute.