- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
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?
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.
Check out Jeremy Keith’s Conditional CSS, shape the loading of your scripts within the breakpoints – http://adactio.com/journal/5429/
kgscott284 – looks like I needed to do was add the “!important;” to my off class to the elements the script is affect. Thanks!
*delete*