Category » HTML

How to disable textarea resizing

If we add a simple textarea in a HTML form then we see that we can resize it by clicking on the bottom right corner of the textarea and dragging the mouse.

<textarea id="txt1" name="txt1" rows="5" cols="50"></textarea>

If we want to stop this resize then you have to just add a simple css as shown below.

textarea {
    resize: none;
}

Continue reading »

How to limit the number of characters that can be entered in a textarea or input field?

Edit Text

In web pages which take input/feedback from the customers it’s a good idea to limit the type and size of data that can be entered so that spam can be avoided.

Let see how we can limit the number of characters that can be entered in a text box.

The simplest approach I follow is to use the jQuery “Limit” plugin. Click here to download the plugin.

Continue reading »

How to Add Smooth Page Scroll to Top using jQuery

Scroll to Top

You would have come across websites that provide an easy way to scroll to the top of the webpage as you move down the page, its really a good idea if the webpage is long and you want to provide a better user experience. In this article, we will show you how to add a smooth scroll to top effect using jQuery.

We will create a button on the footer of the page which when clicked will scroll the page to the top smoothly, we will use css to postion the button at a fixed position on the bottom right of the page and jQuery to provide the scrolling effect and make the button visible only if the page is scrolled down, instead of being always visible.

Step 1: Add button link
Place the following code just before the closing </body> HMTL tag

<a href="#" id="scrolltotop" title="Back to top">Back to top</a>

Continue reading »

Disabling the form submit on press of ENTER key

enter key

At times you would have seen that when you are filling a form on a website and you hit “ENTER” key the form gets submitted. As a developer you may have come across a situation where you would have wanted to prevent this action. The solution to this is to disable the “ENTER” key using javascript. Here’s a code snippet that disables “Enter” key in HTML textbox:

<script type="text/javascript">

// <![CDATA[
function disableEnterKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (elem.type=='text'))  {return false;}
}

document.onkeypress = disableEnterKey;
// ]]>

</script>

Continue reading »

Preventing a page from being cached in browser

There are times when we require that a page always get served from the server and not from the browser cache. We can use the HMTL following “META” tags to acheive this.

<META HTTP-EQUIV="Expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

Continue reading »

Back to top