Workarounds:
Solution #1: Hide the original tooltip - https://jsfiddle.net/LeoTM/p54qzd6q/
Solution #2: Remove the cloned tooltip - https://jsfiddle.net/LeoTM/m5uy0gkz/
Is there any way to remove the original tooltip?
I have also tried:
$(input).tooltip('disable');
$(input).tooltip({ items: ':not(.menu)' });
$(input).tooltip( "option", "disabled", true );
$(input).tooltip({ track: true });
$(input).tooltip('destroy'); did the trick.
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
I am trying to remove the status bar and keep the resize icon in tinymce just like a normal text area resizer. Any idea ?
elementpath
This option allows you to disable the element path within the status bar at the bottom of the editor.
Type:
Boolean
Default Value:
true
Possible Values:
true, false
Example
tinymce.init({
selector:'textarea',// change this value according to your HTML
elementpath:false
});
TinyMCE does not support what you are trying to do via configuration. The resize handle is only visible via the status bar.
Unfortunately, there is no way to do it via component settings. But you can try and change css:
your-tiny-mce-textarea .mce-path.mce-flow-layout-item {
display: none !important;
}
UPD: This one seems more pretty:
your-tiny-mce-textarea.mce-statusbar {
border: 0 !important;
}
your-tiny-mce-textarea.mce-path {
display: none !important;
}
Maybe this will help someone in future, you can remove the entire status bar with the following option
tinymce.init({
selector: 'textarea', // change this value according to your HTML
statusbar: false
});
https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar
I'd like it to simply be labeled "Font" as this is more useful to my non technical users. I can't seem to find a way to do this. Using version 4.x
you can change it in the tinymce.min.js file. just search for the text "Font Family" and you will see where you can change it.
You can do this by changing the default value in tinymce.min.js file. Just search for the code part beginning with:
{type:"listbox",text:"Font Family",tooltip:"Font Family",values:i,
...
Then put your desired label (for example "Font") inside the text:"". After change it should be look like :
{type:"listbox",text:"Font",tooltip:"Font Family",values:i,.
Result:
If you want to do this programmatically, for example create a button that will change label on click you can add this code when initializing tinyMCE:
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
toolbar1: 'fontselect fontsizeselect mybutton',
//...
// extra coding can go here
//...
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
var fontlabel = "Font";
document.getElementsByTagName("button")[4].firstChild.innerText = fontlabel;
// getElementsByTagName is an array, so the index changes belonging to
// position of your "FontFamily" dropdown. In my example it' 6th.
}
});
}
});
</script>
Before:
After:
I am using the jqplot charting library from quite sometime.
I don't want to display the y2axis (i.e when I am working with multiple axes/series)
Went through the documentation and found that 'show: false' will not show the axis.
Link here: http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis.show
But this doesn't seem to work.
Any help would be greatly appreciated.
Thanks in advance
Fixed it.
Here's what I did.
axes: {
yaxis: {
tickOptions: {
show: false
},
rendererOptions: {
drawBaseline: false
}
}
Setting tickoptions to false, hides the axis labels and ticks and drawBaseline: false hides the axis line.
Hope it helps.
You just need to specify showTicks : false
Here is a link on a working fiddle without yaxis ticks : http://jsfiddle.net/BLfRe/23/
I'm using jqplot and I wanted to hide the y2axis too in some case.
Using plot1.axes.y2axis.show = false; seems to work perfectly.
Can you put the piece of code you use in order to find what can cause your troubles?
Recently upgraded to Fancybox v2 and can't figure out how to keep Fancybox open when someone clicks outside of the DIV.
I tried "Overlay: null" but then the user can click around the site and navigate away..
I know in Fancybox v1 it was HideonOverlay Click... Any suggestions?
Try the following.
helpers : {
overlay : {closeClick: false}
}
Here is a piece of code and is self explanatory, hope you will find it useful:
$('#locator').live('click', function(){
$.fancybox({
type: 'iframe',
hideOnOverlayClick: false,
scrolling: 'no',
autoSize: true,
href: site_url + 'home/locator',
beforeClose: function (){
var latlng = $(".fancybox-iframe").contents().find('input[name=latlng]').val();
$('input[name=location]').val(latlng);
}
});
});
I bumped into this question while searching something and felt I would answer it.