The JavaScript code that added links to the mobile menu on smaller screens is no longer functioning properly

I recently created a website with a mobile navigation menu that should appear when the browser width is less than 1024px. However, I used some JavaScript (with jQuery) to include links to close the menu, but now the site is not displaying these links and the menu is open by default on page load. I'm wondering if I've overlooked something obvious causing this issue?

The live site where this problem occurs is agirlwithacupcake.com and it's built using WordPress.

var eventFired = 0;

if ($(window).width() < 1024) {
    $('#navigation').hide();
    $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-left">▼</a>');
    $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-right">▼</a>');

} else {
    $('#navigation').show();
    eventFired = 1;
}

$(window).on('resize', function () {
    if (!eventFired) {
        if ($(window).width() < 1024) {
            $('#navigation').hide();
            $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-left">▼</a>');
            $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-right">▼</a>');
        } else {
            $('#navigation').show();
        }
    }
});

If my question seems unclear or if there's an error in the way I've presented it, I apologize as this is my first time reaching out for help on stackoverflow.

javascriptjqueryhtmlcsswordpress

Answer №1

Upon reviewing your website, I noticed that the function "eventfired" is not defined, even though it appears to be defined in the post.

$(window).on('resize', function() {
if (!eventFired) {
    if ($(window).width() < 1024) {
        $('#navigation').hide();
        $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-left">&#x25BC;</a>');
        $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-right">&#x25BC;</a>');
    } else {
            $('#navigation').show();
    }
}});

You should remove

if(!ebentFired) {}

or ensure that you add

var eventFired = 0;

Incorporate this into

I highly recommend using Firebug for troubleshooting purposes. You can download it from:

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 on transferring information from AngularJS to a remote server using ngResource

Looking for guidance on utilizing the ngResource module? To send data to a server. To retrieve data from a server. I am attempting to send data to a Solr server. Utilizing AngularJS API. Using npm package manager to install packages to my application. Th ...

javascripthtmlangularjs

Choosing only those elements that are not children of parents with a specific class by utilizing the `.not()` method

I am attempting to target all elements having the class .select that are nested somewhere within the DOM tree. The only condition is that these elements should not have any ancestors with the class .forbidden. This means it will not detect any elements ...

javascriptjqueryhtmldomdom-traversal

Incorporating a lasting element into the _app.js file of Next.js

I am currently experimenting with my first Nextjs app and encountering difficulties when trying to incorporate a persistent sidebar. While looking for solutions, I came across Adam Wathan's article on persistent layouts in Nextjs. However, it appears ...

javascriptreactjsnext.jssidebar

Calculating Two Results for Two Target Elements in Vue.js

Is it possible to have two different outcomes for result() in Vue's computed based on the element id? For instance, I'd like to return a result with commas replaced by AND for #and, and another result with commas replaced by - for #dash. https:/ ...

javascriptvue.js

Upgrade to Rails 4 has resulted in a JavaScript/JQuery partial update that is only functioning properly for view.html.erb files with

Here is a controller example: class RuleSearchController < ApplicationController def index end def results # Rule is a simple AR class with just a name column @rules = Rule.all end end A search form exists in index.html.erb: <%= ...

jqueryruby-on-rails-4

I encountered an issue with loading an array from session storage in Java Script

I am struggling to restore and reuse a created array in HTML. I attempted using JSON, but it was not successful for me. In the code below, I am attempting to reload items that were previously stored in an array on another page. However, when I try to loa ...

javascriptarraysjsonsessionstorage

What is the best way to dynamically showcase options in a React application?

product.js Qty: <select value={qty} onChange={(e) => { setQty(e.target.value) }}> {[...Array(product.countInStock).keys()].map((x) => ( <option key={x + 1} value={x + 1}> ===> I need to dynamically display options b ...

javascriptarraysreactjs

Leveraging basscss through NPM/Webpack installation

As a newcomer to the webpack/react app environment, I am attempting to incorporate the Basscss CSS framework into my project. After successfully running 'npm i basscss' and adding require('basscss/css/basscss.css'); to my app entry poin ...

cssnpmwebpack

Issue: Infinite loops detected in AJAX functions

I am using $.get methods in the following code snippet: $.get("/url" , function(z) { var a = $(z).find("span"); for (var i = 0 ; i<a.length; i++){ var v = $(a).eq(i).children("strong:first").text(); alert(v); } }); However, the s ...

javascriptjqueryajax

Obtain an array of responses using jQuery ajax and pass it to PHP

I'm working on a project where I need to populate a table from MySQL based on a selection made in a select box using jQuery AJAX. Currently, this is the jQuery code that I have written. I am able to display the result in an alert box, but I am uncerta ...

phpjqueryajaxcodeigniter

The submit function in JQuery may not work as expected when attempting to submit a form in Internet

I'm dealing with a form that submits values to JQuery code, triggering an email with the form data. The issue is that it works flawlessly on Firefox but fails on IE6 and IE7. Any idea why this might be happening? Your insights would be greatly appreci ...

jqueryform-submit

The z-index of 999 in CSS is not functioning as expected on both Google Chrome and Safari browsers

To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect: .zlslides .ms-slide- ...

csswordpressgoogle-chromez-indexopacity

Is it possible to increase Google+ shares without needing an API key for every single page?

Looking to retrieve the number of Google+ shares for each URL on a search results page using Ajax. Facebook and Twitter share counts have been successfully implemented: $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + url + & ...

javascriptajaxfacebookgoogle-plus

Exploring Bootstrap: Understanding column stacking and the requirement for a new row to stack upon resizing

I am currently mastering Angular and Bootstrap for a potential job opportunity, so I have decided to create a simple demo page. However, I am facing an issue with getting a new row to stack after the last div of the previous row when resizing. Initially, m ...

htmlcssangularjstwitter-bootstrap

The CSS on the maps infobox is not rendering properly when an icon is clicked

Hey everyone, I'm in the process of creating a travel blog on WordPress and have encountered some issues with the CSS on my site. I've included maps and tables that look fine in my fiddle, but when I transfer them to my website, they appear disto ...

cssweb

JavaScript Page Search - Error in Finding Single Result

I am currently working on implementing a 'find in page' search box and have come across some JavaScript code that is working really well. Everything works great when there are multiple strings, as pressing enter cycles through the results and the ...

javascriptjquery

Is there a way to completely remove an element from the dom once the ajax call has returned

I've been struggling to completely remove LI elements and their content, including the checkbox input, from the DOM without success. After an ajax callback, I am calling the following function, but it only removes the contents and not the element its ...

javascriptjqueryhtmldom

Using jQuery to smoothly scroll to a specific class name

I am faced with an HTML code snippet that looks like this: <div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div> My intention is to use jQuery to scroll to the game number 456 as shown below. var contain ...

javascriptjqueryhtmlcss

Laravel and jQuery: A Perfect Match for Routing

Using Ajax to fetch and display content in a Laravel view, I am trying to figure out how to access the second parameter from the URL. Currently, it is returning a random string: for(var i=0;i<array.length;i++){ html+="<a href={{ route('show ...

phpjqueryajaxlaravel

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div. In this example on JSFiddle, you can see that I have different heights for the video-ite ...

javascriptjqueryhtmlcsstwitter-bootstrap