Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

FORM Help

Options
  • 05-04-2009 10:24pm
    #1
    cyberwit
    Registered Users Posts: 269 ✭✭


    I am developing the following website however i am having trouble placing my cursor inside one of the fields in my login form.

    The input cursor shows up in my employeenumber field because i have it coded but its very difficult in IE and impossible in Firefox
    refer to screen shots.

    If i click on any of the textfields in IE or Firefox the input cursor will not appear however if i click on one of the conors of the text field in IE the cursor appears this however does not work with firefox
    <html>
<head>
	
	<title>Travel 2.0</title>
	<link rel="stylesheet" href="style.css" type="text/css"/>
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function enlargeImage1(){
   image1.height="200"
}
function dropImage1(){
   image1.height="92"
}
function enlargeImage2(){
   image2.height="200"
}
function dropImage2(){
   image2.height="92"
}
function enlargeImage3(){
   image3.height="200"
}
function dropImage3(){
   image3.height="92"
}
function enlargeImage4(){
   image4.height="700"
   image4.height="700"
}
function dropImage4(){
   image4.height="300"
   image4.height="300"
}

  
//  End -->
</script>
</head>

<body onLoad="document.forms.Login.employeenumber.focus()">>
	<div id="wrapper">
		<div id="header">
			<h1><img src="TravelBanner.gif"></h1>	
		</div>

		<div id="headline">

			</div>
	
		<div id="body">
			<div id="body-left">
				<h2><img src="images/Welcome.jpg"alt="Welcome To Travel 2.0" /></h2>
			<p>Travel 2.0 is a cost effective travel management solution that allows an organisation manage all activities related to travel.</p><p>Third party developers and users can implement Travel 2.0  into their existing ICT or they can choose to interact with Travel 2.0 through a mobile device, web application, standalone application or BPEL process.

				<h2><img src="images/Benefits.jpg" alt="Benefits of Travel 2.0"></h2>
				<img src="images/business.jpg" width="172" height="92" alt="Business" class="left" />

<img src="images/Bubble.jpg"height="92"name="image1" ondblclick="enlargeImage1()" onclick="dropImage1()">
<img src="images/Bubble2.jpg"height="92"name="image2" ondblclick="enlargeImage2()" onclick="dropImage2()">					<img src="images/Bubble3.jpg"height="92"name="image3" ondblclick="enlargeImage3()" onclick="dropImage3()">
			</div>
			<div id="body-right">
<h2><img src="images/LoginImage.jpg"  alt="Login"></h2>
		 <form name="Login">
                   <table>
                   <tr><td>Employee Number: <input type="text" name="employeenumber">
                   <tr><td>Pin: <input type="password" name="pin">

                  <tr><th><input type="submit" value="Enter">
                
              </form>
				<div id="gallery">
<img src="images/TravelName.jpg"alt="Travel 2.0"></a><br>
<img src="images/TravelDiagram.jpg"height="300"width="300"name="image4" ondblclick="enlargeImage4()" onclick="dropImage4()">
</div>
</div>
</div>
			
			<div class="clear"></div>
		</div>
</body>
</html>


Comments

  • Options
    #2
    hussey
    Registered Users Posts: 6,240 ✭✭✭hussey


    works fine for me in firefox 3.. though I didn't have access to your css file


  • Options
    #3
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell


    Firstly get rid of "document.forms.Login.employeenumber.focus()" in the onload event of the body tag and replace with "document.getElementById('employeenumber').focus()". A small detail but better to code your javascript to DOM methodology - makes sure it works across most browsers.

    Secondly, to each of the input tags add a tabindex attribute and number them in the way you want to tab through your form (if you do this for the employeenumber input btw (numbering it as tabindex="1" ) you will no longer need the onload event as the cursor will default to that position.

    Get all that done and let me know how the code is performing - and as other poster mentioned please provide the CSS as well in case that is having an effect on the performance of your page.

    Regards,
    RD


  • Options
    #4
    cyberwit
    Registered Users Posts: 269 ✭✭cyberwit


    Will make those changes

    CSS Below
    
html, body, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	border: 0;
}

a {
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.more {
	text-align: right;
}
.left {
	float: left;
}
.clear {
	clear: both;
}

body, h1, h2, h3, form {
	font: 10px tahoma, arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #5C5C5C;
}

body {
	background: url(images/header_bg.jpg) repeat-x;
	text-align: center;
}
#wrapper {
	text-align: left;
	margin: auto;
	width: 774px;
}


#header {
	height: 666px;
	position: absolute;
}
#header h1 {
	margin-top: 10px;
}
#header h1 img {
	display: block;
}
#nav {
	margin-top: 7px;
}
#nav img {
	float: left;
}

#headline {
	padding-top: 205px;
}

#photo {
	float: left;
	width: 624px;
}
#photo div {
	border: 1px solid #D8D8D8;
	padding: 2px;
}
#photo img {
	display: block;
}

#search-news {
	float: right;
	width: 140px;
}
#search-news div {
	padding: 3px 0;
	margin: 0;
}
#search-news #q {
	width: 140px;
	border: 1px solid #859D31;
}
#search-news .downcast {
	background: #E6E7E7;
	border-top: 1px solid #CFD0D0;
	padding: 3px 4px 4px 4px;
	margin: 2px 0 0 0;
}
#search-news h3 {
	background: url(images/bullet_letter.gif) no-repeat;
	padding-left: 15px;
	font-weight: bold;
	margin: 1em 0 0.4em 0;
}
#search-news p {
	padding-left: 15px;
	padding-right: 2px;
	margin: 0.1em 0;
}
a {
	font-weight: bold;
	color: #5C5C5C;
}

#body {
	padding-top: 2em;
	text-align: justify;
}

#body-left {
	float: left;
	width: 408px;
}
#body-right {
	float: right;
	width: 330px;
}

#body-left ul.plussbullets {
	margin-top: 45px;
	margin-left: 120px;
	padding: 0;
	font-weight: bold;
}
#body-left ul.plussbullets li {
	background: top left url(images/bullet_plus.gif) no-repeat;
	margin: 0 0 10px 0;
	padding: 0 0 0 25px;
}

#body h2, #body p {
	margin: 0.3em 0;
}

#body-right p {
	margin-right: 2em;
}

#body a.green {
	color: #9AAB68;
	font-weight: normal;
	text-decoration: underline;
}

#gallery img {
	float: left;
}

#footer {
      font-size=70%;
	color: #FFFFFF;
	background: #42453D url(images/footer_bg.gif) repeat-x;
	padding: 6px 0 5px 0;
	margin-top: 2em;
	font-weight: bold;
}
#footer p {
	margin: 0;
	padding: 0;
}


Advertisement