Posted By

localhorst on 02/21/09


Tagged

css js media


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

wizard04
snipplrhanz
umang_nine
wirenaught


CSS Media Targeted JavaScript


 / Published in: CSS
 

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

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:

  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>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: wizard04 on March 9, 2009

This is a great idea!!!

Posted By: wizard04 on March 9, 2009

This is a great idea!!!

You need to login to post a comment.