Utilize jQuery to activate an event listener that prevents the default action and toggles an active class for the first

Question

Utilize jQuery to activate an event listener that prevents the default action and toggles an active class for the first

Currently facing two minor issues that I am struggling to resolve:

When a thumbnail is clicked on the page, it redirects to a different page. However, when the "Delete thumbs" button is clicked, the clicking action is disabled using prevent default. The problem arises when the "done" button is clicked as the thumbnails remain unclickable. I need to enable clicking after the "done" button is clicked.
The second issue is related to clicking the "delete thumbs" button, which allows for reordering of the thumbnails using jQueryUI sortable.

In my CSS, I have set an active class on the first-child element. I want the active class to be applied only to the first item in the list. If the first item is dragged out, the active class should be removed and the next item in the list should become active.

.gallery li a.active:first-child

Below is the demo code: http://jsfiddle.net/3E2Hg/73/

I would greatly appreciate any assistance with these issues. Thank you.

jquery html css jquery-ui jquery-ui-sortable

Answer 1

Answer №1

Hey there, for your initial inquiry, I've got the solution right here.

$(function cancelDeleteImages(){
    $(".cancelDeleteImages").click(function(event) {

        $('.cancelDeleteImages').hide(); 
        $('.deleteAllImages').show(); 

        $( "#sortable" ).sortable("disable");
        $('#sortable li a').unbind('click').click();
       // return true;
    });
});

Your second question is a bit unclear to me, could you please elaborate further?

AN ALTERNATE SOLUTION:

$( "#sortable" ).sortable({
            //Need to allow the user to be able to scrollover the thumbnails on device
            //delay: 900, // touch and hold to activate li being sortable
            //scroll: true, // allow user to scroll over thumbnails
            placeholder: "ui-state-highlight",

            stop: function(event, ui) {

           $('ul#sortable a.active').removeClass('active');
        $('ul#sortable a:first').addClass('active');
            }
        });

Try replacing your .sortable with the snippet above. It should do the trick!

Answer 2

Hey there, for your initial inquiry, I've got the solution right here.

$(function cancelDeleteImages(){
    $(".cancelDeleteImages").click(function(event) {

        $('.cancelDeleteImages').hide(); 
        $('.deleteAllImages').show(); 

        $( "#sortable" ).sortable("disable");
        $('#sortable li a').unbind('click').click();
       // return true;
    });
});

Your second question is a bit unclear to me, could you please elaborate further?

AN ALTERNATE SOLUTION:

$( "#sortable" ).sortable({
            //Need to allow the user to be able to scrollover the thumbnails on device
            //delay: 900, // touch and hold to activate li being sortable
            //scroll: true, // allow user to scroll over thumbnails
            placeholder: "ui-state-highlight",

            stop: function(event, ui) {

           $('ul#sortable a.active').removeClass('active');
        $('ul#sortable a:first').addClass('active');
            }
        });

Try replacing your .sortable with the snippet above. It should do the trick!

Answer 3

Answer №2

To tackle ISSUE 1 - utilize the flag for this DEMO FIDDLE

The implemented code is shown below:

var disonclick = false;

$(function deleteImage(){
    $(".deleteAllImages").click(function() {

        $('.deleteAllImages').hide();
        $('.cancelDeleteImages').show();

        //TASK: Prevent href from being clickable when in delete mode
        disonclick = true;
        $('#sortable li a').click(function(e){
            if(disonclick) e.preventDefault();
        });        
        //TASK: Toggle active class when first in the list (first li = active)

        $( "#sortable" ).sortable("enable");
        $( "#sortable" ).sortable({
            //Allow user to scroll over thumbnails on device
            placeholder: "ui-state-highlight"
        });
    });
});

$(function cancelDeleteImages(){
    $(".cancelDeleteImages").click(function() {
        $('.cancelDeleteImages').hide(); 
        $('.deleteAllImages').show(); 
        disonclick = false;
        $( "#sortable" ).sortable("disable");  
    });
});

Answer 4

To tackle ISSUE 1 - utilize the flag for this DEMO FIDDLE

The implemented code is shown below:

var disonclick = false;

$(function deleteImage(){
    $(".deleteAllImages").click(function() {

        $('.deleteAllImages').hide();
        $('.cancelDeleteImages').show();

        //TASK: Prevent href from being clickable when in delete mode
        disonclick = true;
        $('#sortable li a').click(function(e){
            if(disonclick) e.preventDefault();
        });        
        //TASK: Toggle active class when first in the list (first li = active)

        $( "#sortable" ).sortable("enable");
        $( "#sortable" ).sortable({
            //Allow user to scroll over thumbnails on device
            placeholder: "ui-state-highlight"
        });
    });
});

$(function cancelDeleteImages(){
    $(".cancelDeleteImages").click(function() {
        $('.cancelDeleteImages').hide(); 
        $('.deleteAllImages').show(); 
        disonclick = false;
        $( "#sortable" ).sortable("disable");  
    });
});

Answer 5

Answer №3

Utilize the jQuery.on() and jQuery.off() methods for event handling, also consider using the bind() and unbind() functions

To prevent the default click event:

$('#sortable li a').on("click",function() {
        return false;
    });

To re-enable the click event:

$('#sortable li a').off("click");

Check out this demo : http://jsfiddle.net/VZwV9/ for reference.

I hope this solution addresses your #1 concern!

Answer 6

Utilize the jQuery.on() and jQuery.off() methods for event handling, also consider using the bind() and unbind() functions

To prevent the default click event:

$('#sortable li a').on("click",function() {
        return false;
    });

To re-enable the click event:

$('#sortable li a').off("click");

Check out this demo : http://jsfiddle.net/VZwV9/ for reference.

I hope this solution addresses your #1 concern!

Utilize jQuery to activate an event listener that prevents the default action and toggles an active class for the first

Answer №1

Answer №2

Answer №3

Similar questions

Generate a div with a 1:1 aspect ratio using only its height specified in a percentage

Retrieving JSON values on the fly

Refresh HTML5 Canvas Drawing

The script functions smoothly on XAMPP, however, it encounters issues when deployed on

How about removing unnecessary and repetitive code?

What could be causing the HTML page to scroll up when the datepicker is initialized in JavaScript?

retrieve all elements within a drag selection made by a mouse

Ensure that grid rows occupy the least amount of space possible

What is the best way to ensure an image within a Bootstrap 5 column scrolls along with the page, but does not go past

What is the best method for triggering a click event on a hidden element using Selenium WebDriver

What is the best way to pass WordPress category as information to ajax?

Use jQuery ajax to send form data and display the received information in a separate div

What is the best way to display HTML content from a stored object?

Getting rid of the border on a material-ui v4 textbox

Updating the iFrame source using jQuery depending on the selection from a dropdown menu

Using jQuery to toggle the image of a button based on its id

Tips on how to seamlessly incorporate a small image file into the background so that it scrolls along with other elements on

Creating a diagonal emboss effect with CSS

The issue with AJAX arises when multiple lines are present in the partial, causing it to not function as

Creating a Cascading State and City Dropdown Using Knockout JS and JSON Data