DotNet and Infos: DYNAMIC TOOLTIP FROM DATABASE TO DISPLAY IMAGE DURING MOUSEOVER IN GRIDVIEW

This will display the image and other required fields from database during the mouseover in the gridview column or row using handler(ashx).

IN THE ASPX PAGE
<html>
<head>
<%-- Java script for tooltip display--%>

<script language="javascript" type="text/javascript">
// Declare General Variables
var sTooTipId = 'divTooTip';
var sToolTipPlacement = "Right"; // Right, Left

// For Hiding tool tip
function HideTooTipImage() {
// Get the Div element which was created dynamically on ShowToolTipImage function
var divTip = document.getElementById(sTooTipId);
if (divTip) {
while (divTip.childNodes.length > 0)
// Remove all child content which are added inside on the Div content
divTip.removeChild(divTip.childNodes[0]);
}
// Invisible th Div (which removed all child content)
divTip.style.visibility = "hidden";

}

function MoveToolTipImage(event) {

// Verify if the Div content already present?
if (document.getElementById(sTooTipId)) {

// Get the Div content
var newDiv = document.getElementById(sTooTipId);

if ('pageX' in event) { // all browsers except IE before version 9
var pageX = event.pageX;
var pageY = event.pageY;
}
else { // IE before version 9
var pageX = event.clientX + document.documentElement.scrollLeft;
var pageY = event.clientY + document.documentElement.scrollTop;
}

if (sToolTipPlacement == "Right")
newDiv.style.left = (pageX + 17) + "px";
else // Left
newDiv.style.left = (pageX - (parseInt(newDiv.style.width) + 17)) + "px";

// Portion of div when hide by browser top
if ((pageY - (parseInt(newDiv.style.height) + 3)) < 0)
// Showing below the cursor
newDiv.style.top = pageY + "px";
else
// Showing above the cursor
newDiv.style.top = (pageY - (parseInt(newDiv.style.height) + 3)) + "px";

// Finally visibling the div which has the image
newDiv.style.visibility = "visible";
}
}
// For showing tool tip
function ShowToolTipImage(event, pId) {

var newDiv = null;

// Verify if the Div content already present?
if (!document.getElementById(sTooTipId)) {

// If not create a new Div element
newDiv = document.createElement("div");
// Set the id for the Div element to refer further
newDiv.setAttribute("id", sTooTipId);

// Add it to the page
document.body.appendChild(newDiv);

}
else {
// Get the Div content which was invisible on HideTooTipImage function
newDiv = document.getElementById(sTooTipId);
}

var url = '';

// Here the pId is the id of the image + a flag
// (0 - when no image stored on the database or
// 1 - when image stored on the in database)
// which indicate whether the image required to show or not
if (pId.split(",")[1] == 'False ')
url = "Images/ImageNotAvailable.jpg";
else
url = "Imagehandler.ashx?ProductID= " + pId.split(",")[0];

/*// Create an html image element
var NewImg = document.createElement("img");

NewImg.setAttribute("src", url);

// // Setting the style - if u required set what style you required
// NewImg.style.width = "100%";
// NewImg.style.height = "100%";
// Adding the image element to div created
newDiv.appendChild(NewImg);*/

var strImageContent =
'<div class="border_preview"> ' +
' <div id="loader_container"> ' +
' <div id="loader"> ' +
' <div align="center">Loading image preview...</div> ' +
' <div id="loader_bg"> ' +
' <div id="progress"> </div>' +
' </div> ' +
' </div> ' +
' </div> ' +
' <div class="preview_temp_load"> ' +
' <img id="previewImage" onload="javascript:remove_loading();" src="' + url + '" border="0" width="100%" height="100%"> ' +
' </div> ' +
'</div>';
newDiv.innerHTML = strImageContent;

// Here I am setting the style for example purpose,
// you can modify what you required.
// You can even set the css class also.
newDiv.style.zIndex = 999;
newDiv.style.width = "200px";
newDiv.style.height = "80px";

// Make absolute to the div for floating on the screen.
newDiv.style.position = "absolute";

if ('pageX' in event) { // all browsers except IE before version 9
var pageX = event.pageX;
var pageY = event.pageY;
}
else { // IE before version 9
var pageX = event.clientX + document.documentElement.scrollLeft;
var pageY = event.clientY + document.documentElement.scrollTop;
}

if (sToolTipPlacement == "Right")
newDiv.style.left = (pageX + 17) + "px";
else // Left
newDiv.style.left = (pageX - (parseInt(newDiv.style.width) + 17)) + "px";

// Portion of div when hide by browser top
if ((pageY - (parseInt(newDiv.style.height) + 3)) < 0)
// Showing below the cursor
newDiv.style.top = pageY + "px";
else
// Showing above the cursor
newDiv.style.top = (pageY - (parseInt(newDiv.style.height) + 3)) + "px";

// Finally visibling the div which has the image
newDiv.style.visibility = "visible";
}

var t_id = setInterval(animate, 20);
var pos = 0;
var dir = 2;
var len = 0;

function animate() {
var elem = document.getElementById('progress');
if (elem != null) {
if (pos == 0) len += dir;
if (len > 32 || pos > 79) pos += dir;
if (pos > 79) len -= dir;
if (pos > 79 && len == 0) pos = 0;
elem.style.left = pos + "px";
elem.style.width = len + "px";
}
}
function remove_loading() {
var targelem = document.getElementById('loader_container');
targelem.style.display = 'none';
targelem.style.visibility = 'hidden';
}
</script>
<%-- CSS for tooltip display--%>
<style type="text/css">
/*Styles*/
.border_preview{
z-index:100;
position:absolute;
background: #fff;
border: 1px solid #444;
padding:3px;
width:100%;
}
#loader_container {text-align:left;position:absolute;}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:10px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:135px;
border:1px solid #6A6A6A;
text-align:left;
z-index:255;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:10px;
background-color:#9D9D94
}
#loader_bg {
background-color:#EBEBE4;
position:relative;
top:8px;left:8px;height:7px;
width:113px;font-size:1px
}
.title_h2 {
color:#000;
text-align: left;
padding:12px 0 0 18px;
margin:0;
font-size:14px;
}
.preview_temp_load {
vertical-align:middle;
text-align:center;
padding: 0px;
}
.preview_temp_load img{
vertical-align:middle;
text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">

<%-- using the rescpective handler and girdview binding function bind the gridview --%>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="525px">

<asp:TemplateField HeaderText="Model">

<img id="imgPhoto" src='<%# "Imagehandler.ashx?ProductID= " + Eval ("ProductID") %> '

onmouseover="ShowToolTipImage(event, this.alt)"

onmouseout="HideTooTipImage()"

onmousemove="MoveToolTipImage(event)"

alt="<%# Eval("ProductID") %>,<%# Eval("Pname") %>"

width="50px" height="50px"

title="<%# Eval("Pname") %>"

style="cursor:hand" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Product">

<asp:Label ID="lblname" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Pname") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="u/p(र)">

<asp:Label ID="lbluprice" runat="server"></asp:Label>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</form>

<body>

</html>

Wednesday, 30 January 2013

DYNAMIC TOOLTIP FROM DATABASE TO DISPLAY IMAGE DURING MOUSEOVER IN GRIDVIEW

No comments:

Post a Comment