Javascript validation to allow the only numeric value in the text field.

How to set the validation to allow only numeric value in the HTML text field using JAVASCRIPT. We can set the validation using window keycode event on JAVASCRIPT. Like we want to allow the user only able to enter the numeric value in the text field just we need to set JAVASCRIPT function called on KeyPress like below.

Continue reading Javascript validation to allow the only numeric value in the text field.

CSS Counter increment

How to create the counter increment using CSS like the bullet. CSS provides the counter functionality using that we can create the number before stating lists as per line like the bullet number.

Let’s create the HTML code for our counter.

<div class="lists">
<p>First Element</p>
<p>Second Element</p>
<p>Third Element</p>
<p>Four Element</p>
<p>Five Element</p>
<p>Six Element</p>
<p>Seven Element</p>
</div>

Let’s creat the counter code for our listing using CSS.


<style type="text/css">
.lists {
counter-reset: headings;
list-style: none;
}
.lists > p:before {
background: none repeat scroll 0 0 #8F8888;
border-radius: 15px;
color: #FFFFFF;
counter-increment: headings;
content: counter(headings, decimal);
display: block;
float: left;
font-size: 16px;
font-weight: bold;
height: 25px;
line-height: 26px;
margin-bottom: 0;
margin-right: 5px;
top : -5px;
position: relative;
text-indent: 8px;
width: 25px;
}
</style>

Using above code you can create the listing counter on any  HTML tag listing like above. The output look like below.

CSS Counter

If you have any issue or question write comment below.

AdminLte active current menu using JAVASCRIPT

AdminLte is the most popular and open source admin theme. many developers used AdminLte for developing admin panel. Many Developers use PHP if condition for active the current sidebar menu. It’s hard to manage with if condition when we have many sidebar menus.

I think we should use JAVASCRIPT for active the current menu for the sidebar. it’s too easy and simple js snippets.

$(document).ready(function(){

    var url = window.location;
    // Will only work if string in href matches with location
    $('ul.nav a[href="'+ url +'"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
    $('ul.nav a').filter(function() {
        return this.href == url;
    }).parent().addClass('active');
});

Just add above code into your javascript file. then checked the “active” class is add onto your current menu.