WordPress.org

1. unifiedac
   Member
   Posted 1 year ago #

   Hello,

   I have the following placed in my header.php file:

   <style type="text/css" media="screen">
   	@import url( <?php bloginfo('stylesheet_url'); ?> );
   </style>
   
   <link rel="stylesheet" id="size-stylesheet" href="<?php bloginfo('template_url'); ?>/wide.css" type="text/css">

   I found this great little snippet of jQuery code that I would like to use for my WordPress theme:

   function adjustStyle(width) {
       width = parseInt(width);
       if (width < 701) {
           $("#size-stylesheet").attr("href", "narrow.css");
       } else if ((width >= 701) && (width < 900)) {
           $("#size-stylesheet").attr("href", "medium.css");
       } else {
          $("#size-stylesheet").attr("href", "wide.css");
       }
   }
   
   $(function() {
       adjustStyle($(this).width());
       $(window).resize(function() {
           adjustStyle($(this).width());
       });
   });

   The code replaces the 'href' attribute of the linked stylesheet with the id "size-stylesheet" based on the browser window size. For some reason this isn't working with WordPress. Even when I use absolute paths for the css files and template directory, it won't work.

   Any suggestions?

2. unifiedac
   Member
   Posted 1 year ago #

   Figured it out. The link to the javascript file must come after the stylesheets and in the body. I'm no WordPress expert, but I think it has something to do with how the theme files are loaded.

   Also, the URI to the stylesheet must be absolute.

Topic Closed

This topic has been closed to new replies.