Develop Reference

document.execCommand - insertParagraph isn't working

I'm trying to toggle the application of <p>...</p> tag around the selection in a contentEditable, for which I'm using
document.execCommand('insertParagraph', false, null);
Forget about toggling the p-tag, I'm not able to apply the tag to the selection. Instead, it is giving
<div>
<br>
</div>
<div>
<br>
</div>
This is happening with all the browsers (chrome, firefox, IE). It is removing the selection and creating the above empty divs.

I know its bit late but i found the solution
document.execCommand('formatblock',false,'p');
It worked for me in both chrome and firefox.

My javascript to removeClass + addClass when click only work on Chrome but not Firefox or IE

For some reason, my piece of javascript to remove/add class when clicking on a link only works on Google Chrome. On Firefox, it executes once, then doesn't repeat. On IE, it just straight out doestn't work at all. (latest version of Firefox and Chrome, IE 11)
If anyone could point me in the right direction, that'd be much appreciated!
Simple JSFiddle of the issue here: http://jsfiddle.net/UDxtM/
This is the javascript:
$('[data-toggle="tab"]').click(function() {
$('.tab-pane').removeClass('animated flipInY');
$('.tab-pane').addClass('animated flipInY');
});
Some dummy content:
<ul class="main-nav">
<li>Front</li>
<li>Back</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="front">
<img src="http://lorempixel.com/400/200/" />
</div>
<div class="tab-pane" id="back">
<img src="http://placehold.it/400x200" />
</div>
</div>
Edit #1:
The CSS transition is from animate.css http://daneden.github.io/animate.css/. It works flawlessly on modern web browsers if I just use them without the piece of javascript there. I don't think the CSS is the problem.
Edit #2:
Apparently it works on others' IE10 and IE11 but just not mine. That still leaves the problem with Firefox only play the code once.

You are removing the classes and adding them again immediately after – so if for performance optimization reasons the browser decides not to do a re-paint in between those two actions, there will be no visible effect at all.
By using a small timeout to “de-couple” adding the classes again, it seems to work in FF as well:
$('[data-toggle="tab"]').click(function () {
$('.tab-pane').removeClass('animated flipInY');
setTimeout(function () {
$('.tab-pane').addClass('animated flipInY');
},
10);
});
http://jsfiddle.net/UDxtM/3/

Can't append li into ul with Jquery

Been going through these 3 lines for the past 15 minutes, but i just don't see it...
EDITED CLASS NAMES.
html
<div class="parent" >
<ul class="child" style="height:auto !important"></ul>
</div>
jquery
$(document).ready(function(){
$(".parent ul").append('<li>wtf</li>');
});
I've tried appending to .child, to .parent ul.child
no luck
Edit: when i look at the fiddle in the answer bellow, it works. I copy the same code and it fails. I tried all browsers. same thing.

Your code:
$(document).ready(function(){
$(".1 ul").append('<li>wtf</li>');
});
Works fine.
Demo
Problem is not in code, you added to your question. Are you sure you included jquery library?
Please, use firebug tool or any other tool to debug your code (chrome developers tools (CTRL+SHIFT+J), developers tools in ie (possibly F12), developers tools in Firefox (CTRL+SHIFT+J). You can find some good answers here (read answers).
In additional:
As mentioned in comments to your question (and at w3cschools website):
Do NOT start a class name with a number!
So use this:
jQuery:
$(document).ready(function(){
$(".parent ul").append('<li>wtf</li>');
});
HTML:
<div class="parent" >
<ul class="child" style="height:auto !important"></ul>
</div>

How to prevent event-bubbling from a textarea while keeping it editable?

I have a listview in jQuery mobile where each entry contains several lines of text.
Clicking on the entry is supposed to replace some parts of the text with a <textarea> to make it editable. Clicking on the entry again should again replace the textarea with plain text (now edited).
While editing the text, the user should be able to click around within the textbox to select parts of the text or move the cursor around. To prevent click events from the textarea from bubbling, I use stopPropagation() on the event and that works quite nicely.
However, while this works in Chrome & Safari, both Firefox and Internet Explorer do not move the cursor nor let the user select parts of the text within the textarea.
Is there something I am missing here? (For Firefox, I am using version 19.0.2 on Windows 7, if that is relevant. I have tried using preventDefault or returning false, but that did not work - and why should it?)
I have created a JSFiddle here
The html code is
<ul id="listid" data-role="listview" data-filter="true" data-iconpos="center" data-split-icon="arrow-u" data-theme="c" data-split-theme="b" data-inset="true">
<li><a href="#" id="link1">
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>
</p></a>
This does something else
</li>
</ul>
and the respective JavaScript is (loaded on body.onLoad here, but that is just for the JsFiddle):
window.toggled = false;
$("#link1").click( function(e){
var textarea = $("#textarea1").toggle();
var comment = $("#comment1").toggle();
if(window.toggled){
comment.html(textarea.val());
}
else{
textarea.val(comment.html());
}
toggled = !toggled;
});
$("#textarea1").click(function(e){
if(console && console.log){ console.log(e);}
e.stopPropagation();
});
Please ignore the not-quite-so-elegant solution for toggling the textarea.

IE is not happy with the textarea inside an anchor tag. See http://jsfiddle.net/zCfRu/
<a href="#" id="link1">
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
</p>
</a>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>

Jquery .next IE6/7 issue

I've been having nothing but problems with this script for a simple hide/show gallery of testimonials.
I think the java is somewhat self explanatory...
When the page loads, I tell it to show the first testimonial in the line up (as the css is display:none) and gives it a selected class name. Works fine in across the board.
On click I want it to remove the selected class place it to another, and then hide the first testimonial and pull up a corresponding one. Except all that happens here is the first testimonial disappears (hide) and the selected class is added.
<script type="text/javascript">
$(document).ready(function(){
$(".testimonial:first").show();
$("li.testID:first").addClass("selectedName");
$("li.testID").click(function(){
$("li.testID").removeClass("selectedName");
$(this).addClass("selectedName");
$(".testimonial").hide();
$(this).next(".testimonial").fadeIn("slow");
});
});
</script>
Example of markup
<ul id="testName">
<li class="testID">Persons Name</li>
<blockquote class="testimonial">
<span class="bqStart">“</span>
Testimoinal here
<span class="bqEnd">”</span><br /><br />
<span class="testAuthor"><b>Name</b><a target="_blank" href="#">Website</a> Company</span>
</blockquote>
As a side note this is working fine in FF and Safari
Your help is greatly appreciated.
Thanks.

It's probably not working in IE because it's not valid markup: you can't have a blockquote as a direct child of a UL, so IE probably stores them in some weird place in the DOM tree which means .next doesn't find them. Can you move the blockquote elements into the li?

Is .testimonial the class you have given to your lists? <ul> or <ol>
It seems as if you are trying to get the next testimonial list to show, when infact you are actually getting the next <li> which has a class of .testimonial which I suspect is incorrect as you are using .testID as the class for your list items.
Please try this instead:
$(this).parent().next(".testimonial").fadeIn("slow");