javascript - How do I get alternate style sheets to work on iOS5 Safari? -
i have been working on html5 app ipad. part of app includes using alternative style sheets. worked great on ios 4 safari , works fine on safari on desktop. however, upgraded 1 of our ipads ios 5 beta , no longer works. ideas?
here code this.
function (options) { var i, a, main; (i = 0; (a = document.getelementsbytagname("link")[i]); i++) { if (a.rel.indexof("style") != -1 && a.title) { a.disabled = true; if (a.title == options.title) { a.disabled = false; console.log('the theme should changing : ' + a.title); } }
after searching , web, not happy of solutions. came new solution working in chrome, ff, ie , safari , safari on old ipad:
first set styles:
<link rel="stylesheet" href="./codebase/touchui.css" data-title="default" type="text/css" media="screen" charset="utf-8"> <link rel="alternate stylesheet" href="./codebase/ios.css" data-title="ios" type="text/css" media="screen" charset="utf-8"> <link rel="alternate stylesheet" href="./codebase/jq.css" data-title="jq" type="text/css" media="screen" charset="utf-8"> <link rel="alternate stylesheet" href="./codebase/sky.css" data-title="sky" type="text/css" media="screen" charset="utf-8"> <link rel="alternate stylesheet" href="./codebase/green.css" data-title="green" type="text/css" media="screen" charset="utf-8">
notice attribute "data-title" user-defined attribute.
then use function change style sheet, (note have set in app scope, can make standard function:
app = {} app.styleset=function(title) { var i, var o; for(i=0; (a = document.getelementsbytagname("link")[i]); i++) if (a.getattribute("rel").indexof("style") != -1 && a.getattribute('data-title') ) { if (a.getattribute('data-title') == title) o = a.setattribute("rel", "alternate stylesheet"); a.setattribute("title", a.getattribute('data-title')); a.disabled = true } o.setattribute("title", undefined); o.setattribute("rel", "stylesheet"); o.disabled = false //app.cookiecreate("style", title, 365); }
Comments
Post a Comment