HTML/Javascript glitch!

Posted on 2011-04-20
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
    LVL 6

    Expert Comment

    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.
    LVL 6

    Author Comment

    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.

    LVL 6

    Accepted Solution

    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!

    LVL 6

    Author Closing Comment

    Figured it out.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Read about why website design really matters in today's demanding market.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    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…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    746 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

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now