Search code examples
javascriptasp.netmobileserver-side

CSS Style switcher in JavaScript on an Asp .Net server


I am trying to create a mobile website and can do it with just CSS, but the server master pages MUST be in their current locations, I am planning to use a Javascript "Style Switcher" to change the stylesheets but most mobile browsers don't have java support, so is there a way using java (or any other "language" that is either supported by mobile phones or can be run server-side) to run server-side that can also stop some of the page elements from loading (for mobile bandwidth issues) and change a few lines of the master code?

I was thinking of using this (with some edits): How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

I cannot use PHP as our hosting provider will not install it.

I do not have Asp .Net access (as a user) but do have FTP access.


Solution

  • var isMobile = function() {
        var w = window.innerWidth || document.body.clientWidth;
        var o = 900;
        if(w < o) {
            return true;
        }
        else {
            return false;
        }
    };
    

    and an init func

    var init = function(){
      if(!isMobile()){
        // all your desktop stuff goes here
        var desktopcss = document.createElement('link');
        desktopcss.rel = 'stylesheet';desktopcss.type = 'text/css';
        desktopcss.href='/desktop.css';
        document.getElementsByTagName('head')[0].appendChild(desktopcss);
      }
      else{
        // all your mobile stuff goes here
        var mobilecss= document.createElement('link');
        mobilecss.rel = 'stylesheet';mobilecss.type = 'text/css';
        mobilecss.href='/mobile.css';
        document.getElementsByTagName('head')[0].appendChild(mobilecss);
      }
    };
    

    and keep in mind that if you set something to

    display:none;
    

    via css, it will not be loaded and it will not be displayed!