Holiday Gifts for Web Developers

Published December 20, 2013 | Categories: Web Development
Season’s greetings from Beacon! Today I’ve got a couple handy gifts that can help solve some tricky web development problems.
First lets unwrap how you can calculate line height on a client’s machine. This can be helpful when trying to truncate a block of text to not be more than say 3 lines tall. In order to do this across various browsers, devices, and zoom settings you need to see exactly how the font is rendered to the screen. To test this you need to sacrifice a chicken… sort of. See below:
// calculate line height
$chicken = $('
').css({
width: '100px', //more than wide enough for single characters
position: 'absolute', // don't break your css
left: '-1000px' // position far off-screen
}).html('1
2
3'); // add three lines
$('body').append($chicken); // make the browser render it
var lineHeight = $chicken.height() / 3; // average height per line in this browser
$chicken.remove(); // sacrifice the chicken
You may have to add certain styling rules to the chicken if you want to measure a certain kind of font or what have you, but that’ll be different for each implementation. Now that you have that you can use whatever method you choose to measure individual line lengths to fit your container and still truncate properly, but one way I recommend is by initially truncating your string to the minimum character count that can fit in your area (like in a string with nothing but apostrophes) and then truncating by removing whole words until the element height is equal to 3 * lineHeight.
Lets see if there’s anything else to unwrap… Oh look here, have you ever wanted to post a javascript object (or array of objects) to your code behind and maybe pass the data along to the database? Did you know that by simply adding an empty asp control that uses postbacks that the page will come pre-equipped with a javascript function that allows you to do just that? Simply add this on your design file:
__doPostBack("MyTarget", myData);
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack Then
Dim eventTarget As String = Me.Request("__EVENTTARGET")
Dim eventArgument As String = Me.Request("__EVENTARGUMENT")
If eventTarget <> String.Empty AndAlso eventTarget = "AddNewQuicklink" Then
Dim ser As New Script.Serialization.JavaScriptSerializer
Dim myDataArray() As MyDataObject = ser.Deserialize(Of MyDataObject())(eventArgument)
End If
End If
End Sub
In my example the javascript variable “myData” is a json array, and the vb.net type “MyDataObject” is a structure with matching properties so that the entire array can be quickly digested by the vb.net code. This also works in C#, though you’ll have to update the syntax.
I hope these gifts help you as you develop your own, hopefully festive, websites. Until our next festive update, Happy Holidays!
Recent Posts



