Member Avatar for wolfgangcs

Grabbing this "loadcssfile" from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml and added the check device.

This is the best I have and I may just be entirly confused! I want to change the CSS file depending on the device before the rest of the page loads.

function checkDevice(){
    if(window.isiPad){
        // do nothing
    } else {        
        loadcssfile(desktop.css, css);
    }
}

function loadcssfile(filename, filetype){
 if (isset(filename)){ //if filename is set
  var fileref=document.createElement('link');
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type","text/css");
  fileref.setAttribute("src", filename);
 }
}

Any ideas?

  • 2 Contributors
  • 6 Replies
  • 226 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by wolfgangcs

Recommended Answers

All 6 Replies

Member Avatar for fobos

you could try this to detect the browser.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
 // some code..
}
Member Avatar for wolfgangcs

Great thanks! What is the condition it is looking for with all of those in the same line?
(If any of these)?

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )

Original question: How can I change the CSS file after detection?

Member Avatar for fobos

yup, it searches for which one it is.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    loadcssfile(ipad.css, css);
}
Member Avatar for wolfgangcs

I see what I was doing wrong. The .css file is in another folder. I needed to add the dir to the <link>.

fileref.setAttribute("src", "assets/includes/".filename);

how can I add ?v=1 to the end of the filename?

fileref.setAttribute("src", "assets/includes/".filename. "?v=1");

doesn't seem to fly.

Member Avatar for wolfgangcs

<---With your addition of mobile/device detection--->
Do I do it like this?

if( /iPad/i.test(navigator.userAgent) ) {
        loadcssfile(ipad.css, css);
    }else if(/iPhone/i.test(navigator.userAgent)){
        loadcssfile(iphone.css, css);
    }else if(/Android/i.test(navigator.userAgent)){
        loadcssfile(android.css, css);
    }
    loadcssfile(desktop.css, css);
}
Member Avatar for wolfgangcs

I am wanting a line to be added to the <head> tag in my html file as:

<link type="text/css" rel="stylesheet" href="assets/includes/iphone.css?v=1" />

or whatever .css file needed. ideas?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.