Turn off the text cursor when inside a specific div block

Check out these two fiddles: fiddle 1 and fiddle 2

The only variation between the two is a single CSS property in .category

-webkit-user-select: none;

In fiddle 2, when you click and drag an element, the cursor remains as a pointer instead of changing to a text cursor. I want this behavior!

Surprisingly, when running the EXACT same HTML, CSS, and JS outside of JSFiddle in my browser, it reverts back to behaving like fiddle 1. Why does this happen?

I was under the impression that JSFiddle mirrors the properties of the user's browser, so I'm puzzled why fiddle 2 works how I want it to on the platform but not when directly run in a browser.

Any insights? Or perhaps solutions to maintain the pointer cursor consistently?

javascriptjqueryhtmlcss

Answer №1

Upon reviewing the origins of the 3rd and 4th edits, it appears that your

-moz-user-select

was not present in the 3rd edit but became visible in the 4th edit. Could this be a miscalculation on your part?

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

Tips for utilizing SeleniumRC within JUnit framework for elements with dynamically changing IDs

I'm currently in the process of automating a workflow and I need to click on a link within a table row. The challenge is that all links within the rows share the same element ID, and the source code has a JavaScript code snippet like this: ("Element I ...

cssseleniumelementxpath

Navigating the intricacies of retrieving network errors within an AngularJS application requires a deep

I've encountered the following code snippet in abcd.js: $http({url: 'some url' , method: 'POST', data: , headers: {} }).then(function(response)) { ............. }, function error(response) { .............. }) When an error occurs ...

javascriptphpangularjs

Exploring deeply nested arrays of objects until a specific condition is satisfied

My array is structured in a nested format as shown below. const tree = { "id": 1, "name": "mainOrgName", "children": [ { "id": 10, "name": "East Region", "children": [ ...

javascriptarraystypescriptrecursioncallback

Display a progress bar that shows completion based on the maximum value supplied

I successfully created a progress bar using HTML, CSS, and Javascript. It functions perfectly up to a provided value of 100. However, if a value higher than 100 is given, the progress completes but the value continues to change until it reaches the maximum ...

javascripthtmlcssprogress-bar

Determine whether AngularJS directive method binding automatically defaults to angular.noop

In my directive, I am passing a function to a plugin which will use it with a specified value. Let's simplify things by ignoring data changes: angular.module('some.directives', []) .directive('myDirective', [, function () { ...

javascriptangularjsangularjs-directiveangularjs-scope

A guide on creating a clickable polygon in Vue.js using Konva

Is there a way to create an interactive polygon in Vue Konva where I can set each corner with a click? I haven't been able to find any resources other than the v-polygon which only creates predefined polygons. ...

javascripthtmlvue.jskonvajsvue-konva

Why dashes are incompatible with inner <span> elements?

Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like &shy;. https://i.sstatic.net/JGl1M.png The Code (sandbox: https://codepen.io/anon/pen/ayzxpM): ...

csscss-hyphens

Python Selenium: Troubleshooting the get_elements method not retrieving li items within ul tags

I am facing an issue while trying to retrieve li items within a ul element using the following code: driver.get('https://migroskurumsal.com/magazalarimiz/') try: select = WebDriverWait(driver, 10).until( EC.presence_of_element_locate ...

pythonhtmlselenium

Transform a Javascript string variable into plain text within a pre-existing text document

Currently, I am storing user input from an HTML input as a JavaScript variable. The objective is to convert this data into plain text and save it in an existing text file. Essentially, each time the user provides input, it should be converted to plaintext ...

javascripthtml

Sending specific names as properties

Looking to streamline my repetitive form inputs by abstracting them into a component, I want the following functionality: <InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType"> The desired output wo ...

javascriptvue.js

Learn how to dynamically insert a source for an IMG element in Laravel using Blade by utilizing a variable returned from a view

I have been working on a website that displays various products and I utilize Blade for creating dynamic product pages. Here is an example of how I do it: Route::get('/products/{product}', function ($product) { return view('products/pr ...

phphtmllaravel-blade

Neglecting to utilize the document object within a React component results in the error "document is not defined."

I am utilizing browser detection code within a React component import React, { useState } from 'react' const BrowserDetectionComponent = ({props}) => { const isIE = document.documentMode; return ( <div> Custom browser s ...

javascriptreactjsnext.js

What prevents variables defined in outer blocks from being accessed by nested describe() blocks?

In my real code, I encountered a problem that I wanted to demonstrate with a simple example. The code below functions properly. I defined a variable in the root describe() block that can be accessed in the it() blocks of nested describe()s. describe(&apo ...

javascriptjasmine

When incorporating Typescript into HTML, the text does not appear in bold as expected

Issue with bold functionality in Typescript Hey there, I am currently involved in an Angular project and I came across a problem with a function in a Typescript file that is supposed to bold a specific segment of text formatText() { ......... ...

javascripthtmlangulartypescript

Discovering Constraints on File Size: API Response Encoded in Base64 Visible Within 1 Megabyte, Overcoming Rendering Obstacles

Currently, I am encountering a hurdle in my Next.js application when trying to upload images larger than 1 MB. While the app works seamlessly with smaller images, it faces challenges when dealing with larger ones. Initially, there was a browser console er ...

javascriptreactjsnext.jsbase64

the jquery cycle plugin is not meeting expectations

Recently, I set up a slideshow on my website using the jquery cycle plugin. However, I am encountering an issue where the first image is displayed outside of its container before the rest of the images display properly. This delay in loading the first imag ...

jquerypluginscycle

What is the procedure for obtaining the factory of an element in situations where the element's class is not

Currently, I am facing a challenge with React where I have a single React element and I want to generate additional elements with the same class. The issue is that I am not aware of the class name, only the instance of the element. When using React.create ...

javascriptreactjs

Unable to input text in Vue.js text field

Recently, I encountered an issue while working on a new form using Laravel/Vue to input an address. Strangely, I found myself unable to type anything in the text input fields. Despite trying various solutions and seeking help from Google, the problem persi ...

htmlcssvue.js

Struggling with setting up a search bar for infinite scrolling content

After dedicating a significant amount of time to solving the puzzle of integrating infinite scroll with a search bar in Angular, I encountered an issue. I am currently using Angular 9 and ngx-infinite-scroll for achieving infinity scrolling functionality. ...

javascripthtmlangulartypescriptinfinite-scroll

Error: The function m.easing[this.easing] is not defined

I have been working on creating anchor link scrolling and tooltip display using bootstrap, but I am encountering an issue. $(window).scroll(function(){ if ($(window).scrollTop() >= 100) { $('#header').addClass('fixed'); ...

javascriptjquerycsstwitter-bootstrap