• 0

Loading different javascript depending on window size with if and else statements.


Question

So I am loading in different javascript depending on the screen width. The script is simple and works fine and loads the appropriate script depending on screen width. The problem is it only loads in the script depending on the original screen width. If i change my screen width to be smaller it doesn't change unless i refresh the page.

Anybody know of a simple fix? I am still pretty nooby with javascript.

Thanks!

Code im using: 

if ( $(window).width() > 1280) {
//Add your JavaScript for large screens here
}
else if( $(window).width() > 768) {
//Add your JavaScript for medium screens here
}

else ( $(window).width() > 439) {
//Add your JavaScript for small screens here
}

14 answers to this question

Recommended Posts

  • 0

Check out how it's done here, I use it and it works for me:

https://github.com/eddiemachado/bones/blob/master/library/js/scripts.js

In short you need to use:

$(window).resize(function () {     *your code here*}):
  • Like 1
  • 0

And if you have a lot of code depending for each of those cases you might consider using an AMD library like require.

$(window).resize(function () {     

if ($(window).width() > ...)
    require(...);
else if ($(window).width() > ...)
    require(...);

}):

That way people with a slower connection and probably fixed screen size (smartphones and tablets) don't need to load unnecessary javascript.

  • Like 1
  • 0
  On 15/09/2014 at 12:19, Brian M. said:

Loading javascript on resize is a bad idea.

 

What are you trying to accomplish? 

And why is that a bad idea? I have 3 interactive headers (phone, tablet, computer) made with Adobe Edge animate, and I just combine all their javascript files in one and set the screen width to each one.

 

All three files use the same resources, images, symbols, etc. So the user wouldn't be loading it all multiple times.

  • 0
  On 15/09/2014 at 05:46, Mieky242 said:

Check out how it's done here, I use it and it works for me:

https://github.com/eddiemachado/bones/blob/master/library/js/scripts.js

In short you need to use:

 

$(window).resize(function () {     *your code here*}):

 

 

  On 15/09/2014 at 06:23, XerXis said:

And if you have a lot of code depending for each of those cases you might consider using an AMD library like require.

$(window).resize(function () {     

if ($(window).width() > ...)
    require(...);
else if ($(window).width() > ...)
    require(...);

}):

That way people with a slower connection and probably fixed screen size (smartphones and tablets) don't need to load unnecessary javascript.

Cool!! Thank you guys!

  • 0
  On 15/09/2014 at 22:34, Veggie1232 said:

And why is that a bad idea?

Run this fiddle, and resize the browser window. You might be surprised how many times your resize function is being called.

http://jsfiddle.net/s1qt0ypf/1/

  • 0
  On 15/09/2014 at 22:47, Nik L said:

Your design is flawed if you have to load different resources such as JavaScript for different resolutions

 

(except for exceptional circumstances)

I am simply resizing the stage and repositioning elements in the stage (Stage is what you animate on in Adobe Edge animate) and depending on the screen size will reposition its elements and take in the stages width.

Seeing as its a personal project I doubt my method is "flawed" and taking in account my current understanding of javascript which is very little. I think this is fine. Unless you wana go over details on a better way. But simply telling me my way is flawed is counter productive to the problem.

  • 0

You should just need a single script to govern the animation of the elements regardless of the screen size, having multiple independent scripts that perform the same function but only differ in the input is sub-optimal (You need to keep them in sync, etc.).

  • 0
  On 16/09/2014 at 06:58, The_Decryptor said:

You should just need a single script to govern the animation of the elements regardless of the screen size, having multiple independent scripts that perform the same function but only differ in the input is sub-optimal (You need to keep them in sync, etc.).

 

In that case Ill see what I can do. Just gana start from scratch. Should be easier second time around now that I have a "rough draft" Sigh.. :(

  • 0
  Quote
Seeing as its a personal project I doubt my method is "flawed" and taking in account my current understanding of javascript which is very little. I think this is fine.

 

Your logic is also flawed.

  • 0
  On 17/09/2014 at 22:53, Nik L said:

Your logic is also flawed.

 

So you've told him his logic is flawed without offering any help... I don't get why you're bothering to post.  You aren't being constructive in any way at all. Either help him, or don't post... <Snip>

He's clearly stated his understandign of JS is minimal, and he's trying to learn and get some help.

 

Everyone else in this thread is giving him help with either the solution he's asking, OR, they're helping him in doing it the proper way.

  • 0
  On 17/09/2014 at 22:53, Nik L said:

Your logic is also flawed.

 

 

  On 18/09/2014 at 19:36, DeathLace said:

So you've told him his logic is flawed without offering any help... I don't get why you're bothering to post.  You aren't being constructive in any way at all. Either help him, or don't post... <Snip>

He's clearly stated his understandign of JS is minimal, and he's trying to learn and get some help.

 

Everyone else in this thread is giving him help with either the solution he's asking, OR, they're helping him in doing it the proper way.

I've got to agree with DeathLace. If someone is trying to learn, just telling them that they are wrong isn't helpful.
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • "Let's antagonize them more so they'll be less likely to invade us" Good logic there.
    • Samsung One UI 8 Watch beta program goes live in Korea and the U.S, for eligible devices by Sagar Naresh Bhavsar After launching the Android 16-based One UI 8 beta program for the Galaxy S25 series, Samsung has also kicked off the One UI 8 Watch beta program for eligible Galaxy smartwatches. Notably, the beta program is live for Galaxy Watch users in the U.S. and Korea through the Samsung Members app. The new One UI 8 Watch introduces a bunch of new health features, which Samsung says are to "help users build healthier habits." New features include Bedtime Guidance, Vascular Load, Running Coach, and Antioxidant Index. Here's what each feature does: Bedtime Guidance It recommends Galaxy Watch users the best time they can get a good sleep based on their recent sleep patterns. This feature could be helpful for those who have a hard time having a good asleep. To recommend the best sleep patterns, the Bedtime Guidance uses sleep data from the past three days and analyzes metrics such as sleep pressure and circadian rhythm. Sleeping on the recommended time may help users recover from irregular schedules and sleep patterns. Vascular Load Using this feature, the One UI 8 Watch-powered Galaxy smartwatches will measure the amount of stress your heart and blood vessels experience during sleep. It is one of the key indicators of heart health, because if the vascular load shows excessive fluctuations, then it could be an indicator of an underlying cardiovascular issue. Running Coach Samsung has also added a Running Coach feature with the One UI 8 Watch. It gives users a personalized running program based on their fitness levels. The user needs to run for 12 minutes for the Galaxy Watch to register and analyze certain metrics and present a performance score. Based on the score, the Running Coach will present a tailored plan to help them safely reach and work up to marathon levels. Antioxidant Index The Antioxidant Index measures the carotenoid levels, which are antioxidants found inside green and orange fruits and vegetables that are inside your skin, meant to fight aging and cell damage. With One UI 8 Watch, the Galaxy Watch will make use of a light-based sensor to scan the skin and, in five seconds, will show a report on how their eating habits are paying off. Eligible devices Beta program is available for owners of Galaxy Watch5 or later in the U.S. and South Korea. However, not all features will be available on all supported Galaxy Watch models. Here are the details: Bedtime Guidance: Available on Galaxy Watch5 series or later, requires Android phone running Android 11 or later and Samsung Health app v6.30.2 or later. Vascular Load: Supported on Galaxy Watch Ultra or later, requires Android 10 or later, and Samsung Health app v6.30.2 or later. Running Coach: Requires Galaxy Watch7 or later, Android 10 or later, and Samsung Health app v6.30.2 or later. Antioxidant Index: Supported on Galaxy Watch Ultra or later, Android 10 or later, and Samsung Health app v6.30.2 or later. How to join beta program If you own a Galaxy Watch5 series or later model, then you can head over to the Samsung Members app > navigate to the bottom of the page > tap on the Watch Beta poster > and enroll for the beta prorgam. Do note that their are limited seats available.
    • I disabled the optical camera in device manager.. leaving only the IR. This has fixed the issue for me...but only because I never use the optical camera. After each monthly update re-enable the optical just to see if it's fixed...but nope! It's annoying though how this issue hasn't been acknowledged by Microsoft.
    • Linux is a different kettle of fish to macOS and Windows, if it ran the software I required, I may have looked at it, instead of the Mac, also the Mac is a pretty powerful machine that uses less energy than x86 machines. I never in my widest dreams thought I would ever buy a Mac, the price and restrictions of the hardware, I always liked machines that I could update internally, one reason why I never liked laptops. But here I am, a nice little Mac mini M2 pro. I doubt i will replace it for a long time, if I ever do, it does what I need.
    • 106 years ago! A comic strip from 1919 predicted — eerily and accurately — what would happen if our phones fit into our pockets.  W. K. Haselden’s ‘The Pocket Telephone: When Will it Ring?’ was published in “The Mirror” when barely 1/3rd of American homes even had telephones. (A double irony: most of us are viewing this on our “pocket phones”.)
  • Recent Achievements

    • Week One Done
      patrickft456 earned a badge
      Week One Done
    • One Month Later
      patrickft456 earned a badge
      One Month Later
    • One Month Later
      Jdoe25 earned a badge
      One Month Later
    • Explorer
      Legend20 went up a rank
      Explorer
    • One Month Later
      jezzzy earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      640
    2. 2
      ATLien_0
      277
    3. 3
      +FloatingFatMan
      172
    4. 4
      Michael Scrip
      156
    5. 5
      Steven P.
      132
  • Tell a friend

    Love Neowin? Tell a friend!