Struggling to access the height attribute from a CSS file

Question

Struggling to access the height attribute from a CSS file

Hey there.

I'm pretty confident that the solution to my query is quite simple.

So, I have a .css file with this particular code snippet:

div.site
{
  text-align:center;
  border:2px solid #4b6c9e; 
  padding:1px;
  margin-top:10px;
  font-size:medium;
  font-family:Verdana;
  font-weight:bold;
  height:25px; 
}

Then comes the a .js file which constructs my div using data from an xml. Here's an excerpt:

txt = txt + "<div class='site'><span class='link'><a class='nav' href='" + siteUrl[0].firstChild.nodeValue + "' target='_blank'>" + siteName[0].firstChild.nodeValue + "</a></span></div>"

document.getElementById('portalLinks').innerHTML = txt;

And in my .html file, I've got this:

<div id="portalLinks"></div>

Now, displaying the content on the page isn't an issue. But where I'm facing difficulty is in fetching the height for the site class from my .css file. This is the code I'm trying to use:

var height = $(".site").height();

My goal here is to utilize this height value to dynamically calculate and adjust the height of portalLinks:

$("#portalLinks").css({ "height": newHeight }) - where the value of newHeight will be calculated based on `height`

Thanks a bunch in advance.

javascript jquery html css

Answer 1

Answer №1

It's important to note that the value returned by $(".site").height(); is simply a number and not a complete CSS height value.

When using

$("#portalLinks").css({"height": newHeight})

with the result of the initial call, you'll end up with an invalid value of 25. To remedy this, make sure to append a unit to the variable - for example, px:

$("#portalLinks").css({"height": newHeight +'px'});

Furthermore, keep in mind that this action alone will set the height of #portalLinks to match the height of just one .site element.

If your intention is to set the height to the cumulative total, you will need to loop through the results of $('.site'):

var newHeight = 0;
$(".site").each(function(){
    newHeight += $(this).height()
});

$("#portalLinks").css({"height": newHeight +'px'});

For a demonstration, refer to this fiddle: http://jsfiddle.net/EZWX4/

Additional Information: The method .height() retrieves the CSS height attribute value and doesn't include padding or borders.

In certain scenarios, this could lead to display issues, prompting the use of outerHeight() as an alternative.

Moreover, when employing outerHeight(true), any specified margins will be factored into the calculation.

Answer 2

It's important to note that the value returned by $(".site").height(); is simply a number and not a complete CSS height value.

When using

$("#portalLinks").css({"height": newHeight})

with the result of the initial call, you'll end up with an invalid value of 25. To remedy this, make sure to append a unit to the variable - for example, px:

$("#portalLinks").css({"height": newHeight +'px'});

Furthermore, keep in mind that this action alone will set the height of #portalLinks to match the height of just one .site element.

If your intention is to set the height to the cumulative total, you will need to loop through the results of $('.site'):

var newHeight = 0;
$(".site").each(function(){
    newHeight += $(this).height()
});

$("#portalLinks").css({"height": newHeight +'px'});

For a demonstration, refer to this fiddle: http://jsfiddle.net/EZWX4/

Additional Information: The method .height() retrieves the CSS height attribute value and doesn't include padding or borders.

In certain scenarios, this could lead to display issues, prompting the use of outerHeight() as an alternative.

Moreover, when employing outerHeight(true), any specified margins will be factored into the calculation.

Answer 3

Answer №2

Here's a suggestion to consider:

Adjust the height of "#portalLinks" using this line of code: $("#portalLinks").css("height", newHeight);

Another way to get the height, including stroke width, is by using this snippet:

var height = $(".site").outerHeight(); // this will include the stroke width as well

I hope this information proves helpful.

Answer 4

Here's a suggestion to consider:

Adjust the height of "#portalLinks" using this line of code: $("#portalLinks").css("height", newHeight);

Another way to get the height, including stroke width, is by using this snippet:

var height = $(".site").outerHeight(); // this will include the stroke width as well

I hope this information proves helpful.

Answer 5

Answer №3

Hey everyone, I just wanted to share the solution I found. I really appreciate all of your assistance with this issue. The problem was stemming from my approach in the method - initially trying to retrieve the height of site before constructing the content itself. This is why I couldn't obtain the correct height value. To rectify this, here is what I altered to dynamically generate my html:

        var height = $(".site").height();
        var margin = $(".site").css("margin-top");
        var newHeight = (height * site.length) + (margin * site.lenght);

        $("#portalLinks").css({ "height": newHeight + "px" });

This adjustment successfully resolved my issue.

Answer 6

Hey everyone, I just wanted to share the solution I found. I really appreciate all of your assistance with this issue. The problem was stemming from my approach in the method - initially trying to retrieve the height of site before constructing the content itself. This is why I couldn't obtain the correct height value. To rectify this, here is what I altered to dynamically generate my html:

        var height = $(".site").height();
        var margin = $(".site").css("margin-top");
        var newHeight = (height * site.length) + (margin * site.lenght);

        $("#portalLinks").css({ "height": newHeight + "px" });

This adjustment successfully resolved my issue.

Struggling to access the height attribute from a CSS file

Answer №1

Answer №2

Answer №3

Similar questions

Unlocking the Sound: Using a Custom Button to Activate Audio on HTML Video in React

Exploring the method to reveal the password hidden field in MVC by utilizing the Html helper

Utilizing Selenium to Extract Data from ESPN Website

What is the best way to include a file attachment using a relative path in Nodemailer?

Start by creating a set of vertices and triangles to be utilized by the vertex shader

interactive vuetify navigation trail elements

Is there a simple way to delete an element from a multidimensional array object in React JS?

Minimize the entire project by compressing the .css, .js, and .html files

Triggering an Ajax call for form validation only occurs when the form is not validated

Issue with directive causing hoverable or clickable tooltip not opening when the tooltip is supposed to be displayed

Using jQuery, you can utilize the $.when() function with both a single deferred object and an

The :not() exclusion in CSS property fails to exclude the class

What is the best way to incorporate currency formatting into a table using sumtr and datatables?

What is the best way to verify the presence of a file using jQuery?

The login page allows entry of any password

What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

What is the best way to align my SVG to display inline with text?

Exploring the art of path zooming in d3.js

What is the process for monitoring all functions that will run upon completion of an ajax request?

The error message "ReferenceError: $ is not defined" is displayed within