Obtain the height of the div element class

Question

Obtain the height of the div element class

Is it possible to retrieve the height of a class in C#? I am currently utilizing HTMLAgilityPack to access the nodes. Here is my current code.

private async void GetCldInfos()
    {
        string sURL = @"https://m.investing.com/economic-calendar/";
        using (HttpClient clientduplicate = new HttpClient())
        {
            clientduplicate.DefaultRequestHeaders.Add("User-Agent",
                "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident / 6.0)");

            using (HttpResponseMessage responseduplicate = await clientduplicate.GetAsync(sURL))
            using (HttpContent contentduplicate = responseduplicate.Content)
            {
                try
                {
                    string resultduplicate = await contentduplicate.ReadAsStringAsync();

                    var websiteduplicate = new HtmlDocument();
                    websiteduplicate.LoadHtml(resultduplicate);
                    var News = websiteduplicate.DocumentNode.Descendants("div").Where(o => o.GetAttributeValue("class", "") == "js-economic-calendar").Single();
                    //get height here
                }
                catch (Exception ex1)
                {
                    throw ex1.InnerException;
                }
            }
        }
    }

Edit: an image can be found here: https://i.sstatic.net/DN8AL.png In the image, I am struggling to determine its height. Is there a way to obtain this height programmatically? My intention is to incorporate it into a scroll viewer. I have disabled the browser's scroll bars so that I can utilize my own. Therefore, I need to adjust the scroll viewer's height to correspond with the form...

c#css uwp html-agility-pack

Answer 1

Answer №1

This tutorial demonstrates how to use the headless browser Watin to extract the height of a DOM element by employing inline JavaScript.

To begin, you need to install Watin through Visual Studio's Nuget Package Manager Console with the following command:

PM> Install-Package WatiN

Once Watin has been successfully installed, follow this script to navigate to a webpage and execute a simple JavaScript snippet to fetch the height of an element:

using WatiN.Core;
...

private void buttonGetElementHeight_Click(object sender, EventArgs e)
{
    WatiN.Core.Settings.Instance.MakeNewIeInstanceVisible = false;
    IE browser = new IE();

    browser.GoToNoWait("https://m.investing.com/economic-calendar/");
    browser.WaitUntilContainsText("Filters");

    var height = browser.Eval("document.getElementsByClassName('js-economic-calendar')[0].offsetHeight");
    labelResult.Text = String.Format("Element height is {0}px", height);

    browser.ForceClose();
}

Additionally, a screenshot was captured to showcase the functioning button that retrieves the height:

https://i.sstatic.net/FFoWr.gif

NOTE

Keep in mind that this example serves as a test, so it is advisable to implement error handling for both C# Watin objects and any inline JavaScript being evaluated in the code.

ALTERNATIVE METHOD

If you prefer using Windows.UI.Xaml.Controls.WebView, here's how you can achieve the same outcome:

private async void webView1_LoadCompleted(object sender, NavigationEventArgs e)
{
    var offsetHeight = await webView1.InvokeScriptAsync("eval", new string[] {
        "document.getElementsByClassName('js-economic-calendar')[0].offsetHeight.toString()"
    });
    textBox.Text = offsetHeight;
}

private async void button_Click(object sender, RoutedEventArgs e)
{
    webView1.LoadCompleted += webView1_LoadCompleted;
    webView1.Navigate(new Uri("https://m.investing.com/economic-calendar/"));
}

A snapshot demonstrating the successful execution of this alternative approach:

https://i.sstatic.net/hoxfl.gif

Answer 2

This tutorial demonstrates how to use the headless browser Watin to extract the height of a DOM element by employing inline JavaScript.

To begin, you need to install Watin through Visual Studio's Nuget Package Manager Console with the following command:

PM> Install-Package WatiN

Once Watin has been successfully installed, follow this script to navigate to a webpage and execute a simple JavaScript snippet to fetch the height of an element:

using WatiN.Core;
...

private void buttonGetElementHeight_Click(object sender, EventArgs e)
{
    WatiN.Core.Settings.Instance.MakeNewIeInstanceVisible = false;
    IE browser = new IE();

    browser.GoToNoWait("https://m.investing.com/economic-calendar/");
    browser.WaitUntilContainsText("Filters");

    var height = browser.Eval("document.getElementsByClassName('js-economic-calendar')[0].offsetHeight");
    labelResult.Text = String.Format("Element height is {0}px", height);

    browser.ForceClose();
}

Additionally, a screenshot was captured to showcase the functioning button that retrieves the height:

https://i.sstatic.net/FFoWr.gif

NOTE

Keep in mind that this example serves as a test, so it is advisable to implement error handling for both C# Watin objects and any inline JavaScript being evaluated in the code.

ALTERNATIVE METHOD

If you prefer using Windows.UI.Xaml.Controls.WebView, here's how you can achieve the same outcome:

private async void webView1_LoadCompleted(object sender, NavigationEventArgs e)
{
    var offsetHeight = await webView1.InvokeScriptAsync("eval", new string[] {
        "document.getElementsByClassName('js-economic-calendar')[0].offsetHeight.toString()"
    });
    textBox.Text = offsetHeight;
}

private async void button_Click(object sender, RoutedEventArgs e)
{
    webView1.LoadCompleted += webView1_LoadCompleted;
    webView1.Navigate(new Uri("https://m.investing.com/economic-calendar/"));
}

A snapshot demonstrating the successful execution of this alternative approach:

https://i.sstatic.net/hoxfl.gif

Answer 3

Answer №2

It doesn't seem possible because the browser calculates the height.

In order to achieve this, you'll need to pre-render the HTML and then calculate it.

Update: If you're open to using JavaScript to obtain the height, it can be done easily.

Simply select the div wrapping the view for your slimscroll:


function getsize() {
    var el = $('#divIdYouWantSize'),
        curHeight = el.height(),
        autoHeight = el.css('height', $(window).height()).height();
            
    el.height(curHeight).animate({ height: autoHeight }, 100);
};

Answer 4

It doesn't seem possible because the browser calculates the height.

In order to achieve this, you'll need to pre-render the HTML and then calculate it.

Update: If you're open to using JavaScript to obtain the height, it can be done easily.

Simply select the div wrapping the view for your slimscroll:


function getsize() {
    var el = $('#divIdYouWantSize'),
        curHeight = el.height(),
        autoHeight = el.css('height', $(window).height()).height();
            
    el.height(curHeight).animate({ height: autoHeight }, 100);
};

Obtain the height of the div element class

Answer №1

Answer №2

Similar questions

Is it possible to override the body width setting?

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Tips for retrieving formatted text layout from the database

Switch between various div elements

If the database row cannot be found, show a blank input page for error handling

Dynamic resizing in NextJs does not trigger a re-render

Using `ITimeouts.ImplicitlyWait(TimeSpan)` in Selenium is now considered outdated and deprecated

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Steps for incorporating code to calculate the total price and append it to the orderMessage

How can I use CSS to transform a "+" symbol to an "x"?

IE9 is not recognizing CSS styles

New to Jquery - Experiencing difficulties with menu animation

Styling with CSS and Angular: Loading background images dynamically with a greyscale effect

Trigger an Onclick Event in Selenium

Dynamic Font Formatting in Rails Table Based on Conditions

Troubleshooting JavaScript for Sidebar Disappearance due to marginRight and display CSS Issue

Is there a more efficient method than continually deserializing and serializing data during API calls?

What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

Can CSS be used to consistently position content in a specific manner?

What could be the reason that the accordion is failing to expand or collapse when clicked?