Make text auto scale to parent container - javascript

I hope I do a good job explaining this.
I am making a Tumblr theme, and am setting up the post titles in a way that text won't overflow unto a second line if it is to long. I want to make the text grow smaller as it reaches the edge of the parent instead of dropping into a new line or getting cut off.
I tried fittext.js and bigtext.js, but I couldn't get either to work. And I do not think they would work for what I want, as fittext.js seems to be more responsive text, and bigtext.js always makes the text the same width as the parent which wouldn't work with what I want.
Does anyone know I can accomplish this? I'm a noob when it comes to Javascript, so keep that in mind when responding. ;D

The first step is to stop lines from breaking:
white-space:nowrap;
Then, you need to allow scrolling:
overflow:hidden;
Now you have access to scrollWidth. If it is bigger than offsetWidth, then the text is too big.
You can shrink the text one unit of font-size at a time (be it 0.1em, 1px, 1pt... whatever you want). Repeat this step until scrollWidth is less than or equal to offsetWidth. Ta-da!

Related

Do you really need a width on floated element?

Say you have a Div (id="toolbar"), and inside that toolbar you have a Div (id="ButtonHolder") that contains 2 buttons. If you float the #ButtonHolder to the right and don't set an explicit width on it, is that kosher?
I've read on stack overflow that you should always set a width on a floated element. The buttons text might change, from save to apply, and I don't want to have to adjust #ButtonHolder's width every time.
I thought about setting #ButtonHolder's width to auto, but the browser does that by default so it seems unnecessary to set it's width to auto. I'm worried the browser might not always float #ButtonHolder the way I think it should.
A change from "save" to "apply" isn't going to take up much more room, to be honest.
In principle, yes you should always set a width - if you don't, then say you have the button float:left; and another <div> float:right;. If you don't set widths, they're not going to take up the full screen width, so any elements you put in below are going to try to position themselves in the gap between the two.
It is also a good idea to have a 100% width container element for this particular scenario to prevent the described effects.
float and position usually come with a cost. You should try to first find other ways to position elements within your layout. You can should consider other options such as margin, padding, display: inline-block;, text-align ... etc.
I would recommend reading this.
To answer your question directly. Setting width for floats is not written on stone but not doing so, usually means trouble later. At least in my personal point of view.

make element at least a certain *height*

I have a center page column design that simulates a piece of paper. On some pages there is hardly any content, however, I would like to keep the middle column at least, say, 1000px, even if there isn't that much content (to keep the footer at the bottom of their viewing screen). Of course, where there IS more than 1000px's worth of vertical content I would like for the page to scroll normally. Is there an idiomatic way to go at least? Would it be wise to use javascript, can you use javascript?
Look at css sticky footer, at http://www.cssstickyfooter.com, I think this is what you are looking for! Also, you can set a div (The wrapper div) with a min-height: 1000px. This should help you.
Yes, use CSS min-height.
min-height:1000px;
This way you will have at least a height of 1000 px but if the content is larger it will automatically expand.

wicket: how to make div height dependent on another div

I'm a GWT refugee, trying to figure out how to do various Ajax-ish things in Wicket.
I have two divs. I'd like to make the first div's max-height dependent on the height of the second div, with a "more/less" link so that the user can expand the first div.
Example:
The content of both divs is variable, and since div2 has wrapped text in a proportional font, I can't really predict its height until rendered in the browser.
In GWT I accomplished this by adding content to the div1 a line at a time, and if it exceeded the height of div2 (which already had its content rendered), I simply removed the line. Since GWT runs on the client, this is fairly straightforward.
What's the best way to do this in Wicket? I'm expecting to need a little Javascript, but if there is a component that already does this (or makes it easier) I'd be very happy to use it.
With help of pure Wicket I do not think, that there's a way to do this. But maybe the Wicket + JQuery approach will help you achieve your idea...
There seems to be a rather simple JavaScript-solution (except that it doesn't solve the showing-half-a-line-problem but I think that can be solved by toying around with this:
document.getElementById("div1").style.height = document.getElementById("div2").offsetHeight;
Can't this be solved almost completely by CSS? Like adding both DIVs to a third DIV with an overflow:hidden attribute, cutting of the second DIVs contents and expanding the height of the wrapping DIV by JavaScript?
Maybe you'll have to change DIV1 to inline processing so it wouldn't 'push' the lower border of the container or something like this...
Just as a pointer, didn't try it, can't try it right now and not sure if it works but I think, it should. Anyway you or me, someone would have to play around with this to find out...
Hope this helps a little bit.
You could render both fully open (to improve accessibility to non-js users), then restrict the height of Div 1 to the height of Div 2.
So (with jQuery)...
CSS
#div1 { overflow: hidden; }
Javascript
$(document).ready(function() {
var div2_height = $('#div2').height();
$('#div1').height(div2_height);
});
To account for chopping on a line, test the line-height and set the height as a multiple.

Autoresize Element (div) to Fit Horizontal Content

I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.

get div current (rendered) width with javascript

Hey, Ive got an php script dragging some images from a database and displaying them using float:left; so they go left to right.
However unless in the css i define i width for the container they jump down onto a 2nd line.
So the question IS!
How for the life of me could I get it to figure out the width of the content and then set the width attribute via javascript all on the one load.
I did have a slight worry that this wouldnt be easily possible as it wud have had to render the images/layout first to get a width before then adjusting it.
Ideas please people!! x
Your question has to do with how the flows of floats work...
If two images are floated and the sum of their widths is wider than the containing element, they will wrap (similar to the way words in a paragraph wrap).
Visual references describing the flow of "float"ed elements (way too difficult to describe in a few words):
http://css.maxdesign.com.au/floatutorial/introduction.htm

Categories