WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > PROGRAMMING LANGUAGES > Scripting and Server Side > Some ways to trigger a script and hide another for mobile?

Reply
  Thread Tools Display Modes
Old 19th September 13, 08:00 AM   #1
gibby
WLC Member
 
Join Date: Jul 2013
Posts: 7
Default Some ways to trigger a script and hide another for mobile?

I have searched and have read article after article, from using jQuery, using Javascript Pairing, to using esquire.js and to even using Scott Jehl's Respond.js and maybe it's overload but I do not understand this. First which way is going to best for performance for mobile? Some say no jQuery for mobile because it bogs it down and others say use it. Some say don't use any JS if possible because of lack of support and again, performance issues.

I am trying to learn JS but it will take a bit, I am just getting HTML and CSS under my belt.

From what I've read, I want to place the mobile script as the default and then once my min-width is hit for the desktop version the script would get and replace the mobile html/script with the larger version script. I hope that's not to confusing.

HTML

HTML Code:
<aside class="smallScreen">
<div class="smallWeather" style='width: 240px; height: 420px; background-image: url( http://...' ><div id='NetweatherContainer' style='height: 405px;' ><script src='http://...'></script></div></div></div></aside>

<aside class="largeScreen">
<div class="largeWeather" style='width: 500px; height: 440px; background-image: url( http://...' ><div id='NetweatherContainer' style='height: 420px;' ></div></div></aside>
</section>

Can someone please show the correct/best way to do this? My min-width when largeScreen script needs to trigger and replace the mobile is 605px for the @media rule.
gibby is offline   Reply With Quote
Old 19th September 13, 02:57 PM   #2
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Some ways to trigger a script and hide another for mobile?

First, get your CSS out of your HTML and into its own document. Then, code the site to look how you want it to on mobile. Then, you write the media query with the desktop styles in the same stylesheet like so:
Code:
@media (min-width:605px){
/* Desktop styles */
}
A couple things to watch out for:
1. CSS specificity is really important for media queries to work. For instance, if you specify nav ul li.menu-item{} in the mobile styles, you need to write it at least that specific in the media query, so just doing ul li.menu-item won't work.
2. Most of the time, you won't need to use JS at all for this. The only time you would need to do that is if you want to conditionally load items based on screen size. CSS media queries can display or hide content, but that doesn't stop it from being downloaded. You can use JS to load new elements on larger screens to keep mobile size down.
3. Don't sweat jQuery too much. It doesn't slow things down noticeably more than vanilla JS, especially on any smartphone made in the last few years. If you're truly worried about the extra file download (which is really small and likely cached on the device anyway), give Zepto.js a look. It's considerably smaller, and has almost the same API.
ronaldroe is offline   Reply With Quote
Old 19th September 13, 09:56 PM   #3
gibby
WLC Member
 
Join Date: Jul 2013
Posts: 7
Default Re: Some ways to trigger a script and hide another for mobile?

Thanks ronaldroe for the advice.

I probably should have been a bit more specific. I do have my media queries already set up and usually do put all of my styles in the CSS. The styles there in the HTML are the ones from the actual widgets the scripts are associated with so I thought I would leave them until I understand a bit more about them.

The CSS specificity is very helpful for sure. I have played with the positioning of the media queries to take more of a cascading approach and that explains quite a bit of the problems I was having.

So with jQuery I need to have the jQuery.js file external and then just call the functions from the HTML? I started looking into jQuery and was told to learn JS first so that's where I'm at.

I'm surprised I can't find a straightforward answer with exact examples on this. I would think replacing mobile scripts for desktop versions would be very common with how popular fluid and responsive design is.
gibby is offline   Reply With Quote
Old 20th September 13, 11:53 AM   #4
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Some ways to trigger a script and hide another for mobile?

Quote:
Originally Posted by gibby View Post
I started looking into jQuery and was told to learn JS first so that's where I'm at.
Not necessarily true. I learned the other way, and it works just fine. Just be aware as you go along that anything you do in jQuery can be done in regular JS, and understand how. By learning jQuery first, you can get your feet wet and learn how to manipulate the DOM. From there, you can go on into full-on JS and learn how to write scripts that not only manipulate the DOM, but can make decisions (conditionals) or loop through elements and perform a task, etc.

Quote:
Originally Posted by gibby View Post
I'm surprised I can't find a straightforward answer with exact examples on this. I would think replacing mobile scripts for desktop versions would be very common with how popular fluid and responsive design is.
I guess I'm still not understanding what you need. What exactly are you trying to do?
ronaldroe is offline   Reply With Quote
Old 20th September 13, 10:02 PM   #5
gibby
WLC Member
 
Join Date: Jul 2013
Posts: 7
Default Re: Some ways to trigger a script and hide another for mobile?

Thanks again @ronaldroe! I have 2 scripts, one is for desktop and one is for mobile. I need to trigger the script for desktops at min-width: 605px. I also need to turn the mobile script off at the same time.

I have read about enquire.js and think this is the way to go. With enquire.js the basic code is

Code:
enquire.register("screen and (max-width: 1000px)", {

  // REQUIRED
  // Triggered when the media query transitions
  // from *unmatched* to *matched*
  match : function() {},
  
  // OPTIONAL   
  // Triggered when the media query transitions 
  // from a *matched* to *unmatched*                        
  unmatch : function() {},    
                                
  // OPTIONAL
  // Triggered once immediately upon registration of handler
  setup : function() {},      
                                
  // OPTIONAL
  // Defaults to false
  // If true, defers execution of the setup function
  // until the first media query is matched (still just once)
  deferSetup : true           
});
The issues I'm having with this is just knowing syntax and a bit more about using these script libraries. From what I understand, I can put this code directly in the HTML head or in an external JS file. Since it's so small, I thought it would probably be best to just put in HTML instead of another file request.

From what I've already read about enquire.js, I think I only need the match and unmatch functions. The match function to turn the desktop script on at min-width of 605px and the unmatch function to turn it off at 604px max-width.

There are a handful of articles about this and I am reading everything I can on it but any help is sincerely appreciated. On a side note, does the forums here not have a reputation or thumbs up counter for people or am I just to new to be able to use them?

Last edited by gibby; 20th September 13 at 10:13 PM.
gibby is offline   Reply With Quote
Old 21st September 13, 05:26 AM   #6
gibby
WLC Member
 
Join Date: Jul 2013
Posts: 7
Default Re: Some ways to trigger a script and hide another for mobile?

This is where I'm at so far but this is not working. I read that I don't wrap the script in a script tag in a .js file so I'm not sure how this goes but here it is.

External JS file enquire.js
Code:
enquire.register("screen and (max-width:605)", {
    match : function() {
'http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=whteYell&logo=1&zipcode=48661&lang=eng&size=13&theme=red&metric=0&target=_self' },    
    unmatch : function() {    
'http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=whteYell&logo=1&zipcode=48661&lang=eng&size=12&theme=red&metric=0&target=_self' },
    setup : function() {},      
});
Head of HTML
HTML Code:
<script src="enquire.js"></script>

Last edited by gibby; 21st September 13 at 07:07 AM.
gibby is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:09 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.