On the second attempt, Firefox is able to drag the div element smoothly by itself

I have created a slider resembling volume controls for players using jQuery. However, I am facing an issue ONLY IN FIREFOX. When I drag the slider for the second time, the browser itself drags the div as if dragging images. The problem disappears if I click on an empty area after the first drag and then try dragging the slider again. What could be causing this issue?

EDIT :

http://codepen.io/anon/pen/bjChB

HTML:

<div id="btn_container">

    <div id="button"></div>

</div>

CSS:

div#btn_container{
width:200px;
height:60px;
position:absolute;
background:red;
margin:auto;
right:0;left:0;top:0;bottom:0;  
}
div#button{
width:60px;
height:60px;
background:blue;
position:absolute;
left:0px;top:0px;   
}

jQuery:

$(document).ready(function() {
    var pressed = false;
    var $this;
    var x;
    $("div#button").mousedown(function(e){
        pressed = true;
        $this = $(this);
        var offset = $this.offset();
        var inside = e.pageX - offset.left;
        $(document).mousemove(function(e){
            if(pressed){
                var parentOffset = $this.parent().offset();
                x = e.pageX - parentOffset.left;
                if( x <= $this.parent().width() - $this.width() + inside && x >= 0 + inside)
                    $this.css({"left":x - inside});
            }
        });
    });
    $(document).mouseup(function(){
        if(pressed){
            if( x > $this.parent().width() - $this.width() - 30)
                $this.animate({"left":$this.parent().width() - $this.width()} , 50);

            pressed = false;
        }
    });

});

Answer №1

If you include e.preventDefault(); in your mousedown event, it will help to stop the unwanted behavior that firefox is attempting to perform.

Answer №2

Implementing the following CSS properties successfully stopped the div from being selectable, effectively resolving the issue:

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the image title in a separate div when hovering over it

As a beginner in jQuery, I am working on creating a gallery that displays the title attribute of an image in a separate div when hovering over the image. The title should disappear when the mouse moves away from the image. I hope that explanation is clear! ...

Developing a two-dimensional JavaScript array using an AJAX PHP request

I've been working with a MySQL table that stores image data. My goal is to extract this image data and store it in a JavaScript array. The fields I need for the array are "image_ref" and "image_name." To achieve this, I understand that I'll nee ...

Receiving a "Maximum call exceeded" error when using Vue.js router guards for the beforeEach hook

As I work on my Firebase-VueJS app, I am implementing basic security rules with router guards. In my main.js file, I have added the following code to handle permissions based on the user's authentication status. However, I encounter an error 'vue ...

Press the button to reveal the table - jQuery/JavaScript

Can you please provide guidance on how to hide the inner HTML table when the page loads and then display the table with results only after clicking the search button? I do not want to show an empty table. Below is the code snippet that I have tried: Howev ...

Providing Arguments to a Named Function Using Dependency Injection

I am currently working on an Angular app where I am passing a named function into a controller. The issue arises when I try to inject a provider into that controller for use, as I receive a TypeError: object is not a function in the console. My question i ...

Leveraging the outcome of a Promise within webpack's configuration file

Currently, I am facing a challenge in accessing a Promise which is essentially an array of file paths created within recursive.js. This script navigates through my directories and organizes my stylesheets. The main issue arises when trying to utilize this ...

Ways to reset the selected option when the user chooses a different option using either Jquery or Vanilla JavaScript

I am currently working on a functionality to clear the select option when a different brand is selected. The issue I am facing is that when I choose another brand, the models from the previous selection are not cleared out. For example, if I select BMW, I ...

Incorporating the unshift method in JavaScript: A Step-by-

I'm looking to create a new function with the following requirements: Function add(arr,...newVal){ } array = [1,2,3]; add(array,0) console.log(array); //I want this to output [0,1,2,3] I tried creating the function similar to push like this: ...

What is the best way to ensure that the div from the header file remains fixed directly above the fixed div from another file?

This is the header section that I want to keep fixed within the "header" div. <div id="header" style="display:block;"> <table style="width:100%"> <tr> <td class="col-sm-6" style="background-color:lavender;"><a href ...

What causes the variation in the appearance of the navigation bar across different pages?

I'm struggling to understand why the Navigation bar has extra padding or margin on top only on certain pages, while it looks fine on the Homepage. I've dedicated countless hours to this issue and I am feeling completely frustrated. If you' ...

Validating PHP code to ensure that either one of two form fields is filled in

I have been working on a website that utilizes javascript for various functions and PHP-based Captcha code to validate form fields. Everything is functioning well, but the form can still be submitted even if none of the fields are completed. I require at ...

Wrap text elegantly around your images with Flex Mobile

Looking to develop a component for a Flex Mobile app that will allow me to have text wrapped around an image, similar to what you see in articles or blogs. In HTML, this can be achieved with a tag like: <image align='right' /> associated t ...

Do not forget to implement Array.find when working with the useSWR hook in Next.js

I have the following code: const fetcher = (url: string) => axios.get(url).then((r) => r.data); const {data} = useSWR("api/data", fetcher, {refreshInterval: 10000}) console.log(data.find(d => d.id === "123")) The API path is ...

Can a gulpfile be written in ES6 syntax?

Question: Is there a way to write my gulp file in ES6 to utilize import instead of require, and use => syntax in place of function()? I have the option to use io.js or any version of node.js. gulpfile.js: import gulp from "./node_modules/gulp/index.j ...

Unable to implement a design on a button during its click event

I successfully implemented a dynamic button in HTML5 and Javascript. The button has a click event assigned to it, so when clicked, its content and background color are supposed to change. However, while the content changes correctly, the background color d ...

Transforming the button behavior with jQuery

I have encountered a situation where I am working with code in Twig. {% if followsId == null %} <div id="followUser" class="follow" data-userId="{{ profileUserData.id }}" data-currentUserId="{{ loggedUserData.id }}" data-action="follow"> ...

How can constants from components be defined in multiple ways when imported? (specifically in React)

Although I have a good understanding of React and Javascript, I struggle to articulate my question effectively. I will provide examples in the hopes that someone with more expertise in the field can assist me. For instance, when using import { useRef, use ...

Iframes are not compatible with JQuery UI dialogs

After attempting to open a URL within an Iframe in a JQuery dialog box, I encountered the following issue: Here is the code snippet that I used: http://pastebin.com/Wqf0mGhZ I am looking for a solution to make sure that the dialog displays all of the con ...

Internet Explorer Fails to Display CSS Background Images

Requesting assistance, The issue I am facing is that the background image is not displaying in Internet Explorer, although it appears perfectly fine in Safari. I have conducted thorough checks with W3C CSS validation and HTML validation, confirming that ...

Unable to display image using jQuery load() function on an HTML page

I have implemented the following code snippet to load an HTML page within a div: $("#htmlViewer").load("conversion_test/to_convert_3264/"+getPageName(pageCount)+".htm", function(response, status, xhr) { if (status == "error") { ...