?
Solved

Form Hints on a Form using <ul>

Posted on 2008-11-05
6
Medium Priority
?
430 Views
Last Modified: 2012-05-05
I've seen a nifty little Form Hint Tut,  here http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html
 the problem that i have is that this uses <dl> <dt> and <dd> wheras my forms have all been built using <ul><li> etc,

I've tried changing the form, but can't get it to work, but ideally i would like to keep my forms using <ul>&<li>
is there any way to do this, really I only want to put a form hint on the taMessage input and therefore remove the <legend> as this doesn't look right...

Please help
<form ACTION="<%=MM_editAction%>" METHOD="POST" enctype="multipart/form-data" name="form1" id="form1" onSubmit="return validateform1(this);checkFileUpload(this,'TXT, DOC, RTF, PDF',true,'','','','','','','');return document.MM_returnValue">
    <h4>Profile Management</h4>
<ul>              <li><label>Profile Name*:</label><input name="ProfileName" type="text" id="ProfileName" maxlength="50" />
              </li>
              <li><label>Job Category*:</label><select name="jscat2" id="jscat2">
                <option value=" ">Select</option>
                <%
While (NOT Categories.EOF)
%>
                <option value="<%=(Categories.Fields.Item("JBCategoryValue").Value)%>"><%=(Categories.Fields.Item("JBCategoryLabel").Value)%></option>
<%
  Categories.MoveNext()
Wend
If (Categories.CursorType > 0) Then
  Categories.MoveFirst
Else
  Categories.Requery
End If
%></select>
              </li>
              <li><label>Location*:</label><select name="jsloc2" id="jsloc2">
                <option value=" ">Select</option>
                <%
While (NOT Locations.EOF)
%>
                <option value="<%=(Locations.Fields.Item("JBLocation").Value)%>"><%=(Locations.Fields.Item("JBLocation").Value)%></option>
                <%
  Locations.MoveNext()
Wend
If (Locations.CursorType > 0) Then
  Locations.MoveFirst
Else
  Locations.Requery
End If
%>
                </select></li>
              <li><label>Contract Type*:</label><select name="contracttype" id="contracttype">
                  <option value="Temporary">Temporary</option>
                  <option value="Contract">Contract</option>
                  <option value="Permanent">Permanent</option>
          </select></li>
              <li><label>Salary Expectation*:</label><input name="salary" type="text" id="salary" maxlength="50" />
              </li>
              <li><label>Overview*:<legend>Your Profile Overview is the part of your profile that recruiters can perform keyword searches against, your profile should therefore highlight your qualifications, previous roles and strengths</legend>
              </label>
                <textarea name="taMessage" id="taMessage" rows="11"
onkeyup="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);" onBlur="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);" onFocus="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);"" onkeydown="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);" onMouseOut="CheckFieldLength(taMessage, 'charcount', 'remaining', 2500);"></textarea>
             <br />
            <span id="charcount">0</span> characters entered.   | <span id="remaining">2500</span> characters remaining.<br /></li>
              <li>
                <label>CV*:</label>
                <input name="cv" type="file" id="cv" onChange="checkOneFileUpload(this,'TXT, DOC, RTF, PDF',true,'','','','','','','')" />
              </li>
              <li><label>Get Head hunted</label><input name="headhunted" type="checkbox" id="headhunted" value="Y" />
              </li>
              <li>
                <label>
                <input type="submit" name="RegisterBut" id="RegisterBut" value="Create" />
                </label>
              </li></ul>
    <input name="siteid" type="hidden" id="siteid" value="<%= Session("SITEID") %>" />
        <input name="candidateid" type="hidden" id="candidateid" value="<%= Session("CANDID") %>" />
        <input type="hidden" name="MM_insert" value="form1" />
</form>

Open in new window

0
Comment
Question by:garethtnash
  • 3
  • 3
6 Comments
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22884883
Judging by the code from http://www.askthecssguy.com/examples/formfieldhints/example06.html the scripts for the hints only cater for input and selects, so we need to create one for textarea (See below)

You also need to add the span with the hint in directly after the textarea (within the li)

<span class="hint">Hint in here.<span class="hint-pointer">&nbsp;</span></span>

//Add the following code into your script
 
	var selects = document.getElementsByTagName("textarea");
	for (var k=0; k<selects.length; k++){
		if (selects[k].parentNode.getElementsByTagName("span")[0]) {
			selects[k].onfocus = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
			}
			selects[k].onblur = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "none";
			}
		}
	}

Open in new window

0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22884897
It doesn't actually matter if its using dl's, dt's, ul's or li's.

You will also need to make sure you have have all of the correct styles (see below) and the pointer.gif from:

http://www.askthecssguy.com/examples/formfieldhints/pointer.gif


<style type="text/css">
/* The hint to Hide and Show */
.hint {
   	display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}
 
/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}
</style>

Open in new window

0
 

Author Comment

by:garethtnash
ID: 22885005
Thanks Tomarse, do you know whether it will work on all versions of IE (5.5 - 8)
 
Thank you
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 15

Accepted Solution

by:
Tomarse111 earned 2000 total points
ID: 22885034
Not sure to be honest with you, I've tested it on IE6 and IE7 and it works fine for those. I don't have 5.5 or 8 so I can't be 100% sure.

The other thing I've found is there is a text area example on the site:

http://www.askthecssguy.com/examples/formfieldhints/example07.html

:-)
0
 

Author Comment

by:garethtnash
ID: 22885215
Thanks Tomarse
0
 

Author Closing Comment

by:garethtnash
ID: 31513468
Excellent and Fast responce
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question