Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

FORM Help

  • 05-04-2009 10:24PM
    #1
    cyberwit
    Registered Users, Registered Users 2 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

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


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


  • #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


  • #4
    cyberwit
    Registered Users, Registered Users 2 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