Is it possible to set onmouseup, onmousedown, onclick etc. functions on a video element that is fullscreen, using webkitRequestFullScreen? I register them for the element when I create it, but I do not appear to get the events when the video is full screen.
Also, is it possible to stop the video progress bar appearing when in full screen mode whenever I move the mouse?
Any answers welcome, either using jquery or javascript, or similar.
I couldn't find a way to listen to mouse events on fullscreen as well,
but I've found a workaround:
Instead of putting the video on fullscreen, I simply change the video CSS to:
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999;
Video then behaves like it's on fullscreen, and everything works as usual.
Finally found a way to do it in Chrome: wrap your video element with div and call webkitRequestFullScreen() for that div rather then for video + some additional magic will be required.
HTML code snippet:
<div id="video-container" style="background-color: #000000;" onclick=divClicked()>
<video id="myvideo">Video not supported!</video>
</div>
JavaScript code snippet:
function doFullscreen() {
var container = document.getElementById("video-container");
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
var video = document.getElementById("myvideo");
// have to resize the video to fill the whole screen
video.width=window.screen.availWidth;
video.height=window.screen.availHeight;
}
Such approach allows handling mouse/etc. events in div element - see onclick declaration at HTML example above.
Also note that such approach doesn't force video controls to appear either on fullscreen or in windowed mode.
For the second question regarding the progress bar you can add the following to your CSS:
video::-webkit-media-controls-enclosure {
display:none;
}
But note once again that it is not needed when using the approach above.
Related
Made a plugin that utilizes CKEditor contextmenu. When used inside a bootstrap modal, the first right-click results in an incorrect positioning of the menu. Subsequent attempts work fine.
Tough to debug:
CKEditor exists in one iframe and the contextmenu exists in its own separate iframe that gets generated at first use. That new iframe appears completely outside the modal, with a div wrapper, one level in from the outermost <body> tag on the page.
normal CKEditor iframe which exists inside the modal looks like this:
<iframe src="" frameborder="0"
class="cke_wysiwyg_frame cke_reset"
title="Rich Text Editor, ControlLabel" tabindex="0" ...
contextmenu wrapper looks like this:
<div lang="en" id="cke_28" dir="ltr" class="cke cke_reset_all ...
<iframe id="cke_28_frame" class="cke_panel_frame" ...
The contextmenu wrapper is getting inline position styles calculated against the <body> tag. It gets it wrong the first time you right-click to bring up the contextmenu.
z-index: 10001;
position: absolute;
top: 177px; // wrong. too small.
left: 932.5px;
opacity: 1;
width: 130px;
height: 203px
Second time is correct. Click away, then right-click to bring the contextmenu back and you get a proper rendering:
z-index: 10001;
position: absolute;
top: 487px; // correct. proper distance
left: 719.5px;
opacity: 1;
height: 203px;
width: 130px;
What gives? This has been a herculean debug effort since I've had to creep into iframes, one of which is dynamically generated (gotta use javascript tricks beyond what's offered by Chrome devtools).
There's an open() method in the contextmenu source code here, which starts like this:
open: function( offsetParent, corner, offsetX, offsetY ) {
this.editor.focus();
// ...
Having spent so much time already, before I start stepping through a mountain of code, I'm wondering if I'm even on the right track here. Any help is greatly appreciated.
Fix was an incredibly simple bootstrap css override.
body.modal-open {
position: fixed;
}
Background scrolling was confusing the contextmenu coordinate calculations. It is my suspicion that by default a bootstrap modal will not prevent the background from being scrolled programmatically in all cases.
Bootstrap attaches the .modal-open class onto the <body> tag when there's an open modal.
I'm trying to make an embedding Flickr video be fluid on a responsive theme I'm working on for Tumblr. I'm doing well with any other embedded video or audio players (Youtube, Vimeo, Soundcloud, Spotify, etc), but Flickr videos are overlaping, being unable to contain them on their parent container.
Flickr video iframe and some of its children elements has inline css declarations which are causing the content overflows.
Here's a screenshot with the iframe structure
First I've tried to simply overwrite those styles with CSS but have no effect.
Then I tried with jQuery, but can't target the iframe.
<iframe frameborder="0" allowfullscreen="" class="flickr-embed-frame" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" width="700" height="393" data-natural-width="1024" data-natural-height="576" style="overflow: hidden; padding: 0px; margin: 0px; width: 700px; height: 393px; max-width: none;" data-loaded="true"></iframe>
Despite the iframe has a css class .flickr-embed-frame I can't neither target it, nor its child elements. I've tried with my function inside $(document).ready() and $(window).load() with any result.
Selectors like $('.flickr-embed-frame').contents().find('.child-class'); haven't worked neither.
Inside the iframe there's a video element:
<video src="https://www.flickr.com/photos/138041208#N02/27214754585/play/hd/9ecf29781c/" width="699" height="393" poster="https://farm8.staticflickr.com/7776/27214754585_9ecf29781c_c.jpg" controls=""></video>
Also tried to target it with selectors like $('video[src^="https://www.flickr.com"]') with no result.
Couldn't find any question related, so hope someone will have a solution. Thanks.
EDIT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Ok, I tried to manually embed a Flickr Video on a JSFiddle instead of Tumblr (where you just have to paste an URL link to the video). This is the code Flickr asks you to add on your code in order to display the video:
<a data-flickr-embed="true" href="https://www.flickr.com/photos/138041208#N02/27214754585/in/dateposted-public/" title="Test video"><img src="https://c2.staticflickr.com/8/7776/27214754585_9ecf29781c_b.jpg" width="1024" height="576" alt="Test video"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
Seems to be that iframe is added later, injected into the DOM via javascript. This must be the reason why I can't target the iframe, neither via CSS nor jQuery, since initially it doesn't exist.
Now my question is: How can I check when this iframe is injected to the DOM? This way I could target it and make the changes I need via jQuery.
SOLVED =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
I've finally found a solution for this problem, check my comment bellow.
Thanks to a pretty neat trick exposed by David Walsh (davidwalsh.name/detect-node-insertion) I've managed to solve this.
First we add an animation that will start when the iframe is inserted:
/* set up the keyframes; remember to create prefixed keyframes too! */
#keyframes nodeInserted {
from { opacity: 0.99; }
to { opacity: 1; }
}
The animation needs to be applied on the elements you'd like to listen for (in this case, the iframe).
.parent-container iframe {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
When the animation ends, the insertion event will fire.
First, you have to create a function which acts as the event listener callback:
var insertListener = function(event){
if (event.animationName == "nodeInserted") {
// This is the debug for knowing our listener worked!
// event.target is the new node!
console.warn("Another node has been inserted! ", event, event.target);
}
}
If the animation name matches the desired animation, we know a DOM node has been injected. Now we add the event listener to the parent:
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
Here's a demo I made with the Flickr video embedded, working fine:
Check out this previous post on SO: How to access the content of an iframe with jQuery?
The solution seems to be using jQuery's contents()
$("#myiframe").contents().find("#myContent")
So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click
I'm making a single-page application with HTML, CSS and Javascript (no jQuery or similar). This application is made of many UI pages that can change via Javascript. The user experience is fine using the mouse on computers, but not so nice with touchscreens (mobile, etc.).
There are many buttons with a CSS hover graphic effect. If I change page tapping one button on a touch screen, the pointer stays there triggering the CSS hover of next elements appearing in the same position when the page is "changed". This effect is very annoying, but I can't figure out how to fix it.
The code is very simple:
CSS
button {
background-color: #XXXXXX;
}
button:hover {
background-color: #ZZZZZZ;
}
HTML
<button onclick="changepage()"></button>
You can use modernizr with Touch Events detection, than use
html.no-touch button:hover {
background-color: #ZZZZZZ;
}
Without modernizr you can add this simple code to append no-touch/touch class to html tag
<script type="text/javascript">
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(navigator.userAgent)) {
document.getElementsByTagName('html')[0].className += ' touch';
}else{
document.getElementsByTagName('html')[0].className += ' no-touch';
}
</script>
Thank you anyway! Finally I made a very simple script that works perfectly...it is good even for touch computers that have a mouse too (like mine), and of course for mobile phones. There is no need to detect devices! The solution is to add a very small div under the cursor pointer after the page changes, by calling the function refresh_hover(). This div 1px x 1px is removed as soon as the user clicks on it or the cursor goes out from it. In this way the hover effect is removed when the content changes behind the pointer, but then restored when the user does something! You will probably think that is very stupid, but is simple and works very well!
Here it is:
function refresh_hover(){
if(!event){
return false;
}
var x = event.clientX;
var y = event.clientY;
var div = document.getElementById('mouse_div');
if(!div){
document.body.innerHTML=document.body.innerHTML
+'<div style="position: fixed; z-index: 1000; height: 1px; width: 1px; display: block;" id="mouse_div" onmouseout="this.style.display=\'none\'" onclick="this.style.display=\'none\'"></div>';
div = document.getElementById('mouse_div');
}
div.style.display='block';
div.style.top=y+'px';
div.style.left=x+'px'
}
I am using max-width: 100%; height: auto; on all my <img> elements and on my image slider wrapper.
When resizing the browser window, the images scale correctly, but many surrounding elements don't follow along and misposition. They will self-correct once the page is refreshed or next image is loaded in the image slider. Any ideas?
Demo - scale the window, css at line 25
Pikachoose library sets the sizes of a few elements on each animation.
<div class="pika-stage" style="height: 355px;">
<div class="pika-aniwrap" style="position: absolute; top: 0px; left: 0px; width: 835px;">
This is why everything fixes itself when the next animation happens. You could look though the source and replicate the animations re-sizing code and put it in a $(window).resize event handler. Looking at the docs for Pikachoose it seems that they have a goto method.
You could do something like this:
$(window).resize(function(){$('#pikame').data('pikachoose').GoTo(3)})
Where the index of 3 is the current active slide. You probably want to use a form of timeout and only call it once to improve performance.
var resizeSlider = null
$(window).resize(function(){
if(resizeSlider) clearTimeout(resizeSlider)
resizeSlider = setTimeout(function() {
$('#pikame').data('pikachoose').GoTo(3)
}, 300)
})
This should make it so the goto is fired 300ms after the last window.resize event.
Hope this gives you some ideas.