944,077 Members | Top Members by Rank

Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 963

Nov 9th, 2009

0

how to show a larger input field with mouseover?

Expand Post »

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!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>
<!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

Last edited by Altairzq; Nov 9th, 2009 at 8:06 pm.

Similar Threads

how to get to next record on click of a button. in JavaScript / DHTML / AJAX
HTML input text size in JavaScript / DHTML / AJAX
Using a popup to fill an input field in JavaScript / DHTML / AJAX
How to get full path from a file input field in JavaScript / DHTML / AJAX
Send data of card number with four input field to mysql in PHP

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

52 posts
since Aug 2009

Nov 10th, 2009

0

Re: how to show a larger input field with mouseover?

Change your function as shown below

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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>';
}
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

Reputation Points: 245

Solved Threads: 259

Nearly a Posting Virtuoso

Offline

1,250 posts
since Dec 2008

Nov 10th, 2009

0

Re: how to show a larger input field with mouseover?

Back in the old days of Javascript the Quote marks would be the outer marks of the reference and anything inside that required quote marks, used apostrophes. It seems thing have changed and it's the reverse action now?

Reputation Points: 33

Solved Threads: 27

Posting Whiz

Offline

372 posts
since May 2009

Nov 10th, 2009

0

Re: how to show a larger input field with mouseover?

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?

This is the piece of code I used, more or less. This one is not working:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
 
<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>

Last edited by Altairzq; Nov 10th, 2009 at 1:02 pm.

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

52 posts
since Aug 2009

Nov 10th, 2009

0

Re: how to show a larger input field with mouseover?

This is my interpretation, as to how it "used" to be done but new coding might be different to what I've learnt.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<tr><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>
<tr><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>

colspane = 3 A number is not enclosed in quotes as it is a number and not text.

I do not know the reference of backslash for the style tags.
The only thing is if the title tag within the div tag is supposed to be there or in its own enclosures.
I'd be interested to see if my modifications work within your sheet.

Last edited by Jupiter 2; Nov 10th, 2009 at 1:50 pm. Reason: Quote marks

Reputation Points: 33

Solved Threads: 27

Posting Whiz

Offline

372 posts
since May 2009

Nov 10th, 2009

1

Re: how to show a larger input field with mouseover?

Click to Expand / Collapse Quote originally posted by Jupiter 2 ...

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: <br /> .

Reputation Points: 15

Solved Threads: 10

Junior Poster in Training

Offline

73 posts
since May 2009

Nov 11th, 2009

0

Re: how to show a larger input field with mouseover?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<br />

I don't know what this means. Break actually doesn't have an "end break" tag. Break is just like a line return except it returns the cursor to the left margin new line.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<BR>

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<P>

The Paragraph tag requires (but not usually implemented) an End Paragraph as it is a specific format. It inserts a line space between "paragraghs."

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

</P>

Last edited by Jupiter 2; Nov 11th, 2009 at 1:48 am. Reason: typas

Reputation Points: 33

Solved Threads: 27

Posting Whiz

Offline

372 posts
since May 2009

Nov 11th, 2009

0

Re: how to show a larger input field with mouseover?

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<br />
<hr />
<img href="..." />
etc.

And one more thing, all tagnames and attributes should be lowercase.

Reputation Points: 15

Solved Threads: 10

Junior Poster in Training

Offline

73 posts
since May 2009

Nov 11th, 2009

0

Re: how to show a larger input field with mouseover?

I think you have forgotten to close the container div. Your code should work with the div closed!

Reputation Points: 11

Solved Threads: 7

Junior Poster in Training

Offline

88 posts
since Feb 2007

Nov 11th, 2009

0

Re: how to show a larger input field with mouseover?

I looked up XHTML and the closing bracket is correct. I'm an old hack from way back and just used to old HTML code.
In Post #4, the 2nd line refers to a closing td but no open td? Maybe somewhere above that you did not inlcude?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<tr>
	<td />	
[\CODE]
[CODE}
<td colspan='3' style=\"padding-bottom:4px\">		
style= \"padding .... Shouldn't the Quote marks start before the backslash?
 
<tr>
	<td />	
[\CODE]
[CODE}
<td colspan='3' style=\"padding-bottom:4px\">		
style= \"padding .... Shouldn't the Quote marks start before the backslash?

I"m new to this so I'm only making suggestions. I'm a bit out of my depth with xhtml. I still use HTML hard code by hand so xhtml is not part of my repertoire.

This is my last post on this subject.

Reputation Points: 33

Solved Threads: 27

Posting Whiz

Offline

372 posts
since May 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Regex to remove 'Illegal Characters'

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: List Items

About Us | Contact Us | Advertise | Acceptable Use Policy

Forum Index | Build Custom RSS Feed

© 2011 DaniWeb® LLC