Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Textbox numbers only validation JQuery

Posted in javascript interview questions, JQuery

If you want to allow numbers only in text field use event.keyCode property to identify which key is clicked and based on keyCode value it prevent user to input certain characters in textbox. See below example.

Numbers only textbox

<input  type="text" class="numbers"/>

 $(".numberDec").keydown(function(event) {
                        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode ==  13 || event.keyCode == 190 || event.keyCode == 110 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39) || event.keyCode == 189) {
                            return
                        } else {
                            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                                event.preventDefault()
                            }
                        }
    })

Above code will prevent user to enter any characters/special characters on keydown.

Numbers with decimal place textbox.

This allow’s numbers including decimal places.


<input  type="text" class="numberDecimal"/>

$(".numberDecimal").keydown(function(event) {
                        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || event.keyCode == 190 || event.keyCode == 110 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39) || event.keyCode == 189) {
                            return
                        } else {
                            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                                event.preventDefault()
                            }
                        }	
    })

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Rotate div at Corner CSS 3 transform

Posted in CSS, CSS Interview Questions

CSS 3 rotate() transform property rotate’s div consider axis of rotation at center. See below example.

Example:

<style>
   .demo { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo'></div>

In above example, we have used keyframe animation with rotate transform. Div is rotating with axis of rotation at center. To rotate div at one of the corner like clock’s hand, use transform-origin property of CSS 3. This property shift’s axis of rotation at corner depends on what value we are giving. This will shifts axis of rotation to right side of div. See below example.

Example:

<style>
   .demo { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
    transform-origin:100% 100%;
   -webkit-transform-origin:100% 100%;
   -ms-transform-origin:100% 100%;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo'></div>

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Object tag z-index not working in IE

Posted in CSS, CSS Interview Questions, Html

If you are playing any flash/brightcove video using object tag and you want to show custom play button or image on video you can use z-index property to adjust play button position. This works fine in chrome and Mozilla except internet explorer. In IE object tag won’t take any css property. See below example

<object type=”video/quicktime” data=”http://localhost/videos/qtmovie.mov” width=”340″ height=”280″>
<param name=”controller” value=”true” />
<param name=”autoplay” value=”false” />
<param name=”wmode” value=”transparent” />
</object>

By default, wmode property is set to “transparent” to apply z-index or any css property set wmode property to “opaque”

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

split() function in JavaScript

Posted in Javascript, javascript interview questions

split
Split() function is used to split a string into array.

Syntax:

split(character to split)

Example:

var str="Welcome to kodecrash.com";
var arr=str.split(" ");
console.log(arr);

In above example, we are using space as a parameter to split function. Split function will divides string str into array of sub strings. Above example will return following output.

[“Welcome”, “to”, “kodecrash.com”]

Example 2:

How to get page url using split() function?

Suppose your URL is http://www.kodecrash.com/jquery/jquery-inarray-function/ and you want only page name use below code.

var myURL= window.location.href;
var myPageName=myURL.split("/");	
console.log("Page Name:  "+ myPageName[4] );

Split function

window.location.href will return current page URL. Use split() function to convert this url into array of substrings and at index 4 in array you will get your page url.

Alternatively you can use window.location.pathname to get your page name instead of getting whole page URL.

page-url-using-pathname-split-function