JavaScript Tip- Dynamic Positioning of Text Files

When working with text in Flash, sometimes I need to work with a Dynamic text field that adjusts height. Since the textfield doesn’t change its position when the height is changed, that could make for some weird results if I wanted the textfield to be vertically centered. To accommodate for this, I check to see how many lines are in the textfield, and if they are greater than a certain number (usually 1), I move the entire textfield up by half the height of a single line of text to keep things looking pretty.

In native JavaScript, however, you can’t ascertain how many lines are in a div with text in it. So here’s what I did to accommodate for that. Note, I did this for a div where the number of lines of text is at maximum 2. You may need to play around with the math a bit for greater numbers.

1) Set the div’s height to be the same height as the line of text, and set the overflow to visible.
2) Put in your text with .innerHTML
3) After the div is on the DOM, check the div’s scrollHeight, which is the key to finding out how tall the text is in total, and not just in the div’s initial area. If the scrollHeight is greater than the height, move the text up by an amount of your choosing.

Here’s what the code looks like in general.


this.Elements = {};
this.Elements.textHeight = 18; //Height of the line of text.
this.Elements.textTop = 80; //Top of the text div in relation to the parent div or DOM
this.TextDiv = document.createElement('div');
this.TextDiv.setAttribute("id", "modelText");
//Set other styles
this.TextDiv.style["top"] = String(this.Elements.textTop) + 'px';
this.TextDiv.style["width"] = "200px" //Could be any width, just using a magic number here.
this.TextDiv.style["height"] = String(this.Elements.textHeight) + 'px';
//Other styles
this.TextDiv.innerHTML = "This text may change over time. If so, call this.checkHeight for more information.";
document.body.appendChild(this.TextDiv); //This may be inserted into another div if you'd like.
this.checkHeight(this.TextDiv, this.Elements.textTop, this.Elements.textHeight);
//This is called in case you have multiple text divs and to ensure that you don't get any numbers mixed up.

//Called elsewhere in this...
checkHeight: function (txt, h, t) {
if(txt.scrollHeight > h) {
txt.style.top = String(t - h * .5) + "px";
} else {
txt.style.top = String(t) + "px";
}
}

Hopefully this helps you in some way. I know it helped me. :)

Posted in Programming | Tagged , , | Leave a comment

Motion Graphics Demo Reel!

This is posted on my portfolio, too, but I figure I could put it on the main page as well.

Posted in Channel 78 Productions, Motion Graphics, Movieoke, Typography, Uncategorized, Videos | Leave a comment

Wow… I need to update this page more.

So… what’s happened over the last several months?

Well, I’ve been to Channel Awesome a few times to help out with their upcoming game show.

I turned 34.

I’ve been to MAGFest, and I plan to go to ConBravo.

Saw the Late Live Show’s appearances in Sketchfest.

That’s about it. Does anyone even read this page?

Posted in Uncategorized | Leave a comment

THIRD TIME’S A CHARM

Well, I didn’t win the WLS Next Talk Star Contest, but I was once again a finalist. I’m one of two people who made it to the finals both years. Next year will be different. I’ve got to be more prepared for the sort of questions posed to me in the finals and really get my contacts together in terms of getting the word out.

Posted in Radio | Leave a comment

SECOND TIME’S A CHARM

I’m a semifinalist for the WLS Next Talk Star Contest.

Click here to VOTE!

Then VOTE AGAIN! and AGAIN!

Posted in Radio, Upcoming Appearances | Leave a comment