In other words, is there a way to get width of cell text in spite of overflowing?
There's a concept of a 'text node', but frankly I don't know how to access its width. My first instinct is if it's a must-have, wrap the cell contents up in a span and get the span's width. Strikes me as kind of ugly, but sometimes purpose is more important than appearance. ;-)
$('td span').width(); // the width
Fiddle: http://jsfiddle.net/Cvv4b/
If you really need to avoid the span, you could write a wee little utility that gets the text, copies it into a hidden element that doesn't have a width restriction (this element could be created on the fly if need be), and return the width of that hidden element.
Related
I want to change the text inside a div with javascript (jQuery is ok too).
There are a few to do that:
element.innerText
element.innerHTML
element.textContent
$(element).text()
$(element).html()
But when I use the above methods, the whole document is affected and not only the div.
See chrome timeline below which refers to this fiddle
Is there a way to update the text inside the div without affecting the whole document?
Because updating the text affects the width/height of the element and the flow of the page, the entire document usually has to be laid out again whenever the DOM changes. However, you can do stuff so only part of the document needs to be re-laid out.
From http://wilsonpage.co.uk/introducing-layout-boundaries/
To be a layout boundary, the element must:
Be an SVG root (<svg>).
Be a text or search <input> field.
or:
Not be display inline or inline-block
Not have a percentage height value.
Not have an implicit or auto height value.
Not have an implicit or auto width value.
Have an explicit overflow value (scroll, auto or hidden).
Not be a descendant of a table element.
If you make the element you're updating a layout boundry, only the part of the document inside your element needs to be updated. However, keep in mind were talking about optimizations of less than a millisecond, and pre-mature optimizations are generally considered bad practice.
Note: Do not start an id attribute with a number. It may cause problems in some browsers.
http://www.w3schools.com/jquery/sel_id.asp
Is it possible to save off all CSS that is 'currently' applied to an element, then later reapply it? I am working on a sticking table header, and when I i change position:fixed it loses all the applied styles. I currently save off the column widths and reapply to the table header with:
$('#tableHeader').css({
position:'fixed',
width:$('#tablePanel').width(),
top:$('#top').height(),
});
$('.column1Value').width(col1Width);
$('#col1').width(col1Width);
$('.column2Value').width(col2Width);
$('#col2').width(col2Width);
$('.column3Value').width(col3Width);
$('#col3').width(col3Width);
$('.column4Value').width(col4Width);
$('#col4').width(col4Width);
$('.column5Value').width(col5Width);
$('#col5').width(col5Width);
$('.column6Value').width(col6Width);
$('#col6').width(col6Width);
$('.column7Value').width(col7Width);
$('#col7').width(col7Width);
This make the columns the correct size and line up closely, but there is extra padding or margin being applied from somewhere I can't completely figure out (bootstrap probably), and this makes the headers and columns not line up. I was hoping for something like:
var savedCSS = $('#table').css(); and retrieve it like $('#table').css(savedCSS)
You could save off the individual styles that you are interested in one by one and then re-apply them later using the jQuery("selector").css("styleName") method that you alluded to, but I don't think there's an easy way to do them all at once. It's not impossible, but wouldn't be very efficient and probably wouldn't actually give you the result you want, once the element is in its new position.
After the discussion, we found that the sizing issue wasn't really due to the styles, but due to the element that the width was being calculated from.
When the element is positioned normally in the page-flow, it uses its most recent positioned parent's width and then takes off margin to find the width of the child content.
When the element is removed from the page flow, its width is then independent of the parent. So to get the two to match up, record the parent's width rather than the element itself and set the width to match the parent, instead of trying to maintain the element's width.
I have a wide table – possibly very wide – and I want the table to be as wide as necessary to fit everything, i.e. as-if it the width was auto (and the screen was wider).
But, by default, tables seem to never exceed the size of their containers!
I've found an answer using JavaScript, but is there a pure CSS answer too? Or a better JavaScript solution?
Here's a JSFiddle fiddle with an example table. Note that in this example the content is bigger than the 'screen', but the desired effect should cause the width of the cells to be large enough so that the text of each cell is all on a single line.
Per GChabot's answer, I don't want the cells to be bigger than their contents. Per their subsequent comment, by "fit everything", I'm of course referring to the Goldilocks fit, i.e. just enough so that contents don't wrap, but no larger.
Set the cells up so they do not wrap
td { white-space: nowrap; }
Depending on what you mean by "fit everything", you might want to define a min-width for your tds:
min-width:250px;
That way, each cell has a reasonable size to display some text, on one or more lines (or just one if you set them as nowrap as epascarello suggested). If you are displaying fixed-size element (such as images), the table should expand by default.
CSS overflow should fix your issue take a look at this post http://css-tricks.com/the-css-overflow-property/
Here's the quick-and-dirty JavaScript I'm using now:
$('#table-container').attr('style', 'width: 1000%');
$('#table-container').attr('style', 'width: ' + $('#tblMain').width() + 'px;');
#table-container refers to a div surrounding the table; the table has an id of tblMain.
I know this won't work if the table is 10 times wider than the current screen size, but a general solution should be pretty easy to implement.
In Javascript, I have a div with a paragraph inside it. I have made an effect where the div slowly expands in width & reveals the text in the paragraph below.
I set the divs width to zero, then every 10 milliseconds I increase the width by 10px. This works great because I have set the div to have overflow hidden.
My Problem: BUT the text in the paragraph wraps to the current width of the parent div, which means that the text jumps around & reformats as the width increases.
I want to remove/stop this from occuring so I explicity set the paragraphs width to 100px (the width of the div once it has completely expanded) but the problem is when I go check the CSS width of the paragraph element in Firebug, its not set, ie its not listed in the HTML elements inline CSS style?
It makes me think that a paragraph element by default has display block & ignores the width parameter, is that correct?
My ultimate question is: How can I get the paragraph element to be 100px wide? Do I need to change the display type to get the width to work?
This doesn't work:
pEle.style.width = "100px";
// maybe I need to change the display type before I set its width?
If I understand your question correctly you can do this just be explicitly setting a width for the paragraph in your CSS.
By default a paragraph element is block level and will take take any width you specify... Leads me to think somethings going wrong with how you're trying set the width.
Here's a quick fiddle - http://jsfiddle.net/MerlinMason/Sdq65/
Hope that helps!
I truly believe all your problems maybe fixed by adding this css property to your paragraph:
white-space: nowrap;
I have a table having td with two div's.Now, On clicking a div should expand second div and the td should also get expanded.Again on clicking the div the td should come to normal width
mixing table layout (deprecated) with div box model can result in really strange stuff...
You'll probably not want that, but anyway:
You will need JavaScript to change the second Div's dimensions, and from what I understand you want an easing animation as well. I propose taking a look at mootools or scriptaculous, if that is so.
Please allow me to break down the literal meaning of your terrible post, so you can appreciate just how frustrating it is to try to answer these spur-of-the-moment/last-ditch-effort creations.
I have a table having td with two div's
<table>
<tbody>
<tr><td><td><div></div><div></div></td></tr></tr>
</tbody>
</table>
Notice how this code is rather bland, uninformative, and probably not an accurate representation of what you're dealing with? That's because it's all that you've provided. Next time maybe try including and link to your page, a jsFiddle, or maybe even just a more precise explanation.
Now, On clicking a div should expand second div and the td should also
get expanded.
Expand what? How much? What about the row height or column width? Does the table need to stay the same size? How about any shred of direction here. If all else fails, before and after pics drawn in MSpaint are fine.
Again on clicking the div the td should come to normal width
Although this really isn't an English sentence I think I get the gist. However, this "width" information is probably part of the unspoken meaning of "expand" we talked about earlier. Bottom line: provide some html; get a concise answer.
Try this
var oldWidth = 200;
var newWidth = 200;
$("td div:first").click(function(){
if(!$(this).next("div").is(":visible")){
$(this).next("div").show('slow');
$(this).closest("td").width(newWidth);
}
else{
$(this).next("div").hide('slow');
$(this).closest("td").width(oldWidth);
}
});