I am trying to implement intro.js in ionic 4 but the highlighted text is not visible
enter image description here
here how i implemented the code in angular 7.
intro() {
let intro = introJs.introJs();
intro.setOptions({
exitOnOverlayClick: false,
showStepNumbers: false,
showBullets: false,
overlayOpacity: 0.8,
doneLabel: "GOT IT",
nextLabel: "GOT IT",
steps: [
{
element: '#search-img',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
}, {
element: '#search-text',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
},
{
element: '#search-box',
intro: "Search here by accounts, contacts, etc.",
position: 'middle',
},
{
element: '#profile',
intro: "Click on profile icon to view your DPN account & saved
list",
position: 'bottom',
floatVArrow: 'right'
}
]
});
intro.start();
}
You can achieve this by using the highlightClass attribute for that particular step so that the step points to a class (I called it .my-bespoke-class) where you use CSS to do whatever you like to the highlight eg changing the opacity or colour.
I would need to check but I am pretty sure you can change the overlayOpacity for a step too (you certainly can in Shepherd).
let intro = introJs();
intro.setOptions({
exitOnOverlayClick: false,
showStepNumbers: false,
showBullets: false,
overlayOpacity: 0.8,
doneLabel: "GOT IT",
nextLabel: "GOT IT",
steps: [
{
element: '#search-text',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
highlightClass: '.my-bespoke-class',
overlayOpacity: '1'
}
]
});
intro.start();
#search-text{
width: 300px:
margin: 10px auto;
}
.my-bespoke-class{
background: orange;
font-size: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/intro.js-mit#3.0.0/introjs.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/intro.js-mit#3.0.0/intro.min.js"></script>
<html>
<body>
<div id="search-text">This is the target element</div>
</body>
</html>
Further information can be found in the official docs which you can find at https://introjs.com/docs/
Related
I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
I'm building a webpage that allows my users the ability to enter rich text and ultimately upload that rich text to my database. I am using Quill.js as my rich text editor via the Quill CDN. I have setup Quill successfully. The Quill editor and toolbar containers are setup as so:
<div class="quill-toolbar" id="toolbar" style="margin-left: 50px; margin-right: 50px"></div>
<div class="quill-editor" id="editor" style="margin-left: 50px; margin-right: 50px"></div>
I have also written a script to initialize Quill.js with the "snow" themed editor enabled. That script is below:
<script>
var FontAttributor = Quill.import('formats/font');
FontAttributor.whitelist = [
'sans-serif', 'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
];
Quill.register(FontAttributor, true);
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'font': [] }],
[{ 'align': [] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
['link', 'image', 'video', 'formula'],
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions,
},
placeholder: 'Start writing...',
theme: 'snow'
});\
</script>
My struggle appears when I try to position the Quill toolbar properly. Using inline CSS, I was able to position the Quill editor in the center of the screen with 50 pixel margins, like you saw when I setup the toolbar and editor containers: style="margin-left: 50px; margin-right: 50px". However, I am unable to do the same with the Quill toolbar.
How can I setup the toolbar so it has 50 pixel margins on each side of the toolbar as well as the editor?
Status Update
I have continued to experiment with CSS changes to add margins to the toolbar. The easiest solution I could find was to set margins to the <body> for the page. However, now I am having a problem with my navigation bar. The <body> appears like this <body style="margin-left: 50px">. However, the navigation bar is now misplaced, and if I add a negative margin like this: <div class="topnav" style="margin-left: -50px">, their is a gap on the right side of the navigation bar. Why is this happening. It changing the margins of the <body> the best solution?
I am using Ckeditor as rich editor for text input in the Chrome browser. I also have added some html id tag for easy parsing by bs4 after the system getting the data.
The following is my setting in the html:
CKEDITOR.replace( 'editor', {
toolbar : 'Basic',
uiColor : '#9AB8F3',
height : '70%',
startupShowBorders: false,
})
And in the config.js:
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.allowedContent = True;
};
Although I have already followed the instruction to allow all html tag content to be preserved with config.allowedContent = *; in the config.jd. However, it seems not working as I got the following results when getting data (by CKEDITOR.instances.editor.getData()):
<span style='font-size:11.0pt;'> content </span>
instead of this that I want:
<span id="news_content" style='font-size:11.0pt;'> content </span>
In other words, it still strips out all the html tag I added.
When I checked the source code, I found that the same textarea content was produced twice with the one with the tag being put in hidden format, i.e.,
<textarea name="editor" id="editor" rows="100" cols="40" style="visibility: hidden; display: none;">
And the editor produces another version in the real textarea that allows me to edit. However, this is useless because all the html tags are stripped there.
So, my question is, how to preserve the html tag in the real textarea so that I can parse the html with id tags after editing and submission. Could anyone advise on this? Thanks a lot.
I may not be able to answer my own question, but I like to share my solution with those encountering similar situation.
In short, finally I give up using ckeditor or any plug-in editor as many of them will strip off the html tag, which is essential to me in the subsequent process.
Thanks to html5, my solution is using editable div. The setting is very simple as below:
css:
#my-content {
box-shadow: 0 0 2px #CCC;
min-height: 150px;
overflow: auto;
padding: 1em;
margin: 5px;
resize: vertical;
outline: none;
}
html:
<div id="my-content" class="editable" style="width:900px; height:400px; text-overflow: ellipsis; overflow-y: scroll;"></div>
js script:
$('.editable').each(function(){
this.contentEditable = true;
});
So far, I am happy with it, it shows what exactly the html code showing and preserve all the tags I added. The only downside is it does not provide any toolbar for format editing. My solution is to make one for it, and via the following link you can get a very good tutorial as to making a toolbar with a ready-to-use demo as illustration.
https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657
Hope this helps.
Here's the code:
var importPopup = $ionicPopup.show({
title: 'Select import source',
subTitle: '(GPX, KML or WMS layer)',
scope: $scope,
cssClass: "popup-import",
buttons: [
{
text: '<b>From Drive</b>',
type: 'button icon-left icon-google-drive button-positive'
},
{
text: '<b>From URL</b>',
type: 'button icon-left ion-link button-positive',
onTap: function(e) {
$scope.url();
}
},
{
text: '<b>Cancel</b>',
type: 'button icon-left ion-close-round button-assertive'
}
]
});
And the output it generates: https://imgur.com/y790RKC
When only two buttons are displayed, the text and icons align correctly. When three buttons are displayed with only icons in the type, they align correctly as well. In the CSS the buttons are formatted into rows. Without this formatting the buttons look like this: https://imgur.com/zrxqwhl
Here is the relevant section of the CSS:
.popup-import .popup-buttons
{
display: block;
}
Any suggestions are appreciated.
Add this to your css:
.popup-buttons .button.icon-left:not(.button-small),
.popup-buttons .button.icon-right:not(.button-small) {
// fix for intel-popup with icons
line-height: 40px !important;
}
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.