JQuery to Select and Swap Stylesheet href values

Question

I wondering how I can select the two stylesheet links I have below in the resize function below. I need to modify the two links href value based on the orientation value, but I'm unsure how to select and populate those inside the conditional statement below, any ideas?

 <head>
                <link rel="stylesheet" href="css/style.css" type='text/css' media='all' />
                <link rel="stylesheet" href="css/iphone.css" type='text/css' media='all' />
                <script type="text/javascript">
                       $ = jQuery
                       $(document).ready(function() {
                             $(window).resize(function() {
                                     var orientation = window.orientation;

                              if(orientation == 90 || orientation == -90) { 
                                    //populate href of stylesheet link here
                                   } else {
                                       //populate href of stylesheet link here
                                   }
                             });
                          });
                </script>
   </head>

I think it would be better to change a class on the `html` element depending on the orientation. Then write your styles to support the different orientations. — zzzzBov, Nov 14 '11 at 02:26

score 2 · Accepted Answer · answered Nov 14 '11 at 02:21

2

Just give your stylesheet and id and change it like so:

$("#id").attr("href", "/somecss.css");

answered Nov 14 '11 at 02:21

ScottE

21,530
18
94
131

score 2 · Answer 2 · answered Nov 14 '11 at 02:26

If you use CSS3 you can use css3 Media Queries to change your styles based on the Orientation of the users browser.

<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">

This will only include this stylesheet if the orientation of the users browser is landscape.

Remember this will only work on CSS3 compatible browsers.

score 0 · Answer 3 · edited May 23 '17 at 12:11

Look at this link : http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/

another SO question: CSS3: Detecting device orientation for iPhone

Its better to put both the css in one file and not to change the css later on. Css Gets loaded first . and only then your javascript gets executed. So first your default css will be loadeed. then you would change the href tag (using other answer) then next file would be loaded. making an extra call to server. The better idea it to have both(landscape & potrait) css defined in one file. IMHO 80% of the css for both landscape & potrait would be the same the rest 20% can be configured using the naive css fomr the first link.

Aaron option is also really good incase you are not bothered about the browser that don't support it. — Gaurav Shah, Nov 14 '11 at 02:27

JQuery to Select and Swap Stylesheet href values

3 Answers3