JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

how to show a larger input field with mouseover?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Aug 2009
Posts: 35
Reputation: Altairzq is an unknown quantity at this point 
Solved Threads: 0
Altairzq Altairzq is offline Offline
Light Poster

how to show a larger input field with mouseover?

 
0
  #1
27 Days Ago
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) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  3. <head>
  4.  
  5. <script type="text/javascript">
  6.  
  7. function newField()
  8. {
  9. document.getElementById('container').innerHTML = 
  10. 	'<div id="myFile" style="width:100px;overflow:hidden;border:thin solid" title="document.getElementById(\'myFile\').innerHTML">thisisaverylongfilename.jpg</div>';
  11. }
  12.  
  13. </script>
  14.  
  15. </head>
  16. <body onload="newField()">
  17. 	<div id="container" />
  18. </body>
  19. </html>

demo:
http://www.lloparts.com/america/editora/testTitle.html
Last edited by Altairzq; 27 Days Ago at 8:06 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2008
Posts: 106
Reputation: urtrivedi is an unknown quantity at this point 
Solved Threads: 15
urtrivedi urtrivedi is offline Offline
Junior Poster
 
0
  #2
27 Days Ago
Change your function as shown below
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function newField()
  2. {
  3. document.getElementById('container').innerHTML = '<div id="myFile" style="width:100px;overflow:hidden;border:thin solid" title=\'' + document.getElementById('myFile').innerHTML+ '\'>thisisaverylongfilename.jpg</div>';
  4. }
You may use document.getElementById('myFile').innerText
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 372
Reputation: Jupiter 2 is an unknown quantity at this point 
Solved Threads: 26
Jupiter 2 Jupiter 2 is offline Offline
Posting Whiz
 
0
  #3
27 Days Ago
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?
If ALL my answers are wrong, only then will I read the question
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 35
Reputation: Altairzq is an unknown quantity at this point 
Solved Threads: 0
Altairzq Altairzq is offline Offline
Light Poster
 
0
  #4
26 Days Ago
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) 
  1. <tr>
  2. 	<td />
  3. 	<td colspan='3' style=\"padding-bottom:4px\">
  4. 		<div id='escollitOriPri' style=\"height:14px;text-align:center;font-size:11px;overflow:hidden;cursor:default\" title=\"document.getElementById('escollitOriPri').innerHTML\">
  5. 		</div>
  6. 	</td>
  7. </tr>
  8.  
Last edited by Altairzq; 26 Days Ago at 1:02 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 372
Reputation: Jupiter 2 is an unknown quantity at this point 
Solved Threads: 26
Jupiter 2 Jupiter 2 is offline Offline
Posting Whiz
 
0
  #5
26 Days Ago
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) 
  1. <tr><td colspan=3 style=padding-bottom:4px>
  2. <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; 26 Days Ago at 1:50 pm. Reason: Quote marks
If ALL my answers are wrong, only then will I read the question
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 71
Reputation: Alxandr is an unknown quantity at this point 
Solved Threads: 9
Alxandr's Avatar
Alxandr Alxandr is offline Offline
Junior Poster in Training
 
1
  #6
26 Days Ago
•
•
•
•
Originally Posted by Jupiter 2 View Post
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 /> .
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 372
Reputation: Jupiter 2 is an unknown quantity at this point 
Solved Threads: 26
Jupiter 2 Jupiter 2 is offline Offline
Posting Whiz
 
0
  #7
26 Days Ago
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <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) 
  1. <BR>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <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) 
  1. </P>
Last edited by Jupiter 2; 26 Days Ago at 1:48 am. Reason: typas
If ALL my answers are wrong, only then will I read the question
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 71
Reputation: Alxandr is an unknown quantity at this point 
Solved Threads: 9
Alxandr's Avatar
Alxandr Alxandr is offline Offline
Junior Poster in Training
 
0
  #8
26 Days Ago
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) 
  1. <br />
  2. <hr />
  3. <img href="..." />
  4. etc.

And one more thing, all tagnames and attributes should be lowercase.
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2007
Posts: 66
Reputation: Baradaran is an unknown quantity at this point 
Solved Threads: 4
Baradaran Baradaran is offline Offline
Junior Poster in Training
 
0
  #9
26 Days Ago
I think you have forgotten to close the container div. Your code should work with the div closed!
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 372
Reputation: Jupiter 2 is an unknown quantity at this point 
Solved Threads: 26
Jupiter 2 Jupiter 2 is offline Offline
Posting Whiz
 
0
  #10
26 Days Ago
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) 
  1. <tr>
  2. 	<td />	
  3. [\CODE]
  4. [CODE}
  5. <td colspan='3' style=\"padding-bottom:4px\">		
  6. style= \"padding .... Shouldn't the Quote marks start before the backslash?
  7.  

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.
If ALL my answers are wrong, only then will I read the question
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically browser bug calendar captchaformproblem checkbox child class close cookies createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine events explorer ext file form forms getselection google gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe image() images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl maps math media microsoft object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post programming progressbar rated regex runtime safari scriptlets scroll search security session shopping size software sql star stars synchronous text textarea unicode validation web webservice website windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC