Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Conditionally unload script tags using @media queries?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #39623
    modiophile
    Participant

    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.

    #109328
    jordanmoore
    Member

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

    #109332
    modiophile
    Participant

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

    #109345
    modiophile
    Participant

    *delete*

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.