I need a little help! I have created an TinyMCE Editor (in admin only) button which appears in editor toolbar fine and functioning properly. Right now the button says “Live Chat”, what I want to replace with a dashicon or a font awesome icon.
I have the following code in my plugin.js file:
ed.addButton('livechat', {
text: 'Live Chat',
icon: 'dashicons dashicons-admin-links',
tooltip: 'Live Chat',
cmd: 'livechatButtonCmd',
});
Instead of showing a dashicon, it is showing a small empty rectangle :(
What is the correct way of doing this please?
Related
I am trying to use pickadate.js with highcharts.
It does work, but it requires clicking twice. It looks like highcharts first renders the date in a text svg element and there is accompanying input element that is 1px x 1px. When you click on the text SVG, it is replaced by the input element. Then you click again, and the pickadate opens.
I have tried binding pickadate to the g/text element via $(g.highcharts-range-input).pickadate(), but that doesn't work.
I have also tried using the input.onFocus event to trigger an input.onClick event, which works but then sometimes it goes through two click cycles- causing pickadate to open then immediately close:
$('input.highcharts-range-selector').bind("focus", function() {
console.log("focus");
$('input.highcharts-range-selector').trigger("click");
});
Fiddle:
https://jsfiddle.net/04svbnfd/
Thanks
Matt
When I go full screen on an element and then try to display angular bootstrap's modal in front, it won't appear in front.
To test it:
1 - Click on this link http://plnkr.co/edit/oKZHZZebyNMwpG114Jyy?p=preview
2 - Click on the "launch the preview in separate window" icon (image shown below)
3 - Click on Go Full Screen Button (you will then be in full screen on the element with id fullable)
4 - Then click on any of the buttons to try to show a modal.
Here is how to "launch the preview in separate window" on plnkr:
Solution to this problem required modal window to be appended to the element of my choice (in this case, element that goes full screen).
To accomplish this, I updated the angular bootstrap modal's code so that options object we pass to the $modal.open() function now accepts an appendTo property which is a css selector that will be used by document.querySelector.
In modal code (version 0.12.1), I changed from these:
var body = $document.find('body').eq(0),
currBackdropIndex = backdropIndex();
...
$modalStack.open(modalInstance, {
scope: modalScope,
deferred: modalResultDeferred,
content: tplAndVars[0],
backdrop: modalOptions.backdrop,
keyboard: modalOptions.keyboard,
backdropClass: modalOptions.backdropClass,
windowClass: modalOptions.windowClass,
windowTemplateUrl: modalOptions.windowTemplateUrl,
size: modalOptions.size
});
to these:
var body = angular.element(document.querySelector(modal.appendTo)),
currBackdropIndex = backdropIndex();
...
$modalStack.open(modalInstance, {
scope: modalScope,
deferred: modalResultDeferred,
content: tplAndVars[0],
backdrop: modalOptions.backdrop,
keyboard: modalOptions.keyboard,
backdropClass: modalOptions.backdropClass,
windowClass: modalOptions.windowClass,
windowTemplateUrl: modalOptions.windowTemplateUrl,
size: modalOptions.size,
appendTo: modalOptions.appendTo || 'body'
});
I opened an issue for this on github but it was closed without resolution so I had to update my local copy. Github issue is here: https://github.com/angular-ui/bootstrap/issues/3686
Please note: Since I am using document.querySelector for this, fix will work on browsers that support document.querySelector (almost all plus IE >= 9) http://caniuse.com/#feat=queryselector
I am trying to create a button with custom icon aligned to the left.
I have placed the icon inside
"App\touch\resources\images\" folder.
I have used the icon config of the button to specify the path of the icon.
On doing so, the icon is displayed on the screen but it is not fully shown.
Kindly provide me suggestions to include custom icons rather than sencha default icons.
{
xtype:'button',
itemId: 'btnHome',
height: 50,
icon: './touch/resources/images/Home_Icon.png',
ui: 'plain' ,
html: "Home"
}
You can also use a css class for defining images for buttons.
custom.css // css class
.mail-icon{background-image:url('../images/mail.png')!important;width:48px!important; height:48px!important; background-repeat:no-repeat; background-position:center center;}
source code
{
xtype: 'button',
id: 'btnMail',
itemId: 'btnMail',
ui: 'action',
icon: 'true',
iconCls: 'mail-icon'
},
In the above code i define a css class called mail-icon in custom.css file. And used this css class as iconcls for the button.
Touch 2.2 or later now uses vector based fonts for defining new custom icons. I've recently created this new app that will help you to prepare an icons and corresponding SCCS file for your Sencha Touch apps. This has also been tested with Sencha Architect projects.
The README explains the steps for creating icons at the Ico Moon web site and using the tool to convert Ico Moon project files into SCSS for use in Sencha Touch.
https://github.com/tohagan/sencha-ico-moon
Do inspect the button and change the width and height, for me the following css class fix this.
.x-button .x-button-icon {
width: 2.5em;
height: 2.5em;
}
when I inspected it the width and height were 1.5em.
I am using dnnAlert in my DNN 7.02 website ( dnnAlert is a jQuery UI plugin for dnnAlert that is included in regular DNN install) in place of regular alert, but the problem is that when I click on OK button, the page automatically scrolls to the top, which is very annoying.
How can I prevent the automatic scrolling?
$.dnnAlert({
text: 'Copied code to clipboard',
dialogClass: 'dnnFormPopup',
title: 'Copy Successful',
modal:false
});
The OK button is rendered with following html.
<button class="dnnPrimaryAction" type="button">Ok</button>
I have spent a lot of time trying to get JQUI dialogs to work properly in DNN 7.
I expect the problem you are having is related to setting
modal: false
I have found that using a straight JQUI dialog works if the crucial element:
dialogClass: 'dnnFormPopup dnnClear'
is added.
JC
I've got a jQuery dialog box with a button to close it. The button has focus when the dialog box opens. The problem is that the focus is a dotted line around the button's text instead of a focus ring around the entire button. I'm using jQuery's smoothness theme.
I'm using the dialog in a WordPress plugin.
My code is:
$('#mydialog').dialog({
title: 'My Title',
position: [619,200],
resizable: false,
buttons: {"OK" : function(){$(this).dialog("close");}}
});
The problem may relate to the browser; the way each browser highlights the focused element differs.