Develop Reference

Truncate Text - Show full text in Tooltip on mouseover

Currently I output a text from my database with the following code:
if ($data["own_subject"][$x]!="") { <td><p>".$data["own_subject"][0]."</p></td> }
I found a JS function to only show the first 10 characters and once someone does a mouseover the whole text appears. This function is working with the following code and it is working fine:
<script>
var lengthText = 10;
var text = $('p').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('p').text(shortText);
$('p').hover(function () {
$(this).text(text);
}, function () {
$(this).text(shortText);
});
</script>
Now I do not like the style of the outcome and I would like to show the full text in some kind of a tooltip. I am using bootstrap and bootstrap has this function. My problem is now that I do not know how I need to change my JS code to show the full length text in a tooltip. Can someone help me out and show me how I need to change my current code?
I would really appreciate your any help.
Thanks,
Chris

Add your original text in title attribute of p tag which I hope you are already doing.
Add data-toggle="tooltip" data-placement="top" attributes to p tag
Ex
<p data-toggle="tooltip" data-placement="top" title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p>
Initiate as $('[data-toggle="tooltip"]').tooltip() Also you can now remove $('p').hover event.
Ex
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

You can do this using tooltip of bootstrap
<button id="test" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom">
Tooltip on Bottom
$(function() {
var lengthText = 10;
var text = $('#test').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('#test').prop("title", text);
$('#test').text(shortText);
$('[data-toggle="tooltip"]').tooltip();
})
http://plnkr.co/edit/5hHRjULpDlMP3cYhHhU4?p=preview

Try simple html tooltip using title.
if ($data["own_subject"][$x]!="") { <td><p title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p></td> }

You can add title attribute with real text to you element and call bootstraps tooltip init over that elements, also you need to remove current hover handler from your script
$('p').text(shortText);
// Add title with real text to your element
$('p').attr('title', text);
// And all in document ready bootstrap tooltip init for your short text tags
$( document ).ready(function() {
$('p').tooltip();
});
check more about boostrap tolltip here: http://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp

appendTo function not functioning

I am trying to code it such that when you hover and click one word(eg. chocolate, sugar or cocoa", it gives a sentence, click another word, another sentence. and then the rotating words continue rotating.
Any suggestions is deeply appreciated. Thanks, guys:)
checkout my jsfiddle: http://jsfiddle.net/hE2pk/
HTML:
<div id="steps">
<div id="receipe"></div>
<div id="text"></div>
</div>
JS:
var words = [
'<span id="pasta">Penne</span>',
'<span id="meat">Italian Sausage</span>',
'<span id="oil">Olive Oil</span>',
'<span id="onion">Onion</span>'
];
var index = 0;
$(document).ready(function rotate() {
document.getElementById('text').innerHTML =words[(index++)%(words.length)];
if($("#text").is(":hover")){
setTimeout(rotate, 500);
}
else{
setTimeout(rotate, 100);
}
})()
$(function(){
$('#pasta').on('click', function () {
$("<p>Cook 8 ounces of pasta, according to its package directions.</p>").appendTo('#receipe');
$("#steps").html('<div id="text"></div>');
});
});

Your code:
Appends <span id="pasta">…</span> to the DOM
Attaches a click handler to it
Replaces <span id="pasta">…</span> with <span id="meat">…</span> 100ms later
As soon as step #3 finishes, the #pasta span gets obliterated, along with the click handler!
The correct approach is to use event delegation. This is a technique where you attach an event handler higher up in the DOM (on something that you can reasonably expect not to be destroyed, like document), then listen for events that bubble up toward it. If the event originated from an element of interest, you fire your handler!
$(document).on('click', '#pasta', function() { ... });
Here's your example, fixed: http://jsfiddle.net/steveluscher/hE2pk/1/

When click change to text-area, When outside click change back

I am trying to make a function like PHPadmin what they are using on when showing the table, when click the div filed, change to text-area, and when click outside of the div, change it back to the div filed. The code below is wrong, I cannot change back to the div filed when I click outside. Please help me to improve the code.
JS:
$('#editor #gird_edit').bind({
click: function() {
$(this).html('<textarea id="gird_edit">'+$(this).text()+'</textarea>');
},
blur: function() {
$(this).html('<div id="gird_edit">'+$(this).text()+'</div>');
}
});
Html:
<div id='editor'>
<div id='gird_edit'>hallo world</div>
<div id='gird_edit'>hallo world 2</div>
<div id='gird_edit'>hallo world 3</div>
</div>
I only have 8 reputations, I cannot vote you back. However, I sincerely appreciate your helps!

check this jsbin i just made, if you need anything else i'm glad to help.

see jsfiddle
updated jsfiddle
when $(this).html(textarea) is done, div is already blur. so the onBlur didn't work
$('#editor #gird_edit').bind({
click: function() {
var tex = $(this).text();
var textarea = $('<textarea id="gird_edit">'+tex+'</textarea>');
$(this).html(textarea);
textarea.focus();
textarea.blur(function(){
var currentText = textarea.val();
if(currentText == tex)//not change
textarea.parent().text(tex);
else //changed
alert(currentText);
});
}
});
edit 3:
else{
textarea.parent().text(currentText);
//something else
}
find more jquery API

When you first click on the #gird_edit it is a div, so this is a div, and you can replace its contents to change things. However, when you blur away #gird_edit is a textarea, so if you change its contents you're not really changing what you want to change (your just changing the insides of your textarea).
What you want to change is the div that's around the textarea, ie. the "parent" of that textarea. In other words, try:
blur: function() {
$(this).parent().html('<div id="gird_edit">'+$(this).text()+'</div>');
}

Merge two paragraphs together and deleting an element in middle

I have a div contentEditable with paragraphs and appended after each p is a span telling me the length of the paragraph the user can edit the line & thus update the number shown in the span, (done with something on these lines .each(fu..(){ p append '<span>'+ this.length ..)
Let's say something like this:
<div contenteditable="true">
<p>abc<span contenteditable="false" style="position:absolute;right:-2em;backg...">3</span></p>
<p>abce<span ...>4</span></p>
<p>abcfoo<span ...>6</span></p>
<p>abcbar<span ...>6</span></p>
</div>
Have made all the spans uneditable in order to protect the spans and the text, on hitting return a new <p> is created on the next line - all sparky! However I have no way of deleting a new paragraph as the back button on the first letter of a p acts as the browser back button! because its hitting the non editable span.
So I would like to add a button (perhaps on the span) which when clicked will 1. remove the span (not too difficult), 2. merge the 2 paragraphs together.

I hope that's the effect you're looking for: http://jsfiddle.net/AwKkB/
JS
$('span').click(function () {
var parent = $(this).parent(), container = parent.parent();
$(this).remove();
if (container.children().length > 1) {
if (parent[0] === container.children()[0]) {
$(container.children()[1]).prepend(parent.text());
} else {
parent.prev().append(parent.text());
}
}
parent.remove();
});
HTML
<div contenteditable="true" style="width: 180px">
<p>abc<span contenteditable="false" style="position:absolute;right:0em;background: red;">3</span></p>
<p>defg<span contenteditable="false" style="position:absolute;right:0em;background: red;">4</span></p>
<p>hijklm<span contenteditable="false" style="position:absolute;right:0em;background: red;">6</span></p>
<p>nopqrs<span contenteditable="false" style="position:absolute;right:0em;background: red;">6</span></p>
</div>
Best regards!

Something like this should do it:
$(document).on('click', 'span', function() {
$(this)
.prev().append($(this).next().text()).end()
.next().remove().end()
.remove()
;
});
See Fiddle.

I'm not sure whether the paragraphs contain only plain text, but a generalised way would be using .append, so that all elements are left intact: http://jsfiddle.net/tb7xk/.
$("<input>")
.attr({ type: "button", value: "Remove" })
.click(function() {
var $span = $(this).parent();
var c = $span.next().contents().get(); // contents
$.fn.append.apply($span.prev(), c); // pass all contents to .append
$span.next().andSelf().remove(); // remove next paragraph that's left over
})
.appendTo("span");

How to detect mouseleave() on two elements at once?

Answer can be in vanilla js or jQuery. I want to hide a div with the id "myDiv" if the user is no longer hovering over a link with the id "myLink" or a span with the id "mySpan". If the user has his mouse over either element "myDiv" will still show, but the second the user is not hover over either of the two (doesn't matter which element the user's mouse leaves first) "myDiv" will disappear from the face of existence.
In other words this is how I detect mouse leave on one element:
$('#someElement').mouseleave(function() {
// do something
});
but how to say (in a way that will actually work):
$('#someElement').mouseleave() || $('#someOtherElement').mouseleave()) {
// do something
});
How to detect this?

Something like this should work:
var count = 0;
$('#myLink, #mySpan').mouseenter(function(){
count++;
$('#myDiv').show();
}).mouseleave(function(){
count--;
if (!count) {
$('#myDiv').hide();
}
});
jsfiddle

You could use a multiple selector:
$("#someElement, #someOtherElement").mouseleave(function() {
// Do something.
});

You can beautifully use setTimeout() to give the mouseleave() function some "tolerance", that means if you leave the divs but re-enter one of them within a given period of time, it does not trigger the hide() function.
Here is the code (added to lonesomeday's answer):
var count = 0;
var tolerance = 500;
$('#d1, #d2').mouseenter(function(){
count++;
$('#d3').show();
}).mouseleave(function(){
count--;
setTimeout(function () {
if (!count) {
$('#d3').hide();
}
}, tolerance);
});
http://jsfiddle.net/pFTfm/195/

I think, it's your solution!!!
$(document).ready(function() {
var someOtherElement = "";
$("#someElement").hover(function(){
var someOtherElement = $(this).attr("href");
$(someOtherElement).show();
});
$("#someElement").mouseleave(function(){
var someOtherElement= $(this).attr("href");
$(someOtherElement).mouseenter(function(){
$(someOtherElement).show();
});
$(someOtherElement).mouseleave(function(){
$(someOtherElement).hide();
});
});
});
----
html
----
<div id="someElement">
<ul>
<li>element1</li>
<li>element2</li>
</ul>
</div>
<div id="tab1" style="display: none"> TAB1 </div>
<div id="tab2" style="display: none"> TAB1 </div>

While the answer from lonesomeday is perfectly valid I changed my html to have both elements in one container. I originally wanted to avoid this hence I had to do more refactoring for my clients in other html templates, but I think it will pay out on the long term.
<div id="my-container">
<div class="elem1">Foo</div>
<div class="elem2">Bar</div>
</div>
$('#my-container').mouseleave(function() { console.log("left"); });