Tips and tricks

Calculate Text Width with jQuery

This jQuery plugin should calculate the textwidth of elements.

jQuery.fn.textWidth = function(){
    var _t = jQuery(this);
    var html_org = _t.html();
    if(_t[0].nodeName=='INPUT'){
        html_org = _t.val();
    }
    var html_calcS = '' + html_org + '';
    jQuery('body').append(html_calcS);
    var _lastspan = jQuery('span').last();
    //console.log(_lastspan, html_calc);
    _lastspan.css({
        'font-size' : _t.css('font-size')
        ,'font-family' : _t.css('font-family')
    })
    var width =_lastspan.width() + 5;
    //_t.html(html_org);
    _lastspan.remove();
    return width;
};

Mode of usage:

alert($('#theelement').textWidth());

PS: Works on input elements too.

{"type":"main_options","images_arr":"'#ffffff'","enable_ajax":"off","soundcloud_apikey":"","bg_isparallax":"off","bg_slideshow_time":"0","bg_transition":"slidedown","site_url":"https:\/\/digitalzoomstudio.net","theme_url":"https:\/\/digitalzoomstudio.net\/wp-content\/themes\/qucreative\/","blur_ammount":"26","width_column":"50","width_section_bg":"","width_gap":"30","border_width":"0","border_color":"#ffffff","translate_cancel_comment":"Cancel reply","translate_leave_a_comment":"Leave a comment","translate_leave_a_comment_to":"Leave a comment to","is_customize_preview":"off","width_blur_margin":"30","gallery_w_thumbs_autoplay_videos":"off","content_enviroment_opacity":"30","menu_enviroment_opacity":"70","base_url":"https:\/\/digitalzoomstudio.net"}
{"type":"darkfull"}