But I can't seem to make it work. What could the issue be here? It insert the button, but the onclick action doesn't work. I've tried like this as well:
I'm working on a WYSIWYG editor. I have a textarea that I'm using for the editing. Also, I have a button to insert images. When I click the button, a modal window opens, and the user can upload images, enter title, etc.
The problem is, that once I click inside the modal window, the textarea loses focus—and then the image can't be inserted at the cursor position. How do I prevent the textarea from losing focus?
Here's what I'm trying to do: When I click inside a text field, a div with id #formatting appears. The #formatting div contains... well, formatting options (like bold, italic, etc.) placed in <button> elements. When I click outside the text field the #formatting div has to disappear—unless the click is inside the #formatting div's <button> elements.
$("#textarea").focus(function() {
$('#formatting').slideDown(200);
});
$("#textarea").blur(function() {
$('#formatting').slideUp(200);
});
I was thinking about using an if statement, but can't seem to make it work.
I'm playing around with the selectable feature. I grabbed most of this from an example. I want the background color of the selected element to change to red, but when I choose another element, the background color should return to original, and let the new selected element be red. How can I do this?
I'm building a WYSIWYG editor in jQuery, and right now I'm working on inserting links. I am using HTML5's contenteditable feature, that allows e.g. a div to be edited:
<div contenteditable="true"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
When I select text, I want to click on a button, open a modal window, paste a link and click ok in order to insert the link. I have it working with a JavaScript prompt like this:
<button class="link" onclick="document.execCommand('CreateLink',false,window.prompt('Paste a link','http://'));"><img src="interface/images/link.png" alt="link" width="" height="" /></button>
Instead, because I want to be able to style the prompt, I want to use a simple modal window with a text field and a button inside.
<div id="link_panel">
<div id="link_wrapper">
<div class="modal_description"><h2>Link</h2><p>Past link or e-mail</p></div>
The problem is, that when I click inside the text field, the selected text in the contenteditable div becomes unselected, and I'm not able to insert the link.
So, I'm creating a health meter with CSS and HTML.
I have two divs; the outer one is the background, and the inner one is the actual health. The outer div has a fixed width (let's say 200px), and the width of the inner div is set in percentage—thus, when it's 50%, it fills out 50% of the outer div.
<div id="outer">
<div id="inner"></div>
</div>
I'd like to be able to let the percentage number be a variable that can be targeted from jQuery, so that I can define the width from within jQuery.
The background color of the inner div should also change according to the percentage (green at 100%, yellow at 50%, red at 10%, etc).
So, I have a content div and a floating sidebar (that's draggable). When I click on the content div, I want another div (with id #formatting) to appear inside the sidebar. This is already working.
When I click outside the content div I want the #formatting div to disappear — but if I click inside the #formatting div it also disappears. How can I get it to stay there when I click inside the sidebar?
Should I use an if statement, or are there other options?
<h2><a href="#">Should Comment Forms Have More Fields?</a></h2>
</div>
<div class="article_date">
Feb 11th 2010
</div>
<div class="article_category">
Discussion
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
I'd like that when I click the outer div, p is shown (it's working). But I'd also like, that when the H2 link is clicked, p doesn't show - instead it should follow the link. How can I do that?