RSS

Category Archives: Java Script

Watermark on TextBox using JavaScript


Some time you need  watermark effect on Asp.net Text Box . then you use this code

JavaScript Code:

 

<script type = “text/javascript”>

    var defaultText = “Enter text here”;

    function WaterMarks(txt, evt)

    {

        if(txt.value.length == 0 && evt.type == “blur”)

        {

            txt.style.color = “gray”;

            txt.value = defaultText;

        }

        if(txt.value == defaultText && evt.type == “focus”)

        {

            txt.style.color = “black”;

            txt.value=””;

        }

    }

</script>

 

Above script will be called on onblur and onfocus events of the  Text Box.

The script does the following two checks

1. If the Text Box is empty and the event type is blur event it sets the watermark and changes the font color as Gray.

2. If the Text Box  matches default text and the event type is the focus it clears the Text Box and sets the font color as Black.

 

<asp:TextBox ID=”txtName” runat=”server” Text = “Enter text here”

    ForeColor = “Gray” onblur = “WaterMarks(this, event);”

    onfocus = “WaterMarks(this, event);”>

</asp:TextBox>

 

if Visual Studio will throw warning when you call client side event in the above way.so you need to call from code behind

txtName.Attributes.Add(“onblur”, “WaterMark(this, event);”);

txtName.Attributes.Add(“onfocus”, “WaterMark(this, event);”);  

 

Advertisements
 
Leave a comment

Posted by on August 29, 2013 in ASP Dot Net C#, Java Script

 

Tags: , ,


 

floating mnu

Left Side Floating Menu

 
<div id=”divTopLeft”  runat=”server”  visible=”false”  style=”position:absolute;border: 2px solid #2266AA;top: 58.5px; width: 75px;text-decoration:none;font-weight:bold;text-align:center;”>
<!– Start – put your content here —>
<b><a href=”/logoff.aspx”  style=”text-align:center; text-decoration:none;”>Admin Logout </a></b><br />
<hr />
<b><a href=”/TKGSecure/AdminDashBoardEng.aspx”  style=”text-align:center; text-decoration:none;”>Admin DashBoard</a></b>

<!– End   – put your content here —>
</div>
<script type=”text/javascript”>
var ns = (navigator.appName.indexOf(“Netscape”) != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy) {
var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
var px = document.layers ? “” : “px”;
window[id + “_obj”] = el;
if (d.layers) el.style = el;
el.cx = el.sx = sx; el.cy = el.sy = sy;
el.sP = function (x, y) { this.style.left = x + px; this.style.top = y + px; };

el.floatIt = function () {
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if (this.sy < 0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx – this.cx) / 8; this.cy += (pY + this.sy – this.cy) / 8;
this.sP(this.cx, this.cy);
setTimeout(this.id + “_obj.floatIt()”, 40);
}
return el;
}
JSFX_FloatDiv(“ctl00_divTopLeft”, 10, 30).floatIt();
</script>

 

 

Right Side Floating Menu

 
<div id=”floatdiv”  runat=”server” visible=”false” style=”
position:absolute;
width:75px;height:72px;top:20px;right:10px;
padding:6px; margin-top:20px;
border:2px solid #2266AA;  text-align:center;
z-index:100″>

<b><a href=”/SubAdminLogOff.aspx”  style=”text-align:center; text-decoration:none;”>Sub Admin Logout </a></b><br />
<hr />
<b><a href=”/admin-dashboard.aspx”  style=”text-align:center; text-decoration:none;”>Sub Admin DashBoard</a></b>

</div>

 

 

<script type=”text/javascript”>
/* Script by: http://www.jtricks.com
* Version: 1.12 (20120823)
* Latest version: http://www.jtricks.com/javascript/navigation/floating.html
*
* License:
* GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
*/
var floatingMenu =
{

hasInner: typeof (window.innerWidth) == ‘number’,
hasElement: typeof (document.documentElement) == ‘object’
&& typeof (document.documentElement.clientWidth) == ‘number’
};

var floatingArray =
[
];

floatingMenu.add = function (obj, options) {
var name;
var menu;

if (typeof (obj) === “string”)
name = obj;
else
menu = obj;

if (options == undefined) {
floatingArray.push(
{
id: name,
menu: menu,

targetLeft: 0,
targetTop: 0,

distance: .07,
snap: true,
updateParentHeight: false
});
}
else {
floatingArray.push(
{
id: name,
menu: menu,

targetLeft: options.targetLeft,
targetRight: options.targetRight,
targetTop: options.targetTop,
targetBottom: options.targetBottom,

centerX: options.centerX,
centerY: options.centerY,

prohibitXMovement: options.prohibitXMovement,
prohibitYMovement: options.prohibitYMovement,

distance: options.distance != undefined ? options.distance : .07,
snap: options.snap,
ignoreParentDimensions: options.ignoreParentDimensions,
updateParentHeight:
options.updateParentHeight == undefined
? false
: options.updateParentHeight,

scrollContainer: options.scrollContainer,
scrollContainerId: options.scrollContainerId,

confinementArea: options.confinementArea,

confinementAreaId:
options.confinementArea != undefined
&& options.confinementArea.substring(0, 1) == ‘#’
? options.confinementArea.substring(1)
: undefined,

confinementAreaClassRegexp:
options.confinementArea != undefined
&& options.confinementArea.substring(0, 1) == ‘.’
? new RegExp(“(^|\\s)” + options.confinementArea.substring(1) + “(\\s|$)”)
: undefined
});
}
};

floatingMenu.findSingle = function (item) {
if (item.id)
item.menu = document.getElementById(item.id);

if (item.scrollContainerId)
item.scrollContainer = document.getElementById(item.scrollContainerId);
};

floatingMenu.move = function (item) {
if (!item.prohibitXMovement) {
item.menu.style.left = item.nextX + ‘px’;
item.menu.style.right = ”;
}

if (!item.prohibitYMovement) {
item.menu.style.top = item.nextY + ‘px’;
item.menu.style.bottom = ”;
}
};

floatingMenu.scrollLeft = function (item) {
// If floating within scrollable container use it’s scrollLeft
if (item.scrollContainer)
return item.scrollContainer.scrollLeft;

var w = window.top;

return this.hasInner
? w.pageXOffset
: this.hasElement
? w.document.documentElement.scrollLeft
: w.document.body.scrollLeft;
};

floatingMenu.scrollTop = function (item) {
// If floating within scrollable container use it’s scrollTop
if (item.scrollContainer)
return item.scrollContainer.scrollTop;

var w = window.top;

return this.hasInner
? w.pageYOffset
: this.hasElement
? w.document.documentElement.scrollTop
: w.document.body.scrollTop;
};

floatingMenu.windowWidth = function () {
return this.hasElement
? document.documentElement.clientWidth
: document.body.clientWidth;
};

floatingMenu.windowHeight = function () {
if (floatingMenu.hasElement && floatingMenu.hasInner) {
// Handle Opera 8 problems
return document.documentElement.clientHeight > window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
}
else {
return floatingMenu.hasElement
? document.documentElement.clientHeight
: document.body.clientHeight;
}
};

floatingMenu.documentHeight = function () {
var innerHeight = this.hasInner
? window.innerHeight
: 0;

var body = document.body,
html = document.documentElement;

return Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight,
innerHeight);
};

floatingMenu.documentWidth = function () {
var innerWidth = this.hasInner
? window.innerWidth
: 0;

var body = document.body,
html = document.documentElement;

return Math.max(
body.scrollWidth,
body.offsetWidth,
html.clientWidth,
html.scrollWidth,
html.offsetWidth,
innerWidth);
};

floatingMenu.calculateCornerX = function (item) {
var offsetWidth = item.menu.offsetWidth;

var result = this.scrollLeft(item) – item.parentLeft;

if (item.centerX) {
result += (this.windowWidth() – offsetWidth) / 2;
}
else if (item.targetLeft == undefined) {
result += this.windowWidth() – item.targetRight – offsetWidth;
}
else {
result += item.targetLeft;
}

if (document.body != item.menu.parentNode
&& result + offsetWidth >= item.confinedWidthReserve) {
result = item.confinedWidthReserve – offsetWidth;
}

if (result < 0)
result = 0;

return result;
};

floatingMenu.calculateCornerY = function (item) {
var offsetHeight = item.menu.offsetHeight;

var result = this.scrollTop(item) – item.parentTop;

if (item.centerY) {
result += (this.windowHeight() – offsetHeight) / 2;
}
else if (item.targetTop === undefined) {
result += this.windowHeight() – item.targetBottom – offsetHeight;
}
else {
result += item.targetTop;
}

if (document.body != item.menu.parentNode
&& result + offsetHeight >= item.confinedHeightReserve) {
result = item.confinedHeightReserve – offsetHeight;
}

if (result < 0)
result = 0;

return result;
};

floatingMenu.isConfinementArea = function (item, area) {
return item.confinementAreaId != undefined
&& area.id == item.confinementAreaId
|| item.confinementAreaClassRegexp != undefined
&& area.className
&& item.confinementAreaClassRegexp.test(area.className);
};

floatingMenu.computeParent = function (item) {
if (item.ignoreParentDimensions) {
item.confinedHeightReserve = this.documentHeight();
item.confinedWidthReserver = this.documentWidth();
item.parentLeft = 0;
item.parentTop = 0;
return;
}

var parentNode = item.menu.parentNode;
var parentOffsets = this.offsets(parentNode, item);
item.parentLeft = parentOffsets.left;
item.parentTop = parentOffsets.top;

item.confinedWidthReserve = parentNode.clientWidth;

// We could have absolutely-positioned DIV wrapped
// inside relatively-positioned. Then parent might not
// have any height. Try to find parent that has
// and try to find whats left of its height for us.
var obj = parentNode;
var objOffsets = this.offsets(obj, item);

if (item.confinementArea == undefined) {
while (obj.clientHeight + objOffsets.top
< item.menu.scrollHeight + parentOffsets.top
|| item.menu.parentNode == obj
&& item.updateParentHeight
&& obj.clientHeight + objOffsets.top
== item.menu.scrollHeight + parentOffsets.top) {
obj = obj.parentNode;
objOffsets = this.offsets(obj, item);
}
}
else {
while (obj.parentNode != undefined
&& !this.isConfinementArea(item, obj)) {
obj = obj.parentNode;
objOffsets = this.offsets(obj, item);
}
}

item.confinedHeightReserve = obj.clientHeight
– (parentOffsets.top – objOffsets.top);
};

floatingMenu.offsets = function (obj, item) {
var result =
{
left: 0,
top: 0
};

if (obj === item.scrollContainer)
return;

while (obj.offsetParent && obj.offsetParent != item.scrollContainer) {
result.left += obj.offsetLeft;
result.top += obj.offsetTop;
obj = obj.offsetParent;
}

if (window == window.top)
return result;

// we’re IFRAMEd
var iframes = window.top.document.body.getElementsByTagName(“IFRAME”);
for (var i = 0; i < iframes.length; i++) {
if (iframes[i].contentWindow != window)
continue;

obj = iframes[i];
while (obj.offsetParent) {
result.left += obj.offsetLeft;
result.top += obj.offsetTop;
obj = obj.offsetParent;
}
}

return result;
};

floatingMenu.doFloatSingle = function (item) {
this.findSingle(item);

if (item.updateParentHeight) {
item.menu.parentNode.style.minHeight =
item.menu.scrollHeight + ‘px’;
}

var stepX, stepY;

this.computeParent(item);

var cornerX = this.calculateCornerX(item);

var stepX = (cornerX – item.nextX) * item.distance;
if (Math.abs(stepX) < .5 && item.snap
|| Math.abs(cornerX – item.nextX) <= 1) {
stepX = cornerX – item.nextX;
}

var cornerY = this.calculateCornerY(item);

var stepY = (cornerY – item.nextY) * item.distance;
if (Math.abs(stepY) < .5 && item.snap
|| Math.abs(cornerY – item.nextY) <= 1) {
stepY = cornerY – item.nextY;
}

if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0) {
item.nextX += stepX;
item.nextY += stepY;
this.move(item);
}
};

floatingMenu.fixTargets = function () {
};

floatingMenu.fixTarget = function (item) {
};

floatingMenu.doFloat = function () {
this.fixTargets();
for (var i = 0; i < floatingArray.length; i++) {
this.fixTarget(floatingArray[i]);
this.doFloatSingle(floatingArray[i]);
}
setTimeout(‘floatingMenu.doFloat()’, 20);
};

floatingMenu.insertEvent = function (element, event, handler) {
// W3C
if (element.addEventListener != undefined) {
element.addEventListener(event, handler, false);
return;
}

var listener = ‘on’ + event;

// MS
if (element.attachEvent != undefined) {
element.attachEvent(listener, handler);
return;
}

// Fallback
var oldHandler = element[listener];
element[listener] = function (e) {
e = (e) ? e : window.event;
var result = handler(e);
return (oldHandler != undefined)
&& (oldHandler(e) == true)
&& (result == true);
};
};

floatingMenu.init = function () {
floatingMenu.fixTargets();

for (var i = 0; i < floatingArray.length; i++) {
floatingMenu.initSingleMenu(floatingArray[i]);
}

setTimeout(‘floatingMenu.doFloat()’, 100);
};

// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSingleMenu = function (item) {
this.findSingle(item);
this.computeParent(item);
this.fixTarget(item);
item.nextX = this.calculateCornerX(item);
item.nextY = this.calculateCornerY(item);
this.move(item);
};

floatingMenu.insertEvent(window, ‘load’, floatingMenu.init);

// Register ourselves as jQuery plugin if jQuery is present
if (typeof (jQuery) !== ‘undefined’) {
(function ($) {
$.fn.addFloating = function (options) {
return this.each(function () {
floatingMenu.add(this, options);
});
};
})(jQuery);
}

floatingMenu.add(‘ctl00_floatdiv’,
{

// Represents distance from left or right browser window
// border depending upon property used. Only one should be
// specified.
// targetLeft: 0,
targetRight: 10,

// Represents distance from top or bottom browser window
// border depending upon property used. Only one should be
// specified.
targetTop: 10,
// targetBottom: 0,

// Uncomment one of those if you need centering on
// X- or Y- axis.
// centerX: true,
// centerY: true,

// Remove this one if you don’t want snap effect
snap: true
});
</script>

 

Ref: http://www.jtricks.com/javascript/navigation/floating.html

Ref: http://www.jquery4u.com/menus/floating-message-plugins/

 
 

radiobuttonlist selected value javascript


<script type="text/javascript">
    function SelectedRBL() {
        var list = document.getElementById('<%= rblPollAnswers.ClientID %>'); //Client ID of the radiolist
        var inputs = list.getElementsByTagName("input");
        var selected;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].checked) {
                selected = inputs[i];
                break;
            }
        }
        if (selected) {
            alert(selected.value);
        }
    }
</script>
<asp:RadioButtonList ID="rblPollAnswers" runat="server" />
<asp:Button ID="btnVote" runat="server" Text="Vote" OnClientClick="SelectedRBL();return false;" />
 
Leave a comment

Posted by on May 16, 2013 in Java Script

 

Tags: , , , ,

Clearing ASP.Net FileUpload Control in Javascript


The following script will help you to clear the control……

<script language=”javascript”>

    function ClearfuBannerImage()

    {

    var fil = document.getElementById(“fuBannerImage”);

   fil.select();

   n=fil.createTextRange();

   n.execCommand(‘delete’);

   fil.focus();

    }

    </script>

 

<asp:FileUpload ID=”fuBannerImage” runat=”server” />

<asp:Button ID=”btnReset” runat=”server” OnClientClick=”ClearfuBannerImage()” Text=”Reset” />

 

 

 
Leave a comment

Posted by on November 25, 2012 in ASP Dot Net C#, Java Script

 

Special character not Allowed in textbox with javascript


I want to check whether the user has entered any special characters in a text box.

First Method (Function) if you insert special char with string then automatically remove special char.

Second Function which no allow to special char .if you insert then auto remove.

 

 

javascript Function

<script type=”text/javascript”>
<!–
function textBoxOnBlur(elementRef)
{
var checkValue = new String(elementRef.value);
var newValue = ”;

// 1<2,3>4&56789
for (var i=0; i<checkValue.length; i++)
{
var currentChar = checkValue.charAt(i);

if ( (currentChar != ‘<‘) && (currentChar != ‘,’) && (currentChar != ‘>’) && (currentChar != ‘&’) )
newValue += currentChar;
}

elementRef.value = newValue;
}

function valid(f) {
!(/^[A-zÑñ0-9]*$/i).test(f.value)?f.value = f.value.replace(/[^A-zÑñ0-9]/ig,”):null;
}
// –>
</script>

html Code

<form id=”form1″ runat=”server”>
<div>
<asp:TextBox ID=”TextBox1″ runat=”server”  onblur=”textBoxOnBlur(this);”></asp:TextBox>
<input name=”mytext” type=”text” onkeyup=”valid(this)” onblur=”valid(this)”>

</div>
</form>

 
1 Comment

Posted by on August 19, 2011 in Java Script

 

Tags:

Disable Button before Page PostBack in ASP.Net


In this article I will explain how to disable ASP.Net button control before Page PostBack is done or the form is submitted so that user can’t click the button again.

And Also change the text of  button

To start with I have created a simple ASP.Net Web Page with  ASP.Net Buttons on it.

 

<form id=”form1″ runat=”server”>

  <asp:Button ID=”Button1″ runat=”server” Text=”Submit” OnClick=”Button1_Clicked” />

<asp:Label id=”lblmessage” Text=”Page PostBack after Processing….” runat=”server” Visible=”false” />
    </form>

 

Now here’s the short JavaScript snippet that will disable the button as soon as it is clicked so that when PostBack occurs the button cannot be clicked again.

 

<script type = “text/javascript”>
function DisableButton() {
    document.getElementById(“<%=Button1.ClientID %>”).disabled = true;
     document.getElementById(“<%=Button1.ClientID %>”).value=”Processing….”;
}
window.onbeforeunload = DisableButton;
</script>

 

Write this code on Code-Behind

 

 protected void Button1_Clicked(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000);

        lblmessage.Visible = true;
    }

 

OutPut

 

 
2 Comments

Posted by on August 8, 2011 in Java Script

 

Tags: , ,

dropdown open at mouseover


in this article you can select or redirect link just mouse over on dropdown list ( selection dropdown)

 

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<title></title>

<style type=”text/css”>

body

{

background-color:#D5C0D5;

}

#appcenter

{

margin: 0 0 0 40px;

padding: 0;

}

#sddm

{

margin: 0;

padding: 0;

z-index: 30;

}

#sddm li

{

float: left;

font: bold 12px arial;

list-style: none outside none;

margin: 0 0 6px;

padding: 0;

}

.selectaloan:link, .selectaloan:active, .selectaloan:visited

{

background: url(“images/ddl-selectaloan.jpg”) no-repeat scroll 0 0 transparent;

color: #000000;

display: block;

font-size: 11px;

font-weight: normal;

height: 17px;

list-style-type: none;

outline: medium none;

padding: 1px 0 0 4px;

text-decoration: none;

width: 167px;

}

#sddm div

{

border-bottom: 1px solid #ACADB2;

border-left: 1px solid #ACADB2;

border-right: 1px solid #ACADB2;

margin: 0;

padding: 0;

position: absolute;

visibility: hidden;

width: 165px;

}

#sddm div a

{      position: relative;

display: block;

margin: 0;

padding: 1px 4px;

width: auto;

white-space: nowrap;

text-align: left;

text-decoration: none;

color: #000;

background:#FFF;

font: 11px arial}

 

#sddm div a:hover

{      background: #3399FF;

color: #FFF}

</style>

<script type=”text/javascript”>

<!–

var timeout = 100;

var closetimer = 0;

var ddmenuitem = 0;

function mopen(id) {

mcancelclosetime();

if (ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;

ddmenuitem = document.getElementById(id);

ddmenuitem.style.visibility = ‘visible’;

}

function mclose() {

if (ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;

}

function mclosetime() {

closetimer = window.setTimeout(mclose, timeout);

}

function mcancelclosetime() {

if (closetimer) {

window.clearTimeout(closetimer);

closetimer = null;

}

}

//document.onclick = mclose;

// –>

</script>

</head>

<body>

<form id=”form1″ runat=”server”>

<div id=”appcenter”>

How do I access my Website?<ul  id=”sddm”>

<li><a onmouseover=”mopen(‘m1’)” onmouseout=”mclosetime()” href=”#”>

http://www.google.com</a><div style=”visibility: hidden; z-index: 9999;” id=”m1″ onmouseover=”mcancelclosetime()”

onmouseout=”mclosetime()”>

<a href=”#”>www.yahoo.com</a><a href=”#”>www.hotmail.com</a><a href=”#”>

http://www.wordpress.com</a><a href=”#”>www.geo.tu/urdu</a><a href=”#”>www.youtube.cocm</a><a

href=”#”>www.facebook.com</a></div>

</li>

</ul>

</div>

</form>

</body>

</html>

 

ddl-selectaloan.jpg Image

OutPut

 

 
Leave a comment

Posted by on July 22, 2011 in Java Script

 

Tags: , ,