DotNet and Infos: January 2013

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