Thursday, February 26, 2009

JS for Paging HTML

function PagingHTML(PageIndex,PageSize,TotalRecords,LastRecord,fnName){
var strHTML = "<table width=100% border=\"0\"><tbody><tr style=\"font-weight: bold;\"><td><div style='float:right;'>";
var j = parseInt(TotalRecords / PageSize);
if (TotalRecords % PageSize != 0)
j++;
i = parseInt((PageIndex - 1) / 10) * 10 + 1;
if ((j - i) < 10 && j > 10)
i = j - 9;
var k;
if (PageIndex > 10)
strHTML += "<div style='float:left;padding-left:5px;'><a class=\"Paging\" href=\"javascript:"+fnName+"(" + (i - 1) + ")\"> ... </a></div>";
for (k = 1; i <= j && k <= 10; i++, k++){
if (i == PageIndex)
strHTML += "<div style='float:left;padding-left:5px;' class=\"Paging\">" + i + "</div>";
else
strHTML += "<div style='float:left;padding-left:5px;'><a class=\"Paging\" href=\"javascript:"+fnName+"(" + i + ")\">" + i + "</a></div>";
}
if (j >= i)
strHTML += "<div style='float:left;padding-left:5px;'><a class=\"Paging\" href=\"javascript:"+fnName+"(" + i + ")\"> ... </a></div>";
strHTML += "</div><div class=\"Paging\">Showing " + (((PageIndex - 1) * PageSize) + > + " - " + (((PageIndex - 1) * PageSize) + LastRecord) + " of " + TotalRecords + "</div>";
strHTML += "</td></tr></tbody></table>";
return strHTML;
}

Monday, February 23, 2009

Javascript for drag an htmll element

Javascript
function startdrag(t, e) {
if (e.preventDefault) e.preventDefault(); //line for IE compatibility
e.cancelBubble = true;
window.document.onmousemoveOld = window.document.onmousemove;
window.document.onmouseupOld = window.document.onmouseup;
window.document.onmousemove=dodrag;
window.document.onmouseup=stopdrag;
window.document.draged = t;
t.dragX = e.clientX;
t.dragY = e.clientY;
return false;
}

function dodrag(e) {

if (!e) e = event; //line for IE compatibility
t = window.document.draged;
t.style.left = (t.offsetLeft + e.clientX - t.dragX)+"px";
t.style.top = (t.offsetTop + e.clientY - t.dragY)+"px";
t.dragX = e.clientX;
t.dragY = e.clientY;
return false;
}
//restore event-handlers
function stopdrag() {
window.document.onmousemove=window.document.onmousemoveOld;
window.document.onmouseup=window.document.onmouseupOld;
}

HTML
<DIV
style="width:100px;height:100px;background:#EEEEEE;border:1px solid black"
><table style="position:absolute;border-color: black; border-style: solid; border-width: 1px" width="20%" onmousedown="startdrag(this, event);"><tr><td>Darg Me</td></tr></table></DIV>

Thursday, February 5, 2009

How to implement ICallbackEventHandler

-------- code behind---------
public partial class Home : System.Web.UI.Page, ICallbackEventHandler
{
public string sCallBackFunctionInvocation;
sCallBackFunctionInvocation = this.ClientScript.GetCallbackEventReference(this, "sId", "CallBackReturnFunction", "oContext", "OnCallBackError",false) + ";";
}

protected string returnValue;
public string GetCallbackResult()
{
return returnValue;
//throw new Exception("The method or operation is not implemented.");
}

public void RaiseCallbackEvent(string eventArgument)
{
//throw new Exception("The method or operation is not implemented.");
try
{
returnValue = //retrieve data from argument
}
catch (Exception ex)
{
ErrolLogController.LogError(ex.Message);
}
}






--------- Javascript---------------

function clickEv()
{
var sId = id;
var oContext = new Object();
<%=sCallBackFunctionInvocation%>
}

function CallBackReturnFunction(sReturnValue, oContext)
{
//do inner HTML setup
}

function OnCallBackError(exception,context)
{
alert(exception);
}

Monday, February 2, 2009

Popup div using javascript

-----------style------------------------------
#backgroundFilter
{
position: absolute;
top: 0;
left: 0;
overflow: hidden;
padding: 0;
margin: 0;
background-color: #000;
filter: alpha(opacity=70);
opacity: 0.17;
display: none;
z-index: 1000100;
width: 100%;
height: 100%;
}
/* POPUP WINDOW */
#popupWindow
{
position: absolute;
width: 383px;
height: 300px;
padding: 1px;
z-index: 1000300;
display: none;
background-color: #ddd;
border: 1px solid black;
}
#topLeft
{
width:357px;
float:left;
}
#topRight
{
width:23px;
float:left;
}
#popupBody
{
width:380px;
margin: 30px 0 0 0;
}
-------------------script--------------------------------------
if (!document.all)
document.captureEvents(Event.MOUSEMOVE)

// On the move of the mouse, it will call the function getPosition
document.onmousemove = getPosition;

// These varibles will be used to store the position of the mouse
var X = 0
var Y = 0

// This is the function that will set the position in the above varibles
function getPosition(args)
{
// Gets IE browser position
if (document.all)
{
X = event.clientX + document.body.scrollLeft
Y = event.clientY + document.body.scrollTop
}

// Gets position for other browsers
else
{
X = args.pageX
Y = args.pageY
}
}
function backgroundFilter()
{
var div;

if(document.getElementById)
// Standard way to get element
div = document.getElementById('backgroundFilter');
else if(document.all)
// Get the element in old IE's
div = document.all['backgroundFilter'];

// if the style.display value is blank we try to check it out here
if(div.style.display==''&&div.offsetWidth!=undefined&&div.offsetHeight!=undefined)
{
div.style.display = (div.offsetWidth!=0&&div.offsetHeight!=0)?'block':'none';
}

// If the background is hidden ('none') then it will display it ('block').
// If the background is displayed ('block') then it will hide it ('none').
div.style.display = (div.style.display==''||div.style.display=='block')?'none':'block';
}

function popUp()
{
var div;

if(document.getElementById)
// Standard way to get element
div = document.getElementById('popupWindow');
else if(document.all)
// Get the element in old IE's
div = document.all['popupWindow'];

// if the style.display value is blank we try to check it out here
if(div.style.display==''&&div.offsetWidth!=undefined&&div.offsetHeight!=undefined)
{
div.style.display = (div.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
}

// If the PopUp is hidden ('none') then it will display it ('block').
// If the PopUp is displayed ('block') then it will hide it ('none').
div.style.display = (div.style.display==''||div.style.display=='block')?'none':'block';

// Off-sets the X position by 15px
X = X + 15;

// Sets the position of the DIV
div.style.left = X+'px';
div.style.top = Y+'px';
}


----------HTML----------------
<div id="popupWindow" style="display:none">
<div id="topLeft">
<img alt="View Links" height='23' width='357' src='images/title.gif' />
</div>
<div id="topRight">
<a href='javascript:popUp();backgroundFilter();'>
<img height='23' width='23' src='images/close.gif' alt='Close' /></a>
</div>
<div id="popupBody">
<ul>
<li><a href="http://www.blacksoulstrangers.info">Black Soul Strangers</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
<li><a href="http://www.stephendaly.info">Stephen Daly</a></li>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>
</div>
</div>