HTML/Javascript glitch!

Posted on 2011-04-20
Medium Priority
Last Modified: 2012-06-27

I think this one may be simple for someone who knows some JS:

I have an image on a web page, and a script that basically swaps a new image in whenever you drag the image either left or right, to make it look like the object in the image is spinning. Easier to see than to describe:


It works great, except that that in FireFox when you click and drag it "captures" the mouse, so when you unclick it keeps shifting the image, and when you drag the mouse out of bounds and back onto the image, and click  -- it snaps the image to a different spot. (If you just play with it for 2 seconds you will see what I mean).

This only happens in firefox, not in IE or Chrome.

I am wondering if anyone has a suggestion as to what the issue might be and how to fix?

All the code (JS/CSS/HTML) is in the source of the page.

Thank you very much in advance for any help!

Question by:andreyman3d2k
  • 3

Expert Comment

ID: 35439344
I've only taken a quick look - have time constraints atm.

I suggest you take it through the process I was just doing of running the code through JSLint, and perhaps Firefox + Firebug + (your choice of code auditing).

My experience has been when your code is clean, and no errors are popping up and a quirk occurs in only 1 or 2 browsers - run it through JSLint, and it leads to things behaving.

Author Comment

ID: 35441630
Thanks for the reply. I tried to use JSLint as you suggested -- it brought up a bunch of errors, but I am not sure what they mean/how to fix them. My JS knowledge is very limited. I didn't write this code, it was automatically generated by another program.


Accepted Solution

andreyman3d2k earned 0 total points
ID: 35444037
Figured it out (from some prehistoric forum post god knows where). Had to add the line:

-moz-user-select: none;

to CSS of #sheet

Good grief.

Thanks for your input!


Author Closing Comment

ID: 35465261
Figured it out.

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question