Develop Reference

request full screen in IE 10

I tried to used function below
function goFullscreen(id) {
var element = document.getElementById(id);
if (element.msRequestFullScreen) {
element.msRequestFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
I want Javascript support in IE 10 because the browser is running in IE 10 but request full screen only support IE 11. Is there any way that can support in IE 10?

No. See caniuse.
Experimental support for the fullscreen API was introduced in IE11.

One of the methods that will work for you, although it is very rudimental, is to use:
var myWindow = window.open("", "_self");
myWindow.document.write("<p>I´m ready</p>");
You just have to pass the object with the html and the necessary functionality.
I hope it serves you
In my code I open directly the specific window and prepared for the functionality that I need
function openFullWindow(CTri) {
if (window.name != 'salidas') {
url_src = "test.asp?Indice=<%=indice%>&Numero=<%=numero%>&IdUser=<%=iduser%>&CodTribunal="+CTri;
w=800;
h=600;
if (window.screen) {
w = window.screen.availWidth;
h = window.screen.availHeight;
}
manejadorVentana = window.open(url_src, "salidas", "toolbar=no,location=no,directories=no,scrollbars=yes,menubar=no,width="+w+",height="+h+",top=0,left=0");
}
}
the event to launch from the big window to the small is window.opener

IE 11 prints blank page when using window.open (IE bug) -

Can someone please throw some light on this weird IE bug, Trying to print only selected section works fine across all browser but IE 11. IE open blank page I don't see any error either. Spent several hours on this researching and trying different work arounds.
events:{
'click td.delete-cell .glyphicon.glyphicon-remove': 'removeRow',
'click th.delete-cell .glyphicon.glyphicon-remove': 'removeAll',
'click .print-button': 'printClicked'
},
printClicked: function() {
var printHTML = $("<div></div>"), summaryTable, driverInfo, driverId;
// If there is no Print Window open, or it was closed
if ( !this.printWindow || !this.printWindow.window ) {
this.printWindow = window.open('', this.options.device.attributes.displayName + " Parameters Report");
$(this.printWindow.document.head).append(this.getTemplate(this.PrintCSSTemplate)());
$(this.printWindow.document.body).addClass('PRINTMODE');
driverId = this.device.get('driverId') ? parseInt(this.device.get('driverId'), 10) : null;
driverInfo = this.drivers.findWhere({ driverId: driverId });
printHTML.append(
this.getTemplate(this.PrintSummaryDeviceOverviewTemplate)(_.extend({},
this.options.device.toJSON(),
{ driver: driverInfo.toJSON() }
))
);
summaryTable = this.$('table').clone();
summaryTable.find('.delete-cell').remove();
summaryTable.appendTo(printHTML);
printHTML.appendTo(this.printWindow.document.body);
this.printWindow.print();
}
},

jsPDF - compatibility issues in Firefox

jsPDF doesn't work well with the latest version of Firefox. It does not let me to download the PDF. Is there a fix on this? I tried downloading the latest version of jsPDF.
EDIT:
My FF version is 32.0.3
I don't get any error messages.
This is the code that "downloads" the pdf. It works well in IE and Chrome:
So I think it has nothing to do with the code. What I want to know is how can I download the pdf in Firefox.
function appendDataToPDF(div, doc, top)
{
html2canvas(div, {
background: '#fff',
onrendered: function(canvas) {
var img = canvas.toDataURL();
doc.addImage(img, 'JPEG', 10, top, parseInt($(div).css("width"), 10), parseInt($(div).css("height"), 10));
if(top > 240)
{
doc.addPage();
top = 27;
}
div = $(div).next();
if(div.length === 0)
{
doc.save('doc.pdf');
}
else
{
if(div.get(0).nodeName === 'BR')
div = $(div).next();
appendDataToPDF(div, doc, top);
}
}
});
}

The issue lies within the execution of the doc.save(). The document is not ready yet, when the save() command is invoked. Try to set a timeout and it should work.
setTimeout(function() {
doc.save(filename);
}, timeout);

I just placed an alert() after the doc.save() function and now the download works. You could try this solution if you run into the same problem.

One thread is going on related this issue, may be you will get fix here.
https://github.com/parallax/jsPDF/issues/3391

Mute icon for html5 video does not work on Chrome or Safari

I am facing a problem of which I do not understand the origin:
I have a video playing on a website using the <video> tag. Client asked to add only a "mute" button in the shape of an icon that changes when clicked.
So i've tried this:
this is the icon i place over the video
<img src="mute0.png" id="mutebutton" onclick="javascript:muteUnmute()" />
and this is the javascript:
var mutebutton = document.getElementById('mutebutton');
function muteUnmute() {
video.muted = !video.muted;
}
video.onvolumechange = function(e) {
mutebutton.src = video.muted ? "mute1.png" : "mute0.png";
}
This works fine on Firefox and Opera, but the img src does not change in Chrome or in Safari!
I also tried this:
video.onvolumechange = function(e) {
if (video.muted) {
mutebutton.src = "mute1.png"
} else {
mutebutton.src = "mute0.png"
}
}
but still no result.
Does anybody have a clue why Chrome and Safari do not allow me to change the img src in this way? Can you suggest a way to solve this matter?
Thank you!
Edit:
Solved! this might be useful to someone:
the problem was on the video.onvolumechange event, it seems that Chrome and Safari do not understand that
so I've done this and it now works:
var mutebutton = document.getElementById('mutebutton');
function muteUnmute() {
video.muted = !video.muted;
mutebutton.src = video.muted ? "mute1.png" : "mute0.png";
}

chrome html5 video buffered.end event

I'm trying to detect when a video file has completed loading. i made it work successfully on firefox and safari but on chrome, buffered event behaves strange..
so,
in my local host chrome works fine but when i upload to server;
buffer percentage stops about %50 but buffers %100,
when page refreshed, percentage stay at %0 but it continues to buffering..
here is my javascript
function loaded()
{
var v = document.getElementById('myVideo');
var r = v.buffered;
var total = v.duration;
var current=v.currentTime;
var start = r.start(0);
var end = r.end(0);
var downloadPercent= Math.round((end / total)*100)
$("#loadProgress").css('width',downloadPercent+ '%');
if(downloadPercent==100){
$("#preloaderWrapper").fadeOut(function(){
document.getElementById('myVideo').play();
clearInterval(ratoteLoad);
$(this).remove();
});
}
}
$('#myVideo').bind('progress', function()
{
loaded();
});
any idea?
thank you

try this instead:
myVideoTag = document.getElementById('video');
myVideoTag.addEventListener('progress', function(e) {
var percent = null;
// FF4+, Chrome
if (myVideoTag && myVideoTag.buffered && myVideoTag.buffered.length > 0 && myVideoTag.buffered.end && myVideoTag.duration) {
percent = myVideoTag.buffered.end(0) / myVideoTag.duration;
}
// Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
// to be anything other than 0. If the byte count is available we use this instead.
// Browsers that support the else if do not seem to have the bufferedBytes value and
// should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
else if (myVideoTag && myVideoTag.bytesTotal != undefined && myVideoTag.bytesTotal > 0 && myVideoTag.bufferedBytes != undefined) {
percent = myVideoTag.bufferedBytes / myVideoTag.bytesTotal;
}
if (percent !== null) {
percent = 100 * Math.min(1, Math.max(0, percent));
// ... do something with var percent here (e.g. update the progress bar)
}
}, false);
... comments copied from mediaelement.js, code as well but adjusted for easier display here. I omitted the code for Firefox 3.0 as it's less than relevant.
working fine in all current browsers
PS: thx to John Dyer for mejs - great stuff ;)