how to draw the line between the points in javascript - javascript

i try to plot the line(border right) in a table using javascript code . My code
plotPoints(item,  index) {
var myElement = document.querySelector("#image-" + item + "-" + index);
(id is id = "image-0-4")
var position = this.getPosition(myElement);
console.log("The image is located at: " + position.x + ", " + position.y);
var first = index + 1;
var second = index + 2;
var third = index + 3;
var testDiv1 = document.getElementById("p1-" + item + "-" + first);
var position1 = this.getPosition(testDiv1);
console.log("The image is located at 1: " + position1.x + ", " + position1.y);
var testDiv2 = document.getElementById("p1-" + item + "-" + second);
var position2 = this.getPosition(testDiv2);
console.log("The image is located at 1: " + position2.x + ", " + position2.y);
var testDiv3 = document.getElementById("p1-" + item + "-" + third);
var position3 = this.getPosition(testDiv3);
console.log("The image is located at 1: " + position3.x + ", " + position3.y);
}
getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
I try to plot the line to connect the same number block .Using position function get all the block x and y position.
how to plot the line between the same number block( like number 1 block to connect line each column )

Related

I wan to print my text into the <div> tag, but it doesn't print

This is my Ajax Function
function xhttp() {
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
var hourArray;
// Define a callback function
xhttp.onload = function () {
var parser, xmlDoc;
var text = this.responseText;
parser = new DOMParser();
xmlDoc = parser.parseFromString(text, "text/xml");
hourArray = xmlDoc.getElementsByTagName("item");
booking_hours(hourArray);
};
// Send a request
xhttp.open("GET", "test.xml");
xhttp.send();
}
When any is clicked ajax function will work
dataCel.on("click", function () {
var thisEl = $(this);
var thisDay = $(this).attr("data-day").slice(8);
var thisMonth = $(this).attr("data-day").slice(5, 7);
$(".c-aside__num").text(thisDay);
$(".c-aside__month").text(monthText[thisMonth - 1]);
$(".c-aside__year").text(dateObj.getUTCFullYear() + indexYear);
xhttp();
dataCel.removeClass("isSelected");
thisEl.addClass("isSelected");
});
When ajax will work I want to read hours to my text and print this text into div tag
function booking_hours(hourArray) {
var table;
for (var i = 0; i < hourArray.length; i++) {
if (parseInt(hourArray[i].childNodes[0].nodeValue) < 9)
table +=
"<div data-hours='0" +
hourArray[i].childNodes[0].nodeValue +
".00-0" +
(parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
".00' class='hour_cell'>" +
"<p>" +
"0" +
hourArray[i].childNodes[0].nodeValue +
".00 - 0" +
(parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
".00" +
"</p></div>";
else if (parseInt(hourArray[i].childNodes[0].nodeValue) == 9) {
table +=
"<div data-hours='0" +
hourArray[i].childNodes[0].nodeValue +
".00-0" +
(parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
".00' class='hour_cell'>" +
"<p>" +
"0" +
hourArray[i].childNodes[0].nodeValue +
".00 - " +
(parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
".00" +
"</p></div>";
} else {
table +=
"<div data-hours='" +
hourArray[i].childNodes[0].nodeValue +
".00-" +
(parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
".00' class='hour_cell'>" +
"<p>" +
hourArray[i].childNodes[0].nodeValue +
".00 - " +
(parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
".00" +
"</p></div>";
}
}
console.log(table.slice(9));
document.getElementsById("hoursList").innerHTML = table.slice(9);
}
This console log print this console.log(table.slice(9));
<div data-hours='02.00-03.00' class='hour_cell'><p>02.00 - 03.00</p></div><div data-hours='08.00-09.00' class='hour_cell'><p>08.00 - 09.00</p></div><div data-hours='10.00-11.00' class='hour_cell'><p>10.00 - 11.00</p></div><div data-hours='16.00-17.00' class='hour_cell'><p>16.00 - 17.00</p></div>
But this innerHTML doesn't print what console log printed
document.getElementsById("hoursList").innerHTML = table.slice(9);
Div tag that I want to use.
<div id="hoursList" class="hours__list"></div>

JavaScript Functions Not Working After AJAX XML HttpRequest

I am creating an interactive map that allows the user to select year from timeline and filter events, this is done via XML HttpRequest that redraws the SVG everytime.
The SVG code for the map, including the JavaScript functions to zoom and the tooltip are re written everytime the user selects the year/filter. The code is a string in Java as it relies on if statements. However, whenever the user selects the year/filter the JavaScript functions do not work. The JavaScript code is repeated three times in the one class in separate if statements
This is the XML http Request code:
var year_selected = document.getElementById('year').innerHTML;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("map").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "/BCMapYear.html/"+year_selected, true);
xhttp.send();
JavaScript:
"<script type=\"text/javascript\">" +
"var transformMatrix = [1,0,0,1,0,0];"+
"var svg = document.getElementById('svg-map');"+
"var viewBox = svg.getAttributeNS(null, \"viewBox\").split(\" \");"+
"var centerX = parseFloat(viewBox[2])/2;"+
"var centerY = parseFloat(viewBox[3])/2;"+
"var matrixGroup = svg.getElementById(\"matrix-group\");"+
"var origMatrix = [1,0,0,1,0,0];"+
"function reset() {\n" +
" for(var i = 0; i < 6; i++) {\n" +
" transformMatrix[i] = origMatrix[i];\n" +
" } \n" +
" var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";\n" +
" matrixGroup.setAttributeNS(null, \"transform\", newMatrix); \n" +
" \n" +
" };"+
"function pan(dx, dy) {"+
"transformMatrix[4] += dx;"+
"transformMatrix[5] += dy;"+
"var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";"+
"matrixGroup.setAttributeNS(null, \"transform\", newMatrix);"+
"}"+
"function zoom(scale) {"+
"for(var i = 0; i < 4; i++) {"+
"transformMatrix[i] *= scale;"+
"}"+
"transformMatrix[4] += (1-scale) * centerX;"+
"transformMatrix[5] += (1-scale)* centerY;"+
"var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";"+
"matrixGroup.setAttributeNS(null, \"transform\", newMatrix);"+
"}"+
"</script>"
+"<script type=\"text/ecmascript\">\n" +
" (function() {\n" +
" var svg = document.getElementById('svg-map');\n" +
" var tooltip = svg.getElementById('tooltip');\n" +
" var tooltipText0 = document.getElementById('tooltiptext0').firstChild;\n" +
" var tooltipText1 = document.getElementById('tooltiptext1').firstChild;\n" +
" var tooltipText2 = document.getElementById('tooltiptext2').firstChild;\n" +
" var tooltipText3 = document.getElementById('tooltiptext3').firstChild;\n" +
" var triggers = svg.getElementsByClassName('tooltip-trigger');\n" +
" for (var i = 0; i < triggers.length; i++) {\n" +
" triggers[i].addEventListener('mousemove', showTooltip);\n" +
" triggers[i].addEventListener('mouseout', hideTooltip);\n" +
" }\n" +
" function showTooltip(evt) {\n" +
" var CTM = svg.getScreenCTM();\n" +
" var x = (evt.clientX - CTM.e + 6) / CTM.a;\n" +
" var y = (evt.clientY - CTM.f + 20) / CTM.d;\n" +
" tooltip.setAttributeNS(null, \"transform\", \"translate(\" + x + \" \" + y + \")\");\n" +
" tooltip.setAttributeNS(null, \"visibility\", \"visible\");\n" +
" tooltipText0.data = evt.target.getAttributeNS(null, \"data-tooltip-text0\");\n" +
" tooltipText1.data = evt.target.getAttributeNS(null, \"data-tooltip-text1\");\n" +
" tooltipText2.data =
evt.target.getAttributeNS(null, \"data-tooltip-text2\");\n" +
" tooltipText3.data =
evt.target.getAttributeNS(null, \"data-tooltip-text3\");\n" +
" }\n" +
" function hideTooltip(evt) {\n" +
"
tooltip.setAttributeNS(null, \"visibility\", \"hidden\");\n" +
" }\n" +
" })()" +
" </script>";
On the Console it comes up uncaught referenceerror zoom is not defined
You can add (); after your block that you want executed.
(function(){
//Bunch of code...
})();

Value is not displayed though condition in JavaScript is true

Below is my code which displays latest B'day and anniversary wishes (assuming event is on same day or 15 days old).
In below code, Jac's b'day is on 3rd of October still its name is displayed.
Alert alert((datediff(parseDate(dates[1]), (today)) <= 15) && (datediff(parseDate(dates[1]), (today)) >= 1)); displays value is true. Still name is not displayed.
function parseDate(str) {
var mdy = str.split('/');
return new Date(mdy[2], mdy[0]-1, mdy[1]);
}
// Take the difference between the dates and divide by milliseconds per day.
// Round to nearest whole number to deal with DST.
function datediff(first, second) {
return Math.round((second-first)/(1000*60*60*24));
}
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var y = today.getFullYear();
var dates = ["10/15/" + y, "10/3/" + y, "10/15/" + y, "9/6/" + y, "10/10/" + y, "10/1/" + y]; // MM/DD format
var names = ["Mac", "Jac", "Tom", "Abhay", "Mahesh", "Jayesh"];
var joingDates = ["10/16/" + y, "09/20/" + y, "10/2/" + y, "9/6/" + y, "10/10/" + y, "10/3/" + y];
var joiningyears = ["2000","2002","2010","2011","2011","2014"];
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
//alert((datediff(parseDate(dates[1]), (today)) <= 15) && (datediff(parseDate(dates[1]), (today)) >= 1));
for(var i = 0; i < dates.length; i++) {
//document.getElementById("mySup").innerHTML = getGetOrdinal(dates[i].split('/')[0]);
if ((datediff(parseDate(dates[i]), (today)) <= 15) && (datediff(parseDate(dates[i]), (today)) >= 1))
{
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML +
"<li>" +
"Wishing a very" + " Happy Birthday to ".bold().fontcolor("blue") +
names[i].bold().fontcolor("Red") +
"!!! (" +
getGetOrdinal(dates[i].split('/')[1]).split('')[0] +
getGetOrdinal(dates[i].split('/')[1]).split('')[1] +
getGetOrdinal(dates[i].split('/')[1]).split('')[2].sup() +
getGetOrdinal(dates[i].split('/')[1]).split('')[3].sup() +
" " +
months[dates[0].split('/')[0]-1] +
")" +
"<br>";
}
}
for(var i = 0; i < joingDates.length; i++) {
if (datediff(parseDate(joingDates[i]), (today)) <= 15 && datediff(parseDate(joingDates[i]), (today)) >= 1)
{
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML +
"<li>" +
"Wishing a very " +
"Happy ".bold().fontcolor("blue") +
getGetOrdinal(y-joiningyears[i]).split('')[0].bold().fontcolor("blue") +
getGetOrdinal(y-joiningyears[i]).split('')[1].sup().bold().fontcolor("blue") +
getGetOrdinal(y-joiningyears[i]).split('')[2].sup().bold().fontcolor("blue") +
" Work Anniversary to ".bold().fontcolor("blue") +
names[i].bold().fontcolor("Red") +
" with " +
"Siemens".fontcolor("green").bold() +
"!!! (" +
getGetOrdinal(joingDates[i].split('/')[1]).split('')[0] +
getGetOrdinal(joingDates[i].split('/')[1]).split('')[1] +
getGetOrdinal(joingDates[i].split('/')[1]).split('')[2].sup() +
getGetOrdinal(dates[i].split('/')[1]).split('')[3].sup() +
" " +
months[joingDates[0].split('/')[0]-1] +
")" +
"<br>";
}
}
function getGetOrdinal(n) {
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
}
<p id="demo"><p>
With enclosing text into "<sup>" and "</sup>", it worked. Thank you all for suggestions.
function parseDate(str) {
var mdy = str.split('/');
return new Date(mdy[2], mdy[0]-1, mdy[1]);
}
// Take the difference between the dates and divide by milliseconds per day.
// Round to nearest whole number to deal with DST.
function datediff(first, second) {
return Math.round((second-first)/(1000*60*60*24));
}
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var y = today.getFullYear();
var dates = ["10/15/" + y, "10/03/" + y, "10/15/" + y, "09/06/" + y, "10/10/" + y, "10/01/" + y]; // MM/DD format
var names = ["Mac", "Jac", "Tom", "Abhay", "Mahesh", "Jayesh"];
var joingDates = ["10/16/" + y, "09/20/" + y, "10/02/" + y, "09/06/" + y, "10/10/" + y, "10/04/" + y];
var joiningyears = ["2000","2002","2010","2011","2011","2014"];
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
for(var i = 0; i < dates.length; i++) {
//document.getElementById("mySup").innerHTML = getGetOrdinal(dates[i].split('/')[0]);
if ((datediff(parseDate(dates[i]), (today)) <= 15) && (datediff(parseDate(dates[i]), (today)) >= 1))
{
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML +
"<li>" +
"Wishing a very" + " Happy Birthday to ".bold().fontcolor("blue") +
names[i].bold().fontcolor("Red") +
"!!! (" +
getGetOrdinal(dates[i].split('/')[1]).split('')[0] +
getGetOrdinal(dates[i].split('/')[1]).split('')[1] +
"<sup>" +
getGetOrdinal(dates[i].split('/')[1]).split('')[2] +
getGetOrdinal(dates[i].split('/')[1]).split('')[3] +
"</sup> " +
" " +
months[dates[0].split('/')[0]-1] +
")" +
"<br>";
}
}
for(var i = 0; i < joingDates.length; i++) {
if (datediff(parseDate(joingDates[i]), (today)) <= 15 && datediff(parseDate(joingDates[i]), (today)) >= 1)
{
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML +
"<li>" +
"Wishing a very " +
"Happy ".bold().fontcolor("blue") +
getGetOrdinal(y-joiningyears[i]).split('')[0].bold().fontcolor("blue") +
"<sup>" +
getGetOrdinal(y-joiningyears[i]).split('')[1].bold().fontcolor("blue") +
getGetOrdinal(y-joiningyears[i]).split('')[2].bold().fontcolor("blue") +
"</sup> " +
" Work Anniversary to ".bold().fontcolor("blue") +
names[i].bold().fontcolor("Red") +
" with " +
"Siemens".fontcolor("green").bold() +
"!!! (" +
getGetOrdinal(joingDates[i].split('/')[1]).split('')[0] +
getGetOrdinal(joingDates[i].split('/')[1]).split('')[1] +
"<sup>" +
getGetOrdinal(joingDates[i].split('/')[1]).split('')[2] +
getGetOrdinal(joingDates[i].split('/')[1]).split('')[3] +
"</sup> " +
months[joingDates[0].split('/')[0]-1] +
")" +
"<br>";
}
}
function getGetOrdinal(n) {
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
}
<p id="demo"><p>

TypeError: $source.offset is not a function

I have a tree structure where the elements can be dragged and dropped into another element. My objective is when a element or node from a tree is dragged and dropped to the external element I want a line to be drawn from the element of the tree to the external location.
I have the code separate for dragging and dropping. I tried to integrate the code into my tree structure and getting this error. I did see similar errors but could not get an exact idea about what exactly the error is. Here is the code that is giving me the error.
end: function(item, hover, placeholder, helper) {
if (placeholder.parent().length) {
var tree = $('#tree1').aciTree('api');
if (tree.isItem(item)) {
var id = tree.getId(item);
var label = tree.getLabel(item);
if (this._instance.jQuery.hasClass('any')) {
this._instance.jQuery.find('li:not(.aciSortablePlaceholder)').remove();
}
var item = $('<li id="item-' + id + '">' + label + '</li>');
var sourceId = id;
var destinationId = sourceId;
drawLine(sourceId, destinationId);
//This is how the function is called
placeholder.after(item).detach();
}
else {
placeholder.detach();
}
}
helper.detach();
}});
function drawLine(eTarget, eSource) {
setTimeout(function () {
var $source = eSource;
var $target = eTarget;
var originX = $source.offset().left + $source.width() + 20 + 4;
// In the $source.offset() I am getting the error.
var originY = $source.offset().top + (($source.height() + 20 + 4) / 2);
var endingX = $target.offset().left;
var endingY = $target.offset().top + (($target.height() + 20 + 4) / 2);
var space = 20;
var color = "black";
var a = "M" + originX + " " + originY + " L" + (originX + space) + " " + originY; // beginning
var b = "M" + (originX + space) + " " + originY + " L" + (endingX - space) + " " + endingY; // diagonal line
var c = "M" + (endingX - space) + " " + endingY + " L" + endingX + " " + endingY; // ending
var all = a + " " + b + " " + c;
console.log("New Line ----------------------------");
console.log("originX: " + originX + " | originY: " + originY + " | endingX: " + endingX + " | endingY: " + endingY + " | space: " + space + " | color: " + color );
console.log(all);
myLines[myLines.length] = svg
.path(all)
.attr({
"stroke": color,
"stroke-width": 1,
"stroke-dasharray": "-"
});
}, 1000);
PS: I am using firefox. The eTarget and eSource and getting the values as supplied.

how to jQuery animate rotation

I have this jQuery plugin here:
$.fn.jqrotate = function(degrees, options)
{
var options = $.extend({
animate : false // not yet implemented
}, options);
return this.each(function()
{
var $this = $(this);
var oObj = $this[0];
var deg2radians = Math.PI * 2 / 360;
var rad = degrees * deg2radians;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
a = parseFloat(costheta).toFixed(8);
b = parseFloat(-sintheta).toFixed(8);
c = parseFloat(sintheta).toFixed(8);
d = parseFloat(costheta).toFixed(8);
$this.css( { '-ms-filter' : 'progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + b + ', M21=' + c + ', M22=' + d + ',sizingMethod=\'auto expand\')',
'filter' : 'progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + b + ', M21=' + c + ', M22=' + d + ',sizingMethod=\'auto expand\')',
'-moz-transform' : "matrix(" + a + ", " + c + ", " + b + ", " + d + ", 0, 0)",
'-webkit-transform' : "matrix(" + a + ", " + c + ", " + b + ", " + d + ", 0, 0)",
'-o-transform' : "matrix(" + a + ", " + c + ", " + b + ", " + d + ", 0, 0)"
});
});
};
That I use like so:
$(document).ready(function(){
var degree = 0;
$(".big-ball").click(function(){
degree += 90;
$(this).jqrotate(degree);
});
});
That does the job for rotating it very nice, but I'd like to animate the rotation process, what can be done to make it happen with the given plugin? (fyi: changing animate: false to true doesn't enable it :) )
Thank you.

Categories

Resources