Calculating the percentage width in jQuery by subtracting pixels is not producing the expected elasticity in

Seeking a solution to the CSS calc issue by turning to jQuery (since calc does not work on Explorer) - however, encountering an issue where setting the width minus pixels causes the columns to lose their elasticity and overlap on jsfiddle (although they appear fine when tested from textedit). It is important that the column left and middle remain fixed positioning, with only the right one scrolling down when content overflows.

Any suggestions?

Thank you in advance!

http://jsfiddle.net/Alga/PHv6S/

CSS:

html, body { width:100%; margin:0; padding:0; font-size:87.5%; }

.middle {
    position:fixed;
    margin-top:20;
    margin-left:170;
    background:yellow;
    margin-bottom:20px;
    margin-right:40px;
}

.left {
    position:fixed;
    top:20px;
    left:20px;
    background:blue;
    width:130px;
}

.right {
    float:right;
    background:blue;
    margin: 20px 20px 20px 0;
}

HTML:

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

JavaScript:

$(document).ready(function () { /* standard jQuery document ready */
    $('.left').css('height', '100%').css('height', '-=40px');
    $('.middle').css('width', '40%').css('width', '-=20px');
    $('.middle').css('height', '100%').css('height', '-=40px');
    $('.right').css('width', '60%').css('width', '-=190px');
    $('.right').css('height', '100%').css('height', '-=40px');
}); 

Answer №1

Give this a shot:

Click here for the solution

$('.middle').css('width', '100%').css('width', '-=260px');

$(window).on('resize', function(){
    $('.middle').css('width', '100%').css('width', '-=260px');
});

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

Discover the hexadecimal color code generated from an rgba color

Do you know of a service that can determine the final hexadecimal value of an rgba color? For instance, if my body background-color is set to #FF0000 and my header is positioned over it with a background-color of rgba(0,0,0,.7), how can I find out what the ...

Customize DataTables selector by modifying its frame, font, and alignment

I'm experiencing issues with customizing the page selector in DataTables. Although I managed to change the background color to black, the frame around it remains blue. The font color of unselected pages and the "Next" button also do not reflect the c ...

Utilize jQueryUI to seamlessly integrate email functionality into CakePHP

I am looking to automate email notifications to both administrators and users upon completion of a jQuery UI form submission. The form, which is located in the view.ctp file, looks like this: <div id="dialog-form" title="Create new user"> < ...

Deactivate event handling for viewport widths below a specified threshold

Currently, I am attempting to deactivate a script when the width of the window falls below 700px. Despite reviewing suggestions from various sources, I have not been successful so far. window.onresize = function () { if(window.innerWidth < 700) { ...

Delete all HTML functionalities

Is there a way to strip HTML functions when using a text area so that the content shows as plain text in a new post (div)? For example, if I type "Hello", I want it to appear as "< b > Hello < b / >", showing the whole code. Here is the code ...

Removing empty commas from a string with JQuery

I am looking to utilize JQuery to eliminate any empty commas from a given string. Take a look at the provided images for further clarity. ...

populate form fields with database data using ajax

I'm currently working on populating form fields with data from a database using ajax and jQuery in my Codeigniter project. I have been able to retrieve and alert the database values into an array, which you can see in this image: alert of the data arr ...

Determine the overall sum of rows present within this particular tbody section

I am struggling to calculate the total number of tr's within my nested tbody, but I am not getting the correct count. The jQuery code I used is returning a high number like 44 rows instead of the expected 7 rows. Can anyone point out where I might ha ...

The art of deciphering a returned object in jQuery

Recently, I've been working with this jQuery code snippet: $.ajax({ type: "POST", url: "/problems/vote.php", dataType: "json", data: dataString, success: function ...

How can I make the row color of a jQuery datatable change when the row is selected?

One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked. This is the approach I attempted: <table id="tabellaOrdinaFarmaci" class=" ...

The caption below the image is not functioning correctly when hovering over it

I'm having trouble getting the text to appear correctly underneath the image. Whenever I hover over the image, the text seems to overlap it. I am sure there is a simple solution to this issue, but I can't seem to figure it out. Removing the inlin ...

Achieving distinct CSS margins for mobile and desktop devices in a Django template without the need for multiple {% block content %} statements

Is there a way to dynamically change the margin-left of my main {% block content %} in the base.html template based on whether the viewer is using a mobile or desktop device? This is how my current base.html looks like: <div class="content container-f ...

Aligning a Material UI button to the far right of a row

I am struggling to align a React material-ui button to the right-most of the page and despite trying to use the justify="flex-end" attribute within the following code, it doesn't seem to be working: <Grid item justify="flex-end" ...

When the button switches to an ASP Button, the CSS after gets removed

Query: Is there a way to maintain the functionality of the 'after' part of the code when switching from an HTML button to an ASP button? I am experiencing issues with it dropping. Issue: After changing <button to <asp:button, the after e ...

PHP unable to parse data from Jquery.ajax PUT request

I'm currently working with the Slim PHP Framework and attempting to send FormData using Jquery.ajax() in the following manner: var formData = new FormData(); formData.append('some_name', 'some_data'); formData.append('a_file& ...

Dynamic element peeks out from behind parent container

When attempting to create an infinite animation for the rocket similar to the one shown here, I encountered an issue where the rocket does not hide beneath the parent div as demonstrated in the example. Instead, the rocket changes position on the Y-axis an ...

The first three AJAX requests are successful, but the fourth one fails to reach the PHP script

I am currently working on cascaded selects (a total of 4) that retrieve data from a database. To populate them, I use SQL queries based on the selection made in the previous select element. To establish communication between the select element and the subs ...

Using Jquery to add links that open in a new tab

I have a client who runs a WooCommerce WordPress site and they want the product image/link on the category page to open in a new tab when clicked. I have been attempting to use jquery to achieve this with no success. As I am relatively new to jquery, any a ...

Could variable scope change during asynchronous jQuery AJAX calls?

I am currently working on a system to track item stock, but I seem to be encountering an issue with the correct updating of statuses. In my JS code, it seems that the values of objects within the $.each loop are what is being utilized for operations like ...

The jQuery hover script behaves erratically

I have a simple jQuery script that elevates an image when hovered over. However, the hover effect sometimes does not work as expected. I am looking for additional ways to modify the script to ensure that it functions smoothly all the time, rather than spor ...