Holiday Gifts for Web Developers

By Beacon News | Published December 20, 2013 | Categories: Web Development

Season’s greetings from Beacon! Holiday Wreath 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:

and suddenly you'll notice that this function is defined on your page "__doPostBack" and with it you can post data directly to the back end. By calling the function with a target and an argument like this:

__doPostBack("MyTarget", myData);

your data will be passed to this snippet on the back end:

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 &lt;&gt; 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!

Holiday Gifts for Web Developers

Recent Posts

Let's get to work!