What happens to the page layout when a user adjusts the window size?

Is there a way to ensure that a div remains at 40% of the full screen width, regardless of window size changes? I am looking for a JavaScript or JQuery code that can lock the setting of the div to always be 40% of the full screen size.

<div style="width: 40%;">
<ul>
<a href="myBio.html"><li>My Bio</li></a>
<a href="favGam.html"><li>favorite Games</li></a>
<a href="jibPuz.html"><li>Jigsaw puzzle</li></a>
<a href="tabOfElm.html"><li>Table of Elements</li></a>
<a href="calc.html"><li>Calculator</li></a>
<a href="recBok.html"><li>Recommended Books</li></a>
<a href="canCod.html"><li>Canadian CoR&F </li></a>
<a href="newtLaw.html"><li>Newtons Law of Gravity</li></a>
</ul>
</div>
javascriptjqueryhtmlcsspercentage

Answer №1

In order to achieve this, JavaScript must be utilized.

function adjustSize() {
    $("#customDiv").css("width", screen.width * 0.5);
}
$(window).resize(adjustSize);
adjustSize();

Be sure to assign a unique ID to your div element.

Answer №2

To adjust the width of an element based on the current window size, you can calculate 40% of the window width and apply it to the element's width attribute.

function setElementWidth (){
 var newWidth = window.innerWidth * 0.4;
 $('element').css('width', newWidth + 'px');
}

$(document).ready(function(){
 setElementWidth();
});

I hope this solution meets your needs!

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

Is it possible for WebSockets to serve as a substitute for AJAX for handling Database requests?

I have recently made the switch on my website from using the EventSource Polling constructor to the WebSocket standard in Node.js. Originally, all backend work on my site was done with PHP, but I am now trying to transition as much as possible to WebSocket ...

javascriptphpnode.jsajax

Add a personalized class to a mat-tab within a mat-tab-group

I am looking to add unique styles to specific mat-tabs within a mat-tab-group based on a condition. The main mat-tab-group already has a default custom style that is functioning correctly. The styling is applied as follows: .mat-mdc-tab-group.round-tabs, ...

cssangularangular-materialmat-tab

Form a hierarchical data structure using a combination of three arrays

Here are three sets of data: let firstData = [ {key: value1}, {key: value2}, {key:value3} ] let secondData = [ {key: value1}, {key: value2}, {key:value3}, {key: value4} ] //same structure, different values let thirdData = [ [1,1,1,1], [1,1,1,1], [1,1,1,1] ...

javascriptarraysobject

Utilizing Async and await for transferring data between components

I currently have 2 components and 1 service file. The **Component** is where I need the response to be displayed. My goal is to call a function from the Master component in Component 1 and receive the response back in the Master component. My concern lies ...

javascripttypescriptangular7

When working with create-react-app and TypeScript, you may encounter an error stating: "JSX expressions in 'file_name.tsx' must

After setting up a React project with TypeScript using the CLI command create-react-app client --typescript, I encountered a compilation error when running npm start: ./src/App.js Line 26:13: 'React' must be in scope when using JSX react/r ...

javascriptreactjstypescript

Using FUELPHP to make Ajax requests without relying on jQuery

After conducting thorough research, I have come to the conclusion that FUELPHP does not handle Ajax requests as efficiently and natively as some other frameworks like RubyOnRails. It seems that in order to perform Ajax requests with FUELPHP, one must manu ...

phpjqueryjsonajaxfuelphp

Upcoming challenge regarding naming files

I came across a new problem: Error: ENOENT: file or directory not found, rename '/home/user/my-web/.next/export/en/cities/berlin.html' -> '/home/user/my-web/.next/server/pages/en/cities/berlin.html' What could be causing this issu ...

javascriptreactjsbuildnext.jsrename

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

#1 Even if chosen, cannot search by id. The 'name' condition in the loop works well but I am unable to correctly search by id (returns nothing). #2 When selecting an option from the dropdown menu, it only displays until I start typing. I would l ...

javascripttypescriptvue.js

Guide on how to implement a jQuery toggle feature using pre-existing HTML markup

<div class="rsvp"> <div class="block"> <span class="rsvpNote"> <h4 class="rsvpTitle"> <a href="#" class="blockExpand" click="toggleRSVP(this); return false;"><span class="arrow"></spa ...

jqueryhtmlcsstoggle

Creating a full-width row and columns layout using CSS Flex Box styling

Hello my fellow coding enthusiasts! I'm trying to create a simple box layout using flexbox, but I'm struggling to get it just right. The goal is to have a row with two columns within one container. Here's what I'm aiming for: Essentia ...

csslayoutflexbox

Subject line matches webpage header

Is it possible to automatically generate an email subject that includes the title of the webpage from where the user is sending an email? For instance: If my webpage's title is "About Us," Can the email subject be "About Us" as well? I am not very ...

phphtml

Building numerous pagination features in a single page using Codeigniter

I'm just starting out with codeigniter and I need help creating multiple paginations on one page. I've tried it, but only one pagination is working while the others are giving me errors. Can someone please assist me? I read some suggestions that ...

javascriptajaxcodeigniter

What is the best way to calculate the number of squares required to completely fill a browser window in real-time?

I am creating a unique design with colorful squares to cover the entire browser window (for example, 20px by 20px repeated both horizontally and vertically). Each square corresponds to one of 100 different colors, which links to a relevant blog post about ...

javascriptjqueryhtmlcss

Looking to retrieve a JavaScript code block from an AJAX response using jQuery?

How can I extract a Javascript code block from an ajax response using jQuery, while disregarding other tags (in this case, the div tag) and prevent the execution or evaluation of the Javascript code? Example in get_js.html: <script> $(function ...

javascriptjqueryajax

"React Component - Common Mistakes in Utilizing Input Fields in Forms Without Effectively Implementing Use

import { useEffect } from 'react'; import AddRecordButton from './AddRecordButton'; const AddRecordForm=()=>{ const [content, setContent]=useState([]); const [artist_name, setartist_name] = useState(''); const [album_name, ...

javascriptreactjsreact-hookscomponents

Grid item overlay

Currently, I am facing an issue with React where I am attempting to place an overlay on top of each grid item in a grid. Despite trying multiple approaches, the overlay appears beneath each grid item instead of over it. Even setting the position: absolute ...

cssreactjscss-grid

Preventing Columns in SlickGrid from Being Reordered

Is there a way to prevent specific columns in SlickGrid from being reordered? I have tried looking for a solution but couldn't find one. Unlike the 'resizable' option, there doesn't seem to be an option for each column to allow or disal ...

javascriptangularjsslickgrid

PostgreSQL error: table column does not exist in Sequelize

Currently, I'm in the process of developing a compact webservice utilizing Node.js, Express, PostgreSQL database while incorporating Sequelize. The initial step involved setting up the database using the following SQL queries in psql: CREATE TABLE Con ...

javascriptnode.jspostgresqlexpresssequelize.js

Trouble encountered with updating the Input value upon pressing the enter key

In my ReactJS-based application, I am working on a component that includes a Material Input element. Users can enter words and when they press the enter key, those words are displayed as chips within the same input field. The issue I'm encountering i ...

javascriptreactjsmaterial-ui

What is causing the page to not load in my development environment (MAMP PRO) when using header()?

Has anyone experienced the issue where suddenly on MAMP PRO, the page will only load up to the header() function? For example, here is a header call I am using: header('Location: /index_signedIn.php'); exit(); I have tested my other sites and ...

phphtmlheadermamp