My table has static width values but sometimes table cells of a certain column can contain text which is too long and which messes up the table's width. I'm looking for a way to dynamically shorten text (kind of like a table grid functionality but then without grids) because it can be of a variable length, and when one hovers over the table cell the entire text is shown without stretching the table.
Currently, I have this hard coded in my script in the following way:
string.substring(0, 65) + '...'; and passing the full text to the 'title' attribute of the table cell.
Note that I don't want to keep using the 'title' attribute. I tried surrounding the text with <span style='position: absolute; background: #EEE'></span> when triggered by the hovering event, but unfortunately that wasn't an appealing solution as the text moved a bit to the bottom while the padding nor the margin style were changed.
The solution can also be a jQuery plugin or JavaScript script.
1. Shortening the original data
I suggest that you consider something more elegant than chopping the string at the 65th character. -- Instead, look for whitespace to break the string at. Only chop mid-word if no whitespace is found.
To save more room in the table cell, use the ellipses character… instead of three periods... Just copy/paste it from this answer. The ellipses character could also be styled with a different or smaller font.
2. Showing the original data on hover
I prefer YUI. Their tooltip widget works well for this. An example.
You should try this CSS instruction:
td { break-word: word-wrap; }
that works in many browsers (yes, including IE 6, even IE 5.5 but not Fx 3.0. It's only recognized by Fx3.5+. Also good for Saf, Chr and Op but I don't know the exact version for these ones) and don't do any harm in the other ones.
If table's width is still messed up, there is also:
table { table-layout: fixed; }
th, td { width: some_value; }
that will force the browser to use the other table algorithm, the one where it doesn't try to adapt many situations including awkward ones but stick to what the stylesheet says.
Related
so here is the code https://codepen.io/Dobrodeetel/pen/ZEaqVap.
This code partially repeats what I have on the site. therefore questions about why it is so - unnecessary.
It works like this - click on any line - an additional line appears with a table inside (you can remove it if you click again on the same line) in which there is a line when you click on which another internal table will appear (which is also removed when you click again).
Have a few questions:
1 - if you look at the third table, you can see the row overlap (css hover).
the question itself is how to do the same only for the first table (it is possible for the second one as well)?
i.e. write something like
.table_blur tbody:hover tr:hover td {
background: #8981ce85;
text-shadow: none;
}
as commented out in table_blur on line 32, the line with the second table will overlap. I need to make sure that such rows (with tables inside) are NOT repainted.
I was offered an option that is also at the end of table_blur (line 37) but it does not work
2 - there is this code https://codepen.io/Dobrodeetel/pen/ExXEemr.
It's about opening animation. how to apply such animation to my tables?
also found this code http://jsfiddle.net/1rnc9bbm/4/. which works without js at all? Well, of course I need when pressed.
So - how to attach a similar animation to the May version? that is, opening and closing until the disappearance?
I really don't care how it works. just because my table is built right away - the code with the active class does not work.
Also how to make animation relative to width? as you can see, the third table greatly stretches the ENTIRE table (on my site it’s the same and can’t be changed in any way, since the number of columns is different). how to make a stretch animation?
That's all. the answer to any question will greatly reduce my work)
I'm creating my first table using HTML and CSS. I used a code generator to create the table "code" (HTML and CSS). I add all of that to a long string and send it to MailApp.sendEmail to include the table in the Email. It works great except that the report lines are too spaced out vertically. I need help reducing the row height or otherwise reducing the vertical spacing. I'd include some of my HTML and CSS but I can't figure out how to put in a format that this freak'n window will accept.
Can someone advise on how to reduce the vertical row spacing in a CSS table?
Try this:
tr { line-height: 5px; }
I have a simple textarea and I need to make transparent letters while allowing the text-caret to be visible. When I apply the following rules then I get invisible caret:
textarea {
background: transparent;
opacity: 0;
}
When I type invisible text, I need to see the text-caret move.
EDIT: I need to make editor to edit td cell in table. When I click on a cell I show a textarea and start typing. On a each character letter, I insert a context in a cell. After that, I hide a textarea.
This jsFiddle DEMO uses an online tutorial method that has been slightly modified to create a non-native browser text-caret along with transparent text.
Also, this jsFiddle New Method I created handles that goal differently but isn't IE8 friendly.
Status Update: I've improved the above jsFiddle DEMO with this newer version titled:
jsFiddle New Method that's Newer!!
The above jsFiddle version now allows the inside of the text-area to be clicked and the caret will respect that clicked location. This extra functionality was made possible by a great question and answer here.
Time to throw my $0.02 in.
This is an answer to the question, as I understood it, that works, it's quick and dirty, so feel free to make suggestions. This code is untested, but I did create a working fiddle here: http://jsfiddle.net/66RXc/
<html>
<head>
<title>Testing</title>
<script type="text/javascript">
<!--
function call(val) {
document.getElementById('result').value += val.charAt(val.length - 1);
document.getElementById('result').value =
document.getElementById('result').value.substr(0, val.length);
document.getElementById('test').value =
document.getElementById('test').value.replace(/[^\^]/g, ' ');
}
-->
</script>
</head>
<body>
<textarea name="textarea" cols="20" rows="5" id="test"
onKeyUp="call(this.value);"></textarea>
<textarea style="display:block" cols="20" rows="5" id="result" disabled>
</textarea>
</body>
</html>
The way I approached it was every time a character is typed in textarea "test", copy it over to a hidden text box, and replace all the characters in "test" except ^ with spaces. The characters are hidden, and the carat is still there. The full text is still in the other box. You could use display:hidden instead of display:block to hide it.
This isn't exactly the best implementation in the world, just something I did quickly. You have to type kind of slow (~15-20 WPM) for it to work.
Here is a CSS3 solution for making the text, itself, transparent:
Set the color attribute to be color: rgba(0,0,0,0); for the text
The only problem is that the caret goes invisible to. I did a quick search and found out that the caret and its styling are completely at the disposal of the browser. As such, the only option that I can think of for you is to use Javascript to add a simulated caret to the end of what you are typing.
I have an idea of how to do this, but it's messy and I wouldn't exactly call it ideal - I am, however, going to write it in case it helps further someone else's idea:
add a hidden label to the page
make sure it's hidden and not display: none; (so that it has actual width)
set white-space: nowrap; to keep it all on one line)
make sure the text is styled exactly the same as the text in the textarea
add the element <span id="caret">|</span> right before the textarea (I will refer to this as the caret for the rest of the spec)
set its position to position: relative;
increase its z-index to make it overlay
shift it right in order to set it on top of where the ACTUAL caret's initial position would be
make a function to check take in the value of the textarea and check the width of the textarea against the position of the caret (lookup selectionStart if you don't know how to do this)
the problem here is that characters are not always the same length, nor are they always the same length as their counterparts in other fonts
to solve this, as text is entered into the textarea you should have it imitated in the hidden label you created in step 1
imitate only the text from the start of the textarea to the caret's current position
wrap each character (including spaces) in their own span
next you will have to call a function to compare the width of the label with the width of the textarea
if the label is less wide than the textarea, get the width of the last span in the hidden label and shift the caret to the right by that width, then move on to step 4
as this is function will be run as text is entered it will happen one character at a time
be careful here that the caret doesn't go outside the textarea when it's in its last and near last positions
if the label is wider than the textarea:
add the widths of the characters (spans) in the label one at a time until you reach the width of the textarea
shift the position of the caret down by the height of the font and back to the horizontal starting position (as the caret's position is relative, just change its left position back to (0 + offsetToACTUALCaretPosition)
use a flag (e.g. class="break") to mark the last span (character) in the previous row
call the width comparison function again
make sure that you include a condition to check for the flags that you added at the end of each "row" (if any)
if you haven't already, apply any desired CSS styles to the caret span and change the color of the textarea's text to be color: rgba(0,0,0,0);
Caveats:
this will have a lot of overhead for the tiny job it does
you will have to adjust this method to account for padding
you will have to adjust this method to add support for deleting characters and moving the carets to an earlier position (to the left)
if you leave the textarea scrollable, you will have to add support for that (also for similar settings, like static heights causing text to scroll or move off screen/out of the textarea's visible area)
As I said before, I know that this solution is very rough, but it may help someone come up with a better one.
Good luck!
Based on your edit, if you need to just hide a textarea why don't you use jQuery $('#your_id').hide();
I'm working on the latest version of my plugin, Textarea Line Counter (http://mostthingsweb.com/?p=84). To make it even more accurate, I want to identify regions of text that wrap because they are too large to fit on the line (like a sequence of repeated characters).
I'm assuming that browsers only wrap text at spaces. Are there any other characters that lines can be wrapped at? Thank you,
Looks like it depends on the browser, my Opera wraps also on e.g. + % ? $ / ( [ { } \ ° ! ¿
Safari/Chrome on ¿ ? too
(guess there are lots more)
Nice idea for a plugin. Fighting the accuracy issues is going to be a challenge.
There's not a universal catch all for the way textarea is going to handle a string (other than line breaks at spaces), or using word-wrap.
IE produced a break with . , () {} ?, but not with / * = +
In this example, textarea seems to have that "special" feeling like a td
Based on all your advice, I have created a solution. It is rather large, and in fact I think I will make it into a separate plugin, as well as including it in my Textarea Line Counter. It works like this:
Create a div to act as a container, and set the font to something monospaced (i.e. every character is the same width)
Create a span within the container, and place a single letter.
Take the width measurement of the span (which will be the width of the letter, once margins, padding, and some other CSS attributes are cloned)
Create another div within the container and clone its CSS attributes. Set it's width to be two times the width of the letter found in step 3, and record its height.
To test if a character will cause a wrap, set the text of the div to: A[some character]A. [some character] is a character you are trying to test.
Test the height of the div. If it is larger than the height found in step 4, the text has wrapped.
I'm looking forward to releasing this plugin. Thank you again for all your advice.
some browsers will break inside words if the word is longer than the col width,
otherwise they break on spaces.
I notice some browsers set this by default- you can, too in most bowsers with:
textarea{word-wrap: break-word}
you can be sure it is not set by using textarea{word-wrap: normal}
I'm building a pretty basic HTML table creator/editor (based on a designMode iframe) at work, using direct DOM manipulation. It's a pain, obviously due to Internet Explorer.
When in designMode, a table inserted into the editing area iframe is resizable and the contents of the cells can be freely edited. In Firefox, rows and columns can also be added and removed. I'm currently focused on editing border widths, foreground and background colors and other things that require DOM work.
The trouble is the lack of proper DOM Selection/Range functionality in IE6/7. I'm unable to find the containing nodes for several simultaneously selected cells. For a single cell it's doable with parentElement, but for several selected cells, parentElement is the TR node that houses the TD cells. I can't figure out how to extract node references to only those TD cells inside that TR that have been selected, due to lack of anchorNode, focusNode and the various offsets that W3C DOM provides.
I've already got the table creation and the style modification for individual cells as well as groups of selected cells implemented for W3C compliant browsers, but I'm completely stuck with the IE implementation. Could jQuery help me? I've never used it, but it seems intuitive enough that it will take less time to master than it will to figure out how to do this with the IE DOM alone.
There are three basic style modification scenarios that need to work:
A table cell that has not been explicitly selected with Ctrl/Cmd-clicking, but has the text cursor inside it, must have its background color changed. The cell may have formatted text or other parentNode/childNode-relationship complicators in it.
Several explicitly selected table cells (Ctrl/Cmd-clicked, Shift-selected or just "painted over" with the mouse) must have their background colors changed. This has to work for contiguous rectangular selections as well as for scattered, individual selected cells.
Table-level modifications (border width, color etc.) for the "selected table" need to be possible. That is, in the case of several tables in the editing area, the modification will take place for one or more tables that either have cursor focus (scenario 1) or have selected cells in them (scenario 2).
In Firefox, I already have the code for all three scenarios working. Now I need a cross-browser solution. Can anybody help me?
(IE's problems with selections and ranges have been discussed here before, but not in the context of jQuery. I found these at a glance: 164147, 218043, 235411)
If I understand you properly, you want the general code for selecting table cells, and changing properties (CSS attributes) for the selection.
You can do this easily in jQuery.
var curTableCell = null; // "Softclicked" - not part of the selection (1)
// We call this in the click event below. You'd probably want this for keyboard events as well (for arrow key nav, etc.)
function softclick(element) {
$(curTableCell).removeClass('softclicked');
curTableCell = element;
$(element).addClass('softclicked');
}
$('td, th').click(function() {
if(keyHeld) { // Dunno how you do this (I'm not good at Javascript)
$(this).toggleClass('selected'); // Explicitly added/removed to/from selection (2)
} else {
softclick(this);
}
});
/* When you want to do something on selection: */
$('td.selected, th.selected').css({borderColor: 'red', borderWidth: '1px'});
/* When you want to do something on selected tables (3): */
$('td.selected, th.selected').parents('table')
.css({borderColor: 'red', borderWidth: '1px'});
$('td.selected, th.selected').parents('table').children('td') // Change things on all of table's cells
.css({borderColor: 'red', borderWidth: '1px'});
$('td.selected, th.selected, td.softclicked, th.softclicked').parents('table').children('td') // Change things on all of table's cells, including tables of "softclicked" cells
.css({borderColor: 'red', borderWidth: '1px'});
(I am not too good at Javascript or jQuery (am learning at the moment), but I hope this is enough to get you started.)