Repetitive firing of Modernizr.mq event causing multiple triggers

Here's the situation:

  • My menu expands when the screen resolution is greater than 1024
  • When the resolution is less than 1024, the menu becomes a drop-down navigation

I'm using Modernizr.mq to trigger the JavaScript for the drop-down menu when the resolution is smaller than 1024.

Everything works fine when the page is refreshed without resizing the browser. However, if you resize the browser and try the menu again, it starts to bug out and gets triggered multiple times.

Check out the full page example here:

http://codepen.io/MarioD/full/aKdhG

And here is the example with the code:

http://codepen.io/MarioD/pen/aKdhG

Any thoughts on why the click function goes haywire when the browser is resized? Is there a way to fix this issue?

Thank you, Mario

javascriptjqueryhtmlioscss

Answer №1

It seems like you are attaching the click event multiple times due to calling checkMq() every smartresize.

To solve this issue, move the event handler block (

$('.btn-menu').on('click', function(){ ... });
) outside of the checkMq() function.

Alternatively, you can consider using jQuery.one instead of jQuery.on (reference: http://api.jquery.com/one/)

By the way, make sure to wait for the document to be ready (reference: http://api.jquery.com/ready/). Although I presume CodePen already takes care of that for you.

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

Utilizing Jquery to extract an array from a nested array or object within JSON

When receiving JSON formatted data where objects can be nested inside other objects or arrays, I need to extract specific values and append them on a function click. var result={ "diagnosis":{ "Diagnosis":{ "head":"Diagnosis", "head_id": ...

jqueryjsonobjectmultidimensional-array

Having trouble accessing the "didTapAt" function in Google Maps Custom Info Window Marker in Swift 4

After scouring the depths of the internet, I have come across countless examples of this exact code, most of which are just "copy/paste" jobs. However, despite my best efforts, I can't seem to get it to function correctly. My main objective is to inc ...

iosswiftgoogle-mapsgoogle-maps-markers

I have a JSON object with a nested "src" value that I want to display on my webpage using Vue. How can I target and select this specific value?

I am currently working with an API and attempting to access a nested object within the JSON data named "Species Illustration Photo". Inside this object is an "img" property with the source link. How can I display this nested img source in my HTML using Vue ...

javascripthtmljsonvue.jsloops

Prevent the print dialog window from appearing when a page loads in Selenium for Firefox and Chrome

Is there a way to prevent the print window from automatically popping up when a page loads using Selenium? So far, I have tried using the Robot class to press the escape key, but it only works 80% of the time. I have also experimented with Firefox prefere ...

javascriptseleniumfirefox

How can I choose specific options by clicking based on the select name's value with web scraping?

I'm attempting to scrape the select dropdown menu below in order to retrieve its text content. Unfortunately, I can't rely on the name attribute as "P889O1" varies for each product from which I need to extract data. I considered using 'cont ...

pythonhtmlseleniumbeautifulsoupurllib2

An intuitive approach to adding a CheckBox control within a GridView using JavaScript and SPAN elements

Struggling to calculate the total quantity from the gridview for checked row checkboxes? Having trouble accessing the checkbox control in your JavaScript? Below is the code snippet you provided, but it's not returning anything. <table cellspaci ...

javascriptgridview

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

javascriptcssvue.js

Retrieve the position of my dropdown menu using jQuery

Currently, I am working on creating a jQuery drop-down menu that can be used anywhere on my page in a dynamic manner. The goal is to make it flexible so that each element containing the trigger class will be positioned perfectly and trigger the drop-down w ...

javascriptjqueryhtmlcss

I need either XPATH or CSS to target a specific checkbox within a list of checkboxes wrapped in span tags

I'm trying to find the XPATH or CSS locator for a checkbox in an HTML span tag that has a label with specific text, like "Allow gender mismatch". I can locate the label using XPATH, but I'm not sure how to target the input tag so I can click on t ...

csspython-2.7seleniumxpathselenium-webdriver

Design elements using CSS within the <th> tags

When working with HTML tables, the use of a <th> element allows for the implementation of a scope attribute. This attribute serves to indicate whether the header cell is associated with its subsequent column, row, or group. Is it feasible to leverage ...

htmlcsscss-selectorshtml-table

Creating a personalized autocomplete textfield in Yii is a straightforward process

As a beginner in yii, I am looking to create a custom auto complete feature instead of using CJuiAutocomplete. Can someone please provide guidance or assistance on developing this custom autocomplete text field? The goal is to display the name in the text ...

phpjqueryajaxautocompleteyii

Locate a specific data point within an array of JSON objects

After receiving an array of JSON objects from JSP, I now have a set of data that contains book titles. "Titles":[ { "Book3" : "BULLETIN 3" } , { "Book1" : "BULLETIN 1" } , { "Book2" : "B ...

javascriptjson

React Native Function fails to return a value

Within my React Native app, there's a page called RepsPage that displays a scroll view using an array of IDs. I'm passing this array to a function named renderRep, attempting to create a view for each item in the array. However, the return statem ...

javascriptreact-native

What methods can be used to crop and style images in a similar manner using html and css?

Is there a way to replicate this specific method? I attempted to achieve the same look by using CSS masking, but the results weren't pleasing. Does anyone have suggestions on how to accomplish this using HTML/CSS? ...

htmlcssimagestylesheet

$ajax.success problem

I am having an issue with inserting the returned result from a webmethod, which is a table, into a specified element even though the success method on the $.ajax is being triggered. success: function(result){ $('#divSubjectQuestions') ...

jqueryasp.netajax

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

javascriptjqueryhtmlcss

Refresh the indicator upon data filtering via an ajax request

I'm encountering an issue where the location marker doesn't update when filtering. The old marker remains in place and new markers keep stacking on top of it. Even after using map.removeLayer(), the problem persists. If I use this function after ...

jqueryajaxleaflet

Unable to fetch JSON data from PHP with the help of AJAX

I seem to be encountering an issue with retrieving JSON string data from my PHP script using an AJAX call. Here are the relevant scripts: $.ajax({ type: "POST", async: false, dataType: "json", url: "databas ...

javascriptphpjsonajax

Reducing the amount of PHP code in the View layer of an MVC architecture

In my project, I have HTML code that includes PHP variables to display the content of individual search results. This code is located in a file called search_results_v.php. I retrieve records from a database and create a search result entry for each one us ...

phphtmlmodel-view-controller

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

I am attempting to combine an image (a background image for my graph) with my canvasJS chart. Once these elements have been merged on a canvas, I aim to obtain a DataURL of this canvas, enabling me to download an image of it (depicting the graph along wit ...

javascriptjqueryhtmlimagecanvas