Issue with JQuery event handlers becoming unresponsive upon resizing the window

Question

Issue with JQuery event handlers becoming unresponsive upon resizing the window

Here is the JS code snippet that I have written:

var toggleContent = function (event) {
    $(event.target).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 980) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");
        $(".headBar1").on("click", toggleContent);
    }
    else {
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");
        $(".headBar1").off("click", toggleContent);
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

This is my desired outcome:

If the window width is less than 300px, I want:

The content box to collapse
The headings to turn into clickable links
When a heading is clicked, its corresponding content box should toggle visibility

While the first two are functioning as expected, I am encountering difficulties with the third requirement. The behavior seems to be inconsistent - sometimes it works flawlessly but fails at other times (for example, resizing the "Result" frame multiple times in the JSFiddle page). What could be causing this unpredictability? How can I resolve this issue?

javascript jquery html css

Answer 1

Answer №1

A different method that is more suitable for the current era of impressive browsers is to utilize @media (max-width: 300px). This can be used by all modern browsers and allows for the application of specific CSS rules.

/* Specify CSS rules for when the window width is greater than 300px */

@media (max-width: 300px) {
    /* Adjust parent's minimum height and other settings */
    /* Hide or display relevant content with display: none and display: block */

    .headBar {
        cursor: pointer;
    }
}

Personally, I find this method effective in making the website mobile-friendly and compatible with smaller windows. Once you understand how it works, it performs perfectly.

Most modifications involve working with CSS anyway. As long as you have a well-organized structure of classes, you should be all set.

Answer 2

A different method that is more suitable for the current era of impressive browsers is to utilize @media (max-width: 300px). This can be used by all modern browsers and allows for the application of specific CSS rules.

/* Specify CSS rules for when the window width is greater than 300px */

@media (max-width: 300px) {
    /* Adjust parent's minimum height and other settings */
    /* Hide or display relevant content with display: none and display: block */

    .headBar {
        cursor: pointer;
    }
}

Personally, I find this method effective in making the website mobile-friendly and compatible with smaller windows. Once you understand how it works, it performs perfectly.

Most modifications involve working with CSS anyway. As long as you have a well-organized structure of classes, you should be all set.

Answer 3

Answer №2

function toggleContent(event) {
    $(event.target).siblings().toggle();
};
function showOrHidePanels() {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    $(".headBar1").off("click");
    if (windowWidth < 300) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");        
        $(".headBar1").on("click", toggleContent);
    }
    else {        
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");       
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

Does this meet your requirements?

Answer 4

function toggleContent(event) {
    $(event.target).siblings().toggle();
};
function showOrHidePanels() {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    $(".headBar1").off("click");
    if (windowWidth < 300) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");        
        $(".headBar1").on("click", toggleContent);
    }
    else {        
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");       
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

Does this meet your requirements?

Answer 5

Answer №3

Here is the solution you requested: http://jsfiddle.net/4QLDC/8/

function toggleContent(ths) {
    console.log('toggle!');
    $(ths).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 300) {
        console.log('Under: ' + windowWidth)
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");
        $(".headBar1").on("click.toggle", function(){ toggleContent(this); });
    } else {
        console.log('Over: ' + windowWidth)
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");
        $(".headBar1").off("click.toggle");
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

I have improved the code structure by moving styles to CSS and using one class for easy manipulation. You can see the updated version here: http://jsfiddle.net/4QLDC/12/

CSS:

.botContentBox {
    min-height: 200px;
    float:left;
    clear:none;
    border: 1px solid grey;
    margin: 0 10px 10px 0
}
.headBar1 {
    cursor: default;
    background-color: #880000;
    border:5px solid #fff;
    color:#fff;
    font-size:17px;
    line-height:17px;
    padding:10px 10px;
    width:auto;
    margin:0 0 5px 0
}
.botContentBox.lt300{
    min-height: 0px;
}
.botContentBox.lt300 .headBar1{
    cursor: pointer;
}
.botContentBox.lt300 .botContentHolder{
    display: none
}

JS:

var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 300) {
        console.log('Under: ' + windowWidth)
        $(".headBar1").parent().addClass('lt300');
        $(".headBar1").on("click.toggle", function(){ $(this).siblings().toggle(); });
    } else {
        console.log('Over: ' + windowWidth)
        $(".headBar1").siblings().show(); // in case it was toggled on/off
        $(".headBar1").parent().removeClass('lt300');
        $(".headBar1").off("click.toggle");
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

Answer 6

Here is the solution you requested: http://jsfiddle.net/4QLDC/8/

function toggleContent(ths) {
    console.log('toggle!');
    $(ths).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 300) {
        console.log('Under: ' + windowWidth)
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");
        $(".headBar1").on("click.toggle", function(){ toggleContent(this); });
    } else {
        console.log('Over: ' + windowWidth)
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");
        $(".headBar1").off("click.toggle");
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

I have improved the code structure by moving styles to CSS and using one class for easy manipulation. You can see the updated version here: http://jsfiddle.net/4QLDC/12/

CSS:

.botContentBox {
    min-height: 200px;
    float:left;
    clear:none;
    border: 1px solid grey;
    margin: 0 10px 10px 0
}
.headBar1 {
    cursor: default;
    background-color: #880000;
    border:5px solid #fff;
    color:#fff;
    font-size:17px;
    line-height:17px;
    padding:10px 10px;
    width:auto;
    margin:0 0 5px 0
}
.botContentBox.lt300{
    min-height: 0px;
}
.botContentBox.lt300 .headBar1{
    cursor: pointer;
}
.botContentBox.lt300 .botContentHolder{
    display: none
}

JS:

var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 300) {
        console.log('Under: ' + windowWidth)
        $(".headBar1").parent().addClass('lt300');
        $(".headBar1").on("click.toggle", function(){ $(this).siblings().toggle(); });
    } else {
        console.log('Over: ' + windowWidth)
        $(".headBar1").siblings().show(); // in case it was toggled on/off
        $(".headBar1").parent().removeClass('lt300');
        $(".headBar1").off("click.toggle");
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

Issue with JQuery event handlers becoming unresponsive upon resizing the window

Answer №1

Answer №2

Answer №3

Similar questions

Alignment of text fields in a vertical manner

Upon the initial rendering, Next.js obtains access to the query { amp: undefined }

What causes the failure of making an ajax call tied to a class upon loading when dealing with multiple elements?

Is it possible for an HTML checkbox value to store a boolean rather than a string?

What is the best way to experiment with angular-ui-tinymce within a tabset using Plunker?

Reversing the direction of an owl carousel slider to slide from right to left

Persisting Undefined Values Even After Proper Prop Passing

Expanding circle with CSS borders on all edges

Is there a way to apply -webkit-text-fill-color using pure vanilla JavaScript?

Issue with incorporating Material UI HtmlTooltip within Material UI Select MenuItem and handling synthetic events in the select onChange method

The header and footer are not extending across the entire width of the page

Convert TypeScript model to JSON while excluding properties with null values

Unforeseen issue within Vuejs-nuxt (SSR Mode) is preventing the retrieval of the UserUUID through the getter in plugins, resulting in an unexpected '

Getting the initial date of the upcoming month in JavaScript

In my Express Javascript application, I recently encountered a challenge where I needed to export a const outside of another

What could be causing the getTotals() method to malfunction?

calculation of progress bar advancement

Error message: ngRepeat does not allow duplicate elements in an array

"Exploring the Dynamic Duo: Ajax_JQUERY and the Power of

Utilizing reusable functionalities within Vuex