Hi,
I am facing some canvas related problem. I have create canvas at run time to draw a simple horizantal line. And also set tooltip to that canvas. code will execute well and when arrow move on line, display which is also fine. but the problem is around also getting tooltip around the area. Beause i have set width and hight for canvas. I dont want dislpay pop up when on other place. should only display tooltip on line. I have attached My project goal. Please check it. Also help how to draw traingle withing rectangle.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicCanvas.aspx.cs" Inherits="DSN.DynamicCanvas" %>
<!DOCTYPE html>
<head runat="server">
<title></title>
<style>
.ex {
width: 150px;
padding: 15px;
border: 1px solid black;
margin: 0px;
border-collapse:inherit;
text-align:left;
}
.ex1 {
width: 80px;
padding: 20px;
border: 1px solid black;
margin: 0px;
text-align:left;
padding-right: 25px;
}
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
.triangle-right {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid black;
border-bottom: 10px solid transparent;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="application/javascript">
$(document).ready(function () {
putCanvs();
// Tooltip only Text
$('.masterTooltip').hover(function () {
// Hover over code
var title = "Hi this is shrikant";//$(this).attr('title');
//$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function () {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function (e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
function makePlot(elem) {
var ctx = elem.getContext("2d");
ctx.fillStyle = '#00f';
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.moveTo(200, 300);
ctx.lineTo(300, 300);
ctx.stroke();
ctx.closePath();
}
function putCanvs() {
for (var item = 0; item < 1; item++)
{
//cc = $(document.body);
//var div = document.createElement("div");
var canv = document.createElement("canvas");
canv.setAttribute('width', 350);
canv.setAttribute('height', 350);
canv.setAttribute('id', 'canv' + item);
//div.appendChild(canv);
document.body.appendChild(canv);
var C = document.getElementById(canv.getAttribute('id'));
if (C.getContext)
{
if (C.getContext)
{
makePlot(C);
}
}
$(C).addClass("masterTooltip");
//$(C).addClass("triangle-right").css({ 'background-color': 'blue', position: 'absolute', left: 300 - 10, top: (300 - 7) });
//cc.append(div);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divTbl" >
<asp:Literal ID="Literal1" runat="server" Visible="false"></asp:Literal>
</div>
</div>
</form>
</body>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DSN
{
public partial class DynamicCanvas : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
StringBuilder str = new StringBuilder();
str.Append("<table id=\"abc\" style='border-collapse:collapse;border: 1px solid black;height:100%;width:100%;background-color:white;position:absolute;top:150px;left:100px;'>");
str.Append("");
str.Append("<tr id=\"bkc\">");
str.Append("<b>");
str.Append("<td>");
//str.Append("<img id=\"imgDSN\" runat=\"server\" src=\" " + CreateGraph("BTR", mss) + " \" />");
str.Append("<div class=\"\">");
str.Append("BTR");
str.Append("</div>");
str.Append("</td>");
str.Append("<td>");
str.Append("<div class=\"\">");
str.Append("Pack");
str.Append("</div>");
str.Append("</td>");
str.Append("<td>");
str.Append("<div class=\"\">");
str.Append("DC/IHL");
str.Append("</div>");
str.Append("</td>");
str.Append("<td>");
str.Append("<div class=\"\">");
str.Append("Seller");
str.Append("</div>");
str.Append("</td>");
str.Append("</tr>");
str.Append("<tr id=\"bkc\">");
str.Append("<td>");
str.Append("<div class=\"ex1\"></div>");
str.Append("<div class=\"ex\">");
//str.Append("<img id=\"imgDSN\" runat=\"server\" src=\" " + CreateGraph("Beijing",mss1) + " \" />");
str.Append("beijing");
str.Append("</div>");
str.Append("</td>");
str.Append("<td id=\"tdChennai\">");
str.Append("<div class=\"ex1\"></div>");
str.Append("<div class=\"ex\">");
str.Append("chennai");
str.Append("</td>");
str.Append("<td>");
str.Append("");
str.Append("</td>");
str.Append("<td>");
str.Append("<div class=\"ex1\"></div>");
str.Append("<div class=\"ex\">");
str.Append("APAC");
str.Append("</div>");
str.Append("</td>");
str.Append("</b>");
str.Append("</tr>");
str.Append("<tr id=\"bkc\">");
str.Append("<b>");
str.Append("<td id=\"arrowId\">");
str.Append("<div class=\"ex1\"></div>");
str.Append("<div class=\"ex\">");
str.Append("Komarom");
str.Append("</div>");
str.Append("</td>");
str.Append("<td id=\"arrowId2\">");
str.Append("<div class=\"ex1\"></div>");
str.Append("<div class=\"ex\">");
str.Append("Reynosa");
str.Append("</div>");
str.Append("</td>");
str.Append("<td>");
str.Append("<div class=\"ex1\"></div>");
str.Append("<div class=\"ex\">");
str.Append("Moscow DC");
str.Append("</div>");
str.Append("</td>");
str.Append("<td>");
str.Append("<div class=\"ex1\">Russia</div>");
str.Append("<div class=\"ex\">");
str.Append("Russia");
str.Append("</div>");
str.Append("</td>");
str.Append("</b>");
str.Append("</tr>");
str.Append("</table>");
//style='position:absolute;top:300px;left:450px'
Literal1.Text = str.ToString();
}
}
}
}
