Problem with IE8 - jQuery modifying the navigation HTML when the page is resized

I am facing an issue with responsive navigation not working properly in IE8. The navigation disappears when the window is resized, and I want to prevent this from happening. In my HTML code, I have assigned a class of "lt-ie9" for IE8 compatibility. Could you provide guidance on adjusting the code so that if the browser window size is below 767 pixels, it will use the desktop version of the navigation?

function resizeNav() {
if (!nav) {
        nav = {};
        nav.root = jQuery('#navigation');
        nav.primary = nav.root.find('.menu');
        nav.secondary = jQuery('.secondary-links');
        nav.moveable = nav.secondary.children('li');
        nav.icon = jQuery('<div id="menu-icon" class="btn">Navigation</div>');

        nav.icon.click(function () {
            nav.primary.slideToggle('slow');
            nav.icon.toggleClass('active');
        });
    }

    // Arrange elements based on window size
    if (getWidth() <= 767) {
        nav.moveable.appendTo(nav.primary);
        nav.root.prepend(nav.icon);
        nav.primary.hide();
    } else {
        nav.moveable.appendTo(nav.secondary);
        nav.icon.detach();
        nav.primary.show();
    }

    nav.icon.removeClass('active');
}

Answer №1

If the class lt-ie9 is included in the html element, one simple way to achieve this goal is by checking for it along with the width:

if (!html.lt-ie9 && getWidth() <= 767) {

An alternative approach could be to save the presence of lt-ie9 as a boolean for more efficient processing:

var isLtIe9 = $('html.lt-ie9').length;

Subsequently, you can modify the earlier code snippet to look like this:

if (!isLtIe9 && getWidth() <= 767) {

Answer №2

Is it really necessary to use JavaScript if you're only targeting IE8? Perhaps using an exclusive CSS file for IE8 would be a more efficient solution, helping to maintain code cleanliness and eliminating the need for hacks.

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

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 how to convert a select box to an unordered list using mdb.min.js

Our project utilizes HTML with the mdb.min.js library, which converts all <select> tags to <ul><li> format. An issue arises when setting a piece of HTML code via AJAX in a div element. In this scenario, select boxes do not appear as they ...

Instructions for accessing the contents of a file that has been uploaded via the "Input Type" field in an HTML form

I have a basic HTML form with an upload field that allows users to select and upload local files. After uploading a file, the path displayed is C:/fakepath/filename.xls. I understand that this is due to browser security measures preventing direct access t ...

Is there a way to extract Json from a Scala Json string and store it in a JS variable?

Currently, I am utilizing the Play framework and attempting to transmit a Json string from the server as a parameter to a Scala template. @(aj: String) @import play.api.libs.json.Json <!DOCTYPE html> <html lang="en"> <body> < ...

Switch up the hover color of the dropdown menu in the Bootstrap navbar

I'm struggling to change the hover color of the dropdown menu in the navigation bar. Can anyone please help me with this? Here is my HTML code. How can I change the hover color using CSS? <div class="navbar navbar-inverse" id="menu"> <di ...

What is the best way to categorize sub documents and extract distinct values from the value field?

My database contains the following collection: {"productId" : 1, "isVariant": 1, "isComplete" : 1, "variantId" : 1, "attributeSet" : [ { "name" : "Capacity", ...

Incorporate numerous style classes into an object using React Material-UI

I am facing an issue with my JSX code: <span className="btn-pause btn"><i class="fa fa-pause"></i></span> I would like to change the color of this button. Here is what I have tried: const styles = { btncolor ...

Tips on converting buttons from bootstrap3 to bootstrap4

For Bootstrap 3, I have been using this button style which is typically used to update or modify a row in a table. Now that I want to switch to Bootstrap 4, I am having trouble getting this button to display correctly. I understand that things have change ...

The loading of styles in Angular 2 Material is experiencing difficulties

Currently, I am in the process of creating a web application in Angular and I have decided to use the Angular Material library for the user interface. However, I encountered an issue when attempting to import a prebuilt theme. To do so, I included <li ...

Creating a responsive design in HTML and CSS to organize images into two columns that stack

<html> <head> <style> .container { position: relative; width: 50%; } .image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .middle { transition: .5s ea ...

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 ...

What is the best way to send Nested JSON data to a controller in MVC5?

I'm new to developing MVC Web Applications. I am attempting to send nested JSON data to a controller in MVC, but I am encountering issues with passing the JSON file. Here are my models: public class SurveyViewModels { public string Ques ...

Tips for Implementing a Footer Component in ReactJS

My current setup includes: https://i.stack.imgur.com/2gvHk.png A navigation bar Nested content with a wizard and partial windows. A dynamic footer whose buttons and functionality need to change based on certain scenarios in the content. Currently, I ha ...

I am looking to adjust the height of my MUI Grid component

Recently exploring React, and I'm looking to set a height limit for MUI Grid. I've structured my project into 3 sections using MUI grid components. My goal is to restrict the page height in order to eliminate the browser scrollbar. If the conten ...

What is the best way to obtain the post id when making a JavaScript Ajax request?

I am currently developing a website similar to Stack Overflow for practice purposes. I am currently working on implementing the voting system. My goal is to have an Ajax call triggered when the upvote or downvote button is clicked, sending parameters such ...

jQuery validation green checkmark

Hey there, I seem to be a bit stuck with this one... I'm trying to implement a success checkmark or indicator for validating user input in my form. The script below outlines what I'm attempting to achieve: $('document').ready(function( ...

Create a unique onblur event listener for every element in a loop in Javascript

https://i.sstatic.net/tRYul.png I have added several items to a column in the database, but I am unsure of how to implement an onblur function for validation for each item within a loop. For example, if the NAME field is empty, I want to display an alert ...

Tips for changing the color of a mat checkbox in mat select dropdowns

Is there a way to change the color of mat checkboxes within mat select options as shown below? <mat-form-field appearance="fill" style="width:49%"> <mat-label>Select Group</mat-label> <mat-select [(ngMod ...

Can you explain the functionality of $scope.$apply()?

Lately, I've been incorporating $scope.$apply() into my Angular applications to refresh the bindings for my models when new data is received via websockets. It seems to be effective, but I'm curious about its actual functionality and why it' ...

At what point does the cleanup function in UseEffect activate the clearInterval() function?

In the process of creating a timer for a Tenzie game, there is an onClick function that changes the state of isTimerActive from false to true when a user clicks a button. The initial value of tenzie state is also set to false, but once the user completes t ...

Tips for incorporating a logo and company name into the header of a website

How can I code a logo and company name in the header? This HTML file provided contains only a header at the top, with a horizontal layout. You can view it here: https://jsfiddle.net/SSteven/yeamz57o/ body { /* resetting browser defaults */ margin: ...