how to show a larger input field with mouseover?
I'm showing in a field the name of the file the user has chosen. I would like to show the whole name as the title when passing the mouse over the field, in case the name is too long.
I swear this was working, but it's not anymore (I'm testing with FF). I don't know how it was working, maybe I used a different combination of quotes or semicolons or I don't know. I can't make it work again. When you pass de mouse over the field it is showing the code instead of the innerHTML referenced:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<script type="text/javascript">
function newField()
{
document.getElementById('container').innerHTML =
'<div id="myFile" style="width:100px;overflow:hidden;border:thin solid" title="document.getElementById(\'myFile\').innerHTML">thisisaverylongfilename.jpg</div>';
}
</script>
</head>
<body onload="newField()">
<div id="container" />
</body>
</html>
demo: http://www.lloparts.com/america/editora/testTitle.html
Altairzq
Junior Poster in Training
53 posts since Aug 2009
Reputation Points: 10
Solved Threads: 0
Change your function as shown below
function newField()
{
document.getElementById('container').innerHTML = '<div id="myFile" style="width:100px;overflow:hidden;border:thin solid" title=\'' + document.getElementById('myFile').innerHTML+ '\'>thisisaverylongfilename.jpg</div>';
}
You may use document.getElementById('myFile').innerText
urtrivedi
Nearly a Posting Virtuoso
1,306 posts since Dec 2008
Reputation Points: 257
Solved Threads: 270
It's not working either, it gives an error because the field "myFile" doesn't exist yet.
It was working when I created the field from PHP-Ajax, could that be it? But if there wasn't Javascript involved how could it interpret the code? :confused:
This is the piece of code I used, more or less. This one is not working:
<tr>
<td />
<td colspan='3' style=\"padding-bottom:4px\">
<div id='escollitOriPri' style=\"height:14px;text-align:center;font-size:11px;overflow:hidden;cursor:default\" title=\"document.getElementById('escollitOriPri').innerHTML\">
</div>
</td>
</tr>
Altairzq
Junior Poster in Training
53 posts since Aug 2009
Reputation Points: 10
Solved Threads: 0
colspane = 3 A number is not enclosed in quotes as it is a number and not text.
In case you're interested, this isn't necessarily correct. Actually, I think I recall that if you use XHTML you MUST enclose everything in quotes (even empty literals). Using <button disabled>test</button> is also not legal using XHTML, you have to set <button disabled="disabled">test</button> if I recall correctly.
Also, in old HTML you had the OPTION of leaving off quotes at simple input. But it's nothing to worry about actually 'cause all normal browsers don't care anyway :-), but if you want to follow the new standards, always use quotes, and always close every tag (even br: .
Alxandr
Junior Poster in Training
73 posts since May 2009
Reputation Points: 15
Solved Threads: 10
It's not an end break tag (the / is at the end of the tag). Whenever (in XHTML as said) you have empty tags (like br, hr, img and meta) you should close them using the shorthand-syntax.
<p id="a1"></p> is in theory equivalent to <p id="a1" /> . Problem is that tags that aren't normaly empty by some reason isn't read as XHTML (this might be because XHTML requires the browser to fail if it finds errors in the markup if I'm not mistaken). But always-empty tags do require this syntax.
Therefore you have
<hr />
<img href="..." />
etc.
And one more thing, all tagnames and attributes should be lowercase.
Alxandr
Junior Poster in Training
73 posts since May 2009
Reputation Points: 15
Solved Threads: 10
I think you have forgotten to close the container div. Your code should work with the div closed!
Baradaran
Junior Poster in Training
88 posts since Feb 2007
Reputation Points: 11
Solved Threads: 7
