tbem / jquery.line Goto Github PK

The demo doesn't seem to work in IE. All the lines appear horizontally.

The same happens for the JSFiddle that I've found in another issue when testing in IE: http://jsfiddle.net/Fkj5X/

I've tested it in IE10. Works as it should in Firefox and Chrome.

@tbem Sorry, but I can't seem to get the example code to work. Must be missing something obvious. Could you provide a tiny working sample html file? Thanks!

Event trigger line drawing (e.g. on scroll, begin drawing)

In IE generated lines only display in horizontally. even in your example
http://jsfiddle.net/Fkj5X/5/
can you please give me a solution for this
thank you

I have a simple tab and tab container module that switches between tab content. Drawing lines between points in an inactive (display: none) tab content on page load makes the plugin not render the line with the required positioning properties.

Here are the differences (of 1 line) when this tab container is set as active on page load compared to inactive state:

Active

Inactive

You can see that the below properties are missing (or missing a value other than 0):

• width (inactive always set to 0px)
• top
• left
• transform

I have resolved this by calling the draw line method when switching to an inactive container, but thought that this was a possible bug. Thoughts?

On a side note, i noticed that lines in IE10 and IE9 that are drawn with any amount of angle are not transformed diagonally. IE10 doesn't show any translate property, whereas IE9 tries to fix this with the filter property. What does browser support look like?

I had a case where I drew lines, and I wanted to have them redrawn when the browser window was resized. Instead of clearing all lines, I gave each line a ID and the createLine script then checks if such a line exists. If the line exists, it is reused and modified. If it does not exist, it creates a new one.

I am sorry that I dont open a new pull request, but I just wanted to mention my change quickly because it helped me a lot. These are my changes:

createLine: function(lineId, x1, y1, x2, y2, options) {

                  // Check if browser is Internet Exploder ;)
                  var isIE = navigator.userAgent.indexOf("MSIE") > -1;
                  if (x2 < x1){
                    var temp = x1;
                    x1 = x2;
                    x2 = temp;
                    temp = y1;
                    y1 = y2;
                    y2 = temp;
                  }

                  // ---> start modified

                  // Modification to only create a new line if there is no existing line. If 
                  // there is an existing line, it will be modified.

                  var existingLine = document.getElementById(lineId);

                  if (existingLine == null) {
                    var line = document.createElement("div");
                  } else {
                    var line = existingLine;
                  }

                  if (lineId != null) {
                    line.setAttribute('id', lineId);
                  }

                  // end modified <---

  $.fn.line = function(lineId, x1, y1, x2, y2, options, callbacks) {
                return $(this).each(function(){
                  if($.isFunction(options)){
                      callback = options;
                      options = null;
                  }else{
                    callback = callbacks;
                  }
                  options = $.extend({}, $.fn.line.defaults, options);

                  $(this).append(helpers.createLine(lineId,x1,y1,x2,y2,options)).promise().done(function(){
                    if($.isFunction(callback)){
                      callback.call();
                    }
                  });


              });
  };

Because this is supposed to give support to IE>5.5, the plugin use the $.browser function and this was removed from jQuery 1.9+