extra divs, spans stop tooltips from working HELP

[TeddyKiller]

I have tooltips to be displayed, but i've been trying to change my design. I've been having some issues.

It's a snippet of a PHP echo, so it has some PHP variables in it.

 

This code works.

<fieldset>
    <label for="confirmpassword">Confirm Password:</label>
    <input name="confirmpassword" type="password" onkeyup="checkPasswordMatch(this);" />
    <span class="hint">You must confirm your password to ensure there are no mistakes, make sure your password is a hard one to guess.</span>
</fieldset>

The javascript for this..

function checkPasswordMatch(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    
    if (txt.length > 5) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}

Ignore the function names as such, this code works.. the tooltips get displayed to what they should do.

 

Although, when I put in a few extra bits.. it doesn't work. The code for extra bits is this..

    <fieldset>
        <div class="inputrow">
            <label for="username">Username:</label>
            <span>
            <input name="username" type="text" class="inputbox" id="username" size="24" maxlength="20" value="'.$user->username.'" onkeyup="checkUsernameForLength(this);"/>
            </span>
        </div>
        <span class="hint">Usernames must be a least 6 characters in length, this will be used to login to edit your clan.</span>
    </fieldset>

The javascript is the same as above, but with a different function name to match this username code.

 

Does anyone know a fix for it? Thanks

[Adam]

You're wrapping the input within another 2 elements, so the parent element isn't the fieldset anymore. Change this line of the JS:

 

var fieldset = whatYouTyped.parentNode;

 

To:

var fieldset = whatYouTyped.parentNode.parentNode.parentNode;

[TeddyKiller]

Thanks for the reply. That didn't work.

 

Here is the javascript that prepares the tooltips (Forgot in original post)

function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.getElementsById("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}

addLoadEvent(prepareInputsForHints);

[Adam]

Okay this is all over the place.

 

The first HTML snippet you gave calls a password validation function, the next - with "a few extra bits" - calls a username validation function. Then you've posted another function that I can't actually see a call to anywhere in the code you've provided.

 

Could you lay things out a little simpler please?

[TeddyKiller]

Ok. scrap all the above. I hope this makes it clearer for you.

 

Here is a working HTML.

<fieldset>
    <label for="confirmpassword">Password:</label>
    <input name="confirmpassword" type="password" onkeyup="checkPassword(this);" />
    <span class="hint">The password can be any combination of characters, and must be at least 4 characters in length.  8 characters recommended!<br/><font color="red">This password is for anyone to use so they can edit the memberlist, etc.</font></span>
</fieldset>

 

Here is the non-working HTML.

<fieldset>
   <div class="inputrow">
      <label for="password">Password:</label>
      <span>
         <input name="password" id="password" class="inputbox" type="password" onkeyup="checkPassword(this);" />
      </span>
   </div>
   
<span class="hint">The password can be any combination of characters, and must be at least 4 characters in length.  8 characters recommended!<br/><font color="red">This password is for anyone to use so they can edit the memberlist, etc.</font></span>

</fieldset>

 

The javascript is below.. but I changed var fieldset = whatYouTyped.parentNode; TO var fieldset = whatYouTyped.parentNode.parentNode.parentNode; like you suggested.

So for the working code HTML, it would be var fieldset = whatYouTyped.parentNode;

 

Javascript

function checkPassword(whatYouTyped) {
   var fieldset = whatYouTyped.parentNode.parentNode.parentNode;
   var txt = whatYouTyped.value;
   
   if (txt.length > 3 && txt.length < {
      fieldset.className = "kindagood";
   } else if (txt.length > 7) {
      fieldset.className = "welldone";
   } else {
      fieldset.className = "";
   }
}

// this part is for the form field hints to display
// only on the condition that the text input has focus.
// otherwise, it stays hidden.

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}


function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.getElementsById("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}

addLoadEvent(prepareInputsForHints);

 

There is a css for the span tips too. Which would be like this..

span.hint {
   font:normal 11px/14px verdana;
   background:#eee url(./images/bg-span-hint-gray.gif) no-repeat top left;
   color:#444;
   border:1px solid #888;
   padding:5px 5px 5px 40px;
   width:346px;
   position:absolute;
   margin: -12px 0 0 50px;
   display:none;
}

fieldset.welldone span.hint {
   background:#9fd680 url(./images/bg-span-hint-welldone.jpg) no-repeat top left;
   border-color:#749e5c;
   color:#000;
}
fieldset.kindagood span.hint {
   background:#ffffcc url(./images/bg-span-hint-kindagood.jpg) no-repeat top left;
   border-color:#cc9933;
}

fieldset.welldone {
   background:transparent url(./images/bg-fieldset-welldone.png) no-repeat 180px 25px;
}
fieldset.kindagood {
   background:transparent url(./images/bg-fieldset-kindagood.png) no-repeat 180px 25px;
}

 

Like I stated, the working HTML works, but the non-working HTML doesn't work. A tooltip doesn't get displayed.

[Adam]

Sorry, I missed the addLoadEvent(prepareInputsForHints) call before.

 

The problem is essentially the same as before. What you need to do is provide the correct path to the parent element containing the span hint (the fieldset). So from the input, now being wrapped within an extra span and div, you need to go 2 parentNodes further up:

 

function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.parentNode.parentNode.getElementsById("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () {
      this.parentNode.parentNode.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}

[TeddyKiller]

Ok. Well.. something happens..

This span disappears - So a textbox isn't displayed when its offclicked.

I believe.. the tooltip is working with this span.. Instead of the <span class="hint"> span.

<span>
    <input name="password" id="password" class="inputbox" type="password" onkeyup="checkPassword(this);" />
</span>

 

Any help? I removed the two spans, but keeping the textbox obviously. The textbox doesn't disappear, but a tooltip isn't displayed.

 

[Adam]

Just looked at the function properly:

 

this.parentNode.parentNode.parentNode.getElementsById("span")[0].style.display = "inline";

 

"getElementsById()" - is this a custom method you've implemented, or part of a framework or something?

[Adam]

I don't really understand why, whoever wrote this script, they chose to use the spans and inputs in this way; seems very fallible.

 

I guess you could either change the additional span you've added to a different tag, or try to modify the code by selecting the span.hint element specifically, as opposed to just every span contained within 3 parent nodes of an input.

 

Personally I'd consider ditching this script all together.

[TeddyKiller]

Oh that, I was messing with it earlier to find a fix, it's suppose to be "TagName" not "Id"

 

Actually, it's a mates site.. I'm helping him fix it but he's at work currently. I removed the added in span tags, I'm not sure they are needed.

 

I removed the parentNode, there was 1 too many. I put the span tips inside the div too. It works works this way.

 

However.. whichever textbox I click on, it only brings up the first span tip. It doesn't bring up the ones in that current fieldset. Anyhelp on that bit?

 

Do you have a tutorial for something similar that is perhaps a much better method and easier to implement/use?

[TeddyKiller]

I ditched it. Took away all the features.. and kept it basic.

I have this.. http://www.javascriptkit.com/script/script2/formfieldhints.shtml

 

Though I have it in tables now. Like this..

	<tr>
	<td>
		<div class="inputrow">
			<label for="password">Password:</label>
			<input name="password" id="password" class="inputbox" type="password" />
		</div>
	</td>
	<td>
		<span class="hint">
		The password can be any combination of characters, and must be at least 4 characters in length. 8 characters recommended!
		<br />
		<font color="red">This password is for anyone to use so they can edit the memberlist, etc.</font>
		</span>
	</td>
</tr>

The javascript is in the link.. but it's below aswell with the css.

<style type="text/css">
.hint {
   	display: none;
    position: absolute;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    background: #ffc;
}
</style>

<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
	if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
		inputs[i].onfocus = function () {
			this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
		}
		inputs[i].onblur = function () {
			this.parentNode.getElementsByTagName("span")[0].style.display = "none";
		}
	}
}
var selects = document.getElementsByTagName("select");
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";
		}
	}
}
}

addLoadEvent(prepareInputsForHints);
</script>

 

It doesn't work with the tables.. it's probably related to the parentNode things, although I can't work out how to fix it. Can you help? Thanks.