Trigger JQuery function post CSS styling completion

Question

Trigger JQuery function post CSS styling completion

Upon using

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

, it seems that the function is invoked after the DOM has loaded, but potentially before CSS styles have been completely applied.

My goal is to obtain the width of a particular element. Strangely, when attempting to retrieve this value within the ready() event, the returned result does not match the expected CSS value. However, utilizing a timer to delay this function by 10 seconds yields the correct outcome.

Therefore, I am curious if there exists a method in jQuery to observe CSS rendering?

Thank you for your assistance

jquery css

Answer 1

Answer №1

$(window).on("load", function() {
   // add your code here
});

Answer 2

$(window).on("load", function() {
   // add your code here
});

Answer 3

Answer №2

In my initial post, I relied on the JSF framework (Mojarra) and incorporated PrimeFaces components. The JavaScript code I used is as follows:

$(document).ready(function() {      
    alert("parent : " + $("#j_idt14\\:panelGrid label").parent().css("width"));

    window.setInterval(function(){alert("parent : " + $("#j_idt14\\:panelGrid label").parent().css("width"));}, 5000);

});

The width values I obtained were 416px initially, followed by 522px after 5 seconds.

I included the JS script in JSF using the following method:

<h:outputStylesheet name="styles/styles.css" />

And that's the extent of it. I'm perplexed by the results.

Answer 4

In my initial post, I relied on the JSF framework (Mojarra) and incorporated PrimeFaces components. The JavaScript code I used is as follows:

$(document).ready(function() {      
    alert("parent : " + $("#j_idt14\\:panelGrid label").parent().css("width"));

    window.setInterval(function(){alert("parent : " + $("#j_idt14\\:panelGrid label").parent().css("width"));}, 5000);

});

The width values I obtained were 416px initially, followed by 522px after 5 seconds.

I included the JS script in JSF using the following method:

<h:outputStylesheet name="styles/styles.css" />

And that's the extent of it. I'm perplexed by the results.

Trigger JQuery function post CSS styling completion

Answer №1

Answer №2

Similar questions

Struggling to align elements in React/JS/M?

Conceal one element and reveal a different one upon submitting a form

I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

Interacting with Rails controllers through AJAX to trigger a JavaScript function

Access real-time information via JSON

React drag and drop feature now comes with autoscroll functionality, making

How can I adjust the regular font size within a paragraph or link using bootstrap?

Utilize jQuery to extract data from a JSON object

Effortless Page Navigation - Initial click may lead to incorrect scrolling position, but the subsequent link functions perfectly

Identify the browser dimensions and implement CSS styling for all screen resolutions

Battle of Kingdoms API ajax

What is the procedure for configuring this.class to perform a specific action?

Button will be disabled unless a value is selected in the dropdown menu

What is the best way to display the results of an SQL query in a sequence of interconnected select boxes?

Show only upon initial entry: > if( ! localStorage.getItem( "runOnce" ) ) { activate anchor link

Is there a way to utilize jQuery to redirect to the href included in the HTML attachment?

Tips for dynamically resetting the dataTable

What measures can be taken to guarantee that a user is only able to delete designated records?

Utilizing a lone div for clearing a float

Utilizing the Masonry jQuery plugin for optimizing empty spaces