How to add images in flags in timeline.js - javascript

I am using timeline.js. i am new to timeline.js. I want to add the image in flag which is shown on timeline with different image icons for different points. I didn't get any solution for this in documentation or anything. Image of where i want to add image is shown in the image attached. flag_image
Please find the demo in following link. Codepen
var dataObject = {
"timeline": {
"headline": "Welcome to TimelineJS",
"startDate": "2011,12,10",
"type": "default",
"text": "<p>TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.</p><p>You're looking at an example of one right now.</p><p>Click on the arrow to the right to learn more.</p>",
"asset": {
"media": "https://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg",
"credit": "",
"caption": ""
},
"date": [{
"startDate": "2011,12,10",
"headline": "Exception initiated by XYZ",
"asset": {
"media": "/static/welcome/step3.png",
"credit": "",
"caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
}
}, {
"startDate": "2012,12,10",
"headline": "Exception initiated by XYZ",
"asset": {
"media": "/static/welcome/step3.png",
"credit": "",
"caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
}
}, {
"startDate": "2011,12,11",
"headline": "Tech review approved by ABC",
"text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
"asset": {
"media": "",
"credit": "",
"caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
}
}, {
"startDate": "2011,12,12",
"headline": "Approved by all",
"text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
"asset": {
"media": "",
"credit": "",
"caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
}
}, {
"startDate": "2011,12,13",
"headline": "Closure requested",
"text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
"asset": {
"media": "https://image.ibb.co/eMGfya/episodic_failed.png",
"credit": "",
"caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
}
}],
"era": [{
"startDate": "2011,12,10",
"endDate": "2011,12,11",
"headline": "Revision1",
"tag": "This is Optional"
}, {
"startDate": "2011,12,13",
"endDate": "2011,12,14",
"headline": "Revision2",
"tag": "This is Optional"
}
]
}
}
createStoryJS({
type: 'timeline',
width: '800',
height: '600',
source: dataObject,
embed_id: 'my-timeline',
hash_bookmark: true
});
.classRed
{
background-color:red;
}
/* .vco-slider .slider-container-mask {
display: none;
} */
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
<link href="https://cdn.knightlab.com/libs/timeline/latest/css/timeline.css" rel="stylesheet"/>
<div id="my-timeline"></div>

You would need to add the image into the div element that represents the flag.
An easy way to do this is to use the browser Dev tools on an open timeline, use the element click tool to select a flag, determine the class used by flags (as well as a set of classes that makes a unique path is CSS class names to a flag) and use jquery/javascript to position an image element inside the the identified div element (that is, the flag).
In terms of using an image for each flag based on the type of event (of the flag), you will likely need to use text from your event to identify it in a div (like in the .each method of jquery after you apply the selector).
I am suggesting this as I changed the color of the flag based on types of event I had defined, and used the event type in the title field, parsed that text for the event name (the type was added as first word, so I parsed the string from position 0) and then changed the background-color CSS attribute (with !important).
BTW, I took this approach so as to not change the source code (post-processing the DOM).
Hope this helps some

Related

Is there a way to either display the native Google Chrome bookmark bar in a custom startpage, or fetch its content and display it on my own?

I'm running a simple custom Google Chrome startpage consisting of a background .gif and a google searchbar. However, Google Chrome interprets it as something other than the default startpage, and thus won't show the native bookmark bar, unless the option to show it everywhere is checked (which is awkard for my monitor resolution).
The Google Chrome bookmarks file is located at C:\Users\UserName\AppData\Local\Google\Chrome\User Data\Default\bookmarks,below I'll paste a sample of its structure.
Just looking at this, do you think there's a way to either show the native bookmark ONLY in my custom startpage, or to fetch the information in that bookmarks file and display it on my own?
{
"checksum": "REDACTED",
"roots": {
"bookmark_bar": {
"children": [ {
"children": [ {
"date_added": "13222412798372622",
"date_last_used": "0",
"guid": "REDACTED",
"id": "7",
"name": "Whatsapp",
"type": "url",
"url": "https://web.whatsapp.com/"
}, {
"date_added": "13126908348807315",
"date_last_used": "13317078268398707",
"guid": "REDACTED",
"id": "8",
"meta_info": {
"last_visited_desktop": "REDACTED"
},
"name": "YouTube",
"type": "url",
"url": "https://www.youtube.com/feed/subscriptions"
}, {
"date_added": "13126908407318057",
"date_last_used": "13317078266263899",
"guid": "REDACTED",
"id": "9",
"meta_info": {
"last_visited_desktop": "REDACTED"
},

Adaptive Card show text input block based on choice set value

I have a card with input choice set of options a,b,others
If users selects option as "others" then an extra input text block should come below the choice set. Is this possible with "Only show when" element property
Here is my Adaptive Card JSON
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "a",
"value": "a"
},
{
"title": "b",
"value": "b"
},
{
"title": "c",
"value": "c"
},
{
"title": "Others",
"value": "Others"
}
],
"placeholder": "Select option"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text",
"isVisible": false
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
]
}
and i'm using html with webchat-es5 javascript library for rendering the bot to a page.
All of the information you need in order to create a self-updating Adaptive Card in Web Chat using Adaptive Card extensibility can be found in this answer: BotFramework-WebChat - Adaptive Card
There are a few differences in your case that justify writing another answer:
You're using the CDN instead of the NPM package
You're using the ES5 bundle, which I'm assuming means you want this to work on IE11
You're trying to toggle visibility instead of change text
Just like in the other case, we need to define a naming schema for ourselves that we can use to identify the card elements our code needs to manipulate. I'm only using one keyword this time: "on."
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "a",
"value": "a"
},
{
"title": "b",
"value": "b"
},
{
"title": "c",
"value": "c"
},
{
"title": "Others",
"value": "Others"
}
],
"placeholder": "Select option",
"id": "main"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text",
"isVisible": false,
"id": "on_main_Others"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
]
}
Consider the choice set input to be our switch and the text input to be our target. The choice set input's ID is just the name we've picked for it (and all inputs should have ID's in order for the card to work anyway even if we're not using our own naming schema). The text input's ID takes the form on_<input>_<value> where <input> is the ID of our switch and <value> is the choice that makes the target visible.
Here's the code you can use to make that work (notice that it accommodates IE11 by not using any arrow functions, etc.):
AdaptiveCards.AdaptiveCard.onParseElement = function (element) {
const PREFIX_ON = 'on';
const segments = element.id && element.id.split('_');
if (segments && segments[0] == PREFIX_ON) {
const card = element.getRootElement();
const input = card.getElementById(segments[1]);
const targetValue = segments[2];
input.onValueChanged = function (sender) {
// The isVisible setter automatically updates the rendered elements
element.isVisible = (sender.value == targetValue);
};
}
};
Notice that we're accessing Adaptive Cards classes with an AdaptiveCards global variable. You may have guessed that this becomes available when you use the Adaptive Cards CDN. I need to warn you that unfortunately the latest version of the Adaptive Cards CDN is currently incompatible with the latest version of Web Chat. Adaptive Cards 2.x introduced breaking changes (which can be expected for a new major version), and Web Chat is currently using 1.2.6. To make sure your code works you should specify the version of the Adaptive Cards CDN in your HTML, and you might as well specify the version of Web Chat too in case newer versions of Web Chat come out later that break with Adaptive Cards 1.2.6.
<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/4.9.0/webchat-es5.js" ></script>
<script crossorigin="anonymous" src="https://unpkg.com/adaptivecards#1.2.6/dist/adaptivecards.js" ></script>
While it's unclear if you need to use the adaptiveCardsPackage property in Node, I'm pretty sure you do need to use it with the CDN:
WebChat.renderWebChat(
{
adaptiveCardsPackage: AdaptiveCards,
directLine: window.WebChat.createDirectLine({
secretOrToken: secretOrToken
})
},
document.getElementById('webchat')
);

How to add another quality video to jwplayer?

I added another quality for showing the video, but there is no choice of another quality in the video player
jwplayer("player2").setup({
image: "https://cdn.jwplayer.com/v2/media/tkM1zvBq/poster.jpg?width=720",
"type": "video/mp4",
"sources": [{
"file": "http://*:1935/vod/volikogu_1080p.mp4/playlist.m3u8",
"label": "1080p"
}, {
"file": "http://*:1935/vod/volikogu_720p.mp4/playlist.m3u8",
"label": "720p"
}, {
"file": "http://*:1935/vod/volikogu_360p.mp4/playlist.m3u8",
"label": "360p"
}],
"label": "H.264 320px"
});
I'm seeing a few things in the above config that could be causing poor behavior in the player. First off, you have type on the top level when it should be on the same level as your source objects in the sources array. It also appears as though type is hls and not video/mp4 (based on the m3u8 extension).
Does the following setup change any behavior for you?
jwplayer("player2").setup({
image: "https://cdn.jwplayer.com/v2/media/tkM1zvBq/poster.jpg?width=720"
"sources": [{
"file": "http://*:1935/vod/volikogu_1080p.mp4/playlist.m3u8",
"label": "1080p",
"type": "hls"
}, {
"file": "http://*:1935/vod/volikogu_720p.mp4/playlist.m3u8",
"label": "720p",
"type": "hls"
}, {
"file": "http://*:1935/vod/volikogu_360p.mp4/playlist.m3u8",
"label": "360p",
"type": "hls"
}]
});
If the type of your files is mp4 then replace "type": "hls" with "type": "mp4" in the above.
You would be best served to have all of your child manifests in one single parent manifest. Do not put multiple m3u8's as different sources. Let the player or the browser change the quality based on a single master manifest. Also, your "label" and "type" attributes are not valid, I would remove them entirely.

Unable to get only the youtube video description by the following link using json

Hi am trying to get the youtube video details by using videoid but am not able to get description in this how can I get it.Here is my link
https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=iwGFalTRHDA&format=json
Here is the json:
{
"title": "Trololo",
"width": 459,
"height": 344,
"thumbnail_height": 360,
"html": "\u003ciframe width=\"459\" height=\"344\" src=\"https:\/\/www.youtube.com\/embed\/iwGFalTRHDA?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
"thumbnail_width": 480,
"author_url": "https:\/\/www.youtube.com\/user\/KamoKatt",
"provider_name": "YouTube",
"version": "1.0",
"type": "video",
"provider_url": "https:\/\/www.youtube.com\/",
"author_name": "KamoKatt",
"thumbnail_url": "https:\/\/i.ytimg.com\/vi\/iwGFalTRHDA\/hqdefault.jpg"
}
Use the video id with this endpoint from Youtube's API.
https://www.googleapis.com/youtube/v3/videos?part=snippet&id={VIDEO_ID}&fields=items/snippet/title,items/snippet/description&key={YOUR_API_KEY} - jlmcdonald
for the video with the url:
https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=iwGFalTRHDA&format=json
the video id would be iwGFalTRHDA and now all you need is to use your API_KEY. If you don't have one you can get one here by following the instructions and then enabling the youtube API and using the key given to you.
with this videoid and my api key (i havent put it below tho)
https://www.googleapis.com/youtube/v3/videos?part=snippet&id=iwGFalTRHDA&fields=items/snippet/title,items/snippet/description&key={YOUR_API_KEY}
the result is this:
{
"items": [
{
"snippet": {
"title": "Trololo",
"description": ""
}
}
]
}
here's a video with a description the video id is e-5obm1G_FY :
{
"items": [
{
"snippet": {
"title": "Anjana Vakil: Learning Functional Programming with JavaScript - JSUnconf 2016",
"description": "Slides: https://slidr.io/vakila/learning-functional-programming-with-javascript"
}
}
]
}

Code spits out NaN 7 times

I don't understand why I am getting NaN. Is there something I am missing, could be the object, or my code ?
$(document).ready(function() {
var text = {
"kind": "books#volume",
"id": "Wfan6L9RGgYC",
"etag": "UlsLzySUlh0",
"selfLink": "https://www.googleapis.com/books/v1/volumes/Wfan6L9RGgYC",
"volumeInfo": {
"title": "The Modern Web",
"subtitle": "Multi-device Web Development with HTML5, CSS3, and JavaScript",
"": [
"Peter Gasston"
],
"publisher": "No Starch Press",
"publishedDate": "2013",
"description": "<p><b>A Guide to Modern Web Development</b><br></p><p>Today's web technologies are evolving at near-light speed, bringing the promise of a seamless Internet ever closer to reality. When users can browse the Web on a three-inch phone screen as easily as on a fifty-inch HDTV, what's a developer to do?</p><p>Peter Gasston's <i>The Modern Web</i> will guide you through the latest and most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. His plain-English explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.</p><p>Learn how to:</p><p>* Plan your content so that it displays fluidly across multiple devices<br>* Design websites to interact with devices using the most up-to-date APIs, including Geolocation, Orientation, and Web Storage<br>* Incorporate cross-platform audio and video without using troublesome plug-ins<br>* Make images and graphics scalable on high-resolution devices with SVGUse powerful HTML5 elements to design better forms</p><p>Turn outdated websites into flexible, user-friendly ones that take full advantage of the unique capabilities of any device or browser. With the help of <i>The Modern Web</i>, you'll be ready to navigate the front lines of device-independent development.</p>",
"industryIdentifiers": [{
"type": "ISBN_10",
"identifier": "1593274874"
}, {
"type": "ISBN_13",
"identifier": "9781593274870"
}],
"readingModes": {
"text": true,
"image": true
},
"pageCount": 264,
"printedPageCount": 266,
"dimensions": {
"height": "24.00 cm",
"width": "17.80 cm",
"thickness": "1.50 cm"
},
"printType": "BOOK",
"categories": [
"Computers / Software Development & Engineering / General",
"Computers / Web / Design"
],
"averageRating": 4.5,
"ratingsCount": 3,
"maturityRating": "NOT_MATURE",
"allowAnonLogging": true,
"contentVersion": "1.2.2.0.preview.3",
"imageLinks": {
"smallThumbnail": "http://books.google.com/books/content?id=Wfan6L9RGgYC&printsec=frontcover&img=1&zoom=5&edge=curl&imgtk=AFLRE72KO7jCxe5uWt_wdrgHfdSNO_raoAKYbPNaAILa300r3DxeVHIqEeZto77JClWzw41ZwwbcMlVl2Ki9dF_ycIEUDhwbetDSF6K112O_XoebMDRoRNA5vskWyCtpGig-LaVPbE7j&source=gbs_api",
"thumbnail": "http://books.google.com/books/content?id=Wfan6L9RGgYC&printsec=frontcover&img=1&zoom=1&edge=curl&imgtk=AFLRE70to3PUyJeiv-brcBCzs330NDwRGM4cYu9gHzdVNLrIEn7ghBo5Gms9MAFxQ8ZkRt0-JZhCJq7T0V_vOLwMhDu4f_2icMtDrO5bMPSqRa4EuB9-3XGaNH-UxsYBvJIMUadwdd4Y&source=gbs_api",
"small": "http://books.google.com/books/content?id=Wfan6L9RGgYC&printsec=frontcover&img=1&zoom=2&edge=curl&imgtk=AFLRE709uVhXoOlgZxdwB4DKF0X1zVPvV7_4EA_PvhNlIGLKknTSsZiIoDnsJPsswWKBQIoSC-gJ0vOe_4kTiWPU38xZydOliDp5u0SxJqqFbDIKnz-KxprkLg7Ze2fxJWGBXRQSgHJA&source=gbs_api",
"medium": "http://books.google.com/books/content?id=Wfan6L9RGgYC&printsec=frontcover&img=1&zoom=3&edge=curl&imgtk=AFLRE72idQ0vc5gY408WHZTWFY8AOQLhGVbI4ktB4O6NXQFbbHY0VrM0PJWA_XF_98_NThQtP8tvw73qpSwqkGoi-QKzMPfi_M75VzK-zbxVsFZ_rtfeMGHWREhGACvV-F39BhQ1WXwt&source=gbs_api",
"large": "http://books.google.com/books/content?id=Wfan6L9RGgYC&printsec=frontcover&img=1&zoom=4&edge=curl&imgtk=AFLRE73M-PJZ0bTkffdLAwU427ppNpxsenoBSi91ABnrm4lNMPwOBNDIL23OTK7ZNvGlGChk9klXAP3DDoQbLXPwct-F_m9j1KKJ4w77HkeP69-eYdwxW1Z5iNgVYqyZCRj3AkAHmOaZ&source=gbs_api",
"extraLarge": "http://books.google.com/books/content?id=Wfan6L9RGgYC&printsec=frontcover&img=1&zoom=6&edge=curl&imgtk=AFLRE70yPdCZ5tbR5aL9WbnodE4Uf263MR_bPekV6tab5QKe193uKXqXqilaTmc-bByqZGmaEk38KBic64e-dp8VON30C-E7eJP-TR-6cjVA3dmVTARYkMGMiE5dQsPsMGO2z_6p4ryx&source=gbs_api"
},
"language": "en",
"previewLink": "http://books.google.com/books?id=Wfan6L9RGgYC&hl=&source=gbs_api",
"infoLink": "http://books.google.com/books?id=Wfan6L9RGgYC&hl=&source=gbs_api",
"canonicalVolumeLink": "http://books.google.com/books/about/The_Modern_Web.html?hl=&id=Wfan6L9RGgYC"
},
"layerInfo": {
"layers": [{
"layerId": "geo",
"volumeAnnotationsVersion": "8"
}]
},
"saleInfo": {
"country": "US",
"saleability": "FOR_SALE",
"isEbook": true,
"listPrice": {
"amount": 27.95,
"currencyCode": "USD"
},
"retailPrice": {
"amount": 15.37,
"currencyCode": "USD"
},
"buyLink": "http://books.google.com/books?id=Wfan6L9RGgYC&hl=&buy=&source=gbs_api",
"offers": [{
"finskyOfferType": 1,
"listPrice": {
"amountInMicros": 27950000,
"currencyCode": "USD"
},
"retailPrice": {
"amountInMicros": 15370000,
"currencyCode": "USD"
},
"giftable": true
}]
},
"accessInfo": {
"country": "US",
"viewability": "PARTIAL",
"embeddable": true,
"publicDomain": false,
"textToSpeechPermission": "ALLOWED",
"epub": {
"isAvailable": true
},
"pdf": {
"isAvailable": true
},
"webReaderLink": "http://books.google.com/books/reader?id=Wfan6L9RGgYC&hl=&printsec=frontcover&output=reader&source=gbs_api",
"accessViewStatus": "SAMPLE",
"quoteSharingAllowed": false
}
}
$.each(text, function(i, value) {
$('</p>').appendTo("#container").text(text[i].title + text[i].subtitle);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
Your $.each function is looping through every property at the root of your object, and the way your object is structured, not every property has a nested title or subtitle property.
You would either have to structure your object consistently, or check for the properties you need before you try to access them.

Categories