• 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

    • I simply don't get why this "OS" exists. Who cares? Great, you can now run a Windows 95-era stupid game, super cool...
    • In the UK the standard edition has been priced at £69.99, the deluxe is £89.99, the super deluxe is .... £119.99 where the hell do they suggest these prices are coming from then! Sorry but at these prices I will not be buying when it comes out. It will be much, much later when the price has dropped considerably!
    • It'll just have $300 dlc instead, several season pass and at every moment you'll be left feeling you purchased the demo by buying the standard or deluxe editions, because the superdeluxe is how they meant to release the game in full.
    • Following higher pricing fears, Take-Two confirms Borderlands 4 won't be $80 by Pulasthi Ariyasinghe Video games going even higher in price has been a controversial subject as of late. Following the bump up to $70 in recent years, which has been vastly adopted by many publishers, now the price is slowly creeping up to be $80 for major releases. However, it seems Take-Two's latest game will not be following this new trend, despite what was being said in earlier reports. Take-Two and Gearbox today confirmed the launch of pre-orders for Borderlands 4, and front and center was the pricing information for the standard edition, which is set at $69.99. It seems the cooperative-focused looter shooter is not following in the footsteps of other high-profile $79.99 releases like Mario Kart World from Nintendo and the upcoming RPG The Outer Worlds from Microsoft. As for why many were expecting the Borderlands title to also be $80, Gearbox boss Randy Pitchford had alluded to the price hike recently. In a social media post in May, Pitchford answered a question from a fan regarding the game possibly being $80, to which he replied, saying that it was not his decision. "If you’re a real fan, you’ll find a way to make it happen," he went on to say, defending a possible $10 price hike. "My local game store had Starflight for Sega Genesis for $80 in 1991 when I was just out of high school working minimum wage at an ice cream parlor in Pismo Beach and I found a way to make it happen." In the end, Borderlands 4 is now confirmed to be releasing at $69.99 for the Standard Edition, with pre-orders available now. At the same time, a $99.99 Deluxe Edition and a $129.99 Super Deluxe Edition have also been confirmed, with each higher tier adding more cosmetic customizations as well as post-launch access to unannounced DLC content. Borderlands 4 launches September 12, 2025, across PC (Steam and Epic Games Store), Xbox Series X|S, and PlayStation 5. A Nintendo Switch 2 release is also planned to land later in 2025.
  • Recent Achievements

    • Explorer
      treker_ed went up a rank
      Explorer
    • Apprentice
      CHUNWEI went up a rank
      Apprentice
    • Veteran
      1337ish went up a rank
      Veteran
    • Rookie
      john.al went up a rank
      Rookie
    • Week One Done
      patrickft456 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      641
    2. 2
      ATLien_0
      274
    3. 3
      +FloatingFatMan
      171
    4. 4
      Michael Scrip
      155
    5. 5
      Steven P.
      140
  • Tell a friend

    Love Neowin? Tell a friend!