In my post yesterday I showed how to publish Visio files as html image maps. That was one of the alternatives. Today I’ll present how to use SVG to achieve the same goal: publish Visio diagrams in SharePoint without having the Enterprise license. There are some alternatives:

1. Show Visio diagrams as pdf files on SharePoint Pages
2. Embed Visio diagrams as html image maps - Read more in my previous blog post
3. Embed Visio diagrams as svg pictures - This blog post.
4. Link to Visio files that are opened using Visio Web Viewer in a new browser tab.

SVG

SVG stands for scalable vector graphic, it is a xml-based format for defining images. It is supported in all modern browsers. Because SVG can be part of a page markup, it can be easily embedded into SharePoint.

I am reading Mobile HTML5 written by Estelle Weyle. It is an awesome recap and new knowledge about html, css and javascript. I want to highlight one of tips I got: Use the weakest CSS selectors (can be found on page 204). We all know, that inline CSS and !important are evil. They have a higher level of specifity and override the standard cascade of the CSS rules. If you use !important, then it will be hard to override CSS rules when you really need it. After these two classic “evils” the evil number three is overqualifying of CSS selectors. You should really never add more classes or ids or elements than needed. Consider this: [code language=“css”] .warning { background-color: red; } [/code] It is often enough, you don’t need those: [code language=“css”] html .warning div .warning div.warning, div > .warning body p#myP.blue strong.warning [/code]

Placeholders are very handy in html5, we don’t need to fool with input values. But in SharePoint and IE we must provide fallback for placeholders if we want use them in other browsers. Here is an jQuery extension to do that:

(function ($) {
  $.fn.extend({
    ensurePlaceholders: function () {
      var input = document.createElement('input');
      var placeholderSupported = ('placeholder' in input);
      if (placeholderSupported) {
        return;
      }
      function setHints(elem) {
        var $elem = $(elem);
        var value = $elem.val();
        if (value == "") {
          var placeholder = $elem.attr("placeholder");
          $elem.val(placeholder);
          $elem.addClass("empty-text");
        }
      }
      function removeHints(elem) {
        var $elem = $(elem);
        $elem.removeClass("empty-text");
        var value = $elem.val();
        var placeholder = $elem.attr("placeholder");
        if (value == placeholder) {
          $elem.val("");
        }
      }
      this.find("\[placeholder\]").each(function() {
        setHints(this);			
      });
      this.on("focus", "\[placeholder\]", function(e) {
        removeHints(this);
      });
      this.on("blur", "\[placeholder\]", function(e) {
        setHints(this);
      });
    }
  });
})(jQuery);
```Then "ensure placeholders" by running this function on a wrapper element which contains fields with the placeholder attribute:

jQuery("#form-wrapper").ensurePlaceholders();

Wouldn’t it be nice to use html5 and css3 in SharePoint? No problems, there is actually v5 master out there, created by Kyle Schaefer. Or just use h5ml5 and css3 right away in your webparts and pages. But there is a big problem. It doesn’t work in IE9–. One of the issues (even listed by Kyle) is that “save” doesn’t work in modal dialogs where Rich Text Editor is used. Especialy it is for modal dialogs. The problem is not IE9, neither html5 and css3. After some digging in javascript code which is shipped with SharePoint I found out that the problem is some legacy javascript code which is not supported by IE9 but in IE8– (and compatibility mode). When we set IE9 mode in IE9 Dev Tools (F12) and go to Tasks list and try to create a task, we’ll get an error: It is RTE_GetEditorIFrame from init.js:

Försökte ladda mitt kontantkort idag via Swedbanks mobilsida. Det gick inte. Och det berodde inte på iPhone som jag först trodde. Orsaken var ett knasigt användande av ett html5-attribut i en annars html4-hemsida: input type=“number”: Att skriva en nolla i telefonnumret var helt omöjligt trots att sidan spottade ut fel och krävde en nolla. Med lite handpåläggning gick det! Tur att man bara kunde rader type=“number” och att sånt knasigt fel inte låg i code-behind. Testar man inte sin programvara på Swedbank?

[slideshare id=11031050&doc=sharepointhtml5-120113215236-phpapp02]   HTML5-and-CSS3-What-About-SharePoint.pdf (968 KB) by Kyle Schaefer

html5 provides more types of inputs than the classic submit and text and a few more. Here you can see an example on fiddle

A great work: v5.master. I am recommending to try it. The problem are some javascript bugs in the IE 9 when you run IE mode 9 that are necessary to enable html5 and css3 support. You can’t “save” a list item: The reason why it doesn’t work in IE, but in Chrome, Firefox, is that IE invokes some functionality that it doesn’t invoke in other browsers. Next: Enable Save button in IE9