 Help with code layout / structure in my simple HTML table, Connecting internal css to the relevant table column |
  |
| Stendec |
 Nov 2 2020, 10:30 PM
Post
#1
|
|
Group: Members Posts: 1 Joined: 2-November 20 Member No.: 27,612  |
I am a complete novice in anything to do with HTML and the like. I literally started just a few days ago. I stumbled across this forum and I very much hope that you kind experts will be able to assist me with my problem.
I inherited the code below (which was provided as a sample template). It's purpose is to display some fields of data (that are output by a tagging program) and display those data in simple table. I was totally daunted when I first opened up the html document, but I somehow managed to adjust the table headings to suit my requirements and insert the code to populate the table columns with the correct data, and it all works perfectly. However, some of the data fields can be quite long, and rather than have a very wide scrollable page, I found some html examples that allow you to truncate the text with ellipses so that the table does not get too wide and fits within the desired window width. I inserted this html, and after a bit of trial and error I got the truncation working too. But I would like to be able to see the full text that has been truncated when mousing over that area of the table. I did some more searching and found a web page with 3 excellent examples of how to achieve this effect with different tooltips: 1. full text tooltip, 2. jump to end of text, and 3. scroll text. It turns out that all 3 of these examples would be useful for my html table page. Jump to end is good for long filenames and paths when you want to just see the file-type extension at the end (rather than reading through the entire path). The full text tooltip is good for titles, because even though they may exceed the column width, they are generally not that long. And the scroll text option would be ideal for comments (which can be quite long, and so would make a full tooltip cover too much of the screen). The fully-working ready-to-go css code for each type of tooltip is provided on the web page linked below. So all I have to do is paste the 3 examples into my HTML document, and then add the 'class' name to particular column where it should apply. Unfortunately I have been unable to figure out how to do this, despite hours of research and trial attempts. Would any of you be so kind as to paste the css into the correct part of my HTML file and add the class name to the column (as described below). It would be most helpful for me to see how this should be correctly done, because no matter what I tried, I could not get the tooltips to work. I can then use it as a guide for how to do this in future. The web site with the 3 working css examples is here: http://yurigor.com/show-hidden-part-of-tru...on-hover-touch/ The table columns that I would like to have tooltips added to, are: Filename (using code example 2. direction:rtl) The HTML for the table itself is below: CODE $filename(C:\Users\PSR\Desktop\Exported video file list.html,utf-8)<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <meta name="GENERATOR" content="VidTag" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>%_directory% (video list)</title> <style type="text/css"><!-- h1 { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 16pt; color: #000 } body { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 8pt; background: #fff } table, tr, td { font-family: Segoe UI, Tahoma, Arial, sans-serif; font-size: 10pt; color: #000; padding: 4px 10px 4px 10px; text-overflow: ellipsis; white-space: nowrap; } a:link, a:visited, a:active { text-decoration: none; color: #03f; } a:hover { text-decoration: none; color: #00cc00; } .title { font-weight: bold; padding: 7px; margin: 0px; color: #000; } .odd { background-color: #d1d1d1 } ; original #ccc --></style> </head> <body> <h1 style="margin-left: 12px">Video File List Overview</h1> <p style="margin-top: -12px; margin-bottom: 8px; margin-left: 15px">(for: $trimright(%_folderpath%,\))</p> <br> <table> <tr background-color: #eee;> <th class="title">Filename</th> <th class="title">Size</th> <th class="title">Title</th> <th class="title">Length</th> <th class="title" style="max-width: 160px;">Comment</th> <th class="title">Year</th> <th class="title">Category</th> <th class="title">Rating</th> </tr> $loop(%_filename_ext%) <tr> <td$if($odd(%_counter%), class="odd",) style="max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">$replace(%_filename_ext%,&,&)</td> <td$if($odd(%_counter%), class="odd",) align=right>$replace(%_file_size%,&,&)</td> <td$if($odd(%_counter%), class="odd",) style="max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">$replace(%title%,&,&)</td> <td$if($odd(%_counter%), class="odd",) align=right>$replace($regexp(%_length%,^0(\d:),$1),&,&)</td> <td$if($odd(%_counter%), class="odd",) style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">$replace($meta_sep(comment,\\),&,&)</td> <td$if($odd(%_counter%), class="odd",) align=center>$replace(%year%,&,&)</td> <td$if($odd(%_counter%), class="odd",) align=center>$replace(%genre%,&,&)</td> <td$if($odd(%_counter%), class="odd",) align=center>$replace($if(%rating winamp%,$repeat($char(10032),%rating winamp%),$if(%rating wmp%,$repeat($char(9733),%rating wmp%),$if(%rating mm%,$repeat($char(10026),%rating mm%),$repeat($char(10061),$if2($ifgreater($regexp(%popularimeter%,'^.+\|(\d{1,3})\|\d+',$1),196,5,$ifgreater($regexp(%popularimeter%,'^.+\|(\d{1,3})\|\d+',$1),128,4,$ifgreater($regexp(%popularimeter%,'^.+\|(\d{1,3})\|\d+',$1),64,3,$ifgreater($regexp(%popularimeter%,'^.+\|(\d{1,2})\|\d+',$1),1,2,$ifgreater($regexp(%popularimeter%,'^.+\|(\d)\|\d+',$1),0,1,))))),0))))),&,&)</td> </tr> $loopend() </table> <p style="margin-left: 12px">created on %_date% using <a href="http://www.mp3tag.de/en/" title="VidTag Website">VidTag</a> $trimleft(%_app%,VidTag )</p> </body> </html> Thanks in advance for your help. |
  |
 
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 08:07 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC