Here is JWPlayer default control bar:
Can we custom control bar in JWPLayer as below:
I mean the color and removing/arranging some elements on it such as jw-text-elapsed, jw-text-duration...
var playerInstance = jwplayer("divplayer"); playerInstance.setup({
file:'//video.radioradicale.it:1935/store-86/_definst_/mp4:2015/01/MQ781257.mp4/playlist.m3u8',
width:544, height: 306,
});
.jw-knob {
background-color: #ee3137 !important;
}
.jw-text-elapsed, .jw-icon-rewind {
display: none;
}
.jw-icon-playback {
background-color: #ee3137 !important;
border-radius: 999px;
}
<title>JWPlayer 7 controlbar position</title>
<script src="//ssl.p.jwpcdn.com/player/v/7.10.7/jwplayer.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>jwplayer.key="xxxxxxxxxxxxxxx";</script>
</head>
<body class="playerpage">
<div id='divplayer'></div>
</body>
</html>
As above snippet, how we can decrease colored circle size. And also how we can place jw-text-elapsed and jw-text-duration side by side as in the photo (0.00/1.24).
Thanks,
Ken
Related
I want the text to be in the top of the arrow as of the figure shown below:
The html entity of the arrow is ⟶
can you please help me?
This is what I tried, but I want as of figure, arrow is also short as of this ⟶ entity.
.text {
position: relative;
bottom: -10px;
}
<div class="text">MnO<sub>2</sub></div>
<div class="arrow">⟶</div>
Look into MathJax mhchem package. It can let you writing chemical equations easily.
window.MathJax = {
TeX: {
extensions: ["mhchem.js"]
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
]
}
};
.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> $\xrightarrow{\text{$\ce{MnO2}$}}$</p>
<br />
<p> $\ce{A ->[catalyst] B}$</p>
You could adjust the font size of the arrow and maybe slightly scale the width of the arrow-character by e. g. giving it's parent div something like
display:inline-block;
-webkit-transform:scale(3.0,1.0);
-moz-transform:scale(3.0, 1.0);
-ms-transform:scale(3.0, 1.0);
-o-transform:scale(3.0, 1.0);
transform:scale(3.0,1.0);
Will probably distort your arrowhead to ugly. If you want that exact ratio from text to arrow, you would have to use an appropriate image for the arrow.
Here , this will work for you.
<style>
.text {
position: relative;
bottom: -10px;
left: 12px
}
.arrow {
transform: scale(4, 2);
transform-origin: left;
}
</style>
<body>
<div class="text">MnO<sub>2</sub></div>
<div class="arrow">⟶</div>
</body>
i want to show text behind a babylon.js scene. I've made the background transparent but i can't see the text behind it. I've also tried z-index:-1 for the text.
I've only been learning Babylon since last night so I'm really not too sure whats going on. I'm also not good at java Script so any help would be greatly appreciated :)
\\\\\<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BBY TIAL </title>
<script src="https://cdn.babylonjs.com/babylon.max.js"></script>
<style>
*{
background-color: pink;
}
#canvas {
width:80%;
height:80vh;
z-index:10;
border:0;
padding:0;
margin:0;
background-color: transparent;
}
#maya{
font-size: 300px;
color:white;
position: absolute;;
background-color: transparent;
z-index:-200;
}
#wright{
font-size: 300px;
color:white;
position: fixed;
z-index:1;
top:50vh;
left:40%;
background-color: transparent;
}
#full{
z-index: -9;
}
</style>
</head>
<body>
<h1 id="maya">MAYA</h1>
<h2 id="wright">WRIGHT</h2>
<canvas id="canvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function(){
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true,);
engine.enableOfflineSupport = false; // Dont require a manifest file
var createScene = function(){
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
var camera = new BABYLON.ArcRotateCamera("arcCam",
BABYLON.Tools.ToRadians(0),
BABYLON.Tools.ToRadians(0),
7.,BABYLON.Vector3.Zero(),scene);
camera.attachControl(canvas,true);
var light = new BABYLON.PointLight("PointLight",new BABYLON.Vector3(
5,5,5),scene);
light.parent = camera;
light.intensity = 1000.5;
BABYLON.SceneLoader.ImportMesh("","","ShippingContainer.babylon",
scene,function(newMeshes) {
newMeshes.forEach(function(mesh){
mesh.rotation = new BABYLON.Vector3(BABYLON.Tools.ToRadians(
0),0,0);
} );
});
return scene;
}
var scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
});
</script>
<h1 id="full">Maya<br/>Wright</h1>
<style>
#canvas{
background: transparent;
}
h1{
background-color: transparent;
font-size: large;
top:5vh;
left:40%;
position: absolute;
}
</style>
</body>
</html>
\\
The main issue here is setting background color to '*' elements, which prevents the image to be shown. When removing it (and adding it only to body), the h1s (with the negative z index) are shown behind the babylon scene:
Note that I didn't use your model, but the default babylon scene, as i have no access to it.
There is no need to set the canvas' background color to be transparent, the scene.clearColor parameter is doing it for you.
I am making an online scratchcard and i need to know how to change my cursor into a coin.
here is an example of the code i already have tried:
<div id="krasvak" class="scratchpad"></div>
<style>
#krasvak {
width: 25%;
height: 100px;
border: solid 1px;
display: inline-block;
}
</style>
<script type="text/javascript" src="wScratchPad.js"></script>
<script type="text/javascript">
$('#krasvak').wScratchPad({
cursor: 'cursor: url("images/muntje.png"), auto;',
scratchMove: function (e, percent) {
console.log(percent);
if (percent > 70)
{
this.clear();
window.alert("U heeft uw code gekrast");
window.location.href='compleet.php';
}
}
});
$('#krasvak').wScratchPad('bg', 'images/slide1.png');
$('#krasvak').wScratchPad('fg', 'images/overlay.png');
$('#krasvak').wScratchPad('size', 10);
</script>
and here is a part of the java script code
$.fn.wScratchPad.defaults = {
size : 5, // The size of the brush/scratch.
bg : '#cacaca', // Background (image path or hex color).
fg : '#6699ff', // Foreground (image path or hex color).
realtime : true, // Calculates percentage in realitime
scratchDown : null, // Set scratchDown callback.
scratchUp : null, // Set scratchUp callback.
scratchMove : null, // Set scratcMove callback.
cursor : 'crosshair' // Set cursor.
};
I would really appriciate it if someone could help me out.
According to the github of the plugin there's a solution:
Update on the Fly
var sp = $("#elem").wScratchPad();
sp.wScratchPad('size', 5);
sp.wScratchPad('cursor', 'url("./cursors/coin.png") 5 5, default');
// Or directly with element.
$("#elem").wScratchPad('image', './images/winner.png');
So try this:
<div id="krasvak" class="scratchpad"></div>
<style>
#krasvak {
width: 25%;
height: 100px;
border: solid 1px;
display: inline-block;
}
</style>
<script type="text/javascript" src="wScratchPad.js"></script>
<script type="text/javascript">
$('#krasvak').wScratchPad({
scratchMove: function (e, percent) {
console.log(percent);
if (percent > 70)
{
this.clear();
window.alert("U heeft uw code gekrast");
window.location.href='compleet.php';
}
}
});
$('#krasvak').wScratchPad('bg', 'images/slide1.png');
$('#krasvak').wScratchPad('fg', 'images/overlay.png');
$('#krasvak').wScratchPad('size', 10);
$('#krasvak').wScratchPad('cursor', 'url("./images/muntje.png") 5 5, default');
</script>
The syntax is
cursor:url(URL TO THE IMAGE)
I don't recommend disk paths (they might not even work). Use a relative path, i.e.
../Scratch the code/images/muntje.png
Try this:
cursor: url("images/muntje.png"), auto;
Make sure the path to the images directory is correct, relative to the path your CSS file is located.
Hi Please use the path like
cursor: url("/Bram/Bram/Scratch the code/images/muntje.png");
if u want to give the full path and access the html file locally
cursor: url("file://C:/xampp/htdocs/Bram/Scratch the code/images/muntje.png");
Put it in the CSS, not in the JavaScript. Maybe that works.
<div id="krasvak" class="scratchpad"></div>
<style>
#krasvak {
cursor: url("images/muntje.png"), auto;
width: 25%;
height: 100px;
border: solid 1px;
display: inline-block;
}
</style>
<script type="text/javascript" src="wScratchPad.js"></script>
<script type="text/javascript">
$('#krasvak').wScratchPad({
scratchMove: function (e, percent) {
console.log(percent);
if (percent > 70)
{
this.clear();
window.alert("U heeft uw code gekrast");
window.location.href='compleet.php';
}
}
});
$('#krasvak').wScratchPad('bg', 'images/slide1.png');
$('#krasvak').wScratchPad('fg', 'images/overlay.png');
$('#krasvak').wScratchPad('size', 10);
</script>
I am using cesium : http://cesiumjs.org/
and I wanted to make some divs float over a cesium map, but I can't get it to work.
I tried the following container/tag method at jsfiddle.net/j08691/dChUR/5/ - substituing the image by a cesium map div - but it doesn't seem to work - the "tag" div isn't shown.
Any help?
You need to add position: absolute; and either top or bottom to your CSS, because the widget also uses absolute positioning. Adding this creates a new stacking context, which overrides z-index.
Here's a working example, hit "Run Code Snippet" at the bottom of this:
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
var viewer = new Cesium.Viewer('cesiumContainer', {
timeline: false,
animation: false,
navigationHelpButton: false
});
var skyAtmosphere = viewer.scene.skyAtmosphere;
var skyCheckbox = document.getElementById('skyCheckbox');
skyCheckbox.addEventListener('change', function() {
viewer.scene.skyAtmosphere = skyCheckbox.checked ? skyAtmosphere : undefined;
}, false);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif; color: #edffff;
}
#controlPanel {
position: absolute;
top: 5px;
left: 5px;
background: rgba(42, 42, 42, 0.8);
padding: 5px 8px;
border-radius: 5px;
}
label {
cursor: pointer;
}
label:hover span {
text-decoration: underline;
}
<link href="http://cesiumjs.org/releases/1.15/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.15/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="controlPanel">
This is a floating control panel<br/>
with a translucent background color.
<p>
<label>
<input id="skyCheckbox" type="checkbox" checked />
<span>Enable atmospheric effect</span>
</label><br/>
<button class="cesium-button">Button 1</button>
<button class="cesium-button">Button 2</button>
</p>
</div>
To add to emackey's answer, what I had to do in addition to adding position: absolute to my css was to add a top:150px or bottom:150px. Basically anything that will specify a position relative to the parent container.
Even though using the absolute position it is most likely being pushed down by the cesium widget since it takes up 100% height.
I'm trying to make a button comprised of several layers. The final layer should be the clickable layer and a click should control the color of a previous layer.
This works in all 4 major browsers except for IE and "active". How do I get this to work in IE?
jsfiddle over here -> http://jsfiddle.net/4vaY6/197/
I'm doing this because I want the whole area to be clickable, it should not have blind spots.
<div class = "div1">
<div class = "div2">
</div>
</div>
.div2
{
width: 100%;
height: 100%;
background-color: black;
}
.div1
{
position: absolute;
width: 350px;
height: 100px;
}
.div1:hover .div2 {background-color:yellow;}
.div1:active .div2 {background-color: grey;}
According to http://www.quirksmode.org/css/contents.html:
IE 8-10 (and maybe older ones, too) have a slight bug: clicking the mouse down on a nested element does not trigger :active.
It is even worse with IE7.
You could use JavaScript to simulate the :active behaviour:
Replace
.div1:hover .div2 {background-color:yellow;}
.div1:active .div2 {background-color: grey;}
with
.hover {background-color: yellow;}
.active {background-color: grey;}
And add the following (if you use jQuery):
<script type="text/javascript">
$('.div1').hover(function(){
$('.div2').toggleClass('hover');
});
$('.div1').mousedown(function(){
$('.div2').addClass('active');
}).mouseup(function(){
$('.div2').removeClass('active');
});
</script>
Or if you use MooTools:
<script type="text/javascript">
$$('.div1').addEvents({
'mouseenter': function() { $$('.div2').addClass('hover'); },
'mouseleave': function() { $$('.div2').removeClass('hover'); },
'mousedown': function() { $$('.div2').addClass('active'); },
'mouseup': function() { $$('.div2').removeClass('active'); },
});
</script>
jsFiddle: http://jsfiddle.net/4vaY6/201/