I want to fit the video to the screen and scrolling needs to be disabled.
Problem:
Instead of being full screen it is overflowing from the screen.
What am I doing wrong here?
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/indigo-player#1/lib/indigo-player.js"></script>
</head>
<body>
<div id="playerContainer" class="videosize">
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</div>
</body>
</html>
Make the <body> element have a class where
position: relative , width: 100% and overflow: hidden are declared or use the inline style="..."
After doing this the video should take the width of the parent with a relative position.
The solution can be this:
Added position:fixed; in css
Added height:100%; in css
Added background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center; in css
Added background-size: 100%; in css
Know Issues
NavigationUI visible only in full screen mode (F11 or F) given of the script (Need to change the script to fix these) but it still work.
Final Code
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:fixed;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center;
background-size: 100%;
}
</style>
</head>
<body>
<div id="playerContainer" class="videosize">
</div>
<script src="https://cdn.jsdelivr.net/npm/indigo-player#1/lib/indigo-player.js"></script>
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</body>
</html>
Related
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.
Is it possible to change the design of the LayerList widget in this ESRI tutorial ?
I would like the LayerList with no checkboxes and to select one layer at a time just by clicking it’s name.
I know you can hide the checkboxes with display: none but how do you select the layers?
Michelle.
Well, Here is the working solution for this-
Use selection color to select/Unselect the layerList Items:-
JSFiddle:- https://jsfiddle.net/vikash2402/5dcLh450/3/
Below is the working code for this-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
}
/* ****** Here you can change the selection color ******* */
.esriListVisible label{
background-color: aqua !important;
}
.esriCheckbox{
display: none !important;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.startup();
});
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Hoping this will help you :)
I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg
You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange
Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle
I am pretty sure this is a positioning issue, but unfortunately positioning is my weakness.
I have a container with a jquery image slideshow in it. The images in the slideshow have to be {position: absolute;} or else they will just display one after the other down the page.
Unfortuntely, the containers that come after the slideshow container are displaying behind the slideshow container, not underneath it. I think this is because of the absolute positioning of the slideshow images, but I don't know how to rectify it.
#charset "UTF-8";
/* CSS Document */
#main {
position: relative;
width: 100%;
}
#slideshow {
position: relative;
width: auto;
}
#slideshow IMG {
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0;
}
#slideshow IMG.active {
z-index: 10;
opacity: 1.0;
}
#slideshow IMG.last-active {
z-index: 9;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({
opacity: 0.0
})
.addClass('active')
.animate({
opacity: 1.0
}, 500, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 3000);
});
</script>
<link href="../../Assignment5-Portfolio/HTML/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="slideshow">
<img src="../Images/bike.png" width="100%" height="auto" class="active" />
<img src="../Images/fish.png" width="100%" height="auto" />
<img src="../Images/stairs.png" width="100%" height="auto" />
<img src="../Images/gage.png" width="100%" height="auto" />
</div>
<div id="aboutme">About me</div>
<div id="videography">Video
<div id="text">text goes here</div>
<div id="video">video goes here</div>
</div>
<div id="photography">
<div id="photos">photos go here</div>
<div id="photography"></div>
</div>
</div>
</body>
</html>
So, #slideshow is the container in question. The images in it are blocking the containers below it. I want the images to stretch across the whole width of the screen.
As I said, I'm fairly certain it's a positioning problem, but I feel like I could also be missing something important from the #slideshow container, but I can't find what it is.
Thanks in advance for any help you can provide!
You should put a wrapper div around the entire slideshow and give it position:relative; That way it will contain the slideshow and create the spacing you need.
If you will consider a bit more javascript you could add this tidbit of code
$(document).ready(function()
{
var objHeight = 0;
$.each($('#slideshow').children(), function(){
objHeight = $(this).height();
});
$('#slideshow').height(objHeight);
});
DEMO
the absolute and also relative positioned elements should have certain height and width (however block elements have the width:100% initially). Otherwise next elements will overlap with them. So if you have certain height for your images e.g. 400px then:
#slideshow {
position:relative;
width:auto;
height:400px;
}
I've been trying to make two divs stick to the top of the page after the user scrolled past these divs. Both divs are positioned at the same hight. This is what I have been using from other stackoverflow answers:
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#blockleft').addClass('sticky')
else
$('#blockleft').removeClass('sticky');
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
</head>
<body>
<div id="header"></div>
<div id="sticky-anchor"></div>
<div class="container">
<div id="blockleft"></div>
<div id="blockright"></div>
<div id="content"></div>
</div>
</body>
Css:
body {
margin: 0;
padding: 0;
}
#header {
height:200px;
background-color:#666;
}
#blockleft {
width:100px;
height:500px;
margin-top:10px;
background-color:#090;
float:left;
}
#blockright {
width:100px;
height:500px;
margin-top:10px;
background-color:#0F3;
float:right;
}
#content {
width:500px;
height:2000px;
background-color:#0CF;
margin:auto;
}
.container {
width:800px;
margin:auto;
}
.sticky {
position: fixed;
top: 0;
}
The script is working fine on one div, but when using the script twice it automatically moves the right div to the left and this one is not sticking to the top of the page.
I was hoping someone could help me out with this one.
Edit: Recreated the problem in a new document
Since the divs lose float property when we make it position:fixed, they both overlap with each other. In order to make them in their position, we need to apply right distance for the right div. To fix this, replace your script code as follows.
<script type="text/javascript">
function sticky_relocate() {
var containerWidth = $(".container").outerWidth(true);
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
{
$('#blockleft').addClass('sticky');
$('#blockright').addClass('sticky');
$('#blockright').css("right", (containerWidth-800)/2 + "px");
}
else
{
$('#blockleft').removeClass('sticky');
$('#blockright').removeClass('sticky');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
The code $('#blockright').css("right", (containerWidth-800)/2 + "px"); calculates the right distance value for the right div and adds css property right:XXXpx to that div while scrolling. The code var containerWidth = $(".container").outerWidth(true); fetches the width of the container div with its margin value (since margin is made auto, we need definite number for calculation)