Download & Extend

Placeholder for non-compliant browsers

Project:Drawing API
Version:6.x-2.x-dev
Component:Code
Category:feature request
Priority:normal
Assigned:danielb
Status:needs review

Issue Summary

Hey, Balazs... another idea that I'll be happy to help implement. (Perhaps I can roll this into my work for reporting in Ubercart so you don't have to worry about it. : ) Anyways, perhaps non-compliant browsers could display a simple div (sized the same as the canvas would be if it appeared) with a message saying "This page is best viewed in Firefox." or something similar. It would take a minor bit of Javascript to get it to work... and folks w/ Javascript turned off could just deal with it as is.

Comments

#1

Yeah that would be good option for the SVG toolkit. If the string that appeared was translatable, the div had classes for css themers, and the whole alternate output was in a theme function, then this would be quite flexible.

#2

Subscribing.

#3

Version:5.x-2.x-dev» 6.x-2.x-dev
Assigned to:Anonymous» danielb

#4

Status:active» needs review

I've added code for this, but frankly I have no idea if it does the job. I get the impression that SVG detection is pretty unreliable?
Also it seems now there is a way to display SVG through Flash which might prove to be a better option than the placeholder: http://code.google.com/p/svgweb/

#5

Here's the JS for reference

function drawing_svg_support() {
  return !!document.createElementNS &&
    !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect;
}

(function ($) {

  Drupal.behaviors.drawing_svg = function(context) {
    if (drawing_svg_support() == false) {
      $("svg", context).each(function() {
        var placeholder = $(
          "<div class=\"drawing-svg-placeholder\"><p>" +
          Drupal.t("Your browser does not support SVG.") +
          "</p></div>"
        );
        $(placeholder)
          .width($(this).width())
          .height($(this).height());
        $(this).before(placeholder);
        $(this).remove();
      });
    }
  };

})(jQuery);