Develop Reference

How to Open a link (web page) in fullscreen mode, javascript?

simply I need to open a new page in fullscreen.
So, users press a button and then a video (hidden on main page) is open in fullscreen and start to play. When user press button to close fullscreen or press "esc" key, video will pause, fullscreen is closed and iframe is not visible...
I'm try to get this demo works, but with no results.
Also I can make it works only if I open only the video element, not iframe...
const fullscreen = document.querySelector('.playnow');
const video = document.querySelector('#myvideo');
fullscreen.addEventListener('click', toggleFullScreen);
// Create fullscreen video button
function toggleFullScreen() {
if(video.requestFullScreen){
video.requestFullScreen();
} else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
} else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
};
video.classList.remove("d-none");
}
body{
margin:0;
padding:0;
}
.video-container{
width:100%;
height:100vh;
margin: 0 auto;
position:relative;
background-image: url(https://images.unsplash.com/photo-1616485828923-2640a1ee48b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
#myvideo{
}
.d-none{
display:none;
}
<div class="video-container">
<button class="playnow">Open Video in Fullscreen Mode</button>
<video width="100%" autoplay id="myvideo" class="d-none">
<source src="//d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
I've tried:
https://gomakethings.com/how-to-play-a-video-in-full-screen-mode-when-its-thumbnail-is-clicked-with-vanilla-js/ (better demo, but video still visible after fullscreen is closed...)
https://www.hongkiat.com/blog/html5-fullscreen-api/
But no appreciable results.
Thank you, Luca

I think you can try something like that.
const btn = document.querySelector('button')
const screenWidth = window.screen.availWidth;
const screenHeight = window.screen.availHeight
function openFullscreenWindow() {
window.open('https://github.com', '_blank', `width=${screenWidth},height=${screenHeight}`)
}
btn.addEventListener('click', openFullscreenWindow)
<button>Open fullscreen</button>

Maybe a found a solution reading this post on medium: https://medium.com/#roidescruzlara/controlling-the-full-screen-mode-cda0fae4c4f2
And now I can use it as I need.
Thank you so much.
var currentWindowHeight = window.innerHeight;
var element = document.getElementById("container");
var btn = document.getElementById("btn-screen-mode");
var film = document.getElementById("film");
var isFullScreen = false;
window.addEventListener("keydown", useCustomFullScreen.bind(this));
window.addEventListener("resize", isExitingFullScreen.bind(this));
/**
* Gets available exitFullscreen method
*/
function getRequestFullScreen() {
return (
element.requestFullscreen ||
element["mozRequestFullscreen"] ||
element["msRequestFullscreen"] ||
element["webkitRequestFullscreen"]
);
}
/**
* Gets available requestFullscreen method
*/
function getExitFullscreen() {
return (
document["webkitExitFullscreen"] ||
document["msExitFullscreen"] ||
document.exitFullscreen
);
}
/**
* Prevents browser to enter the default fullscreen mode and uses the custom fullscreen method
*/
function useCustomFullScreen(event) {
if (event.key === "F11") {
event.preventDefault();
toggleFullScreen();
}
}
/**
* Detects if the browser is exiting fullscreen mode when window resize
*/
function isExitingFullScreen() {
if (isFullScreen && currentWindowHeight >= window.innerHeight) {
isFullScreen = false;
currentWindowHeight = window.innerHeight;
// Do your full screen mode stuff
updateBtn();
}
}
/**
* Update button appearance according to the current screen mode
*/
function updateBtn() {
if (isFullScreen) {
btn.classList.remove("enter-fullscreen");
btn.classList.add("exit-fullscreen");
element.classList.remove("d-none");
film.play();
return;
}
btn.classList.remove("exit-fullscreen");
btn.classList.add("enter-fullscreen");
element.classList.add("d-none");
film.pause();
}
/**
* Toggles the fullscreen mode using available fullscreen API
*/
function toggleFullScreen() {
if (!isFullScreen && getRequestFullScreen()) {
getRequestFullScreen().call(element);
} else {
getExitFullscreen().call(document);
}
currentWindowHeight = window.innerHeight;
isFullScreen = !isFullScreen;
// Do your full screen mode stuff
updateBtn();
}
.container {
position: relative;
width: 100%;
height: 100%;
}
#container video {
width: 100%;
height: 100%;
object-fit: cover;
}
.intro{
width:100%;
height:100vh;
}
.intro video{
max-width:100%;
height:auto;
object-fit: cover;
}
.d-none{
display:none;
}
#btn-screen-mode {
width: 30px;
height: 30px;
border-radius: 5px;
border: 0;
padding: 0;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.enter-fullscreen {
position: absolute;
top:0;bottom:0;left:0;right:0;
margin: auto;
z-index:2322333;
background-image: url(https://cdn.icon-icons.com/icons2/1674/PNG/512/expand_111060.png);
}
.exit-fullscreen {
border: 2px solid #000;
position: absolute;
top:20px;
right:20px;
z-index:2322333;
background-image: url(https://cdn.icon-icons.com/icons2/1673/PNG/512/collapseoutline_110793.png);
}
<div class="intro">
<button id="btn-screen-mode" class="enter-fullscreen" onclick="toggleFullScreen()"></button>
<video autoplay loop muted playsinline="true" webkit-playsinline="true">
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
</video>
</div>
<div class="container d-none" id="container">
<button id="btn-screen-mode" class="exit-fullscreen" onclick="toggleFullScreen()"></button>
<video loop playsinline="true" webkit-playsinline="true" id="film">
<source src="//d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8" type="video/mp4">
</video>
</div>

Display an image on a button with javascript

I create a music play/pause button with HTML, CSS and Javascript and would like the icon to change when the music is played or paused. Here's the JSFiddle: https://jsfiddle.net/gp7yf1t3/5/
HTML:
<audio id="player">
<source src='https://audio.jukehost.co.uk/c926ef6560961d5fd02e35e1488a5997e8217bc1/1a1c12c319a' type='audio/mpeg'/>
</audio>
<button id="button"></button>
CSS:
#button {
background-image: url(https://i.imgur.com/laKFwvv.png);
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-position: center;
border: 0;
border-radius: 50%;
background-color: rgba(0,0,0,0.25)
}
#button:active { background-color: rgba(255,255,255,0.25); }
body { background: red; }
The current icon is a pause icon, but it's supposed to be a play icon. I also added "pause" when it's pause but I want to make it an icon instead.
Javascript:
var button = document.getElementById("button");
var audio = document.getElementById("player");
button.addEventListener("click", function(){
if(audio.paused){
audio.play();
button.innerHTML = "test";
} else {
audio.pause();
button.innerHTML = "test";
}
});
I tried it with symbol characters but it didn't look really nice and would resize because the symbols weren't the same size. I'd like the button to look nice. My only option right now is to add a play/pause button that doesn't change.

You can insert an <img> tag inside the button like so:
button.addEventListener("click", function(){
if(audio.paused){
audio.play();
buttons.innerHTML = '<img src="https://i.imgur.com/laKFwvv.png" />';
} else {
audio.pause();
buttons.innerHTML = '<img src="https://some/play/icon.png" />';
}
});

in this example i using button tag
var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
audio = new Audio();
audio.src = "https://www.soundjay.com/free-music/midnight-ride-01a.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
// Add Event Handling
playbtn.addEventListener("click",playPause);
// Functions
function playPause(){
if(audio.paused){
audio.play();
playbtn.style.background = "url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(https://image.flaticon.com/icons/svg/148/148744.svg) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);
button{ border:none; cursor:pointer; outline:none; }
button#playpausebtn{ background:url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat;
width:10%;
height:100px;
display: block;
margin: auto;
}
<html>
<body>
<button id="playpausebtn"></button>
</body>
</html>

You are using a background image, so you can simply swap that image using button.style.backgroundImage = 'url(./path/to/image.png)', like so:
var button = document.getElementById("button");
var audio = document.getElementById("player");
button.addEventListener("click", function(){
if(audio.paused){
audio.play();
button.style.backgroundImage = 'url(https://i.imgur.com/laKFwvv.png)';
} else {
audio.pause();
button.style.backgroundImage = 'url(./path/to/image/play.png)';
}
});
#button {
background-image: url(https://i.imgur.com/laKFwvv.png);
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-position: center;
border: 0;
border-radius: 50%;
background-color: rgba(0,0,0,0.25)
}
#button:active { background-color: rgba(255,255,255,0.25); }
body { background: red; }
<audio id="player">
<source src='https://audio.jukehost.co.uk/c926ef6560961d5fd02e35e1488a5997e8217bc1/1a1c12c319a' type='audio/mpeg'/>
</audio>
<button id="button"></button>

Draggable seekbar for HTML5 Audio [duplicate]

This question already has answers here:
Using jQuery to control HTML5 <audio> volume
(4 answers)
Closed 9 years ago.
I know about the .play(), and the .stop() methods.
But is there a way to link up a slider to the volume? Or a slider to the track position? Is that possible?
And help is appreciated. Thanks!

jQuery UI makes it quite simple:
$(function() {
var $aud = $("#audio"),
$pp = $('#playpause'),
$vol = $('#volume'),
$bar = $("#progressbar"),
AUDIO= $aud[0];
AUDIO.volume = 0.75;
AUDIO.addEventListener("timeupdate", progress, false);
function getTime(t) {
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}
function progress() {
$bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime));
$pp.text(getTime(AUDIO.currentTime));
}
$vol.slider( {
value : AUDIO.volume*100,
slide : function(ev, ui) {
$vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"});
AUDIO.volume = ui.value/100;
}
});
$bar.slider( {
value : AUDIO.currentTime,
slide : function(ev, ui) {
AUDIO.currentTime = AUDIO.duration/100*ui.value;
}
});
$pp.click(function() {
return AUDIO[AUDIO.paused?'play':'pause']();
});
});
#player{
position:relative;
margin:50px auto;
width:300px;
text-align:center;
font-family:Helvetica, Arial;
}
#playpause{
border:1px solid #eee;
cursor:pointer;
padding:12px 0;
color:#888;
font-size:12px;
border-radius:3px;
}
#playpause:hover{
border-color: #ccc;
}
#volume, #progressbar{
border:none;
height:2px;
}
#volume{
background:hsla(180,75%,50%,1);
}
#progressbar{
background:#ccc;
}
.ui-slider-handle{
border-radius:50%;
top: -5px !important;
width: 11px !important;
height: 11px !important;
margin-left:-5px !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="player">
<audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>
<div id="volume"></div><br>
<div id="progressbar"></div><br>
<div id="playpause"></div>
</div>

Html and JQuery: How to create slideshow of images or text?

I recently started learning Javascript and Jquery and wanted create my own slideshow of images or text ticker.
I copied some code and modified but nothing happens when i run it.
HTML is like this,simple i wanted that image to change with fadeout.So i chose array.
<div class='tickr'>
<img src='img006.jpg'>
</div>
JQuery is like this
var i = 1;
function loop() {
var pre = [
'disclosure_left.png',
'disclosure_right.png',
'icon_more.png',
'icon_search.png'
];
var old = $('.tickr img');
var newi = '<img src="'+ pre[1]+'"/>';
newi.hide();
$('.tickr').prepend(newi);
newi.fadeIn(1000);
old.fadeOut(1000, function () {
$(this).remove();
});
i = (i == 3) ? i + 1 : 0;
}
// begin invalid code
setInterval("loop()", 2500)
}

There are a couple of errors in your code that are causing the script not to work:
all of your referneces to the "pre" Array are incorrect. Not pre[1]... pre[i]
Your ternary operator at the end of the function was incorrectly written
Also consider using "Chaining" of JQuery methods to save extra time
these changes are outlined below:
var i=0;
function loop(){
var pre = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var old = $('.tickr img');
$('.tickr').prepend('<img src="'+ pre[i]+'"/>');
$('.tickr img[src="'+pre[i]+'"]').hide().fadeIn(1000);
old.fadeOut(1000,function(){
$(this).remove();
});
i = (i == 3) ? 0 : i = i + 1;
}
setInterval(loop, 2500);
hope this helps.

You can use this code to add a slider
<div class="holder">
<div class="slider-parent">
<div class="arrow-left2"></div>
<div class="arrow-right2"></div>
<div class="slider2">
<ul>
<li><img src="images/slider/10.jpg" alt="Chapelle's Show" /> </li>
<li><img src="images/slider/11.jpg" alt="Rescue Me" /></li>
<li><img src="images/slider/12.jpg" alt="The Guild" /></li>
<li><img src="images/slider/13.jpg" alt="Trailer Park Boys" /></li>
<li><img src="images/slider/14.jpg" alt="The Lincoln Lawyer" /></li>
<li><img src="images/slider/15.jpg" alt="Bones" /></li>
<li><img src="images/slider/16.jpg" alt="Survivor Man" /></li>
<li><img src="images/slider/17.jpg" alt="WildBoyz" /></li>
<li><img src="images/slider/18.jpg" alt="American Dad" /></li>
</ul>
</div><!--end slider div-->
</div> <!--Slider parent end-->
</div><!--end holder div-->
The css:
.holder{
width:960px;
}
.slider-parent{
width:100%;
height:210px;
background-color:#e1e1e1;
position:relative;
}
.slider2{
position:absolute;
width:780px;
height:200px;
background-color:#e1e1e1;
top:20px;
left:90px;
overflow:hidden;
}
.slider2 ul {
width:1460px;
height:200px;
background-color:#e1e1e1;
}
.slider2 ul li{
width:140px;
height:200px;
background-color:orange;
margin-right:20px;
float:left;
}
.slider2 ul li:hover{
width:140px;
height:200px;
opacity:.8;
margin-right:20px;
float:left;
}
.arrow-left2{
width:60px;
height:60px;
background-color:white;
position:absolute;
top:100px;
left:0px;
background-image: url('../images/arrow-left.png');
background-repeat:no-repeat;
background-position:center;
border-radius:10px;
}
.arrow-right2{
width:60px;
height:60px;
background-color:white;
position:absolute;
top:100px;
right:0px;
background-image: url('../images/arrow-right.png');
background-repeat:no-repeat;
background-position:center;
border-radius:10px;
}
.arrow-left2:hover{
width:60px;
height:60px;
background-color:white;
position:absolute;
top:100px;
left:0px;
background-image: url('../images/arrow-left.png');
background-repeat:no-repeat;
background-position:center;
border-radius:10px;
opacity:.6;
}
.arrow-right2:hover{
width:60px;
height:60px;
background-color:white;
position:absolute;
top:100px;
right:0px;
background-image: url('../images/arrow-right.png');
background-repeat:no-repeat;
background-position:center;
border-radius:10px;
opacity:.6;
}
The JS:
jQuery(".arrow-right2").hover(function() {
count2++;
// alert(count);
if (count2 >4) {
count2 = 4;
jQuery(".slider2 ul").animate({
"margin-right": "0px"
}); //animate method ennnd
} else {
jQuery(".slider2 ul").animate({
"margin-left": "-=160px"
}); //animate method ennnd
}
}) //click right method end
jQuery(".arrow-left2").hover(function() {
count2--;
if (count2 <0){
count2 = 0;
jQuery(".slider2 ul").animate({
"margin-left": "0px"
}); //animate method ennnd
} else {
jQuery(".slider2 ul").animate({
"margin-left": "+=160px"
}); //animate method ennnd
}
}) //click left method end
If this doesn't work let me know, might have forgotten some js...

javascript not setting innerHTML

I'm working on a website for a client and I am using ajax to get the contents of a file, html specifically, and then I am trying to insert that html into a div so that i can display the content. i know that i am getting the contents of the file because i have alerts set to display the request's readyState, status, and responseText, and it is showing the contents of the file in the alert. however when i attmept to insert it into the div using this line: document.getElementsByClassName('content').innerHTML = response; nothing happens. can anyone help me figure this out?
CODE:
JAVASCRIPT:
<script language="javascript" type="text/javascript">
var request = new ajaxRequest();
var fileLoc;
var response;
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
document.getElementsByClassName('content').innerHTML = response;
}
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
document.getElementsByClassName('content').innerHTML = response;
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function home() {
getData("home");
}
function about() {
getData('about');
}
function proof() {
getData('contact');
}
function contact() {
getData('proof');
}
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject){
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i]);
}
catch(e){
alert(e.description);
}
}
}
else
return false
}
HTML:
<body>
<div class="container">
<div class="logo"> <span id="link-home" class="noglow" onclick="javascript: home();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Home</span><!-- end link-home -->
<span id="link-about"class="noglow" onclick="javascript: about();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">About</span><!-- end link-about -->
<span id="link-proof" class="noglow" onclick="javascript: proof();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Proof of Concept</span><!-- end link-proof -->
<span id="link-contact" class="noglow" onclick="javascript: contact();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Contact</span><!-- end link-contact -->
<div id="home-flower" onclick="javascript: home();" onmouseover="javascript: document.getElementById('link-home').className='glow'" onmouseout="javascript: document.getElementById('link-home').className='noglow'"></div><!-- end home-flower -->
<div id="about-flower" onclick="javascript: about();" onmouseover="javascript: document.getElementById('link-about').className='glow'" onmouseout="javascript: document.getElementById('link-about').className='noglow'"></div><!-- end about-flower -->
<div id="proof-flower" onclick="javascript: proof();" onmouseover="javascript: document.getElementById('link-proof').className='glow'" onmouseout="javascript: document.getElementById('link-proof').className='noglow'"></div><!-- end proof-flower -->
<div id="contact-flower" onclick="javascript: contact();" onmouseover="javascript: document.getElementById('link-contact').className='glow'" onmouseout="javascript: document.getElementById('link-contact').className='noglow'"></div><!-- end other-flower -->
</div><!-- end logo-->
<div class="content"></div><!-- end content -->
</div><!-- end container -->
<div class="footer"></div><!-- end footer -->
CSS:
#charset "UTF-8";
/* CSS Document */
* {
margin:auto;
}
html, body {
height: 100%;
}
.container {
position:relative;
min-height: 100%;
width:800px;
}
.logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
.content {
position:relative;
top:0px;
left:0px;
padding-top:20px;
padding-bottom: 75px !important;
}
.footer {
position:relative;
height: 75px;
margin-top:-75px;
background-color:#06F;
bottom:0px;
left:0px;
}
.large{
font-size:36px;
}
.fltright {
position:relative;
float:right;
top:0px;
left:0px;
width:auto;
height:auto;
}
.fltleft {
position:relative;
float:left;
top:0px;
left:0px;
width:auto;
height:auto;
}
span.glow {
text-shadow: 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF;
color:#999;
text-align:center;
}
span.noglow {
color:#999;
text-align:center;
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
line-height:20px;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#link-home{
position:absolute;
width:75px;
height:30px;
top:110px;
left:419px;
}
#link-about{
position:absolute;
width:75px;
height:30px;
top:110px;
left:515px;
}
#link-proof{
position:absolute;
width:75px;
height:30px;
top:100px;
left:609px;
}
#link-contact{
position:absolute;
width:75px;
height:30px;
top:110px;
left:708px;
}
#home-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:442px;
background:url(images/home-flower.png);
}
#about-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:540px;
background:url(images/about-flower.png);
}
#proof-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:635px;
background:url(images/proof-flower.png);
}
#contact-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:733px;
background:url(images/contact-flower.png);
}

document.getElementByClassName is returning an array. You cannot set the innerHtml of an array you need to loop through the array and set each individual elements inner html;
Working example: http://jsfiddle.net/CYZUL/
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
var elements = document.getElementsByClassName('content');
for(var x=0; x < elements.length; x++)
{
elements[x].innerHTML = response;
}
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
var elements = document.getElementsByClassName('content');
for(var x=0; x < elements.length; x++)
{
elements[x].innerHTML = response;
}
}

Why not using the jQuery's $.load(); function and save your self a lot of pain and time