AG's Blog: Jquery

Showing posts with label Jquery. Show all posts

Tuesday, September 15, 2015

Calculate sub total of all rows values having textbox in each row

http://stackoverflow.com/questions/20159426/showing-the-sum-of-all-price-text-boxclass-price-in-to-subtotal-textboxid

-----------HTML----------------

<tr class="row" id="item10">
<td><input type="text" name="barcode" class="barcode" style="width: 50px"/></td>
<td><input type="text" name="type" class="type" readonly="true" style="width: 50px"/></td>
<td><input type="text" name="color" class="color" readonly="true" style="width: 50px"/></td>
<td><input type="text" name="qty" class="qty" style="width: 50px"/></td>
<td><input type="text" name="unitprice" readonly="true" class="unitPrice" style="width: 50px"/></td>
<td><input type="text" name="price" class="price" style="width: 50px"/></td>
</tr>

<tr class="row" id="item10">
<td><input type="text" name="barcode" class="barcode" style="width: 50px"/></td>
<td><input type="text" name="type" class="type" readonly="true" style="width: 50px"/></td>
<td><input type="text" name="color" class="color" readonly="true" style="width: 50px"/></td>
<td><input type="text" name="qty" class="qty" style="width: 50px"/></td>
<td><input type="text" name="unitprice" readonly="true" class="unitPrice" style="width: 50px"/></td>
<td><input type="text" name="price" class="price" style="width: 50px"/></td>
</tr>

<tr id="SubTotal">
<td colspan="5">SubTotal</td>
<td><input type="text" name="subTotal" id="subTotal" style="width: 50px"/></td>
</tr>
<tr id="VAt">
<td colspan="5">Vat</td>
<td><input type="text" name="vat" id="vat" style="width: 50px"/></td>
</tr>
<tr id="Total">
<td colspan="5">Total</td>
<td><input type="text" name="Total" id="Total" style="width: 50px"/></td>
</tr>

---- jQuery

var $inputs = $('input[name=price]');
$inputs.change(function () {
var sum = 0;
$inputs.each(function () {
if($(this).val()>10)
{
$(this).css('border','solid 1px #ee0000');
}
else
{
$(this).css('border','solid 1px #000000');
}
sum += +$(this).val() || 0;
});
$('#subTotal').val(sum);
});

Friday, September 6, 2013

Useful Jquery syntax

// Checks the count of the checkboxes checked
var n = $("input[type=checkbox]:checked").length;
//Prevents the button submit
$("#btnUpload").click(function (event) { event.bubbles = false; });
//Checks if radio button is checked
$('#radConst_0').is(':checked')
//Checks if check box is checked
$('#chkConst').is(':checked')
// Makes the control disable
$("#divRwkFunctions").attr("disabled", "disabled");
// clears all the checked boxes
var m = $("input[type=checkbox]").removeAttr('checked');
// Select the radio button
$('#ctl00_MainContent_radConst_1').attr('checked', 'checked');
// Adds the click event on all the checkboxes
$("input[type=checkbox]").click(function () {
chkFunctionStatus();
});
//Clear the File upload control//For IE
$("#fUpload").replaceWith($("#ctl00_MainContent_fUpload").clone(true));
//For other browsers
$("#fUpload").val("");

Show loading image for 5 secs after button click

function showLoading() {
document.getElementById('myHiddenDiv').style.display = "";
setTimeout('document.images["myAnimatedImage"].src="work.gif"', 500000000);
}

<span id='myHiddenDiv' style='display: none;' align="Center">
<img id="myAnimatedImage" src="Images/ajax-loader.gif" align="middle" alt="" />
</span>

<asp:Button ID="btnUpload" runat="server" Text="Submit" CssClass="button" OnClientClick="return showDiv();" />

Jquery datepicker with month and year only

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
        $(document).ready(
    function () {
        $('#txtPeriod').datepicker(
        {
            changeMonth: true,
            changeYear: true,
            dateFormat: 'MM yy',
            onClose: function () {
                var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            },
            beforeShow: function () {
                if ((selDate = $(this).val()).length > 0) {
                    iYear = selDate.substring(selDate.length - 4, selDate.length);
                    iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
                    $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
                }
            }
        });
    });
</script>
<style>
        .ui-datepicker-calendar
        {
            display: none;
        }
        .red
        {
            color: Red;
            font-size: 10px;
        }

        td
        {
            text-align: left;
        }
        #divValidate
        {
            text-align: center;
        }
    </style>
<div id="divPeriod" style="display: none;">
Period :
<asp:TextBox ID="txtPeriod" runat="server" Width="100px" onkeydown="return false;"></asp:TextBox>
</div>
</body>
</html>

Thursday, April 4, 2013

Without opening popup window Print Part Of A Web Page With jQuery

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="WebApplication1.Test1" %>

<!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 id="Head1" runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.print.js" type="text/javascript"></script>
<script type="text/javascript">

// When the document is ready, initialize the link so
// that when it is clicked, the printable area of the
// page will print.
$(function () {
// Hook up the print link.
$("a")
.attr("href", "javascript:void( 0 )")
.click(
function () {
// Print the DIV.
$(".printable").print();
// Cancel click event.
return (false);
}
);
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>
Print Part of a Page With jQuery
</h1>
<p>
<a>Print Bio</a>
</p>
<div class="printable">
<h2>
Jen Rish
</h2>
<p>
Jen Rish, upcoming fitness and figure model has some crazy developed legs!
</p>
<p>
<img src="Form2.png" width="380" height="570" alt="Jen Rish Has Amazing Legs!" />
</p>
<p>
I bet she does some <strong>serious squatting</strong>!
</p>
</div>
</form>
</body>
</html>

=====================jQuery.print.js===========

// Create a jquery plugin that prints the given element.
jQuery.fn.print = function(){
// NOTE: We are trimming the jQuery collection down to the
// first element in the collection.
if (this.size() > 1){
this.eq( 0 ).print();
return;
} else if (!this.size()){
return;
}

// ASSERT: At this point, we know that the current jQuery
// collection (as defined by THIS), contains only one
// printable element.

// Create a random name for the print frame.
var strFrameName = ("printer-" + (new Date()).getTime());

// Create an iFrame with the new name.
var jFrame = $( "<iframe name='" + strFrameName + "'>" );

// Hide the frame (sort of) and attach to the body.
jFrame
.css( "width", "1px" )
.css( "height", "1px" )
.css( "position", "absolute" )
.css( "left", "-9999px" )
.appendTo( $( "body:first" ) )
;

// Get a FRAMES reference to the new frame.
var objFrame = window.frames[ strFrameName ];

// Get a reference to the DOM in the new frame.
var objDoc = objFrame.document;

// Grab all the style tags and copy to the new
// document so that we capture look and feel of
// the current document.

// Create a temp document DIV to hold the style tags.
// This is the only way I could find to get the style
// tags into IE.
var jStyleDiv = $( "<div>" ).append(
$( "style" ).clone()
);

// Write the HTML for the document. In this, we will
// write out the HTML of the current element.
objDoc.open();
objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
objDoc.write( "<html>" );
objDoc.write( "<body>" );
objDoc.write( "<head>" );
objDoc.write( "<title>" );
objDoc.write( document.title );
objDoc.write( "</title>" );
objDoc.write( jStyleDiv.html() );
objDoc.write("<style type=\"text/css\"> @import url(\"./CSS.css\") </style>");
//console.log(this.html());
objDoc.write( "</head>" );
objDoc.write( this.html() );
objDoc.write( "</body>" );
objDoc.write( "</html>" );
objDoc.close();

// Print the document.
objFrame.focus();
objFrame.print();

// Have the frame remove itself in about a minute so that
// we don't build up too many of these frames.
setTimeout(
function(){
jFrame.remove();
},
(60 * 1000)
);
}

======================

Wednesday, April 3, 2013

Zoom In Zoom Out Contents of Page using JQuery

// Include JQuery File
<script type="text/javascript">
$(document).ready(function () {
var currZoom = $("#divpnlChart").css("zoom");
if (currZoom == 'normal') currZoom = 1; // For IE

$(".zoomIn").click(function () {
currZoom *= 1.2;
$("#divpnlChart").css("zoom", currZoom);
$("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
$("#divpnlChart").css("-moz-transform-origin", "0 0");

});
$(".zoomOff").click(function () {
$("#divpnlChart").css("zoom", 1);
$("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
$("#divpnlChart").css("-moz-transform-origin", "0 0");

});
$(".zoomOut").click(function () {
currZoom *= .8;
$("#divpnlChart").css("zoom", currZoom);
$("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
$("#divpnlChart").css("-moz-transform-origin", "0 0");

});
});
</script>

// HTML Code

<span class="zoomIn" style="font-size:120%">A</span>
<span class="zoomOff">A</span>
<span class="zoomOut" style="font-size:80%">A</span>

<div id="divpnlChart" runat="server" style="float: left; width: 85%;">
// your content
</div>

Move div up / down / left / right zoom in zoom out using button - jQuery

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="WebApplication1.Demo" %>

<!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>
<title></title>
<style type="text/css">
.block
{
background-image:url('Form.png');
width: 263px;
height: 103px;
position: relative;
left: 50px;
top: 50px;
}
.innerblock
{
background-color: yellow;
position: relative;
left: 5px;
top: 5px;
}
</style>
<%-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>--%>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>
<body>
<button id="top">
Shift Down</button>
<input type="text" id="txtTopBottom" value="5" />
<button id="bottom">
Shift Up</button>
<button id="left">
Shift Left</button>
<input type="text" id="txtLeftRight" value="5" />
<button id="right">
Shift Right</button>

<div align="left"><br>
<input type="radio" id="BothTextAndImage" name="group1" value="BothTextAndImage" checked="checked"/> Both Text and Image<br/>
<input type="radio" id="ChangeColor" name="group1" value="ChangeColor" /> Change Color<br/>
<input type="radio" id="OnlyText" name="group1" value="OnlyText" /> Only Text<br/>
<hr />
</div>

<div align="left"><br>
<input type="radio" id="z100" name="group2" value="100" checked="checked"/> 100%<br/>
<input type="radio" id="z80" name="group2" value="80" /> 80%<br/>
<input type="radio" id="z60" name="group2" value="60" /> 60%<br/>

</div>

<div class="block">
<div class="innerblock">
<div class="html">
<div style="float:left"><input type="text" id="Text2" value="N" style="width:50px" /></div>
<div style="float:left"><input type="text" id="Text1" value="A" style="width:50px" /></div>
<div style="float:left"><input type="text" id="Text3" value="C" style="width:50px" /></div>
<div style="float:left"><input type="text" id="Text4" value="L" style="width:50px" /></div>
</div>
</div>
</div>
<br />

<script type="text/javascript">

$("#right").click(function () {
var currentVal = parseInt($("#txtLeftRight").val());
if (currentVal != NaN) {
$("#txtLeftRight").val(currentVal + 1);
$(".block").animate({ "left": "+=5px" }, "slow");
}
});
$("#left").click(function () {
var currentVal = parseInt($("#txtLeftRight").val());
if (currentVal != NaN) {
$("#txtLeftRight").val(currentVal - 1);
$(".block").animate({ "left": "-=5px" }, "slow");
}
});
$("#top").click(function () {
var currentVal = parseInt($("#txtTopBottom").val());
if (currentVal != NaN) {
$("#txtTopBottom").val(currentVal + 1);
$(".block").animate({ "top": "+=5px" }, "slow");
}
});
$("#bottom").click(function () {
var currentVal = parseInt($("#txtTopBottom").val());
if (currentVal != NaN) {
$("#txtTopBottom").val(currentVal - 1);
$(".block").animate({ "top": "-=5px" }, "slow");
}
});

$("#BothTextAndImage").click(function () {
$(".block").css({ 'background-image': 'url("Form.png")' });
}
);
$("#ChangeColor").click(function () {
$(".block").css({ 'background-image': 'url("Form2.png")' });
}
);
$("#OnlyText").click(function () {
$(".block").css({ 'background-image': 'none' });
}
);
////////////////

$("#z100").click(function () {
$(".block").animate({ zoom: 1.5 });
}
);
$("#z80").click(function () {
$(".block").animate({ zoom: 1 });
}
);
$("#z60").click(function () {
$(".block").animate({ zoom: 0.6 });
}
);

///////////
</script>
</body>
</html>

Thursday, August 30, 2012

Prevent double click using Jquery

$(document).ready(function(){

$('#ctl00_hdnPostbackInProgress').val('0');

$('.Button').each(function(){

$(this).bind('click', function(e){

ValidateButtonPostBack($(this), e);

});

function ValidateButtonPostBack(control , e)

{

if($('#ctl00_hdnPostbackInProgress').val() == '0')

{

$('#ctl00_hdnPostbackInProgress').val('1');

if(control[0].href.indexOf("WebForm_DoPostBackWithOptions") != -1)

{

var startIndex = control[0].href.indexOf("WebForm_PostBackOptions") + 'WebForm_PostBackOptions'.length + 1;

var valGroup = control[0].href.substr(startIndex).split(',')[3].replace(/"/g,'').replace(/ /g,'');

if(!Page_ClientValidate(valGroup))

{