Thursday, February 23, 2012

Slider Control

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="../Scripts/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#txtTest").text("0");
            $(function () {
                $("#sliderTest").slider({
                    range: "max",
                    min: 0,
                    max: 10,
                    value: 0,
                    slide: function (event, ui) {
                        $("#txtTest").text(ui.value);

                        if (ui.value > 4) {
                            alert("hi");
                        }
                        else {
                            alert("hi123");
                        }
                    }
                });
            });
        });
    </script>


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

 <div id="sliderTest"></div>
        <br />
<label id="txtTest"></label>

Wednesday, February 22, 2012

Prevent Cut Copy Paste

 $('#txtNotes').bind('cut copy paste', function (event) {
                event.preventDefault();
            });

TextArea remaining characters showing

---------------------------------------------------------
                                   TYPE : 1
---------------------------------------------------------

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

 function textCounter(field, countfield, maxlimit) {
            if (field.value.length > maxlimit) {
                field.value = field.value.substring(0, maxlimit);
                alert('Textarea value can only be 20 characters in length.');
                return false;
            }
            else {
                countfield.value = maxlimit - field.value.length;
            }
        }
</script>




<textarea rows="10" cols="80" id="txtNotes" style="resize: none" onkeypress="textCounter(this,this.form.counter,20);"></textarea>
<input type="text" name="counter" maxlength="5" size="3" value="20" onblur="textCounter(this.form.counter,this,20);" />
                            chars remaining


-----------------------------------------------------------------------
                                           TYPE : 2
-----------------------------------------------------------------------

function countDown(control, maxLen, counter, typeName) {
    
var len = control.value.length;
    
var txt = control.value;
    
var span = document.getElementById(counter);
     span.style.display = '';
     span.innerHTML = (maxLen - len) + ' characters remaining';
    
if (len >= (maxLen - 10)) {
          span.style.color = 'red';
         
if (len > maxLen) {
               control.innerHTML = txt.substring(0, maxLen);
               span.innerHTML = (maxLen - control.value.length) + ' characters remaining';
               alert(typeName + ' text exceeds the maximum allowed!');
          }
     } 
else {
          span.style.color = '';
     }
}





<textarea id="Description" onkeyup="countDown(this, 255, 'desc', 'Description');"></textarea>


<SPAN id="desc" style="DISPLAY: none">255 characters remaining</SPAN>




-----------------------------------------------------------------
                                 TYPE : 3
-----------------------------------------------------------------

<script type="text/javascript" language="javascript">
        var len = 0;
        var characterLimit = 3492;

        $(document).ready(function () {


            //check for max length of a textarea START
            $("#divremainingChar").hide();
            $("#txtNotes").keydown(function (event) {
                len = $("#txtNotes").val().length;
                len += 1;

                var charactersRemaining = characterLimit - len;

                if (len >= characterLimit) {
                    // Allow only backspace and delete
                    if (event.keyCode == 46 || event.keyCode == 8) {

                    }
                    else {
                        event.preventDefault();
                    }
                }
                $("#divremainingChar").show();
                $('#remainingCharacters').html(charactersRemaining);
            });
            //check for max length of a textarea END

</script>



 <textarea cols="100" rows="10" id="txtNotes"></textarea>
                        <br />
                       <div style="color:Gray" id="divremainingChar"> <span id="remainingCharacters" ></span> characters remaining.  </div>

Setting up Maxlength for TEXTAREA

TYPE : 1

<script type="text/javascript" language="javascript">
 function SetMaxLength(Object, MaxLen) {
            return (Object.value.length <= MaxLen);
        }
</script>


<textarea rows="10" cols="80" id="txtNotes" style="resize: none" onkeypress="return SetMaxLength(this, 15);"></textarea>

//style="resize: none" will make textarea fixed size
-----------------------------------------------------

TYPE : 2


function textLimit(field, maxlen) {
            if (field.value.length > maxlen) {
                while (field.value.length > maxlen) {
                    field.value = field.value.replace(/.$/, '');
                }
                alert('Maximum limit exceeded!');
            }
        }


<textarea rows="10" cols="80" id="txtNotes" style="resize: none" onkeypress="textLimit(this,20)"></textarea>

To find radio button text and value

$("#btnTest").click(function () {

            $("#divTestFunction").find("table").find("tr").each(function () {
                $(this).find("input:radio").each(function () {
                    if ($(this).attr("checked") == true) {                      
                        alert(jQuery.trim($(this).parent().text()));
                    }
                });
            });
 });

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

<div id="divTestFunction">
        <table>
            <tr>
                <td>
                </td>
                <td>
                    <input type="radio" name="rbtnTest" />Demo Text
                </td>
            </tr>
        </table>
    </div>
    <input type="button" id="btnTest" value="Test" />