tbem / jquery.line Goto Github PK
View Code? Open in Web Editor NEWDraw a line between two given points with just a div and CSS
Draw a line between two given points with just a div and CSS
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:
You can see that the below properties are missing (or missing a value other than 0):
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+
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.