Turn off the perpetual active mode

Question

Turn off the perpetual active mode

I have a situation where a link maintains its active state after being dragged and released. This is causing an issue that I need to address.

For example, you can see the problem here: http://jsfiddle.net/Ek43k/3/

<a href="javascript:void(0);" id="foo" >Drag me</a>

To fix this issue in Internet Explorer and Firefox, I am trying to figure out how to prevent the link from staying in its active state after being dragged and released. Any suggestions on how to achieve this?

javascript css

Answer 1

Answer №1

This bug has been identified in Firefox and detailed information can be found at https://bugzilla.mozilla.org/show_bug.cgi?id=193321

The bug has shown inconsistent behavior with various reports, indicating a non-standard and browser-specific issue.

An effective workaround involves utilizing JavaScript to address the problem. However, direct influence on pseudo-selector states is limited unless operating in privileged mode (e.g., within an extension). As a result, adding or removing a class name is recommended:

<a href="#" onmousedown="this.className = '';" ondragend="this.className = 'inactive';" id="foo" >Drag me</a>

Experiment with this method using: http://jsfiddle.net/frsRS/

If operating in privileged mode, consider employing the technique utilized by Firebug's CSS Panel using inIDOMUtils.setContentState

var node = document.getElementById("foo");
var domUtil = Components.classes["@mozilla.org/inspector/dom-utils;1"].getService(Components.interfaces.inIDOMUtils);
domUtil.setContentState(node, 1);

Edit

A more advanced implementation for binding cross-browser delegates instead of inline JavaScript (demonstrative purpose only) is provided below:

function addEvent(ele, evnt, funct) {
  if (ele.addEventListener) // W3C
    return ele.addEventListener(evnt,funct,false);
  else if (ele.attachEvent)  // IE
    return ele.attachEvent("on"+evnt,funct);
}
addEvent(document.body, 'mousedown', function (e) {        
    if(e.target.tagName == 'A') e.target.style.color = '';
});
addEvent(document.body, 'dragend', function (e) {
    if(e.target.tagName == 'A') e.target.style.color = 'blue';
});

Try it here: http://jsfiddle.net/HYJCQ/

Incorporating the element's style rather than a CSS class allows flexibility for alternative approaches.

Another strategy, proposed by Supr, involves removing and re-adding elements from the DOM immediately. This can be achieved through delegation as demonstrated here:

function addEvent(ele, evnt, funct) {
  if (ele.addEventListener) // W3C
    return ele.addEventListener(evnt,funct,false);
  else if (ele.attachEvent)  // IE
    return ele.attachEvent("on"+evnt,funct);
}
addEvent(document.body, 'dragend', function (e) {
    if(e.target.tagName != 'A') return;
    var parent = e.target.parentNode;
    var sib = e.target.nextSibling;
    parent.insertBefore(
        parent.removeChild(e.target),
        sib
    );
});

Test this method here: http://jsfiddle.net/ymPfH/

Both delegate-based techniques offer improved efficiency compared to looping through elements, enabling dynamic application to any a tags added post-load similar to jQuery's live or on methods.

Documentation

Bugzilla entry - https://bugzilla.mozilla.org/show_bug.cgi?id=193321
Drag and Drop on MDN (ondragend) - https://developer.mozilla.org/en-US/docs/Drag_and_Drop
inIDOMUtils - https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/inIDOMUtils

Answer 2

This bug has been identified in Firefox and detailed information can be found at https://bugzilla.mozilla.org/show_bug.cgi?id=193321

The bug has shown inconsistent behavior with various reports, indicating a non-standard and browser-specific issue.

An effective workaround involves utilizing JavaScript to address the problem. However, direct influence on pseudo-selector states is limited unless operating in privileged mode (e.g., within an extension). As a result, adding or removing a class name is recommended:

<a href="#" onmousedown="this.className = '';" ondragend="this.className = 'inactive';" id="foo" >Drag me</a>

Experiment with this method using: http://jsfiddle.net/frsRS/

If operating in privileged mode, consider employing the technique utilized by Firebug's CSS Panel using inIDOMUtils.setContentState

var node = document.getElementById("foo");
var domUtil = Components.classes["@mozilla.org/inspector/dom-utils;1"].getService(Components.interfaces.inIDOMUtils);
domUtil.setContentState(node, 1);

Edit

A more advanced implementation for binding cross-browser delegates instead of inline JavaScript (demonstrative purpose only) is provided below:

function addEvent(ele, evnt, funct) {
  if (ele.addEventListener) // W3C
    return ele.addEventListener(evnt,funct,false);
  else if (ele.attachEvent)  // IE
    return ele.attachEvent("on"+evnt,funct);
}
addEvent(document.body, 'mousedown', function (e) {        
    if(e.target.tagName == 'A') e.target.style.color = '';
});
addEvent(document.body, 'dragend', function (e) {
    if(e.target.tagName == 'A') e.target.style.color = 'blue';
});

Try it here: http://jsfiddle.net/HYJCQ/

Incorporating the element's style rather than a CSS class allows flexibility for alternative approaches.

Another strategy, proposed by Supr, involves removing and re-adding elements from the DOM immediately. This can be achieved through delegation as demonstrated here:

function addEvent(ele, evnt, funct) {
  if (ele.addEventListener) // W3C
    return ele.addEventListener(evnt,funct,false);
  else if (ele.attachEvent)  // IE
    return ele.attachEvent("on"+evnt,funct);
}
addEvent(document.body, 'dragend', function (e) {
    if(e.target.tagName != 'A') return;
    var parent = e.target.parentNode;
    var sib = e.target.nextSibling;
    parent.insertBefore(
        parent.removeChild(e.target),
        sib
    );
});

Test this method here: http://jsfiddle.net/ymPfH/

Both delegate-based techniques offer improved efficiency compared to looping through elements, enabling dynamic application to any a tags added post-load similar to jQuery's live or on methods.

Documentation

Bugzilla entry - https://bugzilla.mozilla.org/show_bug.cgi?id=193321
Drag and Drop on MDN (ondragend) - https://developer.mozilla.org/en-US/docs/Drag_and_Drop
inIDOMUtils - https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/inIDOMUtils

Answer 3

Answer №2

Unhook and hook back the link in the DOM tree to deactivate its active state. Perform this action when the dragging operation concludes and you've successfully accomplished it:

$('a').on('dragend',function(){
    var $this   = $(this),
        $parent = $this.parent(),
        $next   = $(this.nextSibling); // $.next() doesn't include text
    $this.detach().insertBefore($next);     
});

You don't need to modify your HTML or CSS or remove the :active pseudo-class. This method appears to function correctly in both Firefox and Internet Explorer.

Note: My experience with pure Javascript for DOM manipulation is limited, so the quality might not be perfect, but here is the code without jQuery available at this link:

(function(){
    var previousOnload = window.onload || function noop(){};

    window.onload = function (){

        // Execute any previously defined onload callbacks
        previousOnload();

        // Attach deactivator to each <a> element
        var elements = document.getElementsByTagName('a');
        for (var i=0; i<elements.length; i++){
            elements[i].ondragend = deactivate;
        }

        function deactivate(){
            var parent   = this.parentNode,
                position = this.nextSibling;
            parent.removeChild(this);
            // Using insertBefore instead of appendChild ensures correct positioning among siblings
            parent.insertBefore(this, position);
        }
    };

})();

I addressed some potential issues to make it easy to implement. Tested in Opera, Chrome, Firefox, and Internet Explorer.

Update: Building on Chris' suggestion, another approach to implement the fix is by directly using the ondragend attribute to trigger the deactivate function (not verified):

<head>
    <script>
        function deactivate(){
            var parent   = this.parentNode,
                position = this.nextSibling;
            parent.removeChild(this);
            // Use insertBefore instead of appendChild for accurate sibling placement
            parent.insertBefore(this, position);
        }
    </script>
</head>
<body>
    <a href="#" ondragend="deactivate()">Drag me</a>
<body>

The downside is that each link needs the ondragend attribute specified alongside the javascript function manually. It's a matter of personal preference.

Final (?) Update: Refer to the comments for delegate/live versions of these solutions as well as Chris' response.

Answer 4

Unhook and hook back the link in the DOM tree to deactivate its active state. Perform this action when the dragging operation concludes and you've successfully accomplished it:

$('a').on('dragend',function(){
    var $this   = $(this),
        $parent = $this.parent(),
        $next   = $(this.nextSibling); // $.next() doesn't include text
    $this.detach().insertBefore($next);     
});

You don't need to modify your HTML or CSS or remove the :active pseudo-class. This method appears to function correctly in both Firefox and Internet Explorer.

Note: My experience with pure Javascript for DOM manipulation is limited, so the quality might not be perfect, but here is the code without jQuery available at this link:

(function(){
    var previousOnload = window.onload || function noop(){};

    window.onload = function (){

        // Execute any previously defined onload callbacks
        previousOnload();

        // Attach deactivator to each <a> element
        var elements = document.getElementsByTagName('a');
        for (var i=0; i<elements.length; i++){
            elements[i].ondragend = deactivate;
        }

        function deactivate(){
            var parent   = this.parentNode,
                position = this.nextSibling;
            parent.removeChild(this);
            // Using insertBefore instead of appendChild ensures correct positioning among siblings
            parent.insertBefore(this, position);
        }
    };

})();

I addressed some potential issues to make it easy to implement. Tested in Opera, Chrome, Firefox, and Internet Explorer.

Update: Building on Chris' suggestion, another approach to implement the fix is by directly using the ondragend attribute to trigger the deactivate function (not verified):

<head>
    <script>
        function deactivate(){
            var parent   = this.parentNode,
                position = this.nextSibling;
            parent.removeChild(this);
            // Use insertBefore instead of appendChild for accurate sibling placement
            parent.insertBefore(this, position);
        }
    </script>
</head>
<body>
    <a href="#" ondragend="deactivate()">Drag me</a>
<body>

The downside is that each link needs the ondragend attribute specified alongside the javascript function manually. It's a matter of personal preference.

Final (?) Update: Refer to the comments for delegate/live versions of these solutions as well as Chris' response.

Answer 5

Answer №3

For those considering using jQuery, the following code seems to be effective in Firefox: http://jsfiddle.net/Ek43k/89/

HTML

<a href="#" id="foo" class="inactive" >Drag me</a>

CSS

.inactive:active{color:red;}
.active:active{color:blue;}

jQuery

$('body').on('mousedown', 'a.inactive', function() {
    $(this).on('mousemove', function() {
        $(this).removeClass().addClass('active');
    });
});

$('body').on('mousedown', 'a.active', function() {
    $(this).removeClass().addClass('inactive');
});

Answer 6

For those considering using jQuery, the following code seems to be effective in Firefox: http://jsfiddle.net/Ek43k/89/

HTML

<a href="#" id="foo" class="inactive" >Drag me</a>

CSS

.inactive:active{color:red;}
.active:active{color:blue;}

jQuery

$('body').on('mousedown', 'a.inactive', function() {
    $(this).on('mousemove', function() {
        $(this).removeClass().addClass('active');
    });
});

$('body').on('mousedown', 'a.active', function() {
    $(this).removeClass().addClass('inactive');
});

Answer 7

Answer №4

To achieve the desired effect, simply apply the following CSS code:

#foo:hover {
    color: green;
}

Answer 8

To achieve the desired effect, simply apply the following CSS code:

#foo:hover {
    color: green;
}

Turn off the perpetual active mode

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Rearrange HTML list items automatically according to changes in numeric sort order

Could the problem with inset box-shadow and large border-radius on one side be related to Chrome?

Gain access to PowerBI reports effortlessly without the need to input any credentials

Using AJAX and PHP to dynamically fill HTML drop-down menus

Typescript: Ways to fix the error 'rxjs/Rx does not have any exported member 'SubscriptionLike'

Adjust the size of an image within a canvas while maintaining its resolution

Selenium - Activating a flash button

wrap <td> data in a link with vue depending on certain conditions

Steps to prevent uib-timepicker from automatically adjusting time based on the Browser Timezone

The state change in React-Redux does not trigger a re-render

CSS: dealing with content that spills outside of a div

Angular 4: Utilizing reactive forms for dynamic addition and removal of elements in a string array

Is it possible to assign default values to optional properties in JavaScript?

What is the process of retrieving the return value after creating data in Firestore

Is there a way to dynamically set the active panel of a JQuery Accordion when making a call?

Is it possible to convert an object and/or a nested array with objects into a JSON string without relying on JSON.stringify?

Unraveling nested JSON structures with varying formats in Javascript or Jquery: Step-by-step guide

Pressing the "Enter" key in a .Net WinForm Browser Control

What could be causing the issue with retrieving HTTP requests in Nest.js even after configuring the controller?

React Router will not remount the component when using this.context.router.push