I have just migrated from TinyMCE3 to TinyMCE4 and I wonder how to remove the path in the status bar. But I want to keep my status bar in order to have the resize functionnality.
With TinyMCE3 we can do it with:
tinymce.init({
...
theme_advanced_path : false
});
How can I have the same result with TinyMCE4?
Thanks
In TinyMCE 4 you can remove just the path in the statusbar by setting the configuration elementpath to false, like this:
tinymce.init({ elementpath: false });
This works for me:
.mce-path {/* CSS */
display: none !important;
}
EDIT:
In TinyMCE4, I don't think there is an official way to do it by passing a parameter to tinymce.init(); to disable the path. You can pass statusbar: false but that will hide the path AND the resize icon, unfortunately!
The answer I gave by using CSS, hides the path but the resize icon stays there. But make sure you have the statusbar: true in the tinymce.init();
tinymce.init({
statusbar : false,
The CSS approach works, but is usually applied globally to each editor in the page. The old option of TinyMCE 3 could be applied individually for different editors.
I wanted to keep this flexibility and found the following solution:
a) Define a CSS rule like .myMceNoPath .mce-path{display:none;}
b) For an editor instance which should provide a resize handle without path display, define the following options:
resize: "both",
init_instance_callback : function (ed) {
ed.getContainer().className += " myMceNoPath";
}
This dynamically adds a class to the editor element, enabling us to apply the CSS only to the editors specifically marked this way.
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
From: Remove menu and status bars in TinyMCE 4
Unfortunately this feature is deprecated in TinyMCE 4. But you always can block this visually by CSS. It must look something like this:
.mce-path {
display: none;
}
I am using tinyMCE v5. And the following works.
In order to hide the Path, pass "elementpath": false in init object and "statusbar": false to hide the full status bar. If you hide the whole status bar then you will also lose your ability to increase or decrease the height.
One quick solution in TinyMCE 4 is to set the path element's opacity to transparent:
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("opacity", "0");
}
});
This should hide the path text without otherwise affecting the status bar. I've found that disabling the status bar's visibility through either the init() function or CSS display property also results in a floating word count and resize icon overlapping the scrollbar.
Credit to immo and others for pointing out the callback and CSS concepts. I like this particular (jQuery) solution because it's self-contained and applies only to its parent editor, though variations are possible.
Setting theme_advanced_statusbar_location to empty string worked for me.
tinyMCE.init({
theme_advanced_statusbar_location : "",
})
Mine is based on the opacity concept from Dustin Carr above:
For TinyMCE 4, I located skin.min.css, searched mce-path-item and right after display:inline-block, I added opacity:0. So it finally is something like display:inline-block;opacity:0; *display...
It's just a quick trick, as Carr says: the element is still there when I click on it, it's just the standard user don't see it.
Hope it helps some one...
EDIT:The same for mce-divider ;)
Thanks to #Dustin Carr for his answer.
I've extended his answer a little bit , that's what i did , it works fine for me and when user hover cursor over the area of the path it doesn't display cursor at all (with opacity 0 it displays cursor over the path and path remains clickable) .
tinymce.init({
...
init_instance_callback: function (editor) {
$(editor.getContainer()).find(".mce-path").css("visibility", "hidden");
},
});
HTH
How can we show password requirements for a Password field using twitter Bootstrap pop-over and jquery on hover.
<input id = "txtPassword" type = "password" title ="password" />
I want to pass custom "html" as the content of popover.
change title of pop-over to custom title
change the style of pop-over from current basic to custom style.
for starter you can make things simple and use the simplest popover bootstrap:
1.include in your project the right files of bootstrap in order to make it work:
a.bootstrap-tooltip.js
b.bootstrap-popover.js
c.jquery.min.js
d.bootstrap.css
2.use an element only as the element which will fire the popover, for example:
hover for popover
with the: id="example" you can access the element with jquery in order to display a content with the popover
on the data-content="some text": this is the text that will be shown on the popover window
on the data-original-title="some title": you can decide what title to show on the popover window
3.use jquery to access and activate the popover like this:
$(function ()
{ $("#example").popover();
});
just start with that and then try to dig deeper to your goal.
Working on making a very standard dropdown menu with the new jquery ui 1.9 menu widget, but having some problems due to the newness of the widget and the presence of only a single extremely basic example at jqueryui.com
Specifically, can anyone here help me to:
Initialize a widget with no icons for submenus? (Default is a right-facing carat and I can't get rid of it)
Make a menu where user has to click on the top menu item (as opposed to just hovering) to make the submenu appear? Any deeper submenus should then expand when the user's pointer hovers over them. This is typical dropdown behavior, e.g., user clicks "edit" to make options appear like "select" or "undo", but any further choices under (for example) "select" would apper just by hovering over "select". I hope that's clear.
Thanks
I don't know how to do the second part of your question but I can answer the first question.
You can change the default icon by setting the icon option of the menu option.
First add a class to your CSS file like this.
.no-icon { display:none;}
Then set the icon option when you create the menu.
$( "#menu" ).menu(
{ icons: { submenu: "no-icon" } }
);
You won't have any icons.
Here is a fiddle
I'm using Jquery Ui to make a dialog using the following options:
$("#locations-dialog").dialog({
autoOpen: false,
title: '<input type="text" id="location-name" value="New Location">',
draggable: false,
modal: false,
closeOnEscape: true,
width: 660,
height: 515,
});
As it is visible I'm using an input field as a title.
The issue I'm having is that when I click on top of it nothing happens meaning I can't edit the text.
Don't know if I'm doing anything wrong...but in the jquery ui says:
Any valid HTML may be set as the title
As others have said, that's because the dialog widget disables selection for all the elements in its title bar, even if the draggable option is set to false.
You can add the text box to the title bar after the dialog widget is created, as the answer to the duplicate question suggests, or you can call enableSelection() to re-enable selection on the title bar elements:
$("#locations-dialog").dialog("widget")
.find(".ui-dialog-titlebar")
.find("*").andSelf()
.enableSelection();
The binding of the dialog box is what is causing issue. See this URL for full explanation and a work around example.
jQuery UI Dialog - Input textbox in the titlebar is disabled?
What I'd like to do is make a dialog where the buttons are databound to the knockout viewmodel so I can enable or disable those buttons depending on various conditions on the form
But the way you make buttons in jquery dialogs is a bit different than normal.
anyone have a solution for this?
Make sure to apply your own class to the dialog's buttons:
$("#dialog").dialog({
buttons: [{
text: 'Ok',
class: 'ok-button'
}]
});
Grab the button.ok-button and apply a data-bind attribute to it (visible here, just to show you that it works). Here, name is an observable property of our view model:
$("button.ok-button").attr("data-bind", "visible: name().length");
Apply bindings normally:
var model = { name: ko.observable('') };
ko.applyBindings(model);
Here's an example that hide's an "Ok" button on the dialog if name (an observable) has a length > 0: http://jsfiddle.net/9cRFy/
To add on to Andrew's answer, since the data-bind attribute is just another attribute you can add to your buttons, this would also work:
$("#dialog").dialog({
buttons: [{
text: 'Ok',
'data-bind': 'visible: name().length'
}]
});