I followed this tutorial on custom controls for a video, and I can't get the fullscreen button to work:
http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
Here is a jsfiddle:
http://jsfiddle.net/strider820/3CGdw/
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
When I step through the fullscreen click, it appears to go where I would expect, but then the actual function call doesn't appear to do anything. What am I doing wrong???
Any video within an iframe will fail to go fullscreen if the iframe is missing the "allowfullscreen" attribute.
Related
In my site i have this problem:
I want that all pages is scrollable if the device have a touch display. My site run into IE
I try with apply touch-action pan-y on my principal div but no result.
Add style to head of your html document
<style>.tst{overflow: hidden;}</style>
Add this line in body tag
<body class="tst" onload ="NoScroll()">
//content here
Add this inside script tags
function noScroll() {
var page = document.getElementsByTagName("body")[0];
if ('ontouchstart' in document.documentElement) {
console.log("touch device detected");
page.classList.remove("tst");
}
else{
console.log("desktop mode");
page.classList.add("tst");
}
}
I have a tooltip on an HTML page implemented using AngularJS uib-tooltip-html:
<div>
<i uib-tooltip-html="myTooltip='my tooltip HTML'"
class="fa fa-exclamation-triangle"></i>
</div>
It shows well on desktop browsers when I hover the icon with the mouse and disappears when the mouse is out of the icon area.
When I activate the tooltip on iPad, it doesn't disappear if I tap in other screen areas.
How to dismiss the uib-tooltip-html tooltip on iPad?
I faced a similar issue and found a solution. Hope this helps some one else looking for an answer. Add the following code to your website:
$('[data-toggle="popover"]').popover(); // close on body click
// iOS doesnt recognise 'body' click so using :not
$(':not(#anything)').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
All credits to stelco at this URL
[Note: this flaw only occurs in Internet Explorer 11. It is fine in IE9, Chrome and Firefox.]
I have the following Css:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
An Html:
<div id="divModalDialogUpdate" class="divModalDialog">
<div>
<input type="text" id="divModalText" />
<button onclick="doStuff();">Press</button>
</div>
</div>
<div id="divCanvas" style="display: none; width:100%; height: 100%;">
<canvas id="m_Canvas" width="200" height="200" oncontextmenu="return false;"></canvas>
</div>
As you can see, I am using the divModalDialog as a Modal Dialog Box which appears over the canvas div.
On the canvas div, a game is running. When I need to fire up the modal dialog I pause the game and then have the code:
window.location = "#divModalDialogUpdate";
The person enters some stuff in the text box, clicks the button which triggers the onclick event which runs the function doStuff(). Within doStuff() is the following line of code which returns to just the canvas div being visible:
window.location = "#";
This works all great.
Now the problem. The game state is paused, and my prefered key to toggle the pause state is the Space key. (Any other key and things would be fine, but the problem is I want to use the space key).
So I tap the space key and this is (unwantedly) triggering the onclick event of the button in the modal dialog div again (even though the modal div is no longer visible) which obviously calls the doStuff() function again.
How do I stop the space key triggering the Modal Div's button onclick event when the Modal Div is no longer visible?
You could use a global variable ignore before any logic in doStuff(), e.g.,
function doStuff() {
if(ignore == true) return;
/* logic here ... */
}
Then change your other code to something like:
ignore = false;
window.location = "#divModalDialogUpdate";
and
ignore = true;
window.location = "#";
There might be a way to do this using event.stopPropagation() but I could not find a way to make that work.
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/
I've made custom controls for my HTML5 video but I don't know how to have that CSS still apply when I go fullscreen.
Here's the [website] I've based my controls on.
On this site, you'll notice that when you click the fullscreen button the custom controls get lost and the video reverts to the default <video> controls.
Does anyone know how to have these custom controls styling/CSS still apply when you go fullscreen?
i answered my own question, the key is that the custom controls are inside the <div> that includes the video that you want to take full screen. In my code below, this <div> is called "videoContainer".
Here's the link I used to figure this out.
http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
here's the JS code for both entering and exiting fullscreen mode in webkit and mozilla browsers:
var $video=$('video');
//fullscreen button clicked
$('#fullscreenBtn').on('click', function() {
$(this).toggleClass('enterFullscreenBtn');
if($.isFunction($video.get(0).webkitEnterFullscreen)) {
if($(this).hasClass("enterFullscreenBtn"))
document.getElementById('videoContainer').webkitRequestFullScreen();
else
document.webkitCancelFullScreen();
}
else if ($.isFunction($video.get(0).mozRequestFullScreen)) {
if($(this).hasClass("enterFullscreenBtn"))
document.getElementById('videoContainer').mozRequestFullScreen();
else
document.mozCancelFullScreen();
}
else {
alert('Your browsers doesn\'t support fullscreen');
}
});
and here's the HTML:
<div id="videoContainer">
<video>...<source></source>
</video>
<div> custom controls
<button>play/pause</button>
<button id="fullscreenBtn" class="enterFullscreenBtn">fullscreen</button>
</div>
</div>
Show custom controller
#customController{
-------------------;
-------------------;
-------------------;
z-index: 2147483647;
}
Hide native controller
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}
Here's a solution that uses the modern Fullscreen API, which is supported on all major browsers today.
// `container` is the element containing the video and your custom controls
const toggleFullscreen = () => {
if(document.fullscreenElement) {
document.exitFullscreen();
} else {
container.requestFullscreen();
}
};