Let the user input only alphabet and numbers

While designing the FORM, the designer wants to force the user to input only alphabet and numbers For example , in a User Name input field, the user dont need to press $,# ,%,{,},[,] etc keys while while entering data. Therefore, if the form is designed in the way, that if users  intentionally or unitentionally press those Keys, it will not refelect in the textbox. Now, how can we do that,

A simple javascript using regular expression we can do that in “onkeypress” or “onkeydown” event .

To know more with a live demonstration, you can go to this link,

http://amar-desh.net/myworks/javascript/alphanumeric.aspx

If you find any difficulties or if you know more better aprroach, share it here.

Tooltip using Javascript

The hyperlink tag has an attribute “title” and if you write something in the title, it will be displayed in your webpage while you place your cursor on the link. Lets try this,

A Sample WebPage (dont click on it, just put your curson on the link)

Have you noticed that, a tip appears while you place your cursor on the above link. So what is the secret? It is the “title” attribute of hyperlink tag <a>. Look at the following example.
<a href=”http://amar-desh.net ”  title=”after clicking here this will drive you to..”>A Sample WebPage</a>

Now this tooltip is very simple and only bounds to hyperlink tag. If you want to design an inovative tooltip using simple javascript, the following link can be helpful for you,

Designing a tooltip using javascript

or, http://amar-desh.net/myworks/javascript/ToolTip_using_javascript.aspx

The link also has a live demonstration, so it will be worthy to check it.

BlogEngine.net CodeFormatterExtension.cs File not found

After installing BlogEngine.NET
1. Sign in as Administrator Role
2. Go to Extensions – > CodeFormatterExtension
3. Click View Link

Result of the Issue:
The CodeFormatterExtension is listed but you get CodeFormatterExtension.cs file not found error

Solution:
Move file \App_Code\Extensions\CodeFormatter.cs to \App_Code\Extensions and rename the file to CodeFormatterExtension.cs

Loading web page in a div using Ajax

Using Iframe, it is very easy to load web page in your page. But if you want to load page in a div, Ajax can be helpful.

    <script type="text/javascript">
    function makeRequest(url) {
        var httpRequest;

        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
            if (httpRequest.overrideMimeType) {
                httpRequest.overrideMimeType('text/xml');
            }
        }
        else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }

        if (!httpRequest) {
            alert('Giving up 😦 Cannot create an XMLHTTP instance');
            return false;
        }
        httpRequest.onreadystatechange = function() { state_Change(httpRequest); };
        httpRequest.open('GET', url, true);
        httpRequest.send(null);

    }

    function state_Change(httpRequest) {

        if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200) {
                var s = httpRequest.responseText;
                s = s.slice(s.indexOf("<fo" + "rm"));
                s = s.replace("</body>","");
                s = s.replace("</html>","");
                s = s.replace(/<form/ig,"<formdisabled");
                alert("nnn");
                document.getElementById("ext").innerHTML=s;
            } else {
                alert("Problem retrieving data:" + httpRequest.statusText);
            }
        }
    }
    </script>

 

In the design mode,
<body>
    <form id="form1" runat="server">
    <div>
        <div id="ext">
        </div>
        <input type="button" onclick="makeRequest('http://amar-desh.net/');" />
    </div>
    </form>
</body>

Handle multiple window.onload functions in Javascript

If you have more than one window.onload functions, how do you handle it? One easiest way to do that is include all functions in  window.onload e.g,

window.onload=function(){

function1;

function2;

function3;

}

where function1, function2 and function3 are the functions which are needed during onload event.  This is fine when you are the only designer of your page. But if a page is designed by several designers and if several external javascript files are invloved with it then it is not so easier. To overcome the issue, I have found few articles over net and discussed here,

Solution1: Having an array filled with onload events and then call those events one by one (using for loop) in window.onlaod function.

Here is the link of  solution 1: http://www.netlobo.com/wom.html

Solution 2: Checking whether it has an onload event, if exist then load that with the new one otherwise consider the event as a fresh onload event.

function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != “undefined” )
    window.addEventListener( “load”, fnc, false );
  else if ( typeof window.attachEvent != “undefined” ) {
    window.attachEvent( “onload”, fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}

Solution 3: It is similar to solution 2 but less code size,

function addLoadEvent(func) {  
   var oldonload = window.onload;  
   if (typeof window.onload != ‘function’) {  
     window.onload = func;  
   } else {  
     window.onload = function() {  
       if (oldonload) {  
         oldonload();  
       }  
       func();  
     }  
   }  
}

If you know more better approach, why dont you share with us.

Alternative to Server.HtmlEncode in Javascript

You can encode HTML code on the server side using ASP.net’s  Server.HtmlEncode. But if you want to do it on the clientside is there any way to do that. There is no built in function in Javascript to achieve the same. However using Regular Expression, you can do it easily.

Javascript Code:

function  jsHTMLEndcoder(strHTML){

var rtn=null;

rtn=strHTML.toString().replace(/&/g,“&amp;”);

rtn=rtn.replace(/”/g,“&quot;”)

rtn=rtn.replace(/</g,“&lt;”)

rtn=rtn.replace(/>/g,“&gt;”);

return rtn;
}

Reference:

http://andrewu.co.uk/tools/request/

http://blogs.msdn.com/aoakley/archive/2003/11/12/49645.aspx

Make it your homepage

Probably you have seen  links in web pages to make page as your homepage. Using javascript you can achieve that. Here is the script,

    function setHomepage()
    {
        if (document.all)
        {
            document.body.style.behavior=’url(#default#homepage)’;
            document.body.setHomePage(‘https://ekduitin.wordpress.com&#8217;);
    
        }
        else if (window.sidebar)
        {
            if(window.netscape)
            {
             try
             { 
                netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”); 
                var prefs = Components.classes[‘@mozilla.org/preferences-service;1’].getService(Components. interfaces.nsIPrefBranch);
                prefs.setCharPref(‘browser.startup.homepage’,’https://ekduitin.wordpress.com&#8217;);
             } 
             catch(e)
             { 
                alert(“this action was aviod by your browser,if you want to enable,\nplease enter about:config in your address line,and change the value of\nsigned.applets.codebase_principal_support to true”); 
             }
            }
        }
    }