PopUp box with Repeater Control using JavaScript


First off all create a table in to database  something like this:

table.JPG

Figure: Users table in database

<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<
title>Untitled Page</title>

<
style type="text/css">
#ImageId
{
font-size: 0.75em;
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
width: 400px;
height: 0px;
z-index: 200
;
}

</style>

<
script type="text/javascript">
var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 200; // maximum image size.
if (document.getElementById || document.all){
document.write(
'<div id="ImageId">');
document.write(
'</div>');
}

function getobj(){
if (document.getElementById)
return document.getElementById("ImageId").style
else if (document.all)
return document.all.imagid.style
}

function getobjnostyle(){
if (document.getElementById)
return document.getElementById("ImageId")
else if (document.all)
return document.all.imagid
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


//Main function to fill record for popup box

function
showtRecord(imagename,title,description,email,country,showthumb,height)
{
if (height > 0){
currentimageheight = height;
}
document.onmousemove=followmouse;

//Start body of popup
newHTML = '<div style="padding: 5px; background-color: White; border: 1px solid #888;">';
if (showthumb > 0)
{
newHTML = newHTML +
'<div style="font-size:16px" align="left" style="padding: 2px 2px 2px 2px;"><img src="Images/' + imagename + '" border="0">';
}
newHTML = newHTML +
'<div style="font-size:14px" align="left">' + '<b>Name: </b>'+ title + '</div>';
newHTML = newHTML +
'<div style="font-size:14px">'+'<b>Description: </b>'+ description + '</div>';
newHTML = newHTML +
'<div style="font-size:14px">'+'<b>Email: </b>'+ email + '</div>';
newHTML = newHTML +
'<div style="font-size:14px">'+'<b>Country: </b>'+ country + '</div>';
newHTML = newHTML +
'</div>';
//End body of popup

getobjnostyle().innerHTML = newHTML;
getobj().visibility=
"visible";
}

function hideRecord(){
getobj().visibility=
"hidden"
document.onmousemove=""
getobj().left="-500px"
}

function
followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
 

if (typeof e != "undefined"){
if (docwidth - e.pageX < 300){
xcoord = e.pageX - xcoord - 286;
// Move to the left side of the cursor
} else {
xcoord += e.pageX;
}

if (docheight - e.pageY < (currentimageheight + 110)){
ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
}
else {
ycoord += e.pageY;
}
}
else if (typeof window.event != "undefined"){
if (docwidth - event.clientX < 300){
xcoord =
event.clientX + truebody().scrollLeft - xcoord - 286; // Move to the left side of the cursor
} else {
xcoord += truebody().scrollLeft+
event.clientX
}
if (docheight - event.clientY < (currentimageheight + 110)){
ycoord +=
event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
}
else {
ycoord += truebody().scrollTop +
event.clientY;
}
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if(ycoord < 0) { ycoord = ycoord*-1; }
getobj().left=xcoord+
"px"
getobj().top=ycoord+"px"
}
</script>

<
div align="center">
    <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
            <table width="200px" cellpadding="0" cellspacing="0" style="border: 1px solid maroon;">
                <tr bgcolor="maroon">
                    <th>Name</th>
                </tr>
        </HeaderTemplate>

   
    <ItemTemplate>
            <tr>
                <td>
                    &nbsp; <a onmouseover="showtRecord('<%# DataBinder.Eval(Container, "DataItem.Photo")%>','<%# DataBinder.Eval(Container, "DataItem.Name")%>','<%# DataBinder.Eval(Container, "DataItem.Description")%>','<%# DataBinder.Eval(Container, "DataItem.Email")%>',' <%# DataBinder.Eval(Container, "DataItem.Country")%>','1','');" onmouseout="hideRecord();">
<%
# DataBinder.Eval(Container, "DataItem.Name")%></a>
                </td>
            </tr>
        </ItemTemplate>
       
        <AlternatingItemTemplate>
            <tr bgcolor="#e8e8e8">
                <td>
                    &nbsp; <a onmouseover="showtRecord('<%# DataBinder.Eval(Container, "DataItem.Photo")%>','<%# DataBinder.Eval(Container, "DataItem.Name")%>','<%# DataBinder.Eval(Container, "DataItem.Description")%>','<%# DataBinder.Eval(Container, "DataItem.Email")%>',' <%# DataBinder.Eval(Container, "DataItem.Country")%>','1','');" onmouseout="hideRecord();">
<%
# DataBinder.Eval(Container, "DataItem.Name")%></a>
                </td>
            </tr>
        </AlternatingItemTemplate>

        <FooterTemplate>
           </table>
        </FooterTemplate>

    </asp:Repeater>
</
div>

</form>
</
body>
</
html>

Code Behind code:

using
System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public
partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlCommand cmd = new SqlCommand("SELECT * FROM Users", new SqlConnection(@"Server=PURU\SQLSERVER2005;Database=Test; Uid=sa;Pwd=wintellect;"));

        cmd.Connection.Open();
        Repeater1.DataSource = cmd.ExecuteReader();
        Repeater1.DataBind();
        cmd.Connection.Close();
        cmd.Connection.Dispose();
    }
}

Output: When you press F5 to debug the application. you will get the following output:

Repeater.JPG

If you put mouse over any item (Name) you will get the following output:


PopUp.JPG

Note: Download attached file for demo.

Up Next
    Ebook Download
    View all
    Learn
    View all