WordPress.org

Ready to get started?Download WordPress

Forums

CoolClock - a Javascript Analog Clock
[resolved] CoolClock not showing in IE8/9 (26 posts)

  1. leejosepho
    Member
    Posted 1 year ago #

    The problem I have might be with my site and not the fault of CoolClock, but I am not sure.

    Question: Does CoolClock normally work with Internet Explorer 8/9?

    Here is my site: http://www.nonameyet.org/

    http://wordpress.org/extend/plugins/coolclock/

  2. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, there seems to be an issue with IE. Are you seeing the same effect as reported on http://wordpress.org/support/topic/second-hand ? Or does it not work at all for you?

    The issue discussed on the other thread seems to be related to all skins that use an outside ring around the clock. Skins that do not have such a ring like Classic or SecurePHP seem to work better... Until the issue as reported on https://github.com/simonbaird/CoolClock/issues/11 is resolved by the script developer.

  3. leejosepho
    Member
    Posted 1 year ago #

    Are you seeing the same effect as reported on http://wordpress.org/support/topic/second-hand ? Or does it not work at all for you?

    I do use the Sand skin with the outer ring (and I definitely hope to keep it!), but the clock does not show at all in IE8, and yes, I just took a look and I do have the problem with the second hand in IE9.

    PS: Part of the problem might be the fact that my Twenty Twelve Child Theme (with Twenty Twelve being the latest default theme for WordPress) is not yet as "friendly" with IE as I am hoping to make it.

  4. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Strange... I look at your site in IE8 (even a crippled version running on Linux) and it does show the clock. No idea why it would not show in your browser. IE remains a pain in the @$$ as it always has been, I'm afraid.

    If you set the clock skin to Custom and paste this in the box below:

    smallIndicator:{lineWidth:3,startAt:50,endAt:70,color:"#0066FF",alpha:.5},
    largeIndicator:{lineWidth:200,startAt:80,endAt:95,color:"#996600",alpha:.75},
    hourHand:{lineWidth:4,startAt:0,endAt:65,color:"black",alpha:.9},
    minuteHand:{lineWidth:3,startAt:0,endAt:80,color:"black",alpha:.85},
    secondHand:{lineWidth:1,startAt:0,endAt:85,color:"black",alpha:1},
    secondDecoration:{lineWidth:2,startAt:5,radius:10,fillColor:"black",color:"black",alpha:1}

    then that second hand line issue is gone...

  5. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    OK, patched the script itself in the new version 2.9.2... The outer border gets removed in IE browsers automatically now.

  6. leejosepho
    Member
    Posted 1 year ago #

    Strange... I look at your site in IE8 (even a crippled version running on Linux) and it does show the clock. No idea why it would not show in your browser. IE remains a pain in the @$$ as it always has been, I'm afraid.

    Understood, and I am learning more of that almost daily!

    Your update has fixed the problem with the second hand, but I still cannot see the clock in XP/IE8 on either of my two machines here...and since you can, we can just leave all of this at that, if you wish.

    Nice clock.

  7. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    I think I am closer to what might be causing this on your site. Near the top of your header.php there is this line:
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

    Please remove it. It should not be necessary with HTML5 DOCTYPE nor is it suitable for production sites.

    After that, let me know if the clock still does not show...

  8. leejosepho
    Member
    Posted 1 year ago #

    I had done that prior to my earlier report here and saw no difference with the clock, but I have just now again removed it and will leave it out for now. That line seems to help IE8 load a bit faster, but I do not know it to be absolutely necessary for anything to work at my site.

    FYI: I also have this at work in functions.php (via a plugin)...

    function fix_ie8() {
    if (strpos($_SERVER['HTTP_USER_AGENT'],"MSIE 8")) {header("X-UA-Compatible: IE=7");}
    }
    add_action('send_headers','fix_ie8');

    ...and that is there to make your IE8 typing display the dots in my Password box during Login! However, I had disabled that earlier also and doing that had no affect on the clock.

  9. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Very strange... Could you take a look at http://demo.status301.net/news/ which has the same clock on the right and using the twenty twelve theme.

    In IE8 you should notice that there normally is a Compatibility View button next to the address field. This button disappears when viewing your site, which would indicate there is a X-UA-Compatible meta tag forcing it to some mode (I suspect Quicks mode but I cannot verify that)... I had the impression this would be solved by removing that line as I suggested before.

    And you say you disabled that code snippet in functions.php ? Strange...

    Then I have no other explanation. Maybe there is something in your .htaccess that generates a header("X-UA-Compatible: IE=7") or similar response?

  10. leejosepho
    Member
    Posted 1 year ago #

    Very strange... Could you take a look at http://demo.status301.net/news/ which has the same clock on the right and using the twenty twelve theme.

    Yes, very strange, the clock does not work for me in XP/IE8 there either, and I do not lose my Compatibility View button at my site.

    Maybe there is something in your .htaccess that generates a header("X-UA-Compatible: IE=7") or similar response?

    I see nothing like that in there, but BulletProof Security has written that file and I will ask that question over there.

    Many thanks for going way out of your way to try to help here!

  11. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Checking the server response headers when spoofing my Chrome browser as IE8 with:

    User-Agent:Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

    I get:

    Connection:Keep-Alive
    Content-Encoding:gzip
    Content-Length:6517
    Content-Type:text/html; charset=UTF-8
    Date:Sat, 05 Jan 2013 11:00:41 GMT
    Keep-Alive:timeout=10, max=30
    Server:Apache
    Vary:Accept-Encoding
    X-Pingback:http://www.nonameyet.org/xmlrpc.php
    X-UA-Compatible:IE=7

    It's that last response that needs to be removed.

    I'm pretty sure it is coming from within WordPress itself because when I do this test on a static file like default.html, that UA Compatible response is not generated...

    Are you sure you removed that 'fix_ie8' action in the themes functions.php?

  12. AITpro
    Member
    Posted 1 year ago #

  13. leejosepho
    Member
    Posted 1 year ago #

    ...It's that last response that needs to be removed.

    I'm pretty sure it is coming from within WordPress itself because when I do this test on a static file like default.html, that UA Compatible response is not generated...

    Are you sure you removed that 'fix_ie8' action in the themes functions.php?

    Here is my entire functions.php, and it has remained unchanged over these past few days:

    <?
    // add footer and widget areas
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'Footer Widgets Left',
    'id' => 'left-footer',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
    ));
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'Footer Widgets Center',
    'id' => 'center-footer',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
    ));
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'Footer Widgets Right',
    'id' => 'right-footer',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
    ));
    ?>

    So, maybe you are still thinking of what I have already done to be sure my telling IE to not use Compatibility View at my site does not make any difference here?

    Since there is no X-UA-Compatible:IE=7 in my functions.php and I do not know what my server or security might be doing, I can only say the clock cannot show itself in IE8, and that it would be great to be able to try AITpro's suggestion, if you might be willing...and I say that within this context:

    === CoolClock - a Javascript Analog Clock ===
    ...

    Show an analog clock on your WordPress site sidebar or in post and page content.

    ...

    = Features =

    ...
    - No flash, meaning compatible with pads and most other javascript enabled mobile devices

    Neither is my Twenty Twelve Theme completely "IE-friendly" in its default state, and my attempt to try AITpro's suggestion brought some kind of error from something CoolClock needed from/at public_html. So, and without complaint, I leave it to you to decide the fate of the clock at my site!

    Many thanks.

  14. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    @leejosepho would you mind uninstalling CoolClock and re-installing version http://downloads.wordpress.org/plugin/coolclock.0.1.zip to test? IT's the first version that uses an older excanvas.js script (which makes IE recognise canvas tags) and it might work better than the latest version for IE in compatibility mode.

    But be aware, that first version did not have a subtext field yet so your subtext script will have to move to its own widget...

  15. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    And if that does not make a difference, please try this:
    1. Disable the plugin and
    2. Paste the following in a text widget:

    <!--[if IE]><script type="text/javascript" src="http://randomibis.com/coolclock/excanvas.js"></script><![endif]-->
    <script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script><script type="text/javascript" src="http://randomibis.com/coolclock/coolclock.js"></script>
    <script type="text/javascript" src="http://randomibis.com/coolclock/moreskins.js"></script>
    <canvas id="clock1" class="CoolClock:Sand:100::2"></canvas>
  16. leejosepho
    Member
    Posted 1 year ago #

    ...your subtext script will have to move to its own widget...

    ...or maybe I could talk you into placing the digital display below the clock's face?! ;-)

    As would be understandable, the older version's second hand has the previous problem with the second hand, but the older version does display in IE8...under specific conditions: It will display after I have cleared IE8's cache, and then it disappears after a browser refresh.

    I greatly appreciate your extra efforts here, and I will leave that clock there so you might have a look, if you wish.

    Many thanks.

  17. leejosepho
    Member
    Posted 1 year ago #

    And if that does not make a difference, please try this:
    1. Disable the plugin and
    2. Paste the following in a text widget:

    The older plugin works as I had described, but the text pasted into the widget did not show a clock in IE8. So, the older version is the one presently installed and activated.

  18. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Funny how exactly that one does not show in my old XP/IE8 ... O, how I hate IE !

  19. leejosepho
    Member
    Posted 1 year ago #

    But like a familiar old pair of shoes, we each still have one or two...

  20. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Haha, sorry. Did not mean to P on your shoes ;)

  21. Dragons Eye
    Member
    Posted 1 year ago #

    Any thoughts on the fact that "Coolclock" uses the <canvas> tag which is an HTML 5.0 innovation?

    IE 8/9 do not render much in HTML 5.0 because they were out in the market before HTML 5.0 a "working standard" ( as they say in the W3C ).

    If someone were to try to get it to work within a different tag that IS common with IE, that might be the only "fix" for it.

    I use the Coolclock widget on my own website ( just the "copy and pasted" code, not the WP-plug-in ) and have noticed the incompatibility issue too!

    I hope this gives you a little more info. ( I have quite a bit of HTML and JavaScript experience. )

    - Dragon's Eye

  22. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Dragons Eye, thanks for joining in :)

    It's a confusing topic since the plugin uses the latest version (already almost 3 years old) of Googles excanvas.js to make IE work with canvas through VML. The excanvas.js version used on the CoolClock demo site is even older... But there still remain some very tricky issues that seem to re-appear each time another one gets 'fixed' (read: worked-around).

    Are you saying that even IE 9 does not render the CoolClock correctly? It is said to support a basic canvas but that might not be enough... Are you using excanvas.js with the CoolClock on your site?

    I'll be testing with the younger flashcanvas.js alternative soon to see if that makes IE behave better but since I don't have IE other than on an old XP/IE8 machine to test with, I'd appreciate any input, experiences or test results :)

  23. Dragons Eye
    Member
    Posted 1 year ago #

    I am actually using the CoolClock script set that is currently available on that site. This one is not a WordPress plug-in because my site was not created with WordPress, originally.

    If it is any help, my lady has found another site that has a JQuery version of the CoolClock that is more style-able and is said to work on more browsrers.

    Try here.

    Maybe you might find a solution with this one?

    Just a thought.

    I wonder if a different container, like DIV, can be used in place of CANVAS? That is one idea I have been "toying" with.

    - Jim

  24. Dragons Eye
    Member
    Posted 1 year ago #


  25. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Jim, that link to CoolClock in jQuery is actually the very same CoolClock script as you'll notice that following Read more or Demo will land you on the randomibis.com/coolclock page... But the Analog JQuery clock (divs) and the Old School clock (ul+li) on http://www.jqueryrain.com/2011/11/14-best-jquery-clock-tutorials-both-analog-and-digital-clocks/ seem to be doing what you are thinking about :)

  26. Dragons Eye
    Member
    Posted 1 year ago #

    Hmmm!

    I don't recall the one working on my website now being based too much on jQuery? I will have to take a closer look at its coding then.

    ** But the Analog JQuery clock (divs) and the Old School clock (ul+li) on http://www.jqueryrain.com/2011/11/14-best-jquery-clock-tutorials-both-analog-and-digital-clocks/ seem to be doing what you are thinking about :) **

    So are you saying the one that operates within "div"-tags seems to be working for you in IE?

    Funny thing is, my website main is DOCTYPEd "XHTML 1.0", yet FireFox STILL renders it properly within a "CANVAS"-tag! This is very strange indeed! I know FireFox (from versions 10.0 and newer) have a few other bugs that have crept in, and have not been resolved YET.

    I might check out a few other variations to see what works the cleanest and, hopefully, on all the available browsers. I haven't used IE in so long because I don't like the fact that it still has gaping security holes in it. So I couldn't help you much further on issues of IE-compatibility.

    I'll have to check out the jQuery version of it as I am getting interested in jQuery, myself.

    I'll try and find out some other things that may be some help!

    - "Cheers!"

    - Jim

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags