• 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

    • That is typically how his products go. They start off with a photoshopped image or slapped together pre-production sample. If they get enough orders, they make them, if they don't, they cancel and send refunds. Art of the deal, lol.
    • The idea of an adversary saying "oh darn it, the keys are on a TPM chip so we can't get them" is probably too good to be true.
    • PowerToys is getting a big Dashboard redesign by Taras Buria PowerToys currently has 28 utilities to enhance your user experience (the latest addition arrived in April). You can check out the list of all modules and quickly toggle them on or off on the dedicated Dashboard page that greets you each time you open PowerToys. However, with the increasing list of tools and their vast customizability, many may feel that the Dashboard is a bit undercooked and lacks more polish and useful features. If you think so, Microsoft has some good news for you. In a new PR on PowerToys' GitHub, Microsoft engineers agree that the Dashboard needs improvements, even though it worked fine in earlier days with fewer modules. The proposed solution for the overcrowded Dashboard is a redesigned variant, which looks more similar to the Windows 11 Settings app. With the suggested variant, you get much more from Dashboard: a quick link to the latest changelog, various warnings that need your attention (like conflicting shortcuts), an update button, Quick Launcher, shortcuts for your modules, and a list of available tools. A search box for modules and settings is also there to help you find stuff that you need. Here is how Niels Laute, a software engineer working on WinUI and PowerToys, describes the proposed redesign: Since PowerToys is an open-source project, other developers are welcome to contribute their ideas. One of those ideas is implementing SplitView so that you can open each module's settings without leaving the Dashboard page. Unfortunately, there is no information on when Microsoft will ship the redesigned Dashboard. While we wait for the June 2025 update, check out these three useful plugins for PowerToys Run. What other changes would you like Microsoft to add to PowerToys? Share your thoughts in the comments.
    • But AI is not turned off completely, you can hide stuff, but AI is still there, even on Windows 10 to a lesser extent. You use different MS apps on Windows 11 and again 10 to a lesser extent and AI is there, sure you don't have to use it, but why not just give an easy option to disable all AI? Even Google does that on Android. If you don't think that the MS account is not forced, then I do wonder what you think is forced. Sorry, but it is forced, try and install Windows 10 and 11 without an MS account? You will find that you can't officially, sure there are some ways to get around to and even those are getting more difficult to use as MS decides to stop people using them. My Mac on set up ask you if you have an Apple account, but it is so easy to say, nope, I have not got one. I don't understand why the pushing for an MS account, not all of us want to use the cloud for storage and for most people that is the only advantage of having an MS account, unless you play some games. I have heard that Windows 11 still pop up about using Edge when people don't certainly on updates. I get a pop-up on my Windows 10 machine now and again saying let's finish setting up. It is set up, what they want me to do is to say what I am using the computer for. Nothing to do with them, no idea what they do if I go ahead with what ever they want me to do as I skip, but there should be a no, thanks. I don't use the search in Windows, never have, unless I am looking for files, I use Duck Duck go in my default browser, but some people do, and they should not be forced to use Bing, which in the UK is a load of poop and then if they do click on an in it should open in the default browser.. This is the sort of thing I expected from Apple, Microsoft is far worse than Apple. Context menus again, people should not have to do tweaks, it should be a simple setting.
  • 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
      636
    2. 2
      ATLien_0
      275
    3. 3
      +FloatingFatMan
      171
    4. 4
      Michael Scrip
      155
    5. 5
      Steven P.
      132
  • Tell a friend

    Love Neowin? Tell a friend!