I`m having an issue with my custom video controller.
When the video is opened in firefox the controllers do not show in fullscreen mode.
I tried everything i found in regards to the topic, but no luck so far.
Here is the html:
<div id="contentContainer" class="border">
<div id="videoStreamed">
<video autoplay="" name="media" src="blob:https://****/f3213f7c-2955-46f6-94d5-e737dc8d619e" title="Customer Centricity" width="100%" height="100%">
Your browser does not support the video tag.
</video>
</div>
<div id="videoController">
<div id="videoProgress">
<div class="progress-bar">
<div id="progress-fill-video" style="width: 7.77856%;">
</div>
</div>
</div>
<div id="playOrPause" class="controllerTabs"><i class="activeController icon-pause"></i></div>
<div id="volume" class="controllerTabs"><i class="activeController icon-mute"></i></div>
<div id="subs" class="controllerTabs"><i class="icon-sub inactiveController"></i></div>
<div id="duration">
<span id="minutes">00</span>:<span id="seconds">12</span>
<span id="total">/ 02:39</span>
</div>
<div id="download" class="controllerTabs"><i class=" icon-download inactiveController"></i></div>
<div id="trascript" class="controllerTabs"><i class=" icon-transcript inactiveController"></i></div>
<div id="fullScreen" class="controllerTabs"><i class=" icon-fullscreen activeController"></i></div>
</div>
</div>
Here is the css :
#videoStreamed {
position: relative;
height: 90%;
width: 100%;
z-index: 1 !important;}
the video itself has the same z-index;
#videoController {
z-index: 2147483647;
position: fixed;
bottom: 0;
width: 100%;
}
That's a wild guess since you didn't shown any js, but I will assume you called Element.requestFullscreen() on your video.
While it works in other browsers, in FF, this will exclude all non descendants of the element on which you called it from being displayed in the fullscreen mode.
I left taking news of the fullscreen API a long time ago, since it was a mess, but at this time specs weren't clear on what should be the correct behavior.
Nevertheless, one thing that works for every browser is to wrap both your video and your controls inside a single container and call requestFullscreen on this container.
Then you will need to style all your elements accordingly in the fullscreen mode with the :fullscreen pseudo-class.
jsfiddle since stacksnippets don't allow fullscreen.
Sounds easy said like that? Well what I omitted is that still today, all browsers don't have a stable version of this API and that you will have to repeat your code like 5 times to deal with vendor-specifics quirks...
Related
I'm new here and I hope this is the appropriate place to ask this. I know very little about javascript or other programming languages so you might need to go easy on me.
Is there any possible way to keep a mouseover tooltip on screen even after I moved my mouse away on a public site that isn't mine? I'm trying to figure this out on a chatting site where you can post comments and see who liked each comment but you have to hover over it with a mouse to see a tooltip popup that shows the usernames of who liked the comment. I would link you the site but it requires you to make an account so instead I can link you guys the source code in case it is necessary. The only thing I was able to do was inspect element/debugger and look at some of the javascript/jquery code the site uses and that's about it lol.
So is there a way I can tamper around with the javascript? Of course I only want this to be temporarily and on just one page. My goal is to copy and paste all the text from the page including the ones in the tooltips. Maybe there is a way to show all the tooltip popups as text on the page? I'd appreciate some help. Sorry if I sound totally clueless!
Here is the part of the code that involves the tooltip:
<div class="si-ch-like-box">
<div class="si-ch-like wttip pointer" data-name="Like" data-loaded="0" data-active="0" style="position: relative;">
<div class="ttip-wrap tw6684925 borRad none" data-class-id="6684925" style="display: none; width: 28px; bottom: 34px; left: -15px; visibility: visible;">
<div class="ttip-text">Like</div>
<div class="ttip-arr" style="left: 16px;"></div><div class="ttip-arr-fix" style="left: 16px;"></div></div></div>
<div class="like-popup-box posRel pointer" onmouseover="initLikeBox(this,'#wall_44715839',8,44715839)" onclick="loadLikersGlobal(this,'#wall_44715839',8,44715839)">
<div class="si-ch-like-nbr bold ">1</div>
<div class="borRad posAbs like-boxes none" style="left: -53px; top: -40px; display: none;">
<div class="like-people-block borRad"><img src="images/loading-1.gif" width="15" border="0"></div>
<div class="like-people-tooltip"> </div></div></div>
I am working on the fiddle in which I want to run a youtube video behind a draggable/resizable image in html/js(jquery).
What I want is the draggable/resizable image should remain over the top of youtube video.
The HTML and Javascript codes which I have used in order to make the draggable and resizable image are:
HTML:
<div id="wrapper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
Javascript/Jquery:
$(function() {
$('#wrapper').draggable();
$('#image').resizable();
});
Problem Statement:
I am wondering what changes I should make in the fiddle above so that I am able to place a youtube video behind it.
This is what I have tried through CSS in fiddle but it doesn't seem to work:
#wrapper
{
background: url('https://www.youtube.com/watch?v=EtEukxu6hu0') center center no-repeat;
}
You can try this for your HTML
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/YOUR_YOUTUBE_VIDEO_ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
<div id="wrapper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
updated fiddle - https://jsfiddle.net/qpeehsxn/24/
We are porting a cordova app from iOS / Android to Windows Phone 8 and have a problem with our overlays.
The overlay is a div that has an higher z-index defined than the divs beneath and the it contains several controls (e.g. inputs).
The problem we have is that the overlay div is ignored by touch events, instead the events on the underlying divs(which should be locked by the overlay) are fired. I tried to set -ms-touch-action:none css property to the underlying divs with no success.
Any help would be appreciated.
Thank you, guys.
The solution was the trick #frank posted in his comment. Just do
event.preventDefault()
in a click handler for the overlay. Or the angular way
ng-click="$event.preventDefault()".
Also described here: Locking screen by z-index in windows phone
Thanks for the help, guys, especially #frank
Here is some pseudo code that shows the fundamental markup and CSS
<div id="page">
<div id="overlay">
<div id="overlay-content">
<div>
<input type="text"/>... and so on...
</div>
</div>
</div>
<div id="page-content">
<div>
<div id="button" onclick="..."></div>
</div>
</div>
</div>
#overlay{
z-index: 7000;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
}
#page-content{
width: 100%;
height: auto !important;
min-height: 100%;
position: relative;
}
I'm using jQuery mobile in a project and need a popup with a textarea on it:
<div data-role="popup" id="popupDialog" data-overlay-theme="none" data-theme="a" style="width: 350px; max-width:350px;" class="ui-corner-all" data-dismissible="false">
<button id="dialogCloseButton" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</button>
<div data-role="content" class="ui-corner-bottom ui-content" style="text-align: center; margin: auto;">
<textarea id="textArea" data-theme="b" style="resize: none; max-width: 100%; max-height: 150px; width: 100%; height: 150px; padding-bottom: 5px;"></textarea>
<button data-theme="a">Ok</button>
</div>
</div>
I'm opening the popup like this:
$('#popupDialog').popup('open');
When I now enter text in the textarea and close the popup using the button, the virtual keyboard won't hide on my iPad running iOS 6.1.
I tried this hack, which didn't work for me.
When I blur the textarea before closing the popup, the textarea will automatically get the focus again (you can test this on my example site using the "Blur"-button).
Edit: removed link to example.
This works for me:
$('#textArea').blur();
$('#popupDialog').attr("tabindex",-1).focus();
It's pretty self-explanatory. The 2nd line will de-focus all input fields, and it relies on jQuery. I found that calling blur() on the single focused textfield didn't always work. Either one of these lines should work independently, but both of them together cannot be stopped!
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};
I'm attempting to add elements to a div container however the elements ignore their css class.
JavaScript
$.each(jobs, function(i, job)
{
var option = '<div class="input"><div class="option">' + job.created +'</div></div>';
$('.options').append(option);
});
Html
<div class="options" style="overflow: scroll; width: 100%; height: 80%; background-color: White; text-align: left;">
<div class="input">
<div class="option">
Hunt Osama.
</div>
</div>
<div class="input">
<div class="option">
Execute without trial.
</div>
</div>
</div>
The elements are successfully appended to the div however the styling information is not acted upon.
EDIT: the classes input and option have no effect on the added elements.
Any hints?
I have tested your code on my machine and it works fine in IE & Firefox if I apply CSS to the children.
In my css file I have added the following declaration:
.option
{
font-weight:bold !important;
color: red;
}
This issue ended up being specific to WebKit/Qt on the windows mobile platform. It doesn't appear during a Android/WebKit example.
Sorry I have no further details on the cause of the problem.
Thanks for all the help.