is it possible in a TimelineJs instance to load JSON data from a variable in the page?
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'example_json.json'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
this is the default code from the timelineJS example.
Basically i'm trying to replace the source: 'example_json.json' with a
source: '{
"timeline":
{
"headline":"Sh*t People Say",
"type":"default",
"text":"People say stuff",
"startDate":"2012,1,26",
"date": [
{
"startDate":"2011,12,12",
"endDate":"2012,1,27",
"headline":"Vine",
"text":"<p>Vine Test</p>",
"asset":
{
"media":"https://vine.co/v/b55LOA1dgJU",
"credit":"",
"caption":""
}
},
{
"startDate":"2012,1,26",
"endDate":"2012,1,27",
"headline":"Sh*t Politicians Say",
"text":"<p>In true political fashion, his character rattles off common jargon heard from people running for office.</p>",
"asset":
{
"media":"http://youtu.be/u4XpeU9erbg",
"credit":"",
"caption":""
}
}
]
}
}'
but it doesn't work
The problem is that you are passing in the JSON object as a string. Remove quotation marks and it should work. Should look like this:
source: {
"timeline": {
...
}
}
I've put together a working example on JSFiddle
Related
i want to override default behaviour of emmet in vs code.
it works good for me in jsx (javascriptreact ) but not correctly with tsx files. i want this snippet for nextjs project. i want .name expand to
<div className={Style.name}> </div>
instead of
<div class="name"> </div>
i tried defining custom snippets and also syntax profile like this
"emmet.syntaxProfiles": {
"html": {
"snippets": {
"div": "<div className={Style.${2:class}}>${3}</div>"
}
}
}
{
"html": {
"snippets": {
"ss": "<div className={Style.${2} \\}>${3}</div>",
"sss": "<${1:div} className={Style.${2} \\}>${3}</${1:div}>"
}
}
}
I have a highcharts graphic, which consists of a static javascript code and a dynamic preformatted HTML text (pre) containing CSV data. (The dynamic text with the CSV data is updated daily, the Javascript code remains unchanged).
Now I would like to add a footnote, e.g. using "caption", which should also be dynamic.
How can I make the footer dynamic?
I had the idea to write the footnote into the CSV data and read it out of there, but I didn't succeed.
The jsfiddle example is here:
https://jsfiddle.net/martindfurrer/r4tjdka9/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="background: pink; width: 400px; height: 300px"></div>
<!--dynamic csv data from other source-->
<pre id="csv" style="display:none">
"utcdate;"value"
"1";"181"
"2";"225"
"3";"171"
"4";"188"
"5";"246"
"6";"98"
"7";"48"
</pre>
<script type='text/javascript'>
// static javascript code
Highcharts.chart('container', {
title: {
text: 'Corona Virus cases'
},
subtitle: {
text: 'Data input from CSV'
},
data: {
csv: document.getElementById('csv').innerHTML
},
series: [ {
name: 'Infection rate',
type: 'column',
}],
caption: {
text: 'The Javascript code is static, the csv data is dynamic. This text should also be dynamic, i.e. some sort of variable',
}
});
</script>
You can use for example a load event to update the caption with dynamic content:
chart: {
events: {
load: function() {
this.update({
caption: {
text: document.getElementById('dynamicCaption').innerHTML
}
});
}
}
}
Or just use a HTML reference in a text property:
caption: {
text: document.getElementById('dynamicCaption').innerHTML,
}
Live demo: https://jsfiddle.net/BlackLabel/zbkhm41r/
API Reference:
https://api.highcharts.com/highcharts/caption.text
https://api.highcharts.com/class-reference/Highcharts.Chart#update
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/
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.
I would like to convert a big TeX source using htlatex into HTML pages. The TeX file contains equations formatted with Mathjax. For this purpose, and from this link, I am using the following config.cfg :
\usepackage{verbatim}
\usepackage[T1]{fontenc}
\Preamble{xhtml}
% Configure for mathjax
\Configure{VERSION}{}
\Configure{DOCTYPE}{\HCode{<!DOCTYPE html>\Hnewline}}
\Configure{HTML}{\HCode{<html>\Hnewline}}{\HCode{\Hnewline</html>}}
\Configure{#HEAD}{\HCode{
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
Macros: {
\unexpanded{ bt: ['{\$\\mathb\{\#1\}\$}',1],
beq: ['{\\mathbf\{\#1\}}',1],}
}
},
extensions: ["AMSmath.js"],
equationNumbers: {autoNumber: "AMS"},
extensions: ["tex2jax.js"],
tex2jax: {
\unexpanded{
inlineMath: [ ['\$','\$'], ["\\\\(","\\\\)"] ],
displayMath: [ ['\\begin{displaymath}','\\end{displaymath}'], ['\\begin{equation}','\\end{equation}'], ['$$','$$'], ["\\[","\\]"] ],}
processEscapes: true
}
});
</script>
}}
\Configure{#HEAD}{\HCode{<script type="text/javascript"\Hnewline
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"\Hnewline
></script>\Hnewline}}
\newtoks\eqtoks
\def\AltMath#1${\eqtoks{$#1$}%
\HCode{\the\eqtoks}$}
\Configure{$}{}{}{\expandafter\AltMath}
\def\AltlMathI#1\){\eqtoks{\(#1\)}%
\HCode{\the\eqtoks}}
\Configure{()}{\AltlMathI}{}
\def\AltlDisplay#1\]{\eqtoks{\[#1\]}%
\HCode{\the\eqtoks}}
\Configure{[]}{\AltlDisplay}{}
\begin{document}
\newcommand\VerbMath[1]{%
\renewenvironment{#1}{%
\NoFonts%
\string\begin\{#1\}%
\verbatim}{\endverbatim\string\end\{#1\}\EndNoFonts}%
}
\VerbMath{equation}
\VerbMath{equation*}
\VerbMath{cases}
\VerbMath{array}
\VerbMath{matrix}
\VerbMath{pmatrix}
\VerbMath{eqnarray}
\VerbMath{eqnarray*}
\EndPreamble
Here is the command that I use to generate HTML pages (with 3rd level) :
htlatex document.tex "config,3"
Unfortunately, the equations are not referenced and I don't know how to do this. May this issue come from the fact that there are multiple HTML pages being generated?
Moreover, some equation references are not in the HTML page where they are defined with \label. Is there a trick to achieve this?