Question

I’m using jQuery Expander plugin inside of a jqGrid column. I want to set the slice point to dynamically be a little less than the non-fixed column width. I can easily get the column with in an integer but I can’t figure out how to pass this to the Expander settings.

// get comment column width dyanmically
var commentswidth = document.getElementById('list_comments').style.width; // will return width in string (e.g. "550px")
var sliceplace = parseInt(commentswidth) - 40; // convert string to int and subtract offset
alert(sliceplace); // test to see that it is correct

// use jQuery Expander to shorted comment boxes
$('div.expandable span').expander(
{
    slicePoint: sliceplace,
    expandEffect: 'show',
    expandText: ' ...',
    expandPrefix: '',
    userCollapseText: 'less'
}
); //end expander

The sliceplace variable gets set correctly but Expander does not function (as the variable cannot be read I assume). When I replace ‘sliceplace’ in Expander with an integer it all works perfectly.

Answer 1

I’m dumb. Expander is using number of characters, so the width needs to be converted into a ballpark number of characters. I chose a width of 8px as the average character width and it works.

// get comment column width dyanmically
var commentswidth = document.getElementById('list_comments').style.width; // will return width in string (e.g. "550px")
alert(commentswidth);
var sliceplace = parseInt(commentswidth)/8; // convert string to int divide by an average character width to get number of characters to slice at
sliceplace = parseInt(sliceplace);
alert(sliceplace);

// use jQuery Expander to shorten comment boxes
$('div.expandable span').expander(
{
    slicePoint: sliceplace,
    expandEffect: 'show',
    expandText: ' ...',
    expandPrefix: '',
    userCollapseText: 'less'
}
); //end expander