Develop Reference

How to detect the first word of a string in jQuery?

I currently have a problem related to jQuery.
For the whole story, I'm creating some tooltips, I center them right under the desired trigger using css.
Everything is working, but here is the problem :
I have a <p> tag with some text in it.
The tooltip is generated by the first word of the string, and because of the alignment, the first half of the tooltip is outside of the viewport.
So it looks like this :
And I want to be able to target the first-word with jQuery, in order to write something like :
if( isFirstWord == true ) {
tooltip.css('left','xx%')
}
That will let me position the tooltip properly, only if it belongs to the first word.
I hope you guys got my question, if not, just drop a comment, I'll be glad to give you more informations about it.

One way:
$('something').each(function(){
var me = $(this);
me.html(me.html().replace(/^(\w+)/, '<span>$1</span>'));
});
Basically, for each match (something) you replace the first word with itself ($1) wrapped in tags. The character class \w matches letters, digits, and underscores (thus defining what a "word" is - you may need another definition).
The solution already exist here: First Word in String with jquery

Pass text within a div (number) through calculation in real time?

For lack of a better title, I'm looking to take the example I have in my jsfiddle, and convert it to pull the number that's within a div (it will always be a number):
<div class="output" id="i1">100</div>
And pass that number through a formula, to spit it out in real time to a p tag (doesn't need to be a p tag, could be another div.
<p>200</p> or <div id="i2">200</div>
Where the 200 above, is calculated by adding the original value of the div id #i1, plus 100. Right now, the fiddle shows that when you enter in a value for the input, it spits out the real time calculation.
So the question is, what would it look like where instead of an input value, the function would be pulling the numerical data out of the DIV tag, running it through a function, and spitting it back out into a paragraph tag? I think the bulk of it is completed functionality wise, but can't quite figure out the pulling from DIV text.
Some posts I've looked at already include this one about real time inputs, this one on calculations and displaying, and a few others on here.
SOLUTION
This fiddle shows the solution for me. It's far simpler than I had before. There was a solution given below regarding a listener plugin, which looked pretty good, but way overkill for what I needed.

You may consider using a Observer pattern here.
Check this for more. http://canjs.us/#can_observe

to get the text from a div and then parse it to a float, use this:
parseFloat(document.getElementById('i1').childNodes[0].nodeValue)

This fiddle shows the solution for me. It's far simpler than I had before. There was a solution given below regarding a listener plugin, which looked pretty good, but way overkill for what I needed.
<form id="vcForm">
<div id="i1">100</div>
<p></p>
</form>
​
$("#i1").keyup(function() {
var input1 = parseFloat($("#i1").text(),10);
var input2 = 100;
total1 = parseFloat(input1) + parseFloat(input2);
$("p").text(total1);
}).keyup()​
The value in that first DIV will be dynamic (changing via a slider). Of course, we'll see about real time updates when I expand this out functionally, but for my original question, this answered it.

Div with a jQuery click event bound to it is not firing when clicked?

It could be a rookie mistake, but I've gone over my code enough times doing things such as; pre-pending .select-delete with div, attempted to use document.write("Hello") to see if the event was firing or not.
Here's a link to my jsFiddle: http://jsfiddle.net/gPF8X/5/
I really have no idea what's going on :(.
Any help would be greatly appreciated!
Edit: Linked to the incorrect JSFiddle, relinked to the correct one.

There is no - in your div class name.
<div id="1" class="selectdelete"></div>
$('.select-delete').click( function() {
Got it - id needs to be wrapped in quotes.
var value = $(this).attr('id');

The trigger is firing, but your code is not running because of an error - you're not quoting the string 'id' so it's an undefined value. Use your browser's debugger tool - it will help for this sort of thing.
Beyond that though, I can't say anything further because it's not clear what the desired result is.
Edit There's another issue as well - the selector is not working. You can't use the [ and ] character unquoted inside a jQuery comparison like that. The simplest solution is just not to have those characters in your input names. But you can also use escaping like so: $('select[name=g_country\\['+value+'\\]]').

I know you already accepted my other answer, but I just want to add for the record that there is another way to do it. Specifically, this seems like one of those cases where jQuery is less helpful rather than more. What I would do is change your HTML so the element names were also given as IDs, and then write it like so:
document.getElementById('g_country['+value+']').disabled = true;
document.getElementById('g_url['+value+']').disabled = true;

jQuery match first letter in a string and wrap with span tag

I'm trying to get the first letter in a paragraph and wrap it with a <span> tag. Notice I said letter and not character, as I'm dealing with messy markup that often has blank spaces.
Existing markup (which I can't edit):
<p> Actual text starts after a few blank spaces.</p>
Desired result:
<p> <span class="big-cap">A</span>ctual text starts after a few blank spaces.</p>
How do I ignore anything but /[a-zA-Z]/ ? Any help would be greatly appreciated.

$('p').html(function (i, html)
{
return html.replace(/^[^a-zA-Z]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
});
Demo: http://jsfiddle.net/mattball/t3DNY/

I would vote against using JS for this task. It'll make your page slower and also it's a bad practice to use JS for presentation purposes.
Instead I can suggest using :first-letter pseudo-class to assign additional styles to the first letter in paragraph. Here is the demo: http://jsfiddle.net/e4XY2/. It should work in all modern browsers except IE7.

Matt Ball's solution is good but if you paragraph has and image or markup or quotes the regex will not just fail but break the html
for instance
<p><strong>Important</strong></p>
or
<p>"Important"</p>
You can avoid breaking the html in these cases by adding "'< to the exuded initial characters. Though in this case there will be no span wrapped on the first character.
return html.replace(/^[^a-zA-Z'"<]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
I think Optimally you may wish to wrap the first character after a ' or "
I would however consider it best to not wrap the character if it was already in markup, but that probably requires a second replace trial.

I do not seem to have permission to reply to an answer so forgive me for doing it like this. The answer given by Matt Ball will not work if the P contains another element as first child. Go to the fiddle and add a IMG (very common) as first child of the P and the I from Img will turn into a drop cap.

If you use the x parameter (not sure if it's supported in jQuery), you can have the script ignore whitespace in the pattern. Then use something like this:
/^([a-zA-Z]).*$/
You know what format your first character should be, and it should grab only that character into a group. If you could have other characters other than whitespace before your first letter, maybe something like this:
/.*?([a-zA-Z]).*/
Conditionally catch other characters first, and then capture the first letter into a group, which you could then wrap around a span tag.

choose javascript variable based on element id from jquery

I feel like this is a simple question, but I am still relatively new to javascript and jquery.
I am developing a site for a touch interface that uses unordered lists and jquery .click functions to take input data. I have a section to input a m:ss time, with 3 divs, each containing a list of digits for time. I need to get the input for each column and set it as a variable. I originally designed the inputs to change form inputs, because I didn't understand javascript very much. It was easy to change the 3 hidden inputs by using div id's, but I can't figure out how to do it now with javascript variables.
Here is my original jquery code...
$("div#time>div>ul>li").click(function() {
var id = $(this).parents(".time").attr("name");
var number = $(this).html();
$("input#"+id).val(number); });
The last line sets one of 3 hidden inputs equal to whatever was clicked. I need to make it so separate variables take the inputs, then I can manipulate those variables however I want.
Here's a short snippet of the html, to have an idea of how jquery grabs it.
<div id="time">
<h1>Time</h1>
<div name="minute" class="time" id="t_minute">
M :
<ul>
The full time html is here: link text
Thanks everyone!
I've been using SO to answer many questions I've had, but I couldn't find something for this, so I figured I would join, since I'm sure I will have more questions along the way.
So I have tried adding the following, and I still can't get it to work right.
window.myValues[id] = number;
event[i].min = myValues["minute"];
event[i].sec = myValues["second"];
event[i].sin = myValues["single"];
event[i].time = String(event[i].min) + String(event[i].sec) + String(event[i].sin);
I tried it both with and without the quotation marks. I have not used window.* for anything, so I'm not very sure how to handle this.

First thing to mention here, don't be unnecessary specific. In your example
$('#time').find('li').click()
should be enough.
If I understand you well, you want to store the some data. You might want to use
jQuery's $.data method. Example:
$('#time').find('li').click(function(){
var $this = $(this);
var name = $this.closest('.time').attr('name');
$.data(document.body, name, $this.html());
});
This would store the html of the clicked li in a global Object, which can be accessed like
alert($.data(document.body, 'minute'));

you should be able to reference the variable from the window[] object, so something like window[id] should do the trick for referencing the variable.