How Can I override jQuery hide() function?

Question

I have a back to Top anchor image which when a user clicks on it, it takes him back to the top with js animation. I first hid the icon with js, till it gets to a certain point, it will then show. This is working fine.

Here is my problem. In my @media query, I didnt want the back to top icon to show from 0px to 480px viewport. So in the @media query of 0px to 480px, i set the icon to display:none. But it's still showing. I know it the js that is forcing it to show.

How will I override the js hide() function for 0 to 480px only?

Answer 1

You could simply use !important within the CSS (and within the 480px media query) - that will overwrite the inline styles applied by jQuery:

@media (max-width: 480px) {
    .logo{
        display: none !important;
    }
}

A better solution would be to modify your JavaScript so that it doesn't show it at that width!

Answer 2

jQuery hide() & show() set the display property directly on the element.

eg <div class="hide" style="display: block">...</div>

Your stylesheet properties will be overridden in this case, due to the hierarchy of specificity . If it's important to you to set the display with jQuery, but you don't want to show the element at widths below 480px, then you'll need to use some conditional logic to either show() or hide() as appropriate.

Something like if (480 > window.innerWidth) { $('.hide').hide(); } if (480 > window.innerWidth) { $('.hide').hide(); }