I'm working with raphael.js to draw and I want to modify the title attribute (change color, font size, etc., ).
circle.attr({
title: 'This is a circle.',
fill: 'red'
});
Here's my jsfiddle.
Is there a way to do this? Or maybe add custom tooltips to raphael objects?
Edit: Here's an expected modification: I wanna print "Hello World" on my tooltip. "Hello" in red, then a "new line" character and finally, "World" in blue color.
This doesn't work but might help to get an idea on what I'm trying to do.
circle.attr({
title:"<font color="red">Hello</font><br><font color="blue">World!</font>"
});
Raphael does not have shorthand functions for this, but you can very easily alter the rendered SVG elements by simple DOM manipulation :
circle.node.onmouseover = function() {
this.style.cursor = 'pointer'
this.querySelector('title').textContent = 'This is a new title';
}
forked (now actually working) fiddle -> http://jsfiddle.net/nheL8add/
Update : I now realize that you are actually asking : "does a HTML element title attribute supports HTML?" (I was totally focusing on changing the title element, not the part efter "Edit"). The answer is no. The title attribute of a circle element is completely the same as any other title attribute in all other HTML elements. But you can use a tooltip script like qTip2 or similar to get the desired effect. I recommend qtip2 since it support <SVG> elements. Skip the title attribute on the circle element itself and use qTip2 instead :
$("#canvas circle").qtip({
style: { classes: 'tooltip' },
content: { text: '<font color="red">Hello</font><br><font color="blue">World!</font>' },
position:{ my:'center center', at:'center center' },
show: 'mousemove mouseenter mouseover'
});
yet another forked fiddle -> http://jsfiddle.net/ajLnhete/
Assume the current URL is: http://server.com/?key=value#/foo
In a normal anchor tag link, the following will just affect the anchor hash:
LINK
And the URL becomes: http://server.com/?key=value#/bar
However, I am adding links in a template in a web component that was imported from another .html file. Therefore, for the anchor hash to be relative to the loaded page instead of the component's html, I need to specify the link as follows:
LINK
However, a link like this causes the query search string to be lost: http://server.com/#/bar
Is there a clean solution here? Workaround, of course, is to create a new element inherited from that manually updates the window.document.location.
So, my current workaround is to just create a new anchor tag inherited from <a> that accepts an attribute hash instead of href (using Polymer 0.9):
<dom-module id="a-hash"></dom-module>
<script>
Polymer({
is: 'a-hash',
extends: 'a',
hostAttributes: { href: "" },
properties: { hash: String },
listeners: { tap: '_ontap', click: '_onclick' },
_onclick: function(e) { e.preventDefault(); },
_ontap: function(e) {
e.preventDefault();
document.location.hash = this.hash;
}
});
</script>
Usage:
Link: <a is=a-hash hash="/client/side/route">Click me</a>
I found a much cleaner solution to adding relative links in a new web component. Just add a:
<base href="../../" />
to the top of the component's .html file (assuming you keep your custom elements in an elements/element-name subdirectory) and then you can just add normal anchors such as:
<a href="#/bar>LINK</a>
And it will be created relative to the original app's URL instead of the component's html without losing the query string or reloading.
Just remember that ALL links in the component will now be relative to the root of the app instead of the component, so other references may need to be updated accordingly.
I use tinymce for a webpage that dynamically generates at least 5 texts.
The configuration I use only works on the first textarea unfortunately.
tinyMCE.init({
height : "300",
mode : "exact",
elements : "content",
theme : "simple",
editor_selector : "mceEditor",
...
<textarea class="mceEditor" name="content" rows="15" cols="40">content</textarea>
What's the configuration to enable tinymce editing in all textarea's.
If you're using "exact" mode you'll need to specify the ids of the elements you wish to convert to editors.
function initMCEexact(e){
tinyMCE.init({
mode : "exact",
elements : e,
...
});
}
// add textarea element with id="content" to document
initMCEexact("content");
// add textarea element with id="content2" to document
initMCEexact("content2");
// add textarea element with id="content3" to document
initMCEexact("content3");
Or, you can use the "textarea" mode, which indiscriminately applies the editor to all textareas.
function initMCEall(){
tinyMCE.init({
mode : "textareas",
...
});
}
// add all textarea elements to document
initMCEall();
Just remember that if you're creating textareas dynamically, you will need to call tinyMCE.init() after creating the elements, because they need to be existing for tinyMCE to be able to convert them.
Here is the documentation on modes.
For TinyMCE 4.0 you have to use a selector or defining a tinymce.init object/method for each desired configuration (https://www.tinymce.com/docs/get-started/multiple-editors/).
For example, this is a page with 3 editors:
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#myeditable-h1',
toolbar: 'undo redo'
});
tinymce.init({
selector: '.standard-editor'
});
</script>
</head>
<body>
<form method="post">
<h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
</form>
<form method="post">
<div id="myeditable-div1" class="standard-editor">
<p>This section1 of content can be edited...</p>
</div>
<div id="myeditable-div2" class="standard-editor">
<p>This section2 of content can be edited...</p>
</div>
</form>
</body>
</html>
You should use different mode in your configuration. For example mode: "specific_textareas" to work for all textarea with a given class which is specified in the editor_selector parameter.
In order to work on all textareas with class mceEditor you can use this:
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor",
.....
use class in selector
i have two or more textarea that i want init those with tiny int so
<textarea class="mytextarea"></textarea>
<textarea class="mytextarea"></textarea>
.
.
.
in init tinyint code:
tinymce.init({
selector: 'textarea.mytextarea',
plugins : 'advlist autolink link lists preview table code pagebreak',
.
.
.
selector: 'textarea#new_f2f_feature_tech_notes,#new_f2f_feature_desc'
We can add multiple tinymce textarea like above lo
According to tinymce.com/wiki.php/Configuration:selector, selector is the recommended way of selecting what elements should be editable.
For all textarea elements, as requested:
selector: "textarea",
Or more elegantly, only those elements with a specific CSS tag:
selector: "textarea.editme",
<textarea class="editme">
I am using HTML textarea for user to input some data and save that to App Engine's model
The problem is that when I retrieve the content it is just text and all formatting is gone
The reason is because in textarea there is no formatting that we can make
Question:
is there any way to retain the format that user provides?
is there any other element(other than textarea), that i'll have to use?(which one?)
P.S I am very new to area of web development and working on my first project
Thank you
What you want is a Rich Text Editor. The standard HTML <textarea> tag only accepts plain text (even if the text is or includes HTML markup). There are a lot of example out there (including some listed on the page linked) but I would highly recommend using a prepackaged one for this. Coding your own is fairly complicated for people who are new, and even for a lot who have some experience. Both TinyMCE and CKEditor are very common ones, but there are many others as well.
A text box is like wordpad, you cant format it, if you paste in from word or any other formatted text it will wipe all the formatting and you will be left with just the text.
You need add an editor to the text areas, I use TinyMCE, but there are many other out there too.
To implement you need to have all the source (which you can get from TinyMCE) in your web directory.
Here's an example which you can try:
Add this the the head section of your page:
<script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "elm1",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
+ "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
+ "bullist,numlist,outdent,indent",
theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"
+"undo,redo,cleanup,code,separator,sub,sup,charmap",
theme_advanced_buttons3 : "",
height:"350px",
width:"600px"
});
</script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Skin options
skin : "o2k7",
skin_variant : "silver",
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
Then to call the textarea:
<textarea name="content" style="width:100%">YOUR TEXT HERE</textarea>
NB: You need to download and have in your directory the js files for <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
Hope this helps!
This won't solve the case when you want somebody to be able to format their text (e.g. with WYSIWYG bold buttons etc.), but if you want to be able to accept pre-formatted HTML (e.g. copy and paste from other HTML source such as a webpage), then you can do this:
<form ...>
<label>Paste your HTML in the box below</label>
<textarea style='display:none' id='foo'></textarea>
<div id='htmlsource' contenteditable style='border:solid 1px black;padding:1em;width:100%;min-height:2em;' ></div>
<input type='submit' />
</form>
<script>
jQuery(function(){
jQuery('form').submit( function(e) {
jQuery('textarea').val( jQuery('#htmlsource').html() );
});
});
</script>
This uses a contenteditable div element which you can format to look like an input box and will accept pasted HTML, and a hidden textarea#foo which will be populated with the pasted HTML just before the form is submitted.
Note that this is not an accessible solution as it stands.
Depending on your goal for the programm it could already be sufficient to just add "pre" tags left and right to the input of your textarea. for example if your code submits to a form whatever is inside a textarea and than echos it in the target File this would already work.
> File 1:
>
> <form action="Output.php" methode=post>
> <textarea name="Input"></textarea>
> </form>
>
> File Output.php
>
> $UserInput = $_POST["Input"];
> $UserInput = "<pre>" . $UserInput . "</pre>"
> echo $UserInput
this already will retain all Enters for example that where used in the original user input and echo them correctly
If you retrieve the content from the App Engine Saving the Content with the pre tags added already in most cases does the trick