How do I overwrite this calculation using JQuery?

Question

How do I overwrite this calculation using JQuery?

I have a website:

link

There are two pages on my site that have the same div elements... I want one page to perform a certain calculation on the divs, and another page to perform a different calculation...

New JavaScript Code:

jQuery(document).ready(function ($) {

    var windowsizecontact = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    console.log("screen contact:",windowsizecontact);
    var stanga= jQuery('.contact-stanga').outerWidth();
    console.log("left side:",stanga);  
    var dreapta= jQuery('.contact-dreapta').outerWidth();  
    console.log("right side:",dreapta);  
    var contentcontactwh=windowsizecontact-stanga-dreapta;
    console.log("result",contentcontactwh);
    $('.contact-container #primary').css{('cssText', contentcontactwh'!important')};   //here I want to override this div

});

This is the old code (which should only apply to specific pages)

jQuery(document).ready(function ($) {
    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var leftSide = jQuery('#secondary').outerWidth();
    var selected = jQuery('.selected').outerWidth();
    var calculation = width - leftSide - selected;
    $('#primary').css('width', calculation);

});

My issue is that the new code above does not affect the div on the contact page because of the old code... and I need it to be unique. (The old code must still exist)

Is there a way to override this somehow?

EDIT:

jQuery(document).ready(function ($) {

  var windowsizecontact = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  console.log("screen contact:",windowsizecontact);
  var stanga= jQuery('.contact-stanga').outerWidth();
  console.log("left side:",stanga);  
  var dreapta= jQuery('.contact-dreapta').outerWidth();  
  console.log("right side:",dreapta);  
  var contentcontactwh=windowsizecontact-stanga-dreapta;
  console.log("result",contentcontactwh);
  console.log("------------------");



  if ($("#primary").hasClass("content-contact")) {
     alert("ggg");
      $('.content-contact').css("width:",contentcontactwh); //the issue lies here now

  }else
  {
  var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var leftSide = jQuery('#secondary').outerWidth();
  console.log("left side:",leftSide);
  var selected = jQuery('.selected').outerWidth();
  console.log("left side:",leftSide); 
  var calculation = width - leftSide - selected;
  $('#primary').css('width', calculation);
   }

});

I tried the first suggestion given... but now the div width is not being applied correctly.

Did I make a mistake in the syntax?

javascript jquery html css

Answer 1

Answer №1

let myApp = myApp || {};

myApp.initialFunction = function () {
    // default code
};

// When needed, update the code on the website
myApp.updatedFunction = function () {
    // updatedCode
};

// Make sure to call the function when the document is ready
$(function () {
    myApp.initialFunction();
});

Answer 2

let myApp = myApp || {};

myApp.initialFunction = function () {
    // default code
};

// When needed, update the code on the website
myApp.updatedFunction = function () {
    // updatedCode
};

// Make sure to call the function when the document is ready
$(function () {
    myApp.initialFunction();
});

Answer 3

Answer №2

If everything else is functioning correctly and the issue lies solely in this particular line, then let's make a slight modification to it.

Here is the code snippet:

  $('.content-contact').css("width:",contentcontactwh); //try removing the : after width

Change it to:

  $('.content-contact').css("width",contentcontactwh);

If the problem persists, please provide the console error message for further investigation.

Answer 4

If everything else is functioning correctly and the issue lies solely in this particular line, then let's make a slight modification to it.

Here is the code snippet:

  $('.content-contact').css("width:",contentcontactwh); //try removing the : after width

Change it to:

  $('.content-contact').css("width",contentcontactwh);

If the problem persists, please provide the console error message for further investigation.

How do I overwrite this calculation using JQuery?

Answer №1

Answer №2

Similar questions

Assign a unique CSS style to each Popper

What could be the reason for JavaScript code successfully exporting to Excel using the old office extension .xls but encountering issues when trying to export

Calculate the total rows within a specified date range

What is the best location to include my JavaScript code in WordPress?

Is it possible to utilize Vue's splice method within a forEach loop in order to delete multiple elements at

Make IE10 HTML page use IE Quirks mode

SwiperJS continuously applies additional right margin to every slide

Transmitting a pair of data points to PHP using ajax POST for querying the SQL database

Trying to open the DB URL in a new tab when using PHP and MySQL will not work as expected

Using AngularJS to interact with resources by passing in the scope parameter

Executing an Ajax PUT request on a select_tag element

The art of placing images using CSS

How can I redirect applications from a web browser to Safari?

Embedding CSS stylesheets in a Django template

Ways to remove all HTML elements from a string

Determine if a certain value is present in an array within an HTML document

javascript, issues with floating and displaying elements

Creating a response in Node JS

Smooth animation is not being achieved with the Jquery dlmenu

Different method of including the ng-click attribute on the body element