Code: Jquery

<< BACK
Javascript Form Validation :

<script type="text/javascript" src="../js/gen_validatorv4.js"></script>

<form action="" method="post" name="Task" id="Task" enctype='multipart/form-data'>

<ul>

<li>

<div>

<input type="text" class="txtBox" id="DATE" name="AN_FROM_DATE" readonly/>

<div id='Task_AN_FROM_DATE_errorloc' class="error_strings"></div>

</div>

</li>

</ul>

</form>

<script language="JavaScript" type="text/javascript" xml:space="preserve">

var frmvalidator = new Validator("Task");

frmvalidator.EnableOnPageErrorDisplay();

frmvalidator.EnableMsgsTogether();

frmvalidator.addValidation("AN_FROM_DATE","req","Please enter Date");

</script>

---------------------------------------------------------------------------------------------------------------------------------------------------

Disable Copy,Pest & Cut in HTML:

          <html>
              <head>
             </head>
             <body oncopy="return false;" onpaste="return false;" oncut="return false;">
                      Hello World!
                      <input type="text" />
            </body>
         </html>

---------------------------------------------------------------------------------------------------------------------------------------------------

Disable Right Click:

<script language=JavaScript> var message="Function Disabled!"; 
function clickIE4(){ if (event.button==2){ alert(message); return false;
 } } function clickNS4(e){ if (document.layers||document.

getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>

---------------------------------------------------------------------------------------------------------------------------------------------------

Disable Submit button if form submit one time :
     <script type="text/javascript">
                    $(function () {
                           $('form').submit(function () {
                                   $('input[type="submit"]', this).attr('disabled', 'disabled');
                            });
                    });
            </script>

---------------------------------------------------------------------------------------------------------------------------------------------------

Disable Browser Back Button :
     <script type="text/javascript">
                window.onload = function () { Clear(); }
                  function Clear() {
                  var Backlen=history.length;
                 if (Backlen > 0) history.go(-Backlen);
              }
          </script>
          <script type="text/javascript">
                if(window.history.forward(1) != null)
                window.history.forward(1);
         </script>

---------------------------------------------------------------------------------------------------------------------------------------------------

Google Translate To Indian Laguages:
   <script type="text/javascript">
                    function googleTranslateElementInit() {
                    new google.translate.TranslateElement({
                        pageLanguage: 'en', includedLanguages: 'bn,en,gu,hi,kn,ta,te,ur'},                   'google_translate_element');
                    }
                </script>
      <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

            <div class="google_lag">Translation</div>
            <div id="google_translate_element" class="google_lag"></div>

Ref. to use URL : https://developers.google.com/translate/v2/using_rest

---------------------------------------------------------------------------------------------------------------------------------------------------

Add and Delete Input Field To Javascript :
            <script type="text/javascript">
function addMandatoryCaptionPrice(rowCount){
        var newRowContent = '<div id="minus'+ rowCount +'">\n\
             <span>
              <input type="text" name="group_food_qty[]" id="mprice'+ rowCount +'" class="txtBox"/>   </span>\n\
             <img onclick="doDeleteRow(this.id);" id='+ rowCount +' src="<?php echo base_url(); ?>images/minus_1.jpg" width="13px;" height="13px;" />
       </div>';
        $('#addMoreDelTiming').append(newRowContent);
        rowCount++;
        $("#counterValue").val(rowCount);
    }
                 function doDeleteRow(rowId){
                          $('#minus'+rowId).remove();
                  }
</script>
           <span>
               <input type="text" name="group_food_qty[]" id="mprice" class="txtBox" />
          </span>
          <span>
                    <a href="javascript:addMandatoryCaptionPrice(counterValue.value)">
                       <img src="<?php echo base_url(); ?>images/plus.png">
                   </a>
           </span>
                <input type="hidden" id="counterValue" value="0">
                <div id="addMoreDelTiming"></div>

---------------------------------------------------------------------------------------------------------------------------------------------------

Only input type number allowed :

jQuery('.amount').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});

---------------------------------------------------------------------------------------------------------------------------------------------------

Every 30 sec Automatic Function Call :

<script language="JavaScript" type="text/javascript">

$(document).ready(function(){
window.setInterval(function(){
// call your function here

loadFunction();
}, 3000); //30 sec == 3000 millisecond

   });

               function loadFunction(){
                      location.href='<?PHP echo base_url(); ?>home/List';
              }

</script>

---------------------------------------------------------------------------------------------------------------------------------------------------

Display first 10 character and other data show in tooltip:

---------------------------------------------------------------------------------------------------------------------------------------------------

Focus Input Type:

<input type="text"name="flatNo" id="flat_no" placeholder="Flat No" />

$(document).ready(function(){
$("#flat_no").focus();
});
</script>

---------------------------------------------------------------------------------------------------------------------------------------------------

Auto hide Scrollbar :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>

<style>
.content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333; - webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
</style>


<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>


<div id="content_1" class="content">
<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
<p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
<p>Etiam sed massa felis, aliquam pellentesque est.</p>
<p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
<p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
<p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
<p>the end.</p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
autoHideScrollbar:true,
theme:"light-thin"
});
});
})(jQuery);
</script>
</body>

</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

Live Preview :

<script type="text/javascript">

$(function(){

$(".word").keyup(function()

{

var word=$(this).val();

$(".word_preview").html(word);

return false;

});

</script>

<style type="text/css">

.word_preview{

color:#cc0000;

}

.word{

width:150px; height:26px; font-size:18px;

}

</style>

<div style="font-size:18px; margin:30px">

<input type="text" name="word" class="word" />

<span class="word_preview"></span>

</div>

---------------------------------------------------------------------------------------------------------------------------------------------------

Split Function:

---------------------------------------------------------------------------------------------------------------------------------------------------

Single checkbox selection value:

$('#checkinfo'+reguserid).is(':checked');

---------------------------------------------------------------------------------------------------------------------------------------------------

Bootstrap Date Picker :

<link href="css/datepicker.css" rel="stylesheet" type="text/css" />

<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>

1. To Display Normal Bootstrap Date Picker :

==> $('#datepicker').datepicker({});

2. To Display Bootstrap Date Picker Where Dates Should be greater than or equal to current date:

==> var nowTemp = new Date();
                var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
                jQuery('#datepicker').datepicker({
                onRender: function(date) {
                    return date.valueOf() < now.valueOf() ? 'disabled' : '';
                    }
                });

3. To Display Bootstrap Date Picker Where Dates Should be less than or equal to current date :

                ==> var nowTemp = new Date();
                var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
                jQuery('#datepicker').datepicker({
                onRender: function(date) {
                    return date.valueOf() > now.valueOf() ? 'disabled' : '';
                    }
                });

---------------------------------------------------------------------------------------------------------------------------------------------------

Bootstrap Time Picker :

<link href="css/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css" />

<script src="js/bootstrap-timepicker.min.js" type="text/javascript"></script>

    $(function() {
        jQuery('.service_time').timepicker({                            
            minuteStep: 1,
            use24hours: true,
            showInputs: false,
            'timeFormat': 'g:ia',
            disableFocus: true
        });
    });

---------------------------------------------------------------------------------------------------------------------------------------------------

Add, Multiple Value Use to Javascript :

Multiplication two numbers :
function twoValMultiplication(val){ 
 var A = document.getElementById('BILLING_TIME' + val).value;        
 var B = document.getElementById('BILLING_FEES' + val).value;
  
 PRICE = A * B ;
 document.getElementById('BILLING_PRICE' + val).value = PRICE;
}

Add All Same Class Value :
function addClass() {
 var sum = 0;
 $(".billing_inputadd").each(function() {  
  if(!isNaN(this.value) && this.value.length!=0) {
   sum += parseFloat(this.value);
  }
 });
 document.getElementById('BILLING_SUBTOTAL').value = sum;
}

---------------------------------------------------------------------------------------------------------------------------------------------------

Sorting an array of JavaScript objects(JSON Format) :

var homes = [
 {
        "h_id": "4",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250"
    }, {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500"
    },  {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500"
    }
];

//ascending order
homes.sort(function(a, b) {
    return parseFloat(a.price) - parseFloat(b.price);
});
var datastring = "id=" + homes[0]['h_id'] + "&city="+homes[0]['city'];
$("#ase_showData").html(datastring);
//output : id=3&city=Dallas

//descending order
homes.sort(function(a, b) {
    return parseFloat(b.price) - parseFloat(a.price);
});
var datastring = "id=" + homes[0]['h_id'] + "&city="+homes[0]['city'];
$("#des_showData").html(datastring);
//output : id=5&city=New York

Refer following link :
http://www.w3schools.com/js/js_arrays.asp
http://www.w3schools.com/jsref/jsref_sort.asp
http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects

---------------------------------------------------------------------------------------------------------------------------------------------------

10 second system ideal status reload page :

var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 10000); // 1sec = 1000ms
    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 1) {   //10 seconds
       window.location.reload();
    }
}



---------------------------------------------------------------------------------------------------------------------------------------------------

jConfirm alert will return true of false value :
<link href="css/jquery.alerts.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.alerts.js" type="text/javascript"></script>

<script>

 jConfirm('Still some screens are pending? <br/> For continue click <b> CANCEL </b> <br> For exit click <b>OK</b>. ', 'Screen Status', function(r) {

 //jAlert('Confirmed: ' + r, 'Screen Status');

 if(r == true){

  alert("true");

 }

 

 if(r == false){

  alert("false");

 }

});

</script>



Click to link download css and js

https://goo.gl/J4lb7I

---------------------------------------------------------------------------------------------------------------------------------------------------


jQuery get date/month/year separate :


var today = new Date();

var curr_date = today.getDate();

var curr_month = today.getMonth();

var current_month = curr_month + 1;

var curr_year = today.getFullYear();

var TodayDate = current_month + '/' + curr_date + '/' + curr_year;

---------------------------------------------------------------------------------------------------------------------------------------------------

Code

Jquery

No comments:

Post a Comment

Blog Archive