jQuery to replace CSS class in external CSS after external JS loads

Question

I'm trying to create more mobile responsive tap targets for a website that has an external TripAdvisor widget included via external JS/CSS. I figured I'd use jQuery to replace the default external CSS class with a custom local CSS class defined in a media query for mobile devices.

Here's a screenshot of the included TripAdvisor widget along with its rendered code as viewed in Inspector.

The external CSS class I need to replace with jQuery is called "widEXCLINK". The class I want to replace that external CSS class with is called "tripAdvisorMobile".

/* Give a little extra margin and padding on iPhone screens [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
    /* Give a little extra padding in the TripAdvisor widget to separate tap targets on mobile */
    .tripAdvisorMobile {
        font-style: normal;
        font-size: 107.5%;
        font-family: Arial,Verdana,"Bitstream Vera Sans",Helvetica,sans-serif;
        margin: 0;
        padding: 0 9px 9px 9px;
        border: none;
        font-weight: normal;
        text-decoration: underline;
        outline: none;
        color: #000; 
    }
}

My jQuery code sits in a WordPress footer Widget control and looks like this, but it doesn't seem to be doing the replacement. When I do the replacement manually in Inspector, it works, though. What am I missing here? The link to the dev site is http://dev-osiris-tours.pantheonsite.io/

<div id="TA_excellent278" class="TA_excellent">
<ul id="2X2ZQ1k7" class="TA_links GF8D0I0EbFmi">
<li id="CR629jdXpi3p" class="ag0WGEV">
    <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://static.tacdn.com/img2/widget/tripadvisor_logo_115x18.gif" alt="TripAdvisor" class="widEXCIMG" id="CDSWIDEXCLOGO"/></a>
</li>
</ul>
</div>     

<script src="https://www.jscache.com/wejs?wtype=excellent&amp;uniq=278&amp;locationId=10438680&amp;lang=en_US&amp;display_version=2"></script>

<script>
$( document ).ready(function() {
    $("widEXCLINK").removeClass("widEXCLINK");
    $("widEXCLINK").addClass("tripAdvisorMobile");
});
</script>

Sushanth -- · Accepted Answer · 2016-10-22 18:44:17Z

1

There are 2 issue with the way you are approaching the solution.

$("widEXCLINK")

is supposed to be

$(".widEXCLINK")

If you do not include the . sizzle engine will try to look for an element by name widEXCLINK

The second issue is specificity,

.tripAdvisorMobile { specificity ---> 0 0 1 0

should have better specificity than

#CDSWIDEXC.widEXC .widEXCLINK specificity ---> 0 1 2 0

Since the 2nd one has higher specificity, that styles will be applied. To apply the styles you will have to do this instead.

@media only screen and (max-device-width: 480px) {
    `#CDSWIDEXC.widEXC .widEXCLINK.tripAdvisorMobile {`   specificity --->  0 1 3 0

And would not need any jQuery anymore to get rid of the class.

edited Oct 22, 2016 at 18:44

answered Oct 22, 2016 at 18:36

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3169905 Over a year ago

Thanks. I've removed the jQuery directives and have just put all my mobile code in the media query under #CDSWIDEXC.widEXC .widEXCLINK.tripAdvisorMobile { instead of just .tripAdvisorMobile { However, I'm not seeing the change I expected to see. How can I determine whether the specificity is taking effect?

Sushanth -- Over a year ago

For testing you can try out 2 things, either remove the media query tag to check it the styles are being applied or use chrome developer tools and switch to mobile simulator mode and play with screen sizes.

Collectives™ on Stack Overflow

jQuery to replace CSS class in external CSS after external JS loads

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related