RSS

Category Archives: CSS

Easy way to figure out cross browser compatibility

Many of the web developers just use various css,html,javascript codes which they have learned. But wait! as we all know that significant amount of tags codes etc are not supported in some older major browser versions. Even they are older versions dont forget significant amount of visitors might be from those versions.

However consider follwing CSS,


body > p {color: red;}
 

So this tells select all paragraph tags which are DIRECT children of body tag. so it will select paragraph tags like these





some text which will get body > p {color: red;}  selector

 

but it will not select paragraphs like following. since it is in div tag and so not direct child of body tag.




<div>


this will not be red text from above body > p {color: red;} selector since its not direct child of body tag


<div>
 

So important thing is does this support in many major browsers versions actually it does but its not in IE 6 but memorizing these things can be super difficult to developers. Take a look at this http://caniuse.com/ I found its extremely easy to detect this kind of things. Site also shows many other insights regarding browsers such as browser share currently being used in the world. However still you have to test your code for various browsers for odd cases that arises due to various reasons but at least you can know in upfront (ie before you do production releases) that it will not work in specific browsers isn’t it nicer than that of being rejected from QA or wait for clients to report when yours site will have been deployed?

Advertisements
 
1 Comment

Posted by on February 29, 2012 in CSS, Javascript

 

Tags:

Limiting maximum characters that can be entered in text box

you might be a asp.net developer or web developer who needs to show to the user simply that maximum number of characters that can be entered in a text box and prevent user typing additional characters.
limiting text box max typing length

limiting text box max typing length

limiting text box max typing length

you can achieve it with small javascript object. So your HTML might look like this.

<span>
Brief Text 
  <br>
   <span id="msg">(125 Maximum Characters)
   </span>
</span>


Here the span id named “msg” is the label that user will be informed with number of characters left.
Here is the javascript which will do the job.

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    // jQuery is not loaded
    alert("jquery is not loaded");
}

var yourJsNameSpace = yourJsNameSpace || {};



yourJsNameSpace.TextLengthValidation = function (maxChars, txtBoxName, outputLbl) {

    var _txtBoxObj = $(txtBoxName);
    var _outputLbl = $(outputLbl);
  
    var validateCharLength = function () {

        _txtBoxObj.keyup(function (e) {
            var len = $(this).val().length;
            if (len &gt; maxChars) {
                this.value = this.value.substring(0, maxChars);
                e.preventDefault();
                _outputLbl.text("Max Chars. Exceeded " + maxChars);
            }
            else {
                _outputLbl.text(maxChars - len + " Chars. Left");
            }
        });
    };


    return {
        validate: validateCharLength    
    }
}
</script>

Yes this script uses jquery but you can simply remove dependency by writing couple of document.getElementById if you don’t like jquery for this simple task and its overkill for this kind of simple task.(but still jquery is too good!! :)) So you can use this javascript function in any of your webpage by passing 3 parameters.
So what you have to do in your web page is following,


<script type="text/javascript">
window.onload = function () {
            var val1 = new reddotJsLib.TextLengthValidation(24, '#txtHomePageBottomBriefText', '#msg');
            val1.validate();
}
</script>

the first parameter passed to the function is maximum characters user can enter. and the second parameter is textbox name and the third is the name of output message label.

You can use this in asp.net pages as well but make sure clientid mode is set accordingly or make sure to get client id of the text box and label correctly. Caution : Still you have to validate the input from server whether the input is not tampered with other tools and length is not exceeded.

Its always recommended to add these scripts in separate javascript files. This function does not define all variables in in global space which is always good and the most obvious mistake that many novice javascript developers does. variables are wrapped in validateCharLength closure function and it defines that function in “javascript name space” so there is less chance of overwriting the funciton in other scripts.

 
Leave a comment

Posted by on February 28, 2012 in ASP.NET, CSS, Javascript

 

Tags: ,