Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Tuesday, 29 October 2013

Social Sites Share Button for website Floating Left using javascript

Copy & Paste this code to your website:

 <!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:180px;">
<a class="addthis_button_facebook_like" <%="fb:like:layout"%>="box_count" width="70px"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-526f51334345dc15"></script>


<!-- AddThis Button END -->

Saturday, 26 October 2013

Change Div/Panel Border width and color on dropdownlist selectedchanged Event using Javascript

Use this code to implement this function:

<asp:DropDownList ID="ddlchnageborderwidth" runat="server">
          <asp:ListItem Value="1px">1px</asp:ListItem>
          <asp:ListItem Value="2px">2px</asp:ListItem>
          <asp:ListItem Value="3px">3px</asp:ListItem>
          <asp:ListItem Value="4px">4px</asp:ListItem>
</asp:DropDownList>
                                             
<asp:DropDownList ID="ddlchnagebordercolor" runat="server">
         <asp:ListItem Value="#000000">Black</asp:ListItem>
         <asp:ListItem Value="#0000FF">Blue</asp:ListItem>
         <asp:ListItem Value="#A52A2A">Brown</asp:ListItem>
         <asp:ListItem Value="#FF7F50">Coral</asp:ListItem>
         <asp:ListItem Value="#A9A9A9">DarkGray</asp:ListItem>
        <asp:ListItem Value="#8B0000">DarkRed</asp:ListItem>
 </asp:DropDownList>


Color change javascript code:
<script type="text/javascript">
$("#ddlchnageborderwidth").change(function() {
    $("#someDiv").css("border-width", $(this).val());
}).change();
 </script>

                                                ​
Color change javascript code:
<script type="text/javascript">
$("#ddlchnagebordercolor").change(function() {
    $("#someDiv").css("border-color", $(this).val());
}).change();
 </script>

Monday, 5 August 2013

Get multiple values from checkboxlist selected values in textbox as comma seperated using javascript in asp.net

Java Script Funtion:

function GetSelectedValue() {
        var chkBox = document.getElementById("<%=chkList.ClientID%>");
        var checkbox = chkBox.getElementsByTagName("input");
        var objTextBox = document.getElementById("<%=txtChkValue.ClientID%>");
        var counter = 0;
        objTextBox.value = "";
        for (var i = 0; i < checkbox.length; i++) {
            if (checkbox[i].checked) {
                var chkBoxText = checkbox[i].parentNode.getElementsByTagName('label');
                if (objTextBox.value == "") {
                    objTextBox.value = chkBoxText[0].innerHTML;
                }
                else {
                    objTextBox.value = objTextBox.value + ", " + chkBoxText[0].innerHTML;
                }
            }
        }

    }

where chkList is CheckboxList and txtChkValue is Textbox as given below:

<asp:TextBox ID="txtChkValue1" runat="server" CssClass="textbox"
                Width="270px" Height="25px"></asp:TextBox>
             
                <asp:CheckBoxList ID="chkList1" runat="server" onclick="GetSelectedValue1();">
                </asp:CheckBoxList>

Line/Word/Character Count in Textbox Control using Javascript funtion

JavaScript Funtion:

function LineCount(value) {
       
                    var text;
                    var lines_totals1;
                    var len;
                    var line_count;
                    var lines_totals2;
                    var diff_fli;
                    var totalCost;
                    var ExtraLine;

                    text = value;
                    lines_totals1 = Math.ceil(value.length / 23);
                    len = wordwrap(text, 23, "\n", true);
                    line_count = len.split("\n");
                    lines_totals2 = line_count.length;
                    diff_fli = lines_totals2 - lines_totals1;

                    if (diff_fli > 1) {
                        lines_totals = Math.ceil((lines_totals2 + lines_totals1) / 2);
                    }
                    else {
                        lines_totals = lines_totals2;
                    }
            }
         
        function wordcount(value) {
         
                var totalCost;
                var ExtraWord;

                var andchr = value.split(" & ").length - 1;
                var char_count = value.length;
                var fullStr = value + " ";

                //word count for regional language
                v = value.split(' ');
                var word_count = v.length;
                var cheArr = Array('@', '.', '"', "'", '_', '-', '+', '=', ';', '&', '*', '\(', '\)', '{', '}', '[', '}', '|', '\\', '\,', '/');
                for (i = 0; i <= cheArr.length; i++) {
                    word_count = word_count + value.split(cheArr[i]).length - 1;
                }

             
        }


        function charcount(value) {

         
                var totalCost;
                var ExtraWord;
                value = value.replace(/^\s+|\s+$/g, "");
                var word_count = value.length;

             

        }

Change Border width and Color on Dropdown selected item

Javascript funtion :

 <script type="text/javascript">
$("#evt_width").change(function() {
    $("#someDiv").css("border-width", $(this).val());
}).change();
</script>​
<script type="text/javascript">
$("#evt_color").change(function() {
    $("#someDiv").css("border-color", $(this).val());
}).change();
</script>​

in this evt_witdh is dropdown for width selection and evt_color is dropdown for color selection and 

someDiv is div/panel which border will changed.

Text Changed Event on Ajax HTML Editor Extender Control Textbox

Java Script to be Used :

<script type="text/javascript">
function onContentsChange12() 
        {
            //document.getElementById('Labeld21').innerText = document.getElementById('TextBoxd21').value;
    var inputText = document.getElementById('TextBoxd12').value;
    var returnText = "" + inputText;
        //-- remove BR tags and replace them with line break
    returnText=returnText.replace(/<br>/gi, "\n");
    returnText=returnText.replace(/<br\s\/>/gi, "\n");
    returnText=returnText.replace(/<br\/>/gi, "\n");

    //-- remove P and A tags but preserve what's inside of them
    returnText=returnText.replace(/<p.*>/gi, "\n");
    returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");

    //-- remove all inside SCRIPT and STYLE tags
    returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
    returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
    //-- remove all else
    returnText=returnText.replace(/<(?:.|\s)*?>/g, "");

    //-- get rid of more than 2 multiple line breaks:
    returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n");

    //-- get rid of more than 2 spaces:
    returnText = returnText.replace(/ +(?= )/g,'');

    //-- get rid of html-encoded characters:
    returnText=returnText.replace(/&nbsp;/gi," ");
    returnText=returnText.replace(/&amp;/gi,"&");
    returnText=returnText.replace(/&quot;/gi,'"');
    returnText=returnText.replace(/&lt;/gi,'<');
    returnText=returnText.replace(/&gt;/gi,'>');
    //-- return
    document.getElementById('Labeld12').innerHTML = returnText;
        }
</script>

paste this in header section and then write below code in body tag

<ajt:HtmlEditorExtender ID="HtmlEditorExtenderd12" runat="server" 
            TargetControlID="TextBoxd12" EnableSanitization="false"  OnClientChange="onContentsChange12">
            
        </ajt:HtmlEditorExtender>

Thursday, 18 October 2012

Show random images on page refresh using Java Script in asp.net

Try this javaScript to change image background on page refresh/page reload...........


<script type="text/javascript">
      function banner() { } ; b = new banner() ; n = 0
 b[n++]= "<img name=randimg src='icon/p1.jpg' width=100% height=395>"
 b[n++]= "<img name=randimg src='icon/p2.jpg' width=100% height=395>"
 b[n++]= "<img name=randimg src='icon/p3.jpg' width=100% height=395>"
 i=Math.floor(Math.random() * n) ;
 document.write( b[i] )
     </script>