I need your help
I have this html code :
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p><img src=""/><span id="image"><img src=""/></span><span id="more">Lorem Ipsum </span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("image");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>
This finally would be working. I have used a file from my github repo to make the example working. But you can always that path.
// You can replace your whole JS with this code
fetch("https://raw.githubusercontent.com/ArunBohra33/json-data/main/clickable-pic") //file json objects
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log("error: " + err);
});
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.results.length; i++) {
var img = document.createElement("img");
// New code
// Add a id to the image
img.setAttribute("id", "popup-image" + (i + 1));
img.src = data.results[i].picture.large;
img.classList.add("popup-img");
img.setAttribute("data-data", JSON.stringify(data.results[i]));
mainContainer.appendChild(img);
// Old code
var div = document.createElement("div");
div.innerHTML = "first: " + data.results[i].name.first + " First Name :" + data.results[i].name.last;
mainContainer.appendChild(div);
// if (i == data.results.length - 1) clickOnImg();
}
for (let i = 0; i < data.results.length; i++) {
document.querySelector(`#popup-image${i + 1}`).addEventListener("click", function () {
var firstName = data.results[i].name.first;
var lastName = data.results[i].name.last;
showData(firstName, lastName, i + 1);
});
}
}
// This function shows the modal with data in it
function showData(firstName, lastName, index) {
var popupBox = document.createElement("div");
popupBox.style.display = "flex";
popupBox.setAttribute("id", "popupBoxOverlay_{i}");
popupBox.classList.add("popupBox");
popupBox.innerHTML = `<div class="modal">
<span class="cross-btn-${index - 1}">×</span>
<div class="fname">
<label>FirstName: </label>
<span class="firstName${index - 1}">${firstName}</span>
</div>
<div class="lname">
<label>LastName: </label>
<span id="lastName${index - 1}">${lastName}</span>
</div>
</div>`;
document.body.prepend(popupBox);
var crossBtn = document.querySelector(".cross-btn-" + (index - 1));
crossBtn.addEventListener("click", function () {
popupBox.remove();
});
}
/* // CSS CODE */
img {
width: 200px;
}
.popupBox {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
height: 100vh;
width: 100vw;
/* z-index: 100000; */
display: flex;
justify-content: center;
align-items: center;
}
.modal {
display: flex;
flex-direction: column;
min-width: 60%;
background: #fff;
border-radius: 8px;
position: relative;
padding: 2rem;
}
[class^=cross-btn] {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
<div class="album py-5 bg-light">
<div class="container">
<br>
<h1>Persons</h1><br>
<div class="row">
<div class="card-group">
<div id="myData"></div>
</div>
</div>
</div>
</div>
Related
Our videos use the lower third of the page for introductions, etc. much like TV News stations do. When captions are on, they're blocking all of that, thus creating a LOT of complaints from the communities that need the captions. I've tried tinkering with the CSS, but with a responsive layout, resizing the player wreaks havoc, often putting them out of sight altogether.
Is there a setting that can be changed, or technique to use, that will keep the captions at the top and in view when resized, OR in an external container?
Problem: the JW player 608 live captions are not formatted cleanly.
To solve this, disable the JW caption display and format our own window, named "ccbuffer"
<style type="text/css">
.jw-captions {
display: none !important;
}
#ccbuffer {
border: 2px solid white !important;
border-radius: 4px;
background-color: black !important;
display: flex;
height: 120px;
margin-top: 6px;
font: 22px bold arial, sans-serif;
color: white;
justify-content: center;
align-items: center;
}
</style>
Here is where I show the player, and ccbuffer is a div right below it
<div id="myPlayer">
<p style="color: #FFFFFF; font-weight: bold; font-size: x-large; border-style: solid; border-color: #E2AA4F">
Loading video...
</p>
</div>
<div id="ccbuffer" />
DOMSubtreeModified is deprecated. Use MutationObserver, which is less stressful on the client.
Let's hook the 'captionsChanged' event from JW. if track is 0 then no captions are selected and we disconnect the observer. If captions are selected, then we use jquery to pull the text out of the jw-text-track-cue element, and format it into a nice 3 line display in our ccbuffer window.
<script>
var observer;
jwplayer().on('captionsChanged', function (event) {
if (event.track == 0) {
observer.disconnect();
$('#ccbuffer').hide('slow');
}
else {
$('#ccbuffer').show('slow');
// select the target node
var target = document.querySelector('.jw-captions');
// create an observer instance
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
}
});
$(document).ready(function () {
$('#ccbuffer').hide();
});
</script>
So when the user enables captions, the ccbuffer window will slide open and display a clean 3 line representation of the CC text.
Final Solution: External Captions that are draggable/resizable
All credit to #Basildane, I worked out how to extenalize the captions with VOD, and to make them draggable and resizable, with CSS experimentation for ADA consideration:
<!DOCTYPE html>
<html>
<head>
<title>JW External Captions</title>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/jwplayer/v8.10/jwplayer.js"></script>
<style type="text/css">
#myPlayer {
margin-bottom:5px;
}
.jw-captions {
display: none !important;
}
#ccbuffer {
color: white;
background-color: black;
opacity:.7;
font: 22px bold san-serif;
width: 100%;
padding: 15px;
height: 100%;
position:relative;
}
.night {
color:silver !important;
background-color: black !important;
opacity:1 !important;
border-color:silver !important;
}
.highcontrast {
color:white ! important;
background-color: black !important;
opacity:1 !important;
border-color:white !important;
}
.highcontrast2 {
color:black !important;
background-color: yellow !important;
opacity:1 !important;
border-color:black !important;
}
.highcontrast3 {
color:yellow !important;
background-color: black !important;
opacity:1 !important;
border-color:yellow !important;
}
#ccContainer {
position: absolute;
z-index: 9;
border: 1px solid inherit;
overflow: hidden;
resize: both;
width: 640px;
height: 180px;
min-width: 120px;
min-height: 90px;
max-width: 960px;
max-height: 300px;
}
#ccContainerheader {
padding: 3px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
border:1px solid;
}
</style>
</head>
<body>
<h3>JW Draggable Captions Container</h3>
<div id="PlayerContainer" style="width:401px;">
<div id="myPlayer">Loading video...</div>
</div>
<div id="ccContainer">
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
<div style="float:right;">
<form id="myform">
<select id="ccFontFamily">
<option value="sans-serif">Default Font</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
<option value="cursive">Cursive </option>
</select>
<select id="ccFontSize" style="">
<option value="22">Default Size</option>
<option value="14">14</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="32">32</option>
</select>
<select id="ccContrast" style="">
<option value="ccdefault">Default Contrast</option>
<option value="night">Night</option>
<option value="highcontrast">High Contrast</option>
<option value="highcontrast2">Black/Yellow</option>
<option value="highcontrast3">Yellow/Black</option>
</select>
<button id="ccFontReset">Reset</button>
</form>
</div>
<div id="ccContainerheader">
Captions (click to move)
</div>
<div id="ccbuffer"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
jwplayer.key = 'xxxxxxxxxxxxxxxxxxx';
jwplayer('myPlayer').setup({
width: '100%', aspectratio: '16:9', repeat: 'false', autostart: 'false',
playlist: [{
sources: [ { file: 'https:www.example.com/video.mp4'}],
tracks: [ { file: 'https:www.example.com/video-captions.vtt', kind: 'captions', label: 'English', 'default': true } ]
}]
})
// External CC Container
$('#ccContainer').hide();
var position = $('#myPlayer').position();
var width = $('#PlayerContainer').outerWidth();
ccTop = position.top;
ccLeft = (width+50)+'px'
$('#ccContainer').css({'top':ccTop, left:ccLeft });
var observer;
jwplayer().on('captionsList', function (event) {
ccObserver(event);
});
jwplayer().on('captionsChanged', function (event) {
ccObserver(event);
});
videoplayer.on('fullscreen', function(event){
if(event.fullscreen){
$('.jw-captions').css('display','block');
}else{
$('.jw-captions').css('display','none');
}
});
$("#ccFontFamily").change(function() {
$('#ccbuffer').css("font-family", $(this).val());
});
$("#ccFontSize").change(function() {
$('#ccbuffer').css("font-size", $(this).val() + "px");
});
$("#ccContrast").change(function() {
$('#ccContainer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccContainerheader').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccbuffer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('select').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccFontReset').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
});
$('#ccFontReset').click(function() {
ccFontReset();
});
function ccFontReset(){
$("#ccFontFamily").val($("#ccFontFamily option:first").val()).trigger('change');
$("#ccFontSize").val($("#ccFontSize option:first").val()).trigger('change');
$("#ccContrast").val($("#ccContrast option:first").val()).trigger('change');
}
ccFontReset();
});
function ccObserver(event){
if (event.track == 0) {
$('#ccContainer').hide('slow');
$('.jw-captions').css('display','block'); // VERY important
if (observer != null){
observer.disconnect();
}
}
else {
$('#ccContainer').show('slow');
$('.jw-captions').css('display','none'); // VERY important
var target = document.querySelector('.jw-captions');
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(target, config);
}
}
// External CC Container - Make the DIV element draggable:
dragElement(document.getElementById("ccContainer"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
I am struggling to get a Google Gauge Chart to center align.
I would like to have a row with a centered gauge char and one row with a centered line chart.
I have tried various options and using "display: inline-block" but does not work.
The row with the line chart behaves as expected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge', 'corechart']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
drawChart();
drawGauges();
}
function drawGauges() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var w = $( window ).width();
var x = Math.floor(w * 0.3);
console.log("width: " + w + ", x = " + x);
var h = $( window ).height();
var y = Math.floor(h * 0.3)
console.log("height: " + h + ", y = " + y);
var options = {
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5,
width: x,
height: y,
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
$(window).resize(function(){
drawCharts();
});
</script>
<style>
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.row {
height:30%;
width: 100%;
}
#chart_div {
display: inline-block
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div id="chart_div"></div>
</div>
<div class="row">
<div id="curve_chart" ></div>
</div>
</div>
</body>
</html>
add text-align: center; to .container
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
text-align: center;
}
see following working snippet...
google.charts.load('current', {
callback: drawCharts,
packages:['corechart', 'gauge']
});
function drawCharts() {
drawChart();
drawGauges();
}
function drawGauges() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var w = $( window ).width();
var x = Math.floor(w * 0.3);
console.log("width: " + w + ", x = " + x);
var h = $( window ).height();
var y = Math.floor(h * 0.3)
console.log("height: " + h + ", y = " + y);
var options = {
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5,
width: x,
height: y,
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
$(window).resize(function(){
drawCharts();
});
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.row {
height: 30%;
width: 100%;
}
#chart_div {
display: inline-block;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row">
<div id="chart_div"></div>
</div>
<div class="row">
<div id="curve_chart" ></div>
</div>
</div>
I am working on a photo gallery in AngularJS using Angular Material (run the snippet in fullscreen to see my problem).
var app = angular.module('app', ['ngMaterial']);
app.controller('TitleController', function($scope) {
$scope.title = 'Gallery';
});
app.controller('GalleryCtrl', function($scope, $http, $q, $mdMedia, $mdDialog) {
//https://material.angularjs.org/latest/demo/virtualRepeat
$scope.Images = [],
//add more images
$scope.LoadMore = function() {
for (i = 0; i < 25; i++) {
var randomWidth = Math.round(Math.random() * (800 - 400) + 400);
var randomHeight = Math.round(Math.random() * (800 - 400) + 400);
$scope.Images.push({
src: "http://placehold.it/" + randomWidth + "x" + randomHeight + "/",
id: Math.round(Math.random() * 10000)
});
};
}
$scope.ShowDetails = function(ev, number) {
var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;
$mdDialog.show({
controller: DialogController,
templateUrl: 'Home/GetInfo?id=' + number,
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: useFullScreen
})
$scope.$watch(function() {
return $mdMedia('xs') || $mdMedia('sm');
}, function(wantsFullScreen) {
$scope.customFullscreen = (wantsFullScreen === true);
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
//initial loading
$scope.LoadMore();
});
body {
background: #eeeeee;
}
html {
background: #eeeeee;
}
.gridListdemoBasicUsage md-grid-list {
margin: 8px;
}
.gridListdemoBasicUsage .green {
background: #b9f6ca;
}
.gridListdemoBasicUsage md-grid-tile {
transition: all 400ms ease-out 50ms;
}
.responsiveImage {
max-width: 100%;
max-height: 100%;
}
md-content {
background: #eeeeee;
position: relative;
}
.fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.toolbardemoScrollShrink .face {
width: 48px;
margin: 16px;
border-radius: 48px;
border: 1px solid #ddd;
}
.md-toolbar-tools {
background-color: #259b24;
}
.dialogdemoBasicUsage #popupContainer {
position: relative;
}
.dialogdemoBasicUsage .footer {
width: 100%;
text-align: center;
margin-left: 20px;
}
.dialogdemoBasicUsage .footer,
.dialogdemoBasicUsage .footer > code {
font-size: 0.8em;
margin-top: 50px;
}
.dialogdemoBasicUsage button {
width: 200px;
}
.dialogdemoBasicUsage div#status {
color: #c60008;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>
<body ng-app="app" ng-controller="GalleryCtrl as gc" ng-cloak="" id="popupContainer" class="gridListdemoBasicUsage dialogdemoBasicUsage">
<md-toolbar md-scroll-shrink="" ng-if="true" ng-controller="TitleController">
<div class="md-toolbar-tools">
<h3><span>{{title}}</span></h3>
</div>
</md-toolbar>
<md-content style="height:100vh" />
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile ng-click="ShowDetails($event, n.id)" ng-repeat="n in Images" class="green">
<img class="responsiveImage" src="{{n.src}}">
<md-grid-tile-footer>
<h3>Photo number {{n.id}}</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
<md-button class="md-raised md-primary" ng-click="LoadMore()">Primary</md-button>
</section>
</body>
Go fullscreen, scroll to the bottom of the page, and press a button to load more images. The problem I'm having: I am trying to get the toolbar at the top of the screen to disappear when scrolling down, and appear again when scrolling up. However, 2 scrollbars appear, and only the right one affects the toolbar.The left scrollbar actually scrolls all the way down on the page.
My desired situation: only 1 visible scrollbar to scroll down the entire gallery, that also makes the toolbar appear and disappear. How do I do this?
try adding overflow-y: hidden; to the body css rule.
Given this example:
var SomeApp = angular.module('SomeApp', [])
.controller('SomeController', function($scope){
$scope.items = [0,1,2,3]
})
.directive('gridResize', function(){
return {
scope: true,
link: function(scope, elem) {
scope.gridResize = {
width: $(elem).width(),
height: $(elem).height()
};
}
}
})
.parent {
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
border: 1px solid red;
}
.parent > * {
background-color: rgba(0,0,0,.14);
margin-bottom: 1px;
padding: 20px;
box-sizing: border-box;
}
.parent > *:last-child {
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="SomeApp">
<div class="parent" ng-controller="SomeController" grid-resize>
<div ng-style="{'min-height':($parent.gridResize.width/8) + 'px'}"
ng-repeat="item in items"
>
height: {{$parent.gridResize.height}} | width: {{$parent.gridResize.width}}
</div>
</div>
</div>
Can anyone tell me how I could bind the height and width of the grid-resize directive to the DOM element? I want the angular properties to change when the DOM element changes.
In your directive use the window "resize" event to update the sizes on the scope:
var SomeApp = angular.module('SomeApp', [])
.controller('SomeController', function($scope){
$scope.items = [0,1,2,3]
})
.directive('gridResize', function(){
return {
scope: false,
link: function(scope, elem) {
scope.gridResize = {
width: $(elem).width(),
height: $(elem).height()
};
angular.element(window).on('resize', function(e) {
scope.gridResize = {
width: $(elem).width(),
height: $(elem).height()
};
scope.$apply();
});
}
}
})
Also notice that I changed the directive's scope to 'false'. You already have a scope on that element created by the ng-controller directive.
I'm making an HTML5 game using Tululoo.
I want to play the game in fullscreen. I used CSS to display the game in fullscreen. There is an image beneath the Tululoo game (div) where I want to display the score. I gave the scores an X and Y position, to be on top of the image.
When I activate fullscreen, the tululoogamewill be centered in the middle of the page. Now I want the score image to be placed beneath the game, and the scores to be placed at the exact same point on the image, as I did when the game was not in fullscreen and at the left top of the page. I can´t give an X and Y position to the scores, because of the difference in screen sizes.
How do I need to solve this?
Here's my HTML:
<html lang='en'>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var scoreteen = 0;
var scoremutant = 0;
var fullscreenteller = 0;
window.onload = function () {
document.getElementById('tululoogame').style.display = 'none';
document.getElementById('scoreteen').style.display = 'none';
document.getElementById('scoremutant').style.display = 'none';
}
function laatgamezien() {
document.getElementById('tululoogame').style.display = 'block';
document.getElementById('play').style.display = 'none';
document.getElementById('scoreteen').style.display = 'block';
document.getElementById('scoremutant').style.display = 'block';
}
function launchFullscreen(element) {
laatgamezien();
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function dumpFullscreen() {
console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
}
document.addEventListener("fullscreenchange", function(e) {
console.log("fullscreenchange event! ", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
console.log("mozfullscreenchange event! ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
console.log("webkitfullscreenchange event! ", e);
});
document.addEventListener("msfullscreenchange", function(e) {
console.log("msfullscreenchange event! ", e);
});
function puntvoorteen(){
if (NaN === (scoreteen)) {
scoreteen = 0;
}
scoreteen++;
tekst = scoreteen;
document.getElementById("scoreteen").innerHTML = tekst;
}
function puntvoormutant(){
if (NaN === (scoremutant)) {
scoremutant = 0;
}
scoremutant++;
tekst = scoremutant;
document.getElementById("scoremutant").innerHTML = tekst;
}
</script>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='pragma' content='no-cache' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, height=device-height' />
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
<meta charset='utf-8' />
</head>
<body style='background: black; margin: 0; padding: 0; overflow: hidden;'>
<div id="play">
<img src="afbeeldingen/playbutton.png" width="180" height="180" onclick="launchFullscreen(document.documentElement);" />
</div>
<div id='tululoogame'></div>
<img src="afbeeldingen/opzetscore.png" width="1024" height="98" id="scorepicture">
<div id="scoreteen"> </div>
<div id="scoremutant"> </div>
<script type='text/javascript' src='game.js'></script>
</body>
</html>
And here is my CSS:
#scoreteen {
position:absolute;
color:white;
left: 680px;
top: 670px;
font-size: 30px;
}
#scoremutant {
position:absolute;
color:white;
left: 320px;
top: 670px;
font-size: 30px;
}
#play {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#tululoogame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height: 100vh;
width: 100vw;*/
}
#scorepicture {
}
And some screenshots:
Game not in fullscreen
Game in fullscreen