I have implemented the same code in both CSS and jQuery:
width: 100% -100px;
Here is how I tried to execute it:
$(document).ready(function(){
$('.left').css('width', '100%').css('width', '-=100px');
});
However, it seems like this approach encounters issues when the browser window is resized after the website has loaded. I am looking for a solution similar to the following code implementation:
.left
{
width: 80%; //100% -100px;
}
.right
{
width: 20%; //100px;
}
UPDATE: Check out this jQuery demo
Method 1:
Using jQuery to resize:
function adjust_size(selector){
var current_width = selector.width(); // obtain current width
new_width = current_width - 100; // calculate new width
selector.css('width', new_width); // set the new width
}
$(document).ready(function(){
$('.left').css('width', '100%'); // initial width set to 100%
adjust_size($('.left')); // resize on document ready
});
$(window).resize(function(){
$('.left').css('width', '100%'); // reset width to 100%
adjust_size($('.left')); // adjust width on window resize
});
Method 2:
You can utilize css calc() method, for example:
/* Firefox */
width: -moz-calc(100% - 100px);
/* WebKit */
width: -webkit-calc(100% - 100px);
/* Opera */
width: -o-calc(100% - 100px);
/* Standard */
width: calc(100% - 100px);
Method 3:
using padding and box-sizing technique
.some-div
{
padding-right: 50px;
padding-left: 50px;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Using CSS2 for this Solution:
HTML Code
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS Code
.left {
position: absolute;
left: 0px;
right: 100px;
background-color: green;
}
.right {
width: 100px;
background-color: red;
float: right;
}
.left, .right {
height: 50px;
}
.container{
position: relative;
}
The fiddle above demonstrates the use of position: absolute on the .left container which can cause the layout to break if the height is not properly managed. If you are certain that the height of .left will be less than .right, then this solution works. Alternatively, if the height of .left will exceed that of .right, consider using this other solution in Fiddle.
If uncertainty remains about the heights or to avoid layout issues, implementing javascript may be a better choice (unless one container's height is known).
Utilizing CSS3, one can employ the calc feature:
width: calc(100% - 100px);
Keep in mind that browser support may vary, so it's essential to refer to the browser compatibility table on the linked page.
One practical solution would be to utilize calc();
width: calc(100% - 50px);
While many have shared effective CSS3 solutions, if you're looking to achieve the same result using only jQuery, here's a simple workaround:
$(document).ready(function(){
$('.left').css('width', $('.left').parent().width() - 100);
});
box-sizing is a CSS3 property that can be useful in certain cases. However, there is another property called calc which may not have as much support.
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="m">
<h1>100%-100px
</div>
<div id="s">
100px for me
</div>
</body>
</html>
And here is the CSS code:
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#m {
width:100%;
background:red;
height:100%;
margin-left:-100px;
padding-left:100px;
vertical-align:top;
box-sizing: border-box;
float:left;
}
#s {
float:left;
vertical-align:top;
height:100%;
width:100px;
background:green;
}
I ran into a problem while working on my personal site with Vue.js. My goal is to display the five latest posts from my Jekyll blog on the page. To achieve this, I am checking the feed at http://todayilearned.dk/feed.xml. However, I'm struggling to ...
I am a beginner with VueJS and I need to create a single page application within ASP.NET MVC5. I found this tutorial very helpful -> TUTORIAL However, when I tried to test VueJS2 Routes by creating a .vue page, the browser did not recognize "Import". ...
I'm a VueJS beginner and I'm working on creating a custom ul component for a webpage. I want this component to be populated and updated using custom props in the HTML, allowing other developers to easily use, update, and add to the component with ...
Working with TinyIMCE, I am looking to incorporate a border around all images within the textarea whenever a user submits the form. $("form").submit(function() { var content = $("#edit-message1-value").val(); // Afterwards, I want to manipulate the cont ...
I am currently utilizing Angular version one and I have set up a news feed with lists of posts. Each post includes various action buttons. One of these buttons, when clicked (referred to as button X), will move the post to the top of the list, similar to t ...
My goal is to create a radial gradient on my path element, but for some reason the radial gradient does not apply correctly. Can anyone help me troubleshoot this issue? Below is my updated code: // Define the canvas / graph dimensions var margin = {top: ...
When using the JavaScript code below, I am able to successfully send data to a page named "book.php" via the POST method (as indicated by the alert), but when I try to display the received data on book.php, nothing shows up. <script type="text/javascri ...
Currently, I am facing a challenge in setting the background-image for a specific Angular component. The code snippet I have been using is as follows: body { background-image: url(...); background-size: cover; background-repeat: ...
I am encountering difficulties with ensuring that all prepend add-ons have the same width. The issue arises when using Font Awesome icons, as each prepend is sized according to its specific icon. I came across a similar thread from approximately one year a ...
I am currently experiencing an issue with an ajax call when attempting to submit a form to the database. Below is the code I have used: <?php include 'dbConnect.php'; include 'session.php'; ?> <form class="form" id="f ...
Currently, here's the code I have, and I want it to appear like this. What are the steps needed to adjust the CSS in order to achieve that? .nav-wizard { display: table; width: 100%; } .nav-wizard > li { display: table-cell; text-align: ...
Screenshot I attempted various CSS techniques in an effort to make the .booknetic_appointment_container_footer float to the bottom of #booknetic_theme_5, but unfortunately, I was unsuccessful. The closest solution I found involved hardcoding padding, but ...
How can I retrieve all div elements with the "test" class from a variable and insert them into another div? var response = xmlhttp.responseText; var selectedDivs = $(response).find('.test'); $('.anotherdiv').prepend(selectedDivs); ...
I've been working on integrating Bootstrap 5 into my Nuxt project. While the styles are coming through perfectly, anything that previously relied on jQuery is not functioning as expected. The steps I followed for installation: Downloaded files fr ...
I'm brand new to .NET and web development, and I have a C# website. I want to define a class with a function that I can call on another page. How should I write the code for this? Let's say I have two pages: reference.aspx and edituserprofile.as ...
I need to ensure that dates are entered in the format dd-mmm-yyyy. I found a helpful post that serves as a guide: Issue: The ValidationMessageFor text is not showing up (on both postback and client side). Any suggestions? Update: By incorporating @Darin ...
My ajax response is generated dynamically, and it can contain one of the following elements: <div id="one">Test One</div> or <div id="two">Test Two</div> I am familiar with extracting elements by ID from ajax responses, but what ...
I am facing an issue with the commenting system in my Laravel application. Whenever a user submits a comment, the page reloads and takes the user back to the top of the page. I would like the page to return the user to the same position where the original ...
<head> <link href="index.css" rel="stylesheet"> <style> #amor_di_mundo{ color:#ffffff; } </style> </head> <body> <div id='divL'> <div id='amor_di_mundo'>Amor di Mundo</div> <di ...
Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...