Chrome and Firefox both have issues with CSS calc functionality

I have a div with an id called #monthlyconfirm_grid. I implemented a jQuery function to control scrolling in a gridview, but it seems to only work in Internet Explorer and not in Chrome or Firefox.

$(document).ready(function () {
            var expi = $("#monthlyconfirm_grid").scrollLeft - 2;
            var expr = "calc("+ expi +")";
            $(".locked").css("left", expr);

});

P.S: I have used 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
to make it work in IE.

Why is it not working in Chrome and Firefox? How can I resolve this issue?

c#jquerycss

Answer №1

scrollLeft is actually a function and it's important to remember to include parentheses when using it:

var scrollPos = $("#monthlyconfirm_grid").scrollLeft() - 2;

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

What is preventing the conditional class in Svelte from being applied when the page loads?

Contextual Background In my exploration of Sveltekit, I set out to construct a dashboard using Bootstrap tab components. To achieve this, I opted to utilize <buttons> instead of <a> tags to prevent redirection to different routes. My goal was ...

htmlcssbootstrap-5sveltesveltekit

CSS gradient pointing arrow

Is there a way to create a CSS arrow with a gradient instead of a solid color? Below is the CSS I have been experimenting with: .breadcrumbDivider .arrow-right { width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid ...

htmlcssgeometrycss-shapes

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

javascriptjqueryhtmlcssbrowser

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is there a quick way to disable autocomplete in all forms within the application without individually adding "autocomplete=off" to each form? ...

javascripthtmljquerycsssass

Why is it that Lotus Notes is unable to render this HTML code properly?

I am having trouble with an email that displays properly on every platform except Lotus Notes. Can anyone provide insight as to why this email is not rendering correctly in Notes? Here is a screenshot: img (please note the images are for demonstration pu ...

htmlcsshtml-tablehtml-emaillotus-notes

Upon the initial submission, the submit function triggers twice in succession, as a result of the interaction

function slideupSubmit (formName) { $(formName).submit(function ( event ) { event.preventDefault(); var target = $(this).attr("action"); var response = $(this).attr("response"); var name = $(this).attr("id"); $. ...

javascriptphpjqueryhtml

Validating the presence of a value and displaying an error message prior to submitting the form using jQuery

Is there anyone who can assist with verifying the existence of values? I am in need of a way to validate that the fields for name, telephone number, email address, and enquiry contain values before submitting the form upon clicking the button. If any fiel ...

jquery

How about this as a unique rewrite: "Adjust the height of the toggleable div to automatically fill

Hey there! I'm in the process of creating a movie review website on WordPress, and while I can handle PHP pretty well, my skills with jQuery and JavaScript are a bit lacking. I'm hoping some of you can lend a hand. This is actually the first ques ...

phpjquerytoggle

Various instances of the jQuery niceScroll plugin

I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...

jqueryhtmlcssscroll

Expanding the full width of the bootstrap navbar

Let's cut to the chase - I'm working with Bootstrap 4 and trying to make my navbar fill the entire width (excluding margins). I know this question has been asked before, so I checked out a post here which suggested using the .nav-fill class, but ...

htmlcssbootstrap-4

The noclose feature in Twitter Bootstrap is malfunctioning when placed within a div

I have a PHP page named a.php that contains the following code: <ul class="dropdown-menu noclose"> This code functions correctly, preventing the drop-down menu from closing until the user clicks outside the box. However, when I load the entire a.p ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Unauthorized access to PHP files when using Jquery .load

Hey there, I'm running into a little hiccup in my code. File: index.php <PHP define( "MYCODE", TRUE ); include('update.php'); ?> File: update.php <?PHP if ( !defined("MYCODE") ) die( "Oops, there was an error!" ); ?> < ...

phpjqueryajax

Adjust the overall size of the CSS baseball field

Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...

javascripthtmlcssnode.jsresponsive-design

CSS: Styling different <a href> tags to appear uniform within identical size containers

I currently have some links displayed on my webpage. These links are encapsulated within a border and have a background set for them, essentially creating a box around each one. <!DOCTYPE html> <style> a { background: #DDD; border: #BB ...

css

Passing PHP information into a JavaScript array

I am facing an issue with my PHP file where I am fetching data from a MySQL database and storing it in a PHP array. I am then trying to output this data as a JS array but for some reason, I am unable to access the JS variable in my JS files. Here is the c ...

javascriptphpjqueryajax

Can you point me to where the InternalEquals(object objA, object objB) method is implemented?

During my analysis of the .Net Source Code using Reflector, I discovered the Equals implementation in the Object Class, which pointed to bool InternalEquals(object objA, object objB); This, in turn, referenced internal static extern bool InternalEqual ...

c#.netequalsclass-library

Run the js.erb code only when a certain condition is met

I'm feeling a bit lost when it comes to CoffeeScript and JS. I have a quick editing feature that sends an AJAX request and updates the database. Currently, I manually change the edited content's place and display it, but it feels like a workaroun ...

javascriptjqueryruby-on-railsajaxcoffeescript

The Reason Behind Angular Error when Using CSS Custom Tags

I have the following SCSS code: main{ width: 100%; height: 840px; /*background: red;*/ margin: 10px auto; position: relative; padding: 5px 0; } section{ width: 98%; height: 600px; margin: auto; display: flex; ...

htmlcssangular

Unable to retrieve information from JSON using jQuery's AJAX method

My journey with learning JSON using jQuery has hit a bump in the road. Despite spending two days and going through various tutorials on YouTube and blogs, I'm facing a challenge. The JSON structure presented in the tutorials differs from the one I hav ...

javascriptajaxjsonjquery

Guide to smoothly transition the highlighted <tr> element to the top of the scroll bar

Is there a way to utilize jQuery for animating a selected row to the top of a div with a specific scrollbar style? #sc { border:1px solid black; width:450px; height:80px; overflow:scroll; } <div id="sc"> <table id=&quo ...

javascriptjquery