03:47
Unknown
Introduction
How to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in asp.net pages, using just three rows of JavaScript code.
In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial.
Description
Have you ever tried doing some animation using JavaScript or moving DIVs here well, you know then how much pain it is as not only you have to tackle the difficult part of animation but also making it cross browser compatible.
Well you probably know why I am stretching up so hard is just to tell you how easy it is to use jQuery and JavaScript and do some really fantastic things without even bothering of knowing how it is done internally
In this small note, I will show you how to do Dragging of a DIV using jQuery and JavaScript. I will show you the demo of a DIV, which can be dragged here and there.
Call this JavaScript function on div then this div is movable
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="moovPU.js" type="text/javascript"></script>
ondblclick='void(0);' onmouseover='over=true;' onmouseout='over=false;'
<%@ PageLanguage="VB"AutoEventWireup="false"CodeFile="Default.aspx.vb"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>Dragable Div in Asp.Net Using Javascript by sunil gurjar</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="moovPU.js" type="text/javascript"></script>
<script type="text/javascript">
varActiveDivPUid=null;
functionGetdiv()
{
var vLeft = 0;
var vTop = 0;
varvPopDivID = "div";
ActiveDivPUid = vPopDivID;
vLeft = screen.width/3;
vTop = screen.height/4
varvHtmlContent = '<div id='" + ActiveDivPUid + "' class='dimmer'>"+
"<table cellspacing='0' cellpadding='0' border='0' align='center' >" +
"<tr><td><table cellspacing='0' cellpadding='0' border='0' align='center' width='100%' class='legendPU'>" +
"<tr><td style='background: url(bg.jpg) repeat-x; height: 20px; border-bottom: 1px solid rgb(204, 204, 204);'>" +
"<table cellspacing='0' cellpadding='0' border='0' align='center' width='98%'>"+
"<tr><td height='20'style='font: bold 11px verdana; cursor: move; height: 18px;' "+
"ondblclick='void(0);' onmouseover='over=true;' onmouseout='over=false;'> </td>"+
"<td width='25'><img height='15' width='25' onclick='HideActive_PU("+ $(this).parent().attr("id") + ");' "+
"alt='' style='cursor: pointer;' src='close.gif' /></td> " +
"</tr></table></td></tr>"+
"<tr><td><div id='GSearchResults' class='legendbox' >"+
" Hi this is Sunil Gurjar <br/>it is demo of dragable or movable "+
"<div style='overflow: auto;'></td></tr></table></td></tr></table></div>';
varDivContent = document.createElement('div');
DivContent.innerHTML = vHtmlContent;
document.body.appendChild(DivContent.firstChild)
varobjDiv = document.getElementById(ActiveDivPUid);
objDiv.className = 'dimming';
objDiv.style.visibility = "visible";
objDiv.style.left = vLeft + 'px';
objDiv.style.top = vTop + 'px';
}
</script>
<style type="text/css">
div.dimmer{visibility: hidden;position:absolute;left:0px;top:0px;font-family:verdana;
font-weight:bold;padding:40px;background-image:url(honey.png);_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='honey.png');}
div.dimming{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;font-style:
normal;background-color: #ffffff;position:absolute;z-index:10000;visibility: hidden;border-style:
solid;border-color: #999999;border-width: 1px;}
.legendPU{font:11px verdana; margin:0; padding:0; border:2px #e1e1e1 solid; width:320px;}
.legendbox{width:300px;height:185px;margin:10px; padding:0;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Show Div" onclick="Getdiv()"/>
</div>
</form>
</body>
</html>
Downloads this tutorial
You can download the complete source code in C#
1 comments:
Everyone wants to get unique place in the IT industries for that you need to upgrade your skills, your blog helps me improvise my skill set to get good career, keep sharing your thoughts with us.
iosh course in chennai
Post a Comment