<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js"></script>
(function(window, videojs) {
var player = window.player = videojs('player',
{
html5: {
hls: {
overrideNative: !videojs.browser.IS_ANY_SAFARI
},
nativeAudioTracks: false,
nativeVideoTracks: false
},
liveui: true
});
overlay_content = '<div class="myOverlay"><h2>Live</h2></div>';
player.overlay({
overlays: [{
start: 'loadstart',
content: overlay_content,
end: 'playing',
align: 'top-left',
showBackground: false
}, {
start: 'pause',
content: overlay_content,
end: 'playing',
align: 'top-left',
showBackground: false
}]
});
}(window, window.videojs));
<video id="player" class="video-js vjs-theme-sea vjs-default-skin vjs-big-play-centered vjs-fluid" controls preload="auto" playsInline
poster="Poster_Img">
<source
src="src"
type="application/x-mpegURL">
</video>
It is working on desktop but on Android when I try to reposition the video progress bar it doesn't work.
I did enable the overridenative but still it doesn't work on android
Related
Excuse me, please, I am just learning. In some gatsby templates I can insert as Image - an image from a URL and in some templates Image don't want to display it.
What does it depend on and how to edit the code to make the url work? (My knowledge about graphql is rather basic)
this is the code for the blog template:
/** #jsx jsx */
import { jsx } from 'theme-ui'
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import { RiArrowRightLine, RiArrowLeftLine } from "react-icons/ri"
import Layout from "../components/layout"
import SEO from '../components/seo';
const styles = {
'article blockquote': {
'background-color': 'cardBg'
},
pagination: {
'a': {
color: 'muted',
'&.is-active': {
color: 'text'
},
'&:hover': {
color: 'text'
}
}
}
}
const Pagination = (props) => (
<div
className="pagination -post"
sx={styles.pagination}
>
<ul>
{(props.previous && props.previous.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.previous.frontmatter.slug} rel="prev">
<p
sx={{
color: 'muted'
}}
>
<span className="icon -left"><RiArrowLeftLine/></span> Previous</p>
<span className="page-title">{props.previous.frontmatter.title}</span>
</Link>
</li>
)}
{(props.next && props.next.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.next.frontmatter.slug} rel="next">
<p
sx={{
color: 'muted'
}}
>Next <span className="icon -right"><RiArrowRightLine/></span></p>
<span className="page-title">{props.next.frontmatter.title}</span>
</Link>
</li>
)}
</ul>
</div>
)
const Post = ({ data, pageContext }) => {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html, excerpt } = markdownRemark
const Image = frontmatter.featuredImage ? frontmatter.featuredImage.childImageSharp.fluid : ""
const { previous, next } = pageContext
let props = {
previous,
next
}
return (
<Layout className="page">
<SEO
title={frontmatter.title}
description={frontmatter.description ? frontmatter.description : excerpt}
image={Image}
article={true}
/>
<article className="blog-post">
<header className="featured-banner">
<section className="article-header">
<h1>{frontmatter.title}</h1>
<time>{frontmatter.date}</time>
</section>
{Image ? (
<Img
fluid={Image}
objectFit="cover"
objectPosition="50% 50%"
alt={frontmatter.title + ' - Featured image'}
className="featured-image"
/>
) : ""}
</header>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</article>
{(previous || next) && (
<Pagination {...props} />
)}
</Layout>
)
}
export default Post
export const pageQuery = graphql`
query BlogPostQuery($id: String!) {
markdownRemark(
id: { eq: $id }
) {
id
html
excerpt(pruneLength: 148)
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
description
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
}
}
}
`
typical post:
---
template: blog-post
title: my title
slug: /plant/bud
date: 2020-05-13 12:37
description: abc
featuredImage: /assets/screen-post-hixmjdah9xhoo-unsplash.jpg (but online image from imgurl png doesnt work)
---
post nr 1
edited ///
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets/`,
name: `assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/content/`,
name: `content`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
gfm: true,
plugins: [
netlifyCmsPaths,
`gatsby-remark-reading-time`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
showCaptions: true,
linkImagesToOriginal: false,
tracedSVG: true,
loading: "lazy",
},
},
`gatsby-remark-responsive-iframe`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
In Gatsby, you can insert images from external sources using the standard HTML <img> tag with the src property:
<img src="https://via.placeholder.com/150" alt="Alt text" width="500" height="600">
If you want to keep the benefits of gatsby-image across the external (or online) images, you should need to use some dependencies to achieve lazy loading and other features.
However, to use gatsby-image you need to allow Gatsby and the inferred GraphQL schema to use their transformers (gatsby-transformer-sharp and sharps (gatsby-plugin-sharp) across with the filesystem (gatsby-source-filesystem) or in other words, Gatsby needs to have access to the images that needs to parse to create a valid queryable GraphQL schema, that will be consumed with the gatsby-image.
In addition, you need to specify the folder of your project where those images belong (setting the filesystem):
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
Once the filesystem is set and the images are processed, a GraphQL node is created, and you are allowed to use the fragments like the one you've provided:
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
Since the external images can't be directly processed by Gatsby, they can't be used with gatsby-image. Depending on the source of those images, some plugins allow you to keep using gatsby-image from external sources (usually from CMSs like Contentful and others).
You can check for further documentation in Working with images docs.
Update (01/06/2021)
In the last Gatsby version (v2.30) they've added a new experimental feature, still in beta to support external images in a <StaticImage> component. To enable it, just upgrade to the latest Gatsby version (via npm or yarn) and add the following flags in your running scripts:
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby develop
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby build
You can then pass absolute URLs to StaticImage:
<StaticImage src="https://placekitten.com/400/400" alt="Kittin" />
When using Plotly Scatter3D , the default mouse hover-over effect displays a kind of coordinate crosshairs. Is there a way to remove this effect and just show the tooltip?
The hover effect causing the lines to show up on the axis are called spikes in Plotly. You can disable them via layout = {'scene': {'xaxis': {'showspikes': False}}}.
Interactive Javascript example:
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', function(err, rows) {
function unpack(rows, key) {
return rows.map(function(row) {
return row[key];
});
}
var trace = {
x: unpack(rows, 'x2'),
y: unpack(rows, 'y2'),
z: unpack(rows, 'z2'),
mode: 'markers',
marker: {
color: 'rgb(127, 127, 127)',
size: 12,
symbol: 'circle',
line: {
color: 'rgb(204, 204, 204)',
width: 1
},
opacity: 0.9
},
type: 'scatter3d'
};
var data = [trace];
var layout = {
scene: {
xaxis: {
showspikes: false
},
yaxis: {
showspikes: false
},
zaxis: {
showspikes: false
}
}
};
Plotly.newPlot('myDiv', data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:100%;height:100%"></div>
Below you see a small test element. It creates a SVG and whenever you click the SVG it should add a circle. Inspecting the element shows that the circles are indeed added (I know the position isn't exactly correct), but they are not shown.
This is svg-test.html
<link rel="import" href="../polymer/polymer.html">
<dom-module name="svg-test">
<link rel="import" type="css" href="svg-test.css">
<template>
<svg id="test" width$="{{width}}" height$="{{height}}" xmlns="http://www.w3.org/2000/svg"></svg>
</template>
<script>
Polymer({
is: 'svg-test',
properties: {
width: {
type: String,
value: "200"
},
height: {
type: String,
value: "200"
}
},
listeners: {
'test.tap': 'addCircle'
},
addCircle: function(e) {
var uri = 'http://www.w3.org/2000/svg';
var svg = this.$$('svg');
var circle = document.createElementNS(uri,'circle');
circle.setAttributeNS(uri, 'r', '5');
circle.setAttributeNS(uri, 'cx', e.detail.x);
circle.setAttributeNS(uri, 'cy', e.detail.y);
circle.setAttributeNS(uri, 'fill', 'white');
circle.setAttributeNS(uri, 'stroke', 'black');
circle.setAttributeNS(uri, 'stroke-width', '2');
svg.appendChild(circle);
}
});
</script>
</dom-module>
This is a test page:
<!DOCTYPE html>
<html>
<head>
<title>svg-test Demo</title>
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="svg-test.html">
</head>
<body unresolved>
<p>An example of svg-test looks like this:</p>
<svg-test></svg-test>
</body>
</html>
And this is bower.json:
{
"name": "svg-test",
"dependencies": {
"polymer": "Polymer/polymer#^1.1.2"
}
}
Although SVG elements are in the SVG namespace, attributes are typically in the null namespace so you want this...
var circle = document.createElementNS(uri,'circle');
circle.setAttribute('r', '5');
circle.setAttribute('cx', e.detail.x);
circle.setAttribute('cy', e.detail.y);
circle.setAttribute('fill', 'white');
circle.setAttribute('stroke', 'black');
circle.setAttribute('stroke-width', '2');
I want to type this .
I have tried like this
$$\lambda=\frac{0.693}{t_\frac{1}{2}}$$
Also,
$$\lambda=\frac{0.693}{{t}_\frac{1}{2}}$$
Also,
$$\lambda=\frac{0.693}{t_{\frac{1}{2}}}$$
But it don't work it display something like this
This code
also gives something that we don't want
Mathjax Configuration
<div class="layout"><script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {extensions: ["AMSmath.js","AMSsymbols.js","mhchem.js","noErrors.js","noUndefined.js"]},
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
Browser= Google Chrome
OS= Windows 8.1
Use _{}
_{YOUR EXPRESSION}
Example:
$$Y_n = Y_{n-1}+{{(d/n)}sin(θ\pm n*Δ)}.$$
Result:
$$\frac{1}{\lambda}=\frac{0.693}{t_\frac{1}{2}}$$
renders exactly what you are asking for and I tested it already.
Note the difference:
I just copied your first mathjax code:
$$\lambda=\frac{0.693}{t_\frac{1}{2}}$$
Note that before the '=' on the left side of the equation you just and simply wrote \lambda and that was your only mistake, so I simply replaced \lambda with \frac{1}{\lambda} and that's all.
You already showed us in your question that you already know that underscore _ renders subscript text and symbols in mathjax by the way.
See the live example below:
window.MathJax = {
config: ["MMLorHTML.js"],
jax: ["input/TeX", "input/MathML", "input/AsciiMath", "output/HTML-CSS", "output/NativeMML"],
extensions: ["tex2jax.js", "mml2jax.js", "asciimath2jax.js", "MathMenu.js", "MathZoom.js"],
asciimath2jax: {
delimiters: [
['`', '`'],
['$', '$']
]
},
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"]
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
processEscapes: true
}
};
.MathJax_CHTML {
font-size: 30px !important;
}
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<p> $$\frac{1}{\lambda}=\frac{0.693}{t_\frac{1}{2}}$$</p>
<p> $$\frac{1}{\lambda}=\frac{0.693}{{t}_\frac{1}{2}}$$</p>
<p> $$\frac{1}{\lambda}=\frac{0.693}{t_{\frac{1}{2}}}$$</p>
I want to implement a kind of file-browser, where the user can navigate using the folder-tree, and see the folder-content in a grid.
I want to use the same data-store for both widgets, but can't see how to achive this - the tree needs items with e.g. a children-attribute, the grid only needs those children.
because ther may be a huge dataset, I'm planning to use the jsonreststore.
i was trying with this, and got one solution like this, Please note that the grid and tree are using the same store.. Here the catch is if folder has id of fld1 then all the files under that folder should have id pattern like "fld1f1","fld1f2".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="djlib/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/Grid.css"/>
<link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/claroGrid.css"/>
</head>
<body class=" claro ">
<div id="treeOne"></div>
<div id="gridHolder" style="height:500px"></div>
</body>
<script type="text/javascript">
s =[];
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dojox.grid.DataGrid");
dojo.addOnLoad(function(){
baseStore = new dojo.data.ItemFileReadStore({
data:{
identifier: 'id',
label: 'name',
items: [
{id:'fld1',name:'folder 1', type:"folder", files:[{_reference:'fld1f1'},{_reference:'fld1f2'}]},
{id:'fld1f1',name:'file 1 of folder 1', type:"file", size:'1KB', dateLstMod:'15/15/2001'},
{id:'fld1f2',name:'file 2 of folder 1', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
{id:'fld2',name:'folder 2', type:"folder", files:[{_reference:'fld2f1'},{_reference:'fld2f2'}]},
{id:'fld2f1',name:'file 1 of folder 2', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
{id:'fld2f2',name:'file 2 of folder 2', size:'1KB', type:"file",dateLstMod:'15/15/2001'},
{id:'fld3',name:'folder 3', type:"folder"}
]
}
});
treeModel = new dijit.tree.ForestStoreModel({
store: baseStore,
query:{
type:'folder'
},
rootId: "root",
rootLabel: "List of folders on this drive",
childrenAttrs:['files']
})
t = new dijit.Tree({
model: treeModel
},"treeOne")
dojo.connect(t,'onClick', function(item, node, evt){
if(node.isExpandable){
updateGrid(baseStore.getValues(item,"id"));
}
})
function updateGrid(folderId){
grid.filter({
type:'file' , id:folderId+'*'
},true);
}
var gridStr = [{
cells:[
[
{ field: "name", name: "File Name", width: 'auto' },
{ field: "size", name: "Size", width: 'auto'},
{ field: "dateLstMod", name: "Date Last Modified", width: 'auto'}
]
]
}]
grid = new dojox.grid.DataGrid({
store:baseStore,
structure: gridStr,
noDataMessage:"NO DATA"
}, 'gridHolder');
grid.startup();
grid.filter({
type:'filee'
},true);
})
I think this link has the answer, you don't point the grid at the store, you create the grid and add items by iterating across the relevant children in the store
http://groups.google.com/group/dojo-interest/browse_thread/thread/af7265b19edeeb0/9fee8b5498746dd8