Grow your CSS skills. Land your dream job.

Conditionally unload script tags using @media queries?

  • # September 5, 2012 at 5:55 pm

    Hello,

    I’m looking to unload a couple of scripts in the body of my HTML via an @media query when the viewport reaches 480px or less. Despite the fact that the script include and script block lie between the tags and and not in the head. I am still unable to target it using a class I have attached to a container .

    This is the website and the two scripts I’m trying to unload are in lines 111-143. Try viewing on mobile or re-sizing your browser and hitting refresh and you’ll see the problems I’m encountering thanks to the following scripts…
    The first script (jquery.stellar.js) affects how some of the graphics scroll such as a the moon, and clouds.

    The second script written inline fades out the text when it is scrolled near the header.

    An alternative route I tried going is adding “.off” classes to the elements in which the script is affecting, however the problem is that the script itself adds an inline property of “display: block” to those same elements thus nullifying the style.

    # September 5, 2012 at 6:36 pm

    You could do something like this:
    http://jsfiddle.net/B8nv7/
    (resize the panel to see the effect)

    In your media queries…which will always override the inline styles…

    # September 6, 2012 at 8:50 am

    Check out Jeremy Keith’s Conditional CSS, shape the loading of your scripts within the breakpoints – http://adactio.com/journal/5429/

    # September 6, 2012 at 10:15 am

    kgscott284 – looks like I needed to do was add the “!important;” to my off class to the elements the script is affect. Thanks!

    # September 6, 2012 at 11:25 am

    *delete*

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".