2 Replies - 1213 Views - Last Post: 01 June 2012 - 05:46 AM

#1 Buzzer   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 24-December 11

Little jQuery Input Modification

Posted 31 May 2012 - 08:11 AM

Hi Guys,
I had made a input box with jQuery
The following code works just fine, only problem with it is that, when i enter text into it the size of input box get increased. And I dont want that width to be increased any modification or solution over this please !

Thank you !
<!DOCTYPE HTML>
<html>
	<head>
		<title>New Style</title>
		<style type="text/css">
			input{
				position: fixed;
				left : 30%;
				top : 40%;
				width:300px;
				height: 30px;
				border-style:double;
				padding-left:50px;
				
				
			}
			label {
				position:fixed;
				left:30%;
				top:40%;
				background-color:LIGHTGRAY;
				width:50px;
				z-index:1;
			}
		</style>
		<script type="text/javascript" src="jquery.js">
		</script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('input').focus(function(){
					$('label').slideUp('slow');
					$('input').animate({paddingLeft:"0px"},'slow');
				});
				
				$('input').blur(function(){
					$('label').slideDown('slow');
					$('input').animate({paddingLeft:"50px"},'slow');
				});
			});
		</script>
	</head>
	<body>
	<label for="name">Name</label>
		<input type="text" autocomplete ="off">
	</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Little jQuery Input Modification

#2 chinchang   User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 727
  • Joined: 22-December 08

Re: Little jQuery Input Modification

Posted 31 May 2012 - 12:33 PM

You are modifying the paddingLeft property of the INPUT element which will change its width. If you don't want the width to change, don't modify the paddingLeft property property.

This post has been edited by chinchang: 31 May 2012 - 12:33 PM

Was This Post Helpful? 0
  • +
  • -

#3 Buzzer   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 24-December 11

Re: Little jQuery Input Modification

Posted 01 June 2012 - 05:46 AM

Well I want to code following behaviour:

1. When user sees the form, he will see the label (Name in this case) to be overlapped on the top left border of input.

2. When he will click on input tag the Name label should disappear slowly.

3. After entering data when user loses focus of input the Name label should re appear.


View Postchinchang, on 31 May 2012 - 12:33 PM, said:

don't modify the paddingLeft property


So if dont modify padding property the input text is going behind the label and not showing. You will get best idea if you run code.

So any modification to stop that ? Please
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1