RSS

Category Archives: JQuery

jquery calendar not working in updatepanel


JQuery Calaner

 
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css&#8221; />
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script&gt;
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script&gt;
<link rel=”stylesheet” href=”/resources/demos/style.css” />

<script>
$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
$(“#ctl00_ContentPlaceHolder1_pspSalePrice_txtstDate”).datepicker({ minDate: 0 });
});

});

</script>

 
<asp:UpdatePanel ID=”UpdatePanel25″ runat=”server” UpdateMode=”Conditional” RenderMode=”Inline”>
<ContentTemplate>

<table>

<tr id=”trDate” runat=”server” height=”10″>
<td >
</td>
<td align=”right”>
<asp:Label ID=”lblDate” runat=”server” Text=”Start Date” CssClass=”Label”></asp:Label>&nbsp;
</td>
<td align=”left”>
<asp:TextBox ID=”txtstDate” runat=”server” MaxLength=”10″  ></asp:TextBox>

<asp:RequiredFieldValidator ID=”rfvDate” runat=”server”
ControlToValidate=”txtstDate” ErrorMessage=”Please enter a Date.”
ToolTip=”Please enter a Date.” ValidationGroup=”AddEditPromotionalSalePrices” Enabled=”true” >*</asp:RequiredFieldValidator>

</td>
<td >
</td>
</tr>

</table>

</ContentTemplate>
</asp:UpdatePanel>

 

Solution:

i face this issue when i create usercontrol and use on Webpage.

with Above code  Jquery Calander on woriking first time after postback calander not working . so fine solution of this problem just change in header section jquery code replace with below mention code.

 


<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {
        $(".datepicker").datepicker();
    });
</script>

dtpicker
Advertisements
 
Leave a comment

Posted by on July 31, 2013 in JQuery

 

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/