Question: SketchUp Web Exporter funky in Firefox

[andreyman3d2k]

Hi,

I am using the Google SketchUp Web Exporter to create an HTML page of my model. It works great, except one thing. In Firefox, after the first click/drag (which spins the model fine), any subsequent attempt to click/drag the model results in the mouse being 'captured' by the model and not dragging when the mouse button is down, only up -- when it's down I get the ghostbusters sign. This does not happen in either Chrome or IE, so I think it has to do with the way FF is handling the Javascript. Would appreciate any help, as my JS is very weak.

Thank you in advance for any help!

Andrey

Here is the code that the exporter generates:

<SCRIPT>
// list of image filenames
var imageFileNameArray = new Array(
'Box3DModelv1x6For3DwebmodelmodifiedB_image0.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image1.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image2.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image3.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image4.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image5.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image6.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image7.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image8.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image9.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image10.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image11.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image12.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image13.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image14.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image15.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image16.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image17.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image18.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image19.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image20.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image21.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image22.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image23.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image24.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image25.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image26.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image27.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image28.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image29.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image30.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image31.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image32.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image33.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image34.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image35.jpg',
'Box3DModelv1x6For3DwebmodelmodifiedB_image35.jpg');

// list of html image elements
var sketchUpImageArray = new Array();
var currentPos = 0;
var addToPos = 0;
var imageCount = 0;

var sketchUpObj = null;

var mouseXOrig;
var mouseX = 0;
var mouseY = 0;
var mouseIsDown = false;

var title = null;

function init() {
title = document.getElementById('title');
sketchUpObj = document.getElementById('sketchUpObj');
imageCount = imageFileNameArray.length;

// load up the imageArray with the sketchUp images
//var left = sketchUpObj.offsetLeft + 400;
//var top = sketchUpObj.offsetTop + 100;
for (i = 0; i < imageCount; i++) {
sketchUpImageArray[i] = new Image();
sketchUpImageArray[i].src = imageFileNameArray[i];
sketchUpImageArray[i].className = 'sketchUpImage';
//sketchUpImageArray[i].style.left = left + "px";
// sketchUpImageArray[i].style.top = top + "px";
hide(sketchUpImageArray[i]);
document.getElementById('sketchUpObj').appendChild(sketchUpImageArray[i]);
}

//create a transparent sheet over the images so that the mouseevents go it it
var sheet = document.createElement("DIV");
document.getElementById('sketchUpObj').appendChild(sheet);
sheet.id = "sheet";
//sheet.style.left = left + "px";
//sheet.style.top = top + "px";
sheet.onmousemove = handleRotate;
sheet.onmousedown = handleMouseDown;
sheet.onmouseup = handleMouseUp;
sheet.onmouseout = handleMouseUp;
setOpacity(sheet, 0.0);

currentPos = imageCount-1
show(sketchUpImageArray[currentPos]);
}

/**

• When the mouse goes down, start rotating the image
• @param {Event} mousedown event
  */
  function handleMouseDown(e) {
  if (!e) { e = window.event; }
  getMouseXY(e);
  mouseXOrig = mouseX;
  addToPos = 0;
  mouseIsDown = true;
  }

/**

• When the mouse goes up, stop rotating the image
• @param {Event} mouseup event
  */
  function handleMouseUp(e) {
  mouseIsDown = false;
  currentPos += addToPos;
  }

/**

• Divide the width of the html object by the number of images.
• As the mouse moves over the html object, show the appropriate image
• giving the illusion that the user is spinning the object.
• @param {Event} mousemove event
  */
  function handleRotate(e) {
  if (!e) { e = window.event; }

if (!mouseIsDown) {
return;
}

getMouseXY(e);

// STEP is how many pixels equals an image swap
var STEP = 10;
var width = sketchUpObj.offsetWidth;
var delta = mouseX - mouseXOrig;

addToPos = Math.floor(delta/STEP);

//handle wrap around
var wrap = (currentPos + addToPos) % imageCount;
var newPos = (wrap < 0) ? imageCount + wrap : Math.abs(wrap);

//hide everyone except the image we are over
for (var i = 0; i < imageCount; i++) {
hide(sketchUpImageArray[i]);
}

show(sketchUpImageArray[newPos]);

return false;
}

/**

• Get the mouse position from the event e
• @param {Event} e mouse move event
  */
  function getMouseXY(e) {
  if (e.pageX) {
  mouseX = e.pageX;
  mouseY = e.pageY;
  } else {
  mouseX = event.clientX + document.body.scrollLeft;
  mouseY = event.clientY + document.body.scrollTop;
  }

if (mouseX < 0){mouseX = 0;}
if (mouseY < 0){mouseY = 0;}
}

/**

• Get the left coordinate of the element
  */
  function getLeft(element) {
  var x = 0;
  while (element) {
  x += element.offsetLeft;
  element = element.offsetParent;
  }

return x;
};

function setOpacity(element, opacity) {
element.style.filter = "alpha(opacity=" + Math.round(opacity*100) + ")";
element.style.opacity = opacity;
}

/**

• Hides the HTML element.
• @param element HTMLElement the element we hide
  */
  function hide(element) {
  element.style.display = 'none';
  }

/**

• show the HTML element.
• @param element HTMLElement the element we want to see.
  */
  function show(element) {
  element.style.display = 'block';
  }

</SCRIPT>

[andreyman3d2k]

After an epic journey, I found the answer!

the line:

-moz-user-select: none;

Must be added to the CSS of #sheet

Andrey