How to show full screen popup with JavaScript? - javascript

I would like to show full screen popup with JavaScript? I use this code below but it isn't works on Firefox and Opera browser.
function detectVersion()
{
version = parseInt(navigator.appVersion);
return version;
}
function detectOS()
{
if (navigator.userAgent.indexOf('Win') == -1) {
OS = 'Macintosh';
} else {
OS = 'Windows';
}
return OS;
}
function detectBrowser()
{
if (navigator.appName.indexOf('Netscape') == -1) {
browser = 'IE';
} else {
browser = 'Netscape';
}
return browser;
}
function FullScreen(url){
var adjWidth;
var adjHeight;
if ((detectOS() == 'Macintosh') && (detectBrowser() == 'Netscape')) {
adjWidth = 20;
adjHeight = 35;
}
if ((detectOS() == 'Macintosh') && (detectBrowser() == 'IE')) {
adjWidth = 20;
adjHeight = 35;
winOptions = 'fullscreen=yes';
}
if ((detectOS() == 'Windows') && (detectBrowser() == 'Netscape')) {
adjWidth = 30;
adjHeight = 30;
}
if (detectVersion() < 4) {
self.location.href = url;
} else {
var winWidth = screen.availWidth - adjWidth;
var winHeight = screen.availHeight - adjHeight;
var winSize = 'width=' + winWidth + ',height=' + winHeight;
var thewindow = window.open(url, 'WindowName', winSize);
thewindow.moveTo(0,0);
}
}
function MakeItSo(url){
if ((detectOS() == 'Windows') && (detectBrowser() == 'IE')) {
window.open(url,'windowname','fullscreen=yes');
} else {
onload=FullScreen();
}
}
I would appreciate help,
Nguyen

1) most modern browsers block popups, so your work will just be disabled.
2) opening a full screen popup blatantly invades the users environment. If it's an application that you want to run full screen, it would be better to include a note to educate your users about the F11 key (on windows Fx, IE)

Have you checked the HTML5 fullscreen API?
document.body.requestFullscreen();
(Don't forget the vendor prefixs!)
If the browser don't support it you can try to use fullscreen popups as you do or just prompt your user to enter fullscreen mode themselves.

Related

Migration from windows.showModalDialog to window.open

I need help ... I have a javascript code that was written for IE10 / IE11 now I have to implement some function in Google Chrome but in code I have the function windows.showModalDialog which as I know does not work on chrome currently, I need to migrate this code so that it works on window .open, could anyone help?
function ShowContactSearch() {
var windowWidth = 800, windowHeight = 600, centerWidth = (screen.availWidth - windowWidth) / 2, centerHeight = (screen.availHeight - windowHeight) / 2 - 20;
var result = window.open('/Contact.aspx', null, 'dialogWidth:1300px; dialogHeight:720px; center:1; resizable:1; status=1');
if (result != null) {
ContactChosen(result, '1');
}
function ContactChosen(contactId, cType) {
var ct = document.getElementById("<%=hfChosenContactId.ClientID %>");
if (contactId == null || contactId == "" || ct.value == "" || contactId.toLowerCase().indexOf(ct.value.toLowerCase()) < 0) {
ct.value = contactId;
document.getElementById("<%=hfCType.ClientID %>").value = cType;
document.getElementById("<%=bChosenContactId.ClientID %>").click();
}
return false;
}

make message always on the top

i want to make a message which will be always on the top however scrolling the page using java script.
i tried the below code, but when i scroll it still on its static place
var message = '<b><font color=000000 size=5>mona link to us! </font></b>'
//enter a color name or hex to be used as the background color of the message
var backgroundcolor = "#FFFF8A"
//enter 1 for always display, 2 for ONCE per browser session
var displaymode = 1
//Set duration message should appear on screen, in seconds (10000=10 sec, 0=perpetual)
var displayduration = 0
//enter 0 for non-flashing message, 1 for flashing
var flashmode = 1
//if above is set to flashing, enter the flash-to color below
var flashtocolor = "lightyellow"
var ie = document.all
var ieNOTopera = document.all && navigator.userAgent.indexOf("Opera") == -1
function regenerate() {
window.location.reload()
}
function regenerate2() {
if (document.layers)
setTimeout("window.onresize=regenerate", 400)
}
var which = 0
function flash() {
if (which == 0) {
if (document.layers)
topmsg_obj.bgColor = flashtocolor
else
topmsg_obj.style.backgroundColor = flashtocolor
which = 1
}
else {
if (document.layers)
topmsg_obj.bgColor = backgroundcolor
else
topmsg_obj.style.backgroundColor = backgroundcolor
which = 0
}
}
if (ie || document.getElementById)
document.write('<div id="topmsg" style="position:absolute;visibility:hidden">' + message + '</div>')
var topmsg_obj = ie ? document.all.topmsg : document.getElementById ? document.getElementById("topmsg") : document.topmsg
function positionit() {
var dsocleft = ie ? document.body.scrollLeft : pageXOffset
var dsoctop = ie ? document.body.scrollTop : pageYOffset
var window_width = ieNOTopera ? document.body.clientWidth : window.innerWidth - 20
var window_height = ieNOTopera ? document.body.clientHeight : window.innerHeight
if (ie || document.getElementById) {
topmsg_obj.style.left = parseInt(dsocleft) + window_width / 2 - topmsg_obj.offsetWidth / 2
topmsg_obj.style.top = parseInt(dsoctop) + parseInt(window_height) - topmsg_obj.offsetHeight - 4
}
else if (document.layers) {
topmsg_obj.left = dsocleft + window_width / 2 - topmsg_obj.document.width / 2
topmsg_obj.top = dsoctop + window_height - topmsg_obj.document.height - 5
}
}
function setmessage() {
if (displaymode == 2 && (!display_msg_or_not()))
return
if (document.layers) {
topmsg_obj = new Layer(window.innerWidth)
topmsg_obj.bgColor = backgroundcolor
regenerate2()
topmsg_obj.document.write(message)
topmsg_obj.document.close()
positionit()
topmsg_obj.visibility = "show"
if (displayduration != 0)
setTimeout("topmsg_obj.visibility='hide'", displayduration)
}
else {
positionit()
topmsg_obj.style.backgroundColor = backgroundcolor
topmsg_obj.style.visibility = "visible"
if (displayduration != 0)
setTimeout("topmsg_obj.style.visibility='hidden'", displayduration)
}
setInterval("positionit()", 100)
if (flashmode == 1)
setInterval("flash()", 1000)
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function display_msg_or_not() {
if (get_cookie("displaymsg") == "") {
document.cookie = "displaymsg=yes"
return true
}
else
return false
}
if (document.layers || ie || document.getElementById)
window.onload = setmessage
any help. or any new code please
If I'm understanding what you want, I think you're totally over thinking it. You can use CSS to keep your message fixed at the top of the page. just add position: fixed. It's how I make my header stay at the top of the page on this site: http://www.recipegraze.com
So use javascript to make the message appear/disappear, but use some simple CSS to make it stick to the top of the page.
edit: you'll also want to up the z-index of the message to make sure it appears on top of your other content, not under it.

How to detect Acrobat X Pro installed on machine using javascript

How can I detect if Acrobat X Pro is installed on a machine using javascript. I have code that works for Adobe Reader. but now I have upgrdaed my adobe version to Acrobat X Pro. But it is not working for Acrobat X Pro using IE8.
var perform_acrobat_detection = function()
{
//
// The returned object
//
var browser_info = {
name: null,
acrobat : null,
acrobat_ver : null
};
if(navigator && (navigator.userAgent.toLowerCase()).indexOf("chrome") > -1)
browser_info.name = "chrome";
else if(navigator && (navigator.userAgent.toLowerCase()).indexOf("msie") > -1)
browser_info.name = "ie";
else if(navigator && (navigator.userAgent.toLowerCase()).indexOf("firefox") > -1)
browser_info.name = "firefox";
else if(navigator && (navigator.userAgent.toLowerCase()).indexOf("msie") > -1)
browser_info.name = "other";
try {
if(browser_info.name == "ie") {
var control = null;
//
// load the activeX control
//
try {
// AcroPDF.PDF is used by version 7 and later
control = new ActiveXObject('AcroPDF.PDF');
}
catch (e){}
if (!control) {
try {
// PDF.PdfCtrl is used by version 6 and earlier
control = new ActiveXObject('PDF.PdfCtrl');
}
catch (e) {}
}
if(!control) {
browser_info.acrobat == null;
return browser_info;
}
version = control.GetVersions().split(',');
version = version[0].split('=');
browser_info.acrobat = "installed";
browser_info.acrobat_ver = parseFloat(version[1]);
}
else if(browser_info.name == "chrome") {
for(key in navigator.plugins)
{
if(navigator.plugins[key].name == "Chrome PDF Viewer" || navigator.plugins[key].name == "Adobe Acrobat") {
browser_info.acrobat = "installed";
browser_info.acrobat_ver = parseInt(navigator.plugins[key].version) || "Chome PDF Viewer";
}
}
}
//
// NS3+, Opera3+, IE5+ Mac, Safari (support plugin array): check for Acrobat plugin in plugin array
//
else if(navigator.plugins != null)
{
var acrobat = navigator.plugins['Adobe Acrobat'];
if(acrobat == null)
{
browser_info.acrobat = null;
return browser_info;
}
browser_info.acrobat = "installed";
browser_info.acrobat_ver = parseInt(acrobat.version[0]);
}
}
catch(e)
{
browser_info.acrobat_ver = null;
}
return browser_info;
};
var browser_info = perform_acrobat_detection();

jQuery load and append issue

im getting a little issue here. I have a wordpress theme that i need to add an infinite scroll effect. Ok, its working, but it doesnt look work properly. I set the current page and the number of pages, but it keeps adding the second page every time i reach the bottom.
What im doing wrong?
Ps.: I have tried the inifite-scroll plugin for wordpress, and it dont works with my template. Thanks!
$(function() {
var currentPage = 1;
var numPages = Math.ceil(pages / 4);
var browserName = "";
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("opera") != -1) {
browserName = "opera";
} else if (ua.indexOf("msie") != -1) {
browserName = "msie";
} else if (ua.indexOf("safari") != -1) {
browserName = "safari";
} else if (ua.indexOf("mozilla") != -1) {
if (ua.indexOf("firefox") != -1) {
browserName = "firefox";
} else {
browserName = "mozilla";
}
}
$(window).scroll(function() {
if (browserName != "safari") {
var curScrollPos = $('html').scrollTop();
}
else {
var curScrollPos = $('body').scrollTop();
}
if (curScrollPos > 218) {
$("#sidebar").addClass("open");
}
if (curScrollPos < 218) {
$("#sidebar").removeClass("open");
}
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
if (scrollBottom == 0) {
if (currentPage < numPages) {
$("<div>").load("page/" + (currentPage + 1), function() {
var newPosts = $(this).find("#content").html();
$("#content").append(newPosts);
});
currentPage++;
}
else {
}
}
});
// Infinite Scroll
});​
Possibly try this:
$("<div>").load("page/"+(currentPage+1), function() {
var newPosts = $(this).find("#content").html();
$("#content").append(newPosts);
currentPage++;
});
And remove the currentPage++;

Detect Safari using jQuery

Though both are Webkit based browsers, Safari urlencodes quotation marks in the URL while Chrome does not.
Therefore I need to distinguish between these two in JS.
jQuery's browser detection docs mark "safari" as deprecated.
Is there a better method or do I just stick with the deprecated value for now?
Using a mix of feature detection and Useragent string:
var is_opera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var is_Edge = navigator.userAgent.indexOf("Edge") > -1;
var is_chrome = !!window.chrome && !is_opera && !is_Edge;
var is_explorer= typeof document !== 'undefined' && !!document.documentMode && !is_Edge;
var is_firefox = typeof window.InstallTrigger !== 'undefined';
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
Usage:
if (is_safari) alert('Safari');
Or for Safari only, use this :
if ( /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {alert('Its Safari');}
The following identifies Safari 3.0+ and distinguishes it from Chrome:
isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
unfortunately the above examples will also detect android's default browser as Safari, which it is not.
I used
navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1
For checking Safari I used this:
$.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
alert('this is safari');
}
It works correctly.
Apparently the only reliable and accepted solution would be to do feature detection like this:
browser_treats_urls_like_safari_does = false;
var last_location_hash = location.hash;
location.hash = '"blah"';
if (location.hash == '#%22blah%22')
browser_treats_urls_like_safari_does = true;
location.hash = last_location_hash;
The only way I found is check if navigator.userAgent contains iPhone or iPad word
if (navigator.userAgent.toLowerCase().match(/(ipad|iphone)/)) {
//is safari
}
If you are checking the browser use $.browser. But if you are checking feature support (recommended) then use $.support.
You should NOT use $.browser to enable/disable features on the page. Reason being its not dependable and generally just not recommended.
If you need feature support then I recommend modernizr.
//Check if Safari
function isSafari() {
return /^((?!chrome).)*safari/i.test(navigator.userAgent);
}
//Check if MAC
if(navigator.userAgent.indexOf('Mac')>1){
alert(isSafari());
}
http://jsfiddle.net/s1o943gb/10/
This will determine whether the browser is Safari or not.
if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
alert(its safari);
}else {
alert('its not safari');
}
I use to detect Apple browser engine, this simple JavaScript condition:
navigator.vendor.startsWith('Apple')
A very useful way to fix this is to detect the browsers webkit version and check if it is at least the one we need, else do something else.
Using jQuery it goes like this:
"use strict";
$(document).ready(function() {
var appVersion = navigator.appVersion;
var webkitVersion_positionStart = appVersion.indexOf("AppleWebKit/") + 12;
var webkitVersion_positionEnd = webkitVersion_positionStart + 3;
var webkitVersion = appVersion.slice(webkitVersion_positionStart, webkitVersion_positionEnd);
console.log(webkitVersion);
if (webkitVersion < 537) {
console.log("webkit outdated.");
} else {
console.log("webkit ok.");
};
});
This provides a safe and permanent fix for dealing with problems with browser's different webkit implementations.
Happy coding!
// Safari uses pre-calculated pixels, so use this feature to detect Safari
var canva = document.createElement('canvas');
var ctx = canva.getContext("2d");
var img = ctx.getImageData(0, 0, 1, 1);
var pix = img.data; // byte array, rgba
var isSafari = (pix[3] != 0); // alpha in Safari is not zero
Generic FUNCTION
var getBrowseActive = function (browserName) {
return navigator.userAgent.indexOf(browserName) > -1;
};
My best solution
function getBrowserInfo() {
const ua = navigator.userAgent; let tem;
let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return { name: 'IE ', version: (tem[1] || '') };
}
if (M[1] === 'Chrome') {
tem = ua.match(/\bOPR\/(\d+)/);
if (tem != null) {
return { name: 'Opera', version: tem[1] };
}
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
tem = ua.match(/version\/(\d+)/i);
if (tem != null) {
M.splice(1, 1, tem[1]);
}
return {
name: M[0],
version: M[1],
};
}
getBrowserInfo();

Categories

Resources