Hi *,
In last post i shared about a dhtml, what my client need and how i planned to overcome it.But their is a small problem that i need to add a same name over 1600+ places :( So that logic is not a good way here!!! To solve this issue my next move fetch the exact offset and page name both making as unique show the dhtml.Problem their too offset will change depending if the data populating above it , bin bin !!! Next move fetch control id and page name making both as unique and show a dhtml window. Bingo it helps my problem.
DEMO
How it workz ,
press alt key and ride mouse over a control over their i will show this DHTML depending upon whether the data is present then i will show data if not textbox will appear. now i given choice back to my client where ever he need he can. when i submit this stuff he bit amazed, i read it from his eye. i'm happy :)
<head runat="server">
<script src="dhtml.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(function () {
$("*", document.body).mouseenter(function (event) { // getting mouse event
if (event.altKey) { // checking whether alt is pressed
try {
$("div[id^='idname']").empty(); // removing the div visible
var offset = $(this).offset(); // Getting offset values
event.stopPropagation();
var d = $(this).attr('id'); // fetching Getting id
if (typeof d != 'undefined') { // checking fetched data is id or not
var left = offset.left; // getting left position
var top = offset.top + 30; // getting top position +30 {other wise it overlap with control}
var URL = window.location.pathname; // Gettting url
var PageName = URL.substring(URL.lastIndexOf('/') + 1); // getting exact pagename from url
var divid = '<div id="idname" style="left: ' + left + 'px; top: ' + top + 'px;width: 400px; position: absolute; background-color: #CCFFFF;"><span>ID : ' + d + ' Page Name: ' + PageName + ' </span><div style="width: 400px; background-color: #33CCFF; opacity: 0.8;filter: alpha(opacity=80);"><div style="text-align: center; width: 400px; background-color: #33CCFF;" id="Fetch">Fetching data pls wait</div><div style="text-align: center; width: 400px; background-color: #33CCFF;" id="new">Enter Description Here :<textarea id="TxtData" name="TxtData" style="width: 400px;background-color: #CCFFFF;border:2px solid red;background-color:#D0EFF7;text-align:center" onfocus="myFocus(this);" onblur="myBlur(this);" cols="40" rows="5">Insert text here...</textarea><br /><input type="submit" onclick="save(' + d + ',' + PageName + ');" style="background-color:#dff4ff;border:1px solid #c2e1ef;color:#336699;" id="Submit" value="Save" /> <input type="submit" ID="BtnCancel" onclick="hide();" value="Close" Style="position: absolute;background-color:#dff4ff;border:1px solid #c2e1ef;color:#336699;" /></div><div style="text-align: center; width: 400px; background-color: #33CCFF; opacity: 0.8;filter: alpha(opacity=80);" id="alreay">already exist</div></div></div>'; // create a div
$('body').append(divid); //appending div to body
}
else { // if not id leaving it freely :)
}
}
catch (Error) {
}
}
});
});
function hide() {
$("div[id^='idname']").empty();
}
function save(ControlId, PageName) {
var text = $('textarea#TxtData').val();
// $.ajax({
// type: "GET",
// cache: false,
// data: "ID="+ControlId+"&PageName="+PageName,
// url: "Help.aspx",
// success: function (data) {
// if (data == "Exception") {
// alert("Could not retrieve data at the moment. Please try later");
// }
// else {
// // alert(data);
// }
// },
// error: function () { alert("Could not retrieve data at the moment. Please try later"); }
// });
alert(text);
}
function myFocus(element) {
if (element.value == element.defaultValue) {
element.value = '';
}
}
function myBlur(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="CheckBox1" runat="server" BackColor="Aqua" /><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<asp:Literal ID="Literal1" Text="Literal1" runat="server"></asp:Literal><br />
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" /><br />
<asp:PlaceHolder ID="PlaceHolder1" runat="server">asasasas </asp:PlaceHolder>
<br />
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Selected="True" Text="1" Value="1"></asp:ListItem>
</asp:RadioButtonList>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
</div>
</form>
</body>
</html>
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
No comments:
Post a Comment