CODEWITHSUNDEEP
javascriptjquery
John Ohara
John Ohara

Reputation: 2901

jquery not quick enough to take effect

I have a need to add a class to certain pages - ones that contain an ID of #hero. For all other pages, the class must not be added.

Because I'm using asp.net with a few layered master pages, its not as simple as just adding a class directly to the html becuase the body tag sits a couple of pages above the aspx page.

I could locate the body tag, but so far I've tried to avoid that due to the added complexity, and instead tried to use jquery.

Here's the code:

$(document).ready(function () {

    updateBodyClasses();

});

function updateBodyClasses() {

    if($("#hero")) {
        $("html, body").addClass("hero");

    }
}

Nothing complicated, but here's the rub. By the time the class has been appended, the page has been rendered and the class doesn't seem to have any effect. However, if I test it by adding the class directly to the html, it works - so I know the CSS works and that its a timing issue.

I suppose I could add the code higher up the page - jquery is deferred, so I would need to know the equivalent javascript to try it out.

Would appreciate any thoughts on this potential solution, or perhaps and other ideas.

/* UPDATE */

For clarity, it seems to be the HTML related class that isn't being applied.

Upvotes: 2

Views: 193

Answers (4)

John Ohara
John Ohara

Reputation: 2901

No real solution provided.

Not reasitic to change the whole site infrastructure - from one that defers jquery to loading it synchronously.

The two other jquery answers are as per the current setup and don't work.

The only working solution was provided by Tushar, although it would still require selective loading of the script, which was not included in the answer.

In the end, I used a workaround, which bypassed the need for any javascript. Instead of selectively adding a class to html tag, I added the css permanently to the html tag, affecting all pages. I then added an inner div, which reverses it out. This means that any page can now manipulate its own functionality directly without having to add classes to the html tag.

Upvotes: 0

Abhishek sharma
Abhishek sharma

Reputation: 71

You can use IIFE(Immidiately Invocked Function Expression):

like:

(function()
{
 if($("#hero")) {
            $("html, body").addClass("hero");      
    }
 })();

Upvotes: 1

halfzebra
halfzebra

Reputation: 6807

You can alter the DOM without waiting for it to be ready.

You need to:

  • load jQuery in a synchronous way(without defer or async).
  • Put #hero element i above the script.

Please consider this example:

.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero">I don't care about DOM being ready</div>
<script>
  var $el = $('#hero');
  if ($el.length) {
    $el.addClass('red');
  }
</script>

Upvotes: 2

SaviNuclear
SaviNuclear

Reputation: 861

just put your function in document ready like

$(function(){        
        if($("#hero")) {
            $("html, body").addClass("hero");      
    }
});

Upvotes: 0

Related Questions