Responsive JavaScript management

Question

I am looking to create a responsive website. I want certain JavaScript, i.e. navigation jquery, to run only on the mobile version, and another navigation jquery to run on the desktop version for the same element. I came across RespondJS (http://responsejs.com/) and Media Check (https://github.com/sparkbox/mediaCheck). I am not sure if they are the right solution, can someone give me a suggestion?

I am looking for something like:

<script>

(some code to check if desktop) {
   $(".navigation").runDesktopNavstyle();
   $(".slideshow").runDesktopSlideshow();
}

(some code to check if tablet) {
   $(".navigation").runTabletNavstyle();
   $(".slideshow").runTabletSlideshow();
}

(some code to check if mobile) {
   $(".navigation").runMobileNavstyle();
   $(".slideshow").runMobileSlideshow();
}

</script>

you don't need javascript to go responsive as of these days ;) see this article: css-tricks.com/snippets/css/media-queries-for-standard-devices — gustavohenke
– gustavohenke, Commented Jun 11, 2013 at 13:58
Sorry, I meant like I want to use a different javascript applied for the navigation while its viewed on the desktop, and totally another one applied while on the mobile or tablet. — Suthan Bala
– Suthan Bala, Commented Jun 11, 2013 at 14:03

Niet the Dark Absol · Accepted Answer · 2013-06-11 13:59:54Z

2

The simplest option would be to wrap your conditional code in something like this:

if( window.innerWidth < 640) { ... } // max-width:640px
if( window.innerHeight > 800) { ... } // min-height:800px
if( window.innerWidth < window.innerHeight) { ... } // orientation:portrait

Things like that. Note however that it should only be wrapped around the contents of functions, so you can still define them. For exampple:

$("#mynav").hover(function() {
    if( window.innerWidth < 640) { /* do stuff */ }
},...);

answered Jun 11, 2013 at 13:59

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lloyd · Accepted Answer · 2013-06-11 13:59:16Z

I don't recommend supplying different forms of JavaScript up depending on whether you're on a phone or desktop etc, it can become a maintenance nightmare and not really what responsive is about, you might as well have a separate site for mobile in that case.

However, using Bootstrap you could apply the responsive classes to your elements then using jQuery you can look for and select on those classes. This means you're providing the same JavaScript files up but making them a little more intelligent when dealing with the elements they need to, for example:

<div class="visible-phone">
</div>

<div class="visible-desktop">
</div>

<script type="text/javascript">

$('.visible-phone').length > 0) {
   // Do phone stuff
}

$('.visible-desktop').length > 0) {
   // Do desktop stuff
}

</script>

Very rough, but you get the idea.

Collectives™ on Stack Overflow

Responsive JavaScript management

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related