www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help with Media Type Script

  1. #1
    Join Date
    Dec 2008
    Location
    Maryland
    Posts
    49

    Help with Media Type Script

    I need some help understanding a java script that I found on line to determine media type.

    I downloaded the script from http://cssmedia.pemor.pl , saved it to disk, then translated the comments into English.

    I also loaded the test page and broke it down into a very simple test.

    The script and my test page are at the end of this post.

    The comments seem to say that it is changing the text color of the head section to 000 then to FFF for a given media type, then testing the color to see if it did indeed change.

    The problem is that the code seems to change the text color of an unknown element with the ID of “media Inspector”.

    The head and body thing only seems to come into play when “buggy opera” is set and then it is hard coded

    Can someone tell me how this script “only affects the head section”. I have no problem with it playing with ID = media Inspector, but I’d like to know for sure what is really happening.

    Also, this is an old script, 2009, does anyone know if any changes need to be made or any of it is now unnecessary.

    Thanks

    The Geek


    Test Page

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">
    <html>
    <head>
        <script language="JavaScript" src="mediatypechecker.js" type="text/javascript"></script>
        <script type="text/javascript">
        function CheckScreen()
        {
          var result = IsMediaType('screen');
          if(result > 0) alert('screen medium detected (1)');
          else if (result == 0) alert('screen medium not detected (0)');
          else alert('error (-1)');
        }
        function CheckHandheld()
        {
          var result = IsMediaType('handheld');
          if(result > 0) alert('screen handheld detected (1)');
          else if (result == 0) alert('screen handheld not detected (0)');
          else alert('error (-1)');
        }
        </script>
    
    </head>
    <body>
    
                <p><br>Test:</p>
     
                  <br>
                  <br>
                    <A HREF="javascript:CheckScreen(0);">Check if current CSS medium is 'screen'?</A>
                  <br>
                  <br>
                    <A HREF="javascript:CheckHandheld(0);">Check if current CSS medium is 'Handheld'?</A>
    
    
    </body>
    </html>
    Java Script

    Code:
    // mediatypechecker.js
    // CSS media types checking/detection script ver. 15-apr-2009 by Marcin Wiazowski 
    // http://cssmedia.pemor.pl/
    //
    // You may freely use this script for any purposes (incl. commercial)
    //   or distribute it if only you want.
    //
    
    function IsMediaType(mediatypes) {
    
        function createEl(name)
        {
            var element = null;
            if(document.createElementNS)
                element = document.createElementNS('http://www.w3.org/1999/xhtml', name);
            else
                element = document.createElement(name);
            return element;
        }
    
        function addCSSRule(id, selectorText, declarations, mediatypes)
        {
            // Adding new style sheet
    
            var styleElement = createEl('style');
            if(!styleElement)
                return;
            styleElement.id = id;
            styleElement.type = 'text/css';
            styleElement.rel = 'stylesheet';
            if(mediatypes)
                styleElement.media = mediatypes;
            document.getElementsByTagName('head')[0].appendChild(styleElement);
    
            //   First we try "appendChild" because Safari and Konqueror also
            // supports a "document.styleSheets," but then the bad work
    
            var node = null;
            try { // Opera, Safari, Konqueror
                node = document.createTextNode(selectorText+' { '+declarations+' }');
                styleElement.appendChild(node);
    
                // Workaround for Opera <7.5
    
                if((window.opera) && (!window.opera.version)) { // "window.opera.version" introduced in Opera 7.6
    
                    styleElement.removeChild(node);
                    styleElement.appendChild(node);
                }
            } catch(err) { // IE, Firefox
                if(node)
                    delete node;
                if(document.styleSheets) {
                    var styleSheet = document.styleSheets[document.styleSheets.length-1]; // Recently added style sheet (via styleElement)
    
                    if(styleSheet)
                        if(styleSheet.insertRule)
                            styleSheet.insertRule(selectorText+' { '+declarations+' }', styleSheet.cssRules.length);
                        else if(styleSheet.addRule)
                            styleSheet.addRule(selectorText, declarations);
                }
            }
        }
    
        function removeCSSRule(id)
        {
            var node = document.getElementById(id);
            document.getElementsByTagName('head')[0].removeChild(node);
            delete node;
        }
    
        function updateCSSRulesForKHTML()
        {
            // var ignoreMe = document.documentElement.offsetWidth / / Unstable in Konqueror 4.0.8
            try {
                var linkList = document.getElementsByTagName('link');
                var i;
    
                for(i = 0; i < linkList.length; i++) {
                    linkList[i].orig_disabled = linkList[i].disabled;
                    linkList[i].disabled = true;
                }
    
                for(i = 0; i < linkList.length; i++)
                    linkList[i].disabled = linkList[i].orig_disabled;
            } catch(err) {}
        }
    
        try {
            // 31 stylesheets problem (KB262161) - STILL NOT FIXED in IE9
            if(document.createStyleSheet) // IE
                if(document.styleSheets.length >= 30)
                    return -1;
    
            //   The concept is to change the text color of the head section of the page.  The
            // script first changes the color to 000, then changes it to FFF for the media type
            // being tested.  The text color of the head can then be tested to see if the media
            // specific change had any effect.  Since the head section does not display,
            // this will have no effect on the actual page display.
    
            addCSSRule('mediaInspector_rule1', '#mediaInspector', 'visibility: hidden; color: #000000;');
            addCSSRule('mediaInspector_rule2', '#mediaInspector', 'visibility: hidden; color: #FFFFFF;', mediatypes);
            
            // The element with id = mediaInspector must be visible (the parent can not have
            // style "display: none" in the "head"), otherwise setting the color will not be
            // compatible (and will not work in Safari or Konqueror), we make an exception for
            // Opera <9.5 because of an error occurring in it: if the file was loaded by
            // the HTTP protocol (but not fILE) are:
            //
            //(1) Opera <9.0 when using a while loading the page (but not after it loads),
            //    properties, "currentStyle" on an item contained in the "body" (not "head"),
            //    you refresh the page (F5) style for "body 'from the CSS file is sometimes
            //    randomly ignored (another workaround: declare a style for the "body" in
            //    the HTML file header tag "style")
            //(2) Opera <9.5 when using a while loading the page (but not after it loads),
            //    properties, "currentStyle" on an item contained in the "body" (not "head"),
            //    you refresh the page (F5) style for "body 'from the CSS file is sometimes
            //    randomly ignored if the file occurs simultaneously CSS style for "*"
            //    (another workaround: instead of the style for "*" style to use "body *")
    
            var node = null;
            var place = null;
    
            var buggy_opera = false;
            if(window.opera) {
                buggy_opera = true;
                if((window.opera.version) && (parseFloat(window.opera.version()) >= 9.5))
                    buggy_opera = false;
            }
    
            if(buggy_opera) {
                place = document.getElementsByTagName('head')[0];
                if(place)
                    node = createEl('link');
            } else {
                place = document.getElementsByTagName('body')[0]; // document.body does not work for Safari 3.0.4 XHTML-
    
                if(place)
                    node = createEl('div');
            }
            if(node) {
                node.id = 'mediaInspector';
                place.appendChild(node);
            }
    
            if(node) {
                
                // For Konqueror - allows proper operation getComputedStyle before being
                //  applied then all style sheets
    
                updateCSSRulesForKHTML();
    
                var color = null;
                try {
                    var mediaInspector = node;
    
                    color = mediaInspector.style['color'];
                    if(!color) {
                        if(mediaInspector.currentStyle)
                            color = mediaInspector.currentStyle['color'];
                        else if(window.getComputedStyle)
                            color = window.getComputedStyle(mediaInspector, null).getPropertyValue('color');
                    }
                } catch(err) {}
    
                place.removeChild(node);
                delete node;
            }
    
            removeCSSRule('mediaInspector_rule1');
            removeCSSRule('mediaInspector_rule2');
    
            if(!color)
                return -1;
    
            color = color.replace(/[\s\t ]/gi, '').toUpperCase(); // \s does not work in Konqueror 4.1.1 and 4.1.2,
                                                                  // so an additional space is needed
            if((color == '#FFFFFF') || (color == 'RGB(255,255,255)'))
                return 1;
            else if((color == '#000000') || (color == 'RGB(0,0,0)'))
                return 0;
            else
                return -1;
        } catch(err) { return -1; }
    }
    Last edited by PapaGeek; 08-24-2011 at 02:53 PM.

  2. #2
    Join Date
    Dec 2008
    Location
    Maryland
    Posts
    49
    I had to shorten the comment at the top of the script to get it under 10,000 characters, here is the whole comment:


    // mediatypechecker.js
    // CSS media types checking/detection script ver. 15-apr-2009 by Marcin Wiazowski
    // http://cssmedia.pemor.pl/
    //
    // You may freely use this script for any purposes (incl. commercial)
    // or distribute it if only you want.
    //
    // Usage examples:
    // IsMediaType('screen') - check if current CSS medium is 'screen'
    // IsMediaType('screen, print') - check for 'screen' or 'print'
    //
    // This script does NOT disable the Opera's Small-Screen Rendering
    // technology when asking about the 'handheld' media type in the Opera's
    // mobile browsers.
    //
    // Return values:
    // -1 - error (browser too old, IE having 30 or more style sheets)
    // 0 - tested media type(s) not active
    // 1 - tested media type(s) active
    //
    //
    // Tested both with HTML 4.01 Strict and XHTML 1.1 (with an "application/xhtml+xml" MIME type HTTP
    // header for all capable browsers - i.e. for all tested browsers except Internet Explorer and
    // Opera 7.2x):
    //
    // Tested and works (during page loading and when page is loaded) with:
    //
    // Internet Explorer (Trident): 5.01, 5.55, 6.0, 7.0, 8.0
    // Opera (Presto): 7.2, 7.22, 7.23, 7.5, 8.0, 8.5, 8.53, 9.0, 9.23, 9.24,
    // 9.25, 9.26, 9.27, 9.5, 9.51, 9.52, 9.6, 9.61, 9.62,
    // 9.63, 9.64, 10.0 alpha 1
    // Opera Mini (Presto): basic/advanced: 1.2.2960, 1.2.3214, 2.0.4062, 2.0.4509, 3.1.7196, 3.1.10423, advanced: 4.0.9751, 4.0.10406, 4.1.11313, 4.1.11355, 4.2.13212
    // Safari (AppleWebKit): 3.0, 3.0.4, 3.1, 3.1.1, 3.1.2, 3.2, 3.2.1, 4.0 public beta
    // Chrome (AppleWebKit/V8): 0.2.149.30, 0.3.154.9, 0.4.154.33, 1.0.154.36, 1.0.154.53, 2.0.169.1 beta
    // Konqueror (KHTML): 3.5.8, 3.5.9, 4.0.80, 4.1.0, 4.1.1, 4.1.2, 4.1.3, 4.1.80, 4.2.0, 4.2.1, 4.2.2
    // Firefox/IceWeasel (Gecko): 0.8, 0.9, 1.0, 1.0.4, 1.5, 1.5.0.12, 2.0.0.4, 2.0.0.14, 2.0.0.15, 2.0.0.18, 2.0.0.19, 2.0.0.20, 3.0, 3.0.4, 3.0.5, 3.0.8, 3.1 beta 3, 3.2 alpha 1 pre
    // Fennec (Gecko): 1.0 alpha 1
    // Camino (Gecko): 1.6.1, 1.6.5
    // Epiphany (Gecko): 2.14, 2.18, 2.2, 2.22
    // Flock (Gecko): 1.0.9, 1.1, 1.1.2, 1.2.1, 1.2.6, 2.0, 2.0.2
    // Galeon (Gecko): 1.3.20, 2.0.2, 2.0.4, 2.0.5, 2.0.6
    // K-Meleon (Gecko): 0.8, 0.8.2, 0.9, 1.0, 1.0.1, 1.0.2, 1.1, 1.1.2, 1.1.3, 1.1.4, 1.1.5, 1.1.6, 1.5.0, 1.5.1
    // Kazehakase (Gecko): 0.2.7, 0.4.2, 0.4.3, 0.5.4
    // Mozilla (Gecko): 1.7.8, 1.7.13
    // Netscape Navigator (Gecko): 7.1, 7.2, 8.0.2, 9.0.0.5, 9.0.0.6
    // SeaMonkey/IceApe (Gecko): 1.0.9, 1.1.5, 1.1.8, 1.1.9, 1.1.13, 2.0 alpha 2
    //
    // Tested and does NOT work (neither during page loading nor when page is loaded) with:
    //
    // Internet Explorer (Trident): 4.01-
    // Opera (Presto): 7.11 b-
    // Safari (AppleWebKit): 2.0.4-
    // K-Meleon (Gecko): 0.7 sp 1-
    // Netscape Navigator (Gecko): 7.0-

  3. #3
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    The significance of changing the color of the HEAD tag is not evident. The script goes
    through a lot of work to simply test the result of a color change by way of taking into
    consideration every browser I've ever heard of.

    Perhaps there is a difference between Screen and Handheld devices which presents
    itself only (or in one way among many) when the Head tag is manipulated in this manner.

    If the test for screen or handheld but way of color change of the Head tag is
    completely accurate then I would guess it to be reliant on a 'bug' in CSS or a limitation
    in handheld devices. Whatever the reason behind the logic, I would not rely on this to
    be forever valid. Seems like a hack.

  4. #4
    Join Date
    Dec 2008
    Location
    Maryland
    Posts
    49
    Thanks for the reply and I totally agree that this script is a hack at best, but it is the only script that I’ve found that allows me to set a variable that lets me know if the page is being displayed on a handheld device or a standard computer monitor.

    I agree that the HEAD tag is not evident in the code. Like you said this is a hack and the comments were probably made when the first concept of the script was developed and never changed when it was implemented a different way.

    If you know of another method that allows testing for handheld devices within a Java Script, please please post it here. I’d love to find a more reliable method.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles