We Keep Coding

Calculate the true pixel width of a given string

I want to calculate width in px for given text in span element. I check several answers in Stackoverflow. However nothing work for me :(. I am trying to figure out what I am doing wrong. Here is jsFiddle link. And here is code:
$.fn.textWidth = function(){
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(html_calc).css('font-size', this.css('font-size'));
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
var ts_name = $('span#ts_name');
var ts_name_text=ts_name.text().trim();
var ts_name_p_box_width = $('div#container-testset-name').innerWidth()-100;
var text_width = $(ts_name).textWidth();
My result for text_p_box_width is 737px and for text_width 715px. However it is clear from html view in Chrome browser text size is bigger than its container. SO what is my mistake? Thank you in advance.
P.S. If you need some clarification please leave as comment.
Edit: I saw similar answer of #LeeTaylor in other question. However it doesn't solve my problem. Because in my case text inside of span element. But in your case text inside of div. I can not change span's display property to block. So for my case this does not work. I tried to generate dynamically two elements using jQuery and try to fetch width. But it is 0. I found that since this dynamically created objects does not included to DOM tree and CSS not applied it will work.
`var ts_name=$('span#ts_name').text().trim();
var text_container = $(document.createElement('span')).html(ts_name).attr('id', 'input_text');
var block_container = $(document.createElement('div')).html(text_container).css({display:'block'});
block_container.css({width: '3000px'});
console.log($(block_container).find('span#input_text').width());
console.log($(block_container).find('span#input_text').outerWidth());
console.log($(block_container).find('span#input_text').innerWidth());
I did because I want to use your solution however it does not work. So do you have any idea on that?
SOLUTION: I figure out why my code is not working I just change only one value in css like this:
div#ts_designer>div#container-testset-name.c-group-inner-row span#ts_name
{
position: absolute;
left: 100px;
right: 0;
top: 0px;
bottom: 0;
width: auto!important;
white-space: nowrap; /*This line added*/
}
Here is updated jsFiddle link.
P.S. I will up vote your answers as reward to your answers. However I cannot accept one of them.

Have you tried using scrollWidth?
This might do what you want it to: http://jsfiddle.net/eJMAD/
scrollWidth might not work the same across all browsers though, so maybe someone else has a better solution more cross-browser friendly.

I use this utility function:
HTML:
<div>hello this is a test</div>
jQuery:
$.fn.textWidth = function()
{
var old = $(this).html();
$(this).html( $("<span>").html( $(this).html() ) );
var width = $(this).find("span:first").width();
$(this).html(old);
return width;
};
alert("Width of the text in the div = " + $("div").textWidth());
jsfiddle

jQuery working in Firefox, Safari but not in Chrome

I have written some code with jquery works in firefox, safari and ie9. But chrome does not like it. No obvious msgs in chrome console coming up. I am hitting a wall hopefully someone can shed some light. Script just show/hides some tooltips. Any ideas?
fiddle here, changed code still no change to behaviour.
http://jsfiddle.net/qAfwJ/
$(document).ready(function(){
//custom toolTip Written by CASherwood but not working in ie9/chrome
var ShowId;
var id;
var contentholder = $(".contentBox");
var toolTip = $(".info");
var idHashString = '#info';
var idString = 'id';
function showToolTip(name, id){
id = name + id;
$(id).fadeIn(1000);
}
function hideToolTip(name, id){
id = name + id;
$(id).fadeOut(1000);
}
$(toolTip).mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
$(contentholder).mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
});

There are a few things here,
You are setting a variable var toolTip = $(".info");
And then using this same variable to add a function to it.
What you are doing here is actually
$($(".info")).mouseover(
Instead of
var toolTip = $(".info");
toolTip.mouseover(
Also you might consider using
jquery.hover(handlerIn(eventObject) , handlerOut(eventObject) );
http://api.jquery.com/hover/

Ok one thing I'm noticing here is that you are wrapping some elements twice with the jQuery selector.
var contentholder = $(".contentBox");
$(contentholder).mouseleave(function(){
...
});
Basically what evaluates to is this -
$($(".contentBox"))
That doesn't look too good and I'm not too sure if it would work as expected. Even if it does, the issues of cross browser compatibility might come into play and I believe this is what you are experiencing. If you have already captured the element and are not just storing the selectors as strings, then there is no need to wrap the element again with the $ syntax.
var contentholder = $(".contentBox");
contentholder.mouseleave(function(){
...
});
When you are constructing selectors from strings and variables, you should do so in a similar way to this -
var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);

I'd start by changing
$(toolTip).mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
$(contentholder).mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
to
toolTip.mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
contentholder.mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
since your toolTip and contentholder variables are already jquery objects.

I'm not sure and haven't tested it, but what if you try to move the two functions (showToolTip() and hideToolTip()) before or after the $(function(){});
The might get seen as inner functions of some sort instead of global functions and that might be a thing.

Binding events to a jquery object not working

I've been trying to bind events to jquery objects (code below) but its really not working at all. Could somebody offer me a suggestion? Thanks!
var img = thumbnail[0].appendChild(document.createElement('img'));
img.className = 'smallboard';
img.src = 'res/smallboard' + i + '.jpg';
img.onload = function() {console.log('small board loaded.');}
img.style.top = (8-i)*height+5 + 'px';
img.style.left = 4 + 'px';
var jqimg = $(img);
jqimg.bind('click', function(){
console.log(i + '');
show_board(i-1, true);
});
Here, thumbnail is a jquery element and i is a small whole number. I had problems with binding it in another way as well. (code below)
highlight = $('<div id="level_highlight"></div>');
highlight.css('height', height + 'px');
highlight.css('width', width + 'px');
highlight.css('display', 'inline');
highlight.css('left', posx + 'px');
highlight.css('top', posy + 'px');
highlight.bind('mouseover', function() {console.log('mousing over highlight');});
Its not working here either. I feel I am making a silly error somewhere. I'm using Chrome.
Thank you!

seems to work for me...
see my jsFiddle example. Am I missing something?

Is it just an error in your retranscription here or did you froget
the var before highlight ?
var highlight = $('');
Did you append it somewhere in the DOM ($('body').append(highlight);) or something, if it already exists, you should do var highlight = $('#level_highlight'); instead

Thanks guys. The answer was that since this code is an over-simplification of the code-base, I'd missed out a part where the z-index for the container element for this section was set to -10. Set that part correct and it worked like a charm.
Thanks.

Converting simple Javascript to jQuery

I have this:
<script type="text/javascript">
window.onresize = fontResize;
function fontResize() {
document.body.style.fontSize = parseInt(document.documentElement.clientWidth/100) + 'px';
}
</script>
Could someone have a crack at converting this to jQuery please, i have DIV's with class "features" and i need the P text to fill them when they are resized, so i need to font-size to grow/shrink along with the DIV. That make sense?
Thanks

Is this what you are looking for?
window.onresize = fontResize;
function fontResize() {
$('body').css('font-size',parseInt($('body').css('width'))/100) + 'px');
}

Here... jQuerified
$(document).ready(function(){
$(window).bind('resize initialSize',function(){
$('body').css('font-size', ($(window).width()/8) + 'px');
}).trigger('initialSize');
});

This one takes in account the initial size
function fontResize(){
$('body').css('font-size', ($(window).width()/8) + 'px');
}
fontResize();
$(window).resize( fontResize );
http://jsfiddle.net/Hpgfp/1

Different background position every click

Im trying to build sort of slide where when click on link ".animate" will change it position ( every time 100px more)
This:
$(function(){
$('#m-main').click(function(){
$('slide').animate({top : "100px"}, {duration:500})
})
});
will work only once.
How can I make this working?
Many thanks for your help.

$(function() {
$('#m-main').click(function(){
$(this).data($(this).data('pos') + 100);
$('slide').animate({top : $(this).data('pos') + 'px'}, {duration:500})
})
});

When it runs it sets the top padding to 100px, so after the first time it's just setting it to the same value it already has. You need to increment the value each time.
$(function(){
$('#m-main').click(function(){
var current = $('slide').css('top');
current = current + 100;
$('slide').animate({top : current+"px"}, {duration:500})
})
});
code above untested

Try using a counter instead of just top : "100px". It is just doing it once because essentially your setting top to 100px and then setting top to 100px again which is just keeping it where it is. You want it to move to 200px and then to 300px, etc.
Try this:
var fromTop = 100;
$(function() {
fromTop = fromTop + 100;
$('#m-main').click(function() {
$('slide').animate({top : '"' + fromTop + 'px"'}, {duration:500})
})
});

It looks like you've got some error in the query string in the click handler. $('slide') will select all <slide> elements, which I assume you have none, perhaps $('.slide') or $('#slide') is what you're after?
If you just keep a reference of the position you'd like the element to move to and increase that by 100 each time (see chaos's answer) then you should be right.

$(function(){
var pos=100;
$('#m-main').click(function(){
$('slide').animate({top : pos+'px'}, {duration:500});
pos=pos+100;
});
});

Try this:
$('#m-main').click(function(){
var slide = $('.slide', this),
posY = parseInt(slide.css("background-position").split(" ")[1]);
slide.stop().animate({backgroundPosition: "0 "+(Math.ceil(posY/100)*100 + 100)+"px"}, {duration:500});
});