Load different stylesheet if keyboard is present on device (javascript detect)

Question

I am trying to load a different CSS layout in case there is a physical keyboard on the device (q10.css). In case there is no keyboard, the default one is used (normalCss). For some reason the stylesheets are not loaded:

<script>
    var normalCss = document.createElement("<link rel=\"stylesheet\" href=\"css/main.css\" />");
    var q10Css = document.createElement("<link rel=\"stylesheet\" href=\"css/q10.css\" />");

    if (window.navigator.userAgent.indexOf("Kbd") != -1) {
        document.getElementsByTagName("head")[0].appendChild(q10Css);
            }
    else {
        document.getElementsByTagName("head")[0].appendChild(normalCss);
            }
</script>

*any help is highly appreciated :) Thank you!

Possible duplicate? http://stackoverflow.com/questions/13270659/detect-virtual-keyboard-vs-hardware-keyboard — bfavaretto, Jun 14 '13 at 19:45
navigator.userAgent.indexOf("Kbd") will not detect a keyboard. i have one and i get -1... — dandavis, Jun 14 '13 at 20:36

score 1 · Answer 1 · answered Jun 14 '13 at 19:49

1

That's not how you create elements, you have to do it like this :

var normalCss = document.createElement('link');
normalCss.href = 'css/main.css';
normalCss.setAttribute('rel', 'stylesheet');

answered Jun 14 '13 at 19:49

adeneo

312,895
29
395
388

score 0 · Answer 2 · answered Jun 14 '13 at 19:49

0

As you can see here createElement only parses a tagName and not text.

answered Jun 14 '13 at 19:49

FloydThreepwood

1,587
14
24

Load different stylesheet if keyboard is present on device (javascript detect)

2 Answers2