The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels?

Let's say we have a variable storing the outerHeight of .pg-sect:

var $section = $('.pg-sect').outerHeight();

Now, if I want to add an additional 70px to the height we obtained, what would be the code for it?

var $section = $('.pg-sect').outerHeight() + 70px;

Here's another scenario:

If I want to check if the scroll area equals the .pg-sect area minus 100px before calculating the outerHeight, how can I find out this -100px value of the element's outerHeight?

javascriptjqueryhtmlcss

Answer №1

const $block = $('.pg-sect').outerHeight();

//In this line of code, a value is being assigned without actually changing the element itself
const $block = $('.pg-sect').outerHeight() + 120;

If you want to make changes to the element:

const $block = $('.pg-sect').outerHeight() + 120;
$('.pg-sect').outerHeight($block);

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

Constructing markup for text and subtext in a meaningful manner

I am in the process of creating a roster of Employees and their dependents on a webpage and I could use some guidance on the best way to structure this information. Here is an example of the content on my page: <div> John Smith Employee - 03/01/198 ...

htmlcss

Shifting the position of personalized tabs using Jquery

I have created some basic HTML/CSS tabs and I want to move to the next tab by clicking a link at the bottom of every tab. HTML <ul class="tabs"> <li class="active"> <a href="#">Explainer (2mins)</a> <div class=" ...

javascriptjqueryhtmlcsstabs

Creating a user interface to display different game options using Hooks (Developing an interactive rock-paper-scissors game)

I'm currently experimenting with React.js hooks while creating a new version of the classic game "Rock Paper Scissors." I'm facing an issue where the winner is not evaluated immediately after pressing the respective button. Below is a snippet of ...

javascriptreactjsreact-hooks

Having trouble configuring the proxy port for my Vue.js application

I'm currently developing a web application using vue.js for the front end and node.js for the server. Vue is running on port 8080 and Node.js is running on port 3001. To make API calls, I have set up a proxy in my vue.config.js file, but it doesn&apos ...

javascriptvue.jsproxyvuejs2axios

Learn the trick to making specific words appear bold in Select2 by changing the font style

I'm currently working with select2 version 4.0.1, and I have a requirement to modify the font for specific words. In particular, I want to display codes AK and HI in a different/bolder font style, similar to the example below: <select id="select2" ...

jquerycsshtmljquery-select2

What are some effective ways to optimize a scrolling script?

Within my div element, I have a list of ordered elements (ol) that I am manipulating with drag and drop functionality using jQuery Nestable. If you could help me troubleshoot this issue, it would be greatly appreciated: How to scroll the window automatical ...

javascriptjqueryscrolljquery-animate

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

htmlcssangularjs

When transitioning from the accordion format for mobile to the tab layout for desktop, the tab panel displays an inaccurate title despite the content being accurate

Currently, I am working on developing a navigation system. The objective is to have an accordion-like layout for mobile and tab-based layout for desktop. Although I have implemented this setup, there seems to be an issue: For instance, if "Link #2" tab is ...

javascriptbootstrap-5accordionbootstrap-accordionbootstrap-tabs

What is the best method for initializing Bootstrap data attributes API?

I've been puzzled by this issue for a while now. When trying to use the JavaScript components, I can't seem to grasp how to utilize them using the Data Attributes API, also known as the first-class API. For example, take the modal component ment ...

javascripthtmltwitter-bootstrapmodal-dialog

Issue with my "message.reply" function malfunctioning in Discord.JS

I'm currently learning how to use discord.Js and I am facing an issue with my message.reply function not working as expected. I have set up an event for the bot to listen to messages, and when a message containing "hello" is sent, it should reply with ...

javascriptdiscorddiscord.js

The variable in my scope is not reflecting the changes in the HTML view

Here is my code for handling file attachments in AngularJS: $scope.attachments = []; $scope.uploadFile = function(files){ for(var i=0; i<files.length; i++){ $scope.attachments.push(files[i]); console.log($scope.attachments.length); } } ...

javascripthtmlangularjsangularjs-scope

Issue with margin-top in combination with clear:both does not function as expected

<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div> What is causing the margin-top property to not work as expected for 'Main Dat ...

csscss-float

Using Jquery to select and apply functions to specified div elements

As someone who is relatively new to JQuery, I have a question regarding the .on() function. Take this example: $('div').on('click', function() {$(this).toggleClass('show-description');}); This code selects all the 'div& ...

jqueryhtmlcss

Tips for displaying a removal option and eliminating an uploaded document

I need assistance in implementing file uploading using dropzone.js. I am struggling to find a solution on how to delete uploaded files. Here is the code snippet: index.php <div class="container"> <div class="file_upload"> <form action= ...

javascriptphpjquerydropzone.js

Troubleshoot your Vue.js application using Visual Studio Code. Encounter an unidentified breakpoint error

I'm encountering a problem with debugging my Vue.js project using VS Code and Chrome. I followed the official guide on the website Guide, but it's not working for me. The error I keep running into is: unverified breakpoint What am I doing wrong? ...

javascriptgoogle-chromenpmvue.jsvisual-studio-code

What is the method to include a CoffeeScript file in my project?

Currently, I am attempting to follow the steps outlined in this CoffeScript tutorial. After opening the terminal and navigating to the directory where simpleMath.coffee is located, I proceeded to run node and entered var SimpleMath = require('./simpl ...

javascriptnode.jscoffeescript

Provide the identification number of a specific row within the modal

I am trying to pass the id of a specific row into a modal popup Link code: <a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="<? echo $row['id']; ?>">Resume</a> Modal code: <div ...

javascriptphpjqueryajaxtwitter-bootstrap

Challenges of Using Flexbox in Media Queries

How can I use flex boxes in CSS to ensure that from a min-width of 769px to 1025px, the third figure is displayed on a new line while the first and second figures remain on the top line taking up equal space? <div class="mid-col-section-2"> <figu ...

htmlcssflexbox

Clickable Href in jquery autocomplete

These are the codes I am currently using: <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.1 ...

javascriptphpjquery

Keep the footer at the bottom of the screen without needing to define a 100vh in Material UI

In the process of developing my react app with MUI framework, I encountered various challenges in creating a sticky footer at the bottom of my screen. After exploring different solutions, one approach that I found most satisfactory is as follows: export de ...

javascriptcssreactjsmaterial-ui