Applying a border with jQuery CSS on IE7 seems to be causing significant delays

While using HTTPWatch in IE7 to investigate why a specific page is loading slowly, I discovered that the issue only occurs in IE7 and not other browsers. After some investigation, I found that a single jquery line setting a border on two containers was causing the slowdown.

Interestingly, when I removed the second line of code, the page loaded much faster in IE7 - from 7 seconds down to just 2 seconds.

  $('.ccl, .ccr').css({'min-height':maxHeight});
  $('.ccl, .ccr').css({'border':'1px solid #ccc'});

This is a new problem for me, and I'm curious if others have encountered it as well. Despite the code working correctly, it seems to be impacting performance in IE7.

jquerycssinternet-explorer-7border

Answer №1

Give this a shot?

let elements = $('.left, .right');
elements.css({'min-height':maxHeight});
elements.css({'border':'1px solid #999'});

Answer №2

When specifying the element name, IE7 can eliminate anything that is not a div, although this may slightly impact performance in modern browsers. Consolidate your CSS properties in one object for better organization.

$('div.ccl, div.ccr').css({
    'min-height':maxHeight,
    'border':'1px solid #ccc'
});

For optimal efficiency, give the unique elements an id if they are specific to the page (such as .ccl and .ccr):

$('#ccl, #ccr').css({
    'min-height':maxHeight,
    'border':'1px solid #ccc'
});

If you have pinpointed the issue to adding borders, consider adding a class and managing it in your stylesheet:

/* styles.css */

.ccl.border, .ccr.border {
  border: 1px solid #ccc;
}

/* site.js */
$('div.ccl, div.ccr').css('min-height', maxHeight).addClass('border');

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

Guide to toggling the visibility of a div based on the selected radio button in MVC with the help of jQuery

This is my unique perspective if (ViewBag.delivery != "1") { <div id="shipdetail"> <label>Shipping Details</label> <div class="form-group"> <p>Shipping Address</p> @Html.TextB ...

jqueryasp.netasp.net-mvc

Problem encountered when attempting to insert a new division into an existing flexbox container

I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...

htmlcssflexbox

Ways to eliminate spacing around lists?

I am trying to remove the margin on the left side of a list that contains 3 items. Here is my code: ul li { display: inline; list-style: none; } <ul> <li>I have margin space on my left side</li> <li>List 2</li> & ...

htmlcss

Powerful jQuery Plugin Requiring External Libraries

I am in the process of creating a "simple" jQuery plugin that relies on other jQuery plugins (in addition to jQuery itself). After some investigation, I have decided that using require.js might be the solution, but I am facing two main issues. Let's ...

javascriptjqueryjquery-pluginsrequirejsdependencies

"Can someone help me with aligning to the right in a bootstrap card header

I'm facing an issue with aligning the h3 and input-group next to each other in a Bootstrap 4 card. Initially, I attempted adding float-right to the input-group, but it did not yield the desired result. I also experimented with making the h3 and input ...

csstwitter-bootstrapbootstrap-4

Issues with html5 dropdown menu not displaying properly when hovered over

As a beginner in programming, I have been tasked with creating a website using HTML5 and CSS. The main issue I am encountering is with my horizontal menu bar that has vertical sub-menus appearing on hover. The menu consists of 3 main tabs: Home, Health, a ...

csshtml

The computer system encountered an issue in computing the values of the text

Possible Duplicate: Unable to get textfield value using jQuery My current project involves updating input fields based on user changes in quantity for items. Each item is retrieved from a database and I am generating invoices for customers. However, ...

javascriptjqueryajaxstruts2

"Combining Angular and jQuery for powerful web development

I am looking to develop an application using Angular and incorporate numerous jQuery animations and jQuery UI effects (such as animate, fadeIn, fadeOut, etc). Is it feasible to use jQuery functions in conjunction with Angular? ...

javascriptjqueryangularjs

Animation in CSS3: Blinking overlay block

I am interested in creating an element that will overlay a section of a webpage using position: absolute. The element should be 50% opaque and blink between red and transparent, similar to the way OSX used to do with default dialog buttons. Is there a way ...

htmlanimationcssbackground

I am curious about how to implement overflow:hidden along with position:sticky in React.js

My attempt to address the white space issue caused by a navbar I created led me to try using overflow:hidden. The navbar is generated using the Header component, and I desired for it to have a position: sticky attribute. However, I realized that I cannot ...

javascripthtmlcssreactjsstyling

Effortlessly move and place items across different browser windows or tabs

Created a code snippet for enabling drag and drop functionality of elements within the same window, which is working smoothly. var currentDragElement = null; var draggableElements = document.querySelectorAll('[draggable="true"]'); [].forEach ...

javascripthtmlcss

Only the initial submission is allowed when submitting forms using jQuery $.ajax

Encountering an issue with submitting AJAX forms after following this particular tutorial. The forms are contained within div#upform and upon attempting to submit any of them using $.ajax, only the first one is being submitted. The code snippet in questio ...

javascriptjqueryajax

Controlling the position of a <div> element using JavaScript

Is there a way to adjust the position and size of a <div>? I have already set it to float with this CSS code: div.grid_tooltip { position: absolute; left: 0px; top: 0px; } ...

javascriptcsshtmlpositioning

various shapes that invoke identical function

Here's the scenario: I have a webpage that displays multiple submissions, and next to each submission, I want to include an "Accept" button. To achieve this, I am utilizing a form. The HTML structure: {% for submission in submissions %} <div ...

jqueryajaxdjangoforms

How to Extract Minutes in Datatables Timestamps and Apply Custom Styling

Working with Datatables v1.10 Right now, my table is showing a date in the second column in the format 17-04-2019 14:34, which is how it's stored in the database. The filtering and searching functionality are all working as expected. The current HTM ...

javascriptjqueryhtmlcssdatatable

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...

jquerycssjquery-animateheight

The appearance of my sidebar items' right border varies depending on the web browser being used

My sidebar item's right border appears differently in Mozilla and Chrome. How can I resolve this issue? Here are the images from both browsers: https://i.stack.imgur.com/YGkkz.png https://i.stack.imgur.com/JxNs3.png "use client"; import { ...

cssreactjsnext.jstailwind-css

Click to load comments dynamically using Ajax

Could really use some assistance with this. I have a database containing fields like "ID | PLZ | Country | Author | Comment". Using JQuery, I was able to successfully show/hide the "Comment" field. Now, my goal is to load the comments using Ajax when the ...

jqueryajax

Issues with the Bootstrap navbar toggle functionality

Hello there! I hope you're doing well. I've been following the Bootstrap 5 tutorial on Traversy media's YouTube channel, but I'm encountering an issue with the nav toggler. The nav is not showing up for me and I can't figure out wh ...

htmlcssbootstrap-5

Guide on accessing elements such as inputs and selects in a changing form

I'm using a dynamic form that creates fields on the fly when the "+" button is clicked. This form isn't hardcoded into the document, but rather generated when the button is pressed. I'm wondering how I can access the form values. Should I ...

javascriptjqueryhtmlforms