Advanced Search

CSS Media Targeted JavaScript

/ Published in: CSS
Save to your folder(s)
With the ever increasing use of alternate media types I feel there is a need to deliver JavaScript targeted to these types of devices. This would allow alternate and modified content, as well as a customized user experience through the use of modern AJAX techniques.

My goal with this technique is to use CSS to be instructed as to what type of media device is being used, and deliver that information onto the JavaScript which could then in turn run CSS media targeted code. To accomplish this, we will use a div set to display:none with an id of "mediaInspector", to hold a "variable" passed from CSS to JavaScript:

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div id="mediaInspector"></div>
  2.  
  3. <style type="text/css">
  4.   #mediaInspector {
  5.     display:none
  6.   }
  7.   @media aural {
  8.     #mediaInspector { z-index: 1 }
  9.   }
  10.   @media braille {
  11.     #mediaInspector { z-index: 2 }
  12.   }
  13.   @media embossed {
  14.     #mediaInspector { z-index: 3 }
  15.   }
  16.   @media handheld {
  17.     #mediaInspector { z-index: 4 }
  18.   }
  19.   @media print {
  20.     #mediaInspector { z-index: 5 }
  21.   }
  22.   @media projection {
  23.     #mediaInspector { z-index: 6 }
  24.   }
  25.   @media screen {
  26.     #mediaInspector { z-index: 7 }
  27.   }
  28.   @media tty {
  29.     #mediaInspector { z-index: 8 }
  30.   }
  31.   @media tv {
  32.     #mediaInspector { z-index: 9 }
  33.   }
  34. </style>
  35.  
  36. <script type="text/javascript">
  37.   var mediaInspector = document.getElementById('mediaInspector');
  38.   if (mediaInspector.currentStyle) {
  39.     zIndex = mediaInspector.currentStyle['zIndex'];
  40.   } else if (window.getComputedStyle) {
  41.     zIndex = window.getComputedStyle(mediaInspector, '').getPropertyValue("z-index");
  42.   }
  43.   switch (parseInt(zIndex)) {
  44.     case 1:
  45.       // @media aural code
  46. 	  alert('@media aural code');
  47.       break;
  48.     case 2:
  49.       // @media braille code
  50. 	  alert('@media braille code');
  51.       break; 
  52.     case 3:
  53.       // @media embossed code
  54. 	  alert('@media embossed code');
  55.       break;
  56.     case 4:
  57.       // @media handheld code
  58. 	  alert('@media handheld code');
  59.       break;
  60.     case 5:
  61.       // @media print code
  62. 	  alert('@media print code');
  63.       break;
  64.     case 6:
  65.       // @media projection code
  66. 	  alert('@media projection code');
  67.       break;
  68.     case 7:
  69.       // @media screen code
  70. 	  alert('@media screen code');
  71.       break;
  72.     case 8:
  73.       // @media tty code
  74. 	  alert('@media tty code');
  75.       break;
  76.     case 9:
  77.       // @media tv code
  78. 	  alert('@media tv code');
  79.       break;
  80.   }
  81. </script>

URL: http://www.ibloomstudios.com/articles/css_media_targeted_javascript/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.