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

Mozilla firefox makes laggy my jquery slideDown animation

I've met this problem nowadays. I have a div which contains li-img (5of them) and when I try to reappear it with the slideDown animation 3/10 its smooth on mozilla and over 11/11 in chrome. The code and computer is the same and the exact problem is that the slidedown is smooth but the images are not slowing appear as the div appear, sometimes are completely invisible and then suddenly appear. Its not a matter of asyc coding cause i even tried to setTimeout(300) between append and animation but append is synchronous. The only plugin in mozilla is ad-block as in my chrome too. (I know that mozilla considered more heavy browser while chrome considered faster but eats more ram). The code is this (i really dont think its code problem)
$(document).ready(function(){
//classes
var $wrapper= $(".wrapper");
var $header=$wrapper.find(".header");
var $center = $wrapper.find(".center");
var $quiz=$center.find(".quiz");
// buttons-li
var $header_li= $header.find("ul li");
//other elements
var $quiz=$wrapper.find(".quiz");
var $rope = $wrapper.find("#rope")
var $popup;
function getQuiz(){
$.get('./php/get_quiz.php',function(data)
{
$quiz.append("<ul>"+data+"</ul>");
//setTimeout(ropeAnimation,100);
ropeAnimation();
toImgsAddPointer();
$rope.unbind('click');
$rope.removeClass('pointer');
});
}
function submitAnswer(){
var id = $(this).attr("id");
$.get('./php/result.php',{'choice':id},function(data){
var $ul= $center.find("ul");
$ul.remove();
$quiz.append("<ul>"+data+"</ul>");
toImgsAddPointer();
});
}
function clickEvent(){
var purple= '#5061FF';
var white = 'white';
var red= 'red';
var black = 'black';
$(this).css('background-color',purple).css('color',white);
$(this).siblings().css('background-color',red).css('color',black);
if(this.id==1){
var div = "<div class='popup'><object data='./pdf/math1.pdf'></object></div";
}else{
var div = "<div class='popup'><object data='./pdf/math2.pdf'></object></div";
}
$wrapper.prepend(div);
$popup=$(".popup");
$popup.on('click',closePopup);
}
function closePopup(){
$popup.remove();
}
function ropeAnimation(){
$rope.animate({"height":'200px'},100);
$quiz.slideDown(500);
$rope.animate({"height":'50px'},700);
}
function toImgsAddPointer(){
var $img = $quiz.find("li img");
$img.addClass("pointer");
$img.on('click',submitAnswer);
}
$header_li.on('click',clickEvent);
$header_li.addClass("pointer");
$rope.addClass("pointer");
$rope.on('click',getQuiz);
});
The animation is in get_quiz() with ropeanimation().

jquery image load() and set timeout conflict in IE

As I hover a small img, I read it's larger image attribute, and create that image to display.
The problem is that I want to set Timeout before to display the image.
And while waiting for that timeout, we suppose to already have set an src to make it load early.
For some reason it never works in IE. ie, it only triggers the load even on the second time I hover the small image. I've no idea what has gone wrong with it, I had very similar animation on the other page it has been working just fine with a timeout.
Any ideas?..
$(document).ready(function(){
var nn_pp_trail=0;
$('div.nn_pp_in').hover(function(){
var limg=$(this).children('img').attr('limg');
var img=new Image();
//img.src=limg;
img.className='nn_pp_z';
img.src=limg;
var a=(function(img,par,limg){
return function(){
nn_pp_trail=window.setTimeout(showtrail,50);
$(img).one('load',(function(par){ //.attr('src',limg).
return function(){
// alert('loaded');
window.clearTimeout(nn_pp_trail);
hidetrail();
var width=this.width;
var height=this.height;
var coef=width/313;
var newHeight=height/coef;
var newHpeak=newHeight*1.7;
var nn=par.parents('.tata_psychopata').nextAll('.nn_wrap').first();
var pheight=nn.height();
var ptop=nn.position().top-2+pheight/2-1;
var pleft=nn.position().left+90+157-1;
$(this).appendTo(nn).css('left',pleft+'px').css('top',ptop+'px')
.animate({opacity:0.6},0)
.animate({opacity:1,top:'-='+newHpeak/2+'px',height:'+='+(newHpeak)+'px',left:'-=10px',width:'+=20px'},130,(function(newHeight,newHpeak){
return function(){
$(this).animate({left:'-='+(156-10)+'px',width:'+='+(313-20)+'px',height:newHeight+'px',top:'+='+(newHpeak-newHeight)/2+'px'},200,function(){});
}
})(newHeight,newHpeak)
);
}
})(par)
).each(function(){
if(this.complete || this.readyState == 4 || this.readyState == "complete" || (jQuery.browser.msie && parseInt(jQuery.browser.version) <=6))
$(this).trigger("load");}); ;
}
})(img,$(this),limg);
window.setTimeout(a,20); //if I set 0 - it loads all the time.
//if I set more than 0 timeout
//the load triggers only on the 2nd time I hover.
$(this).data('img',$(img));
},function(){
});
});

img.src=limg;
This was the problem, in IE we need not to set src as we create an image object, but first attach load event to it, and only then set attr src, and then trigger complete with an each, eg:
img.one(load, function(){}).attr('src','i.png').each(function(){ /*loaded? then it's complete*/ });
Hope someone learn on my mistakes :-)

Thank you, this helped me a lot. I had a similar situation.
As you said: First the "load"-event, then the "src" for IE.
// This was not working in IE (all other Browsers yes)
var image = new Image();
image.src = "/img/mypic.jpg";
$(image).load(function() {
//pic is loaded: now display it
});
// This was working well also in IE
var image = new Image();
imagSrc = "/img/mypic.jpg";
$(image).load(function() {
//pic is loaded: now resize and display
}).attr('src',imageSrc);

Resizing base64 encoded image in Internet Explorer

The following function works perfectly for me with Chrome and Firefox, while it fails with Internet Explorer. I added the the the obj_* assignments to debug it in IE, the .height() or .width methods do not work.
Is the jpgmulti stream not usable for IE? Do I have to call it different for IE? Below is confirmed working with Chrome and FF on MacOSX.
function append-base64image(jpgmulti) {
var object = jQuery.parseJSON('{'+jpgmulti+'}');
for (var content in object) {
// create element for image
var image_roll = document.createElement("img");
// ad attributes to element
image_roll.setAttribute("src", "data:image/jpeg;base64,"+object[content]);
// calculate aspect ratio for preview:
var obj_height = object[content].height;
var obj_width = object[content].width;
var div_obj_width = obj_width/150;
var height_resize = obj_height/div_obj_width;
image_roll.setAttribute("width", 150);
image_roll.setAttribute("height", height_resize);
document.getElementById("previews").appendChild(image_roll);
}
}

Fading script will not work in IE?

I'm pretty new to Javascript and have been trying to achieve some fading effects on a website.
I've managed to hammer together the effects I want and everything's working fine on Firefox & Safari. However IE doesn't like it. The first script to change the background colour works but the second script to fade in the content does nothing.
I'm calling the scripts from the head as follows:
window.onload=siteIntro;
And the Javacript which is not working is here. Any help or suggestions would be appreciated, the live site can be viewed if needed.
Many Thanks
// ################# Fade Divs ###############################
function Fade(objID,CurrentAlpha,TargetAlpha,steps){
var obj = document.getElementById(objID);
CurrentAlpha = parseInt(CurrentAlpha);
if (isNaN(CurrentAlpha)){
CurrentAlpha = parseInt(obj.style.opacity*100);
if (isNaN(CurrentAlpha))CurrentAlpha=100;
}
var DeltaAlpha=parseInt((CurrentAlpha-TargetAlpha)/steps);
var NewAlpha = CurrentAlpha - DeltaAlpha;
if (NewAlpha == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1)) NewAlpha = 99.99;
obj.style.opacity = (NewAlpha / 100);
obj.style.MozOpacity = obj.style.opacity;
obj.style.KhtmlOpacity = obj.style.opacity;
obj.style.filter = 'alpha(opacity='+NewAlpha+')';
if (steps>1){
setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50);
}
}
// ################# Toggle content div visibility ###############################
function mainVis(showMain) {
document.getElementById(showMain).style.visibility ="visible";
}
function pageSwitch(show0, hide0, hide1, hide2, hide3) {
document.getElementById(show0).style.visibility ="visible";
document.getElementById(hide0).style.visibility ="hidden";
document.getElementById(hide1).style.visibility ="hidden";
document.getElementById(hide2).style.visibility ="hidden";
document.getElementById(hide3).style.visibility ="hidden";
}
function pg1() {
pageSwitch('prices', 'icon', 'about', 'map', 'news');
Fade('prices','0',100,30)
}
function pg2() {
pageSwitch('about', 'icon', 'prices', 'map', 'news');
Fade('about','0',100,30)
}
function pg3() {
pageSwitch('map', 'icon', 'about', 'prices', 'news');
Fade('map','0',100,30)
}
function pg4() {
pageSwitch('news', 'icon', 'map', 'about', 'prices');
Fade('news','0',100,30)
}
// ################# Site Intro Functions ###############################
function siteIntro() {
setTimeout("NLBfadeBg('b1','#FFFFFF','#000000','3000')",2000);
mainVis('main');
setTimeout("Fade('main','',100,30)",5000);
}

MS filters only apply to elements that "have layout".
To force layout, you can give the element a width or a height, or use the old zoom: 1; trick.
Not sure if this is the cause of your problems, but you could try it.
You can read more about hasLayout here.
Another thing, instead of:
setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50)`
you can simply write:
setTimeout(function() { Fade(objID, NewAlpha, TargetAlpha, steps-1); }, 50)`
Unless you are doing it just for fun and/or learning, just use an existing JS library instead of re-inventing the wheel.

Maybe you can take advantage of an out-of-the-box cross browser script like this
http://brainerror.net/scripts/javascript/blendtrans/
Or use jQuery (which is great with animating and effects) or any other JS library

This might not be an answer you are looking for, but you shouldn't be doing this: you can use jQuery to do this for you. One or two lines of code, and it is cross browser compatible.