I am trying to make chrome extension to be in full screen, but the max I can do is half width. More then that it just give me a scroll bar in the bottom..
How can I make it to be in full screen? meaning, the whole width of the chrome browser?
Thanks!
chrome.windows.update(windowId, { state: "fullscreen" })
See https://developer.chrome.com/docs/extensions/reference/windows/#method-update
In your extensions "background.js" script:
chrome.app.runtime.onLaunched.addListener(function (launchData) {
chrome.app.window.create(
// Url
'/editor.html',
// CreateWindowOptions
{
'width': 400,
'height': 500
},
// Callback
function(win) {
win.contentWindow.launchData = launchData;
win.maximize();
win.show();
});
});
Did you try the fullScreen API ?
addEventListener("click", function() {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
;
rfs.call(el);
});
As seen in this post
for general use on web pages in all browsers, include msRequestFullscreen
addEventListener("click", function () {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if (rfs) { rfs.call(el); } else { console.log('fullscreen api not supported');}
});
Related
I have value in the typescript file
readonly isMobile: boolean = false;
And inside cosntructor i have this to check is suer on mobile or desktop app version:
if (window.navigator?.maxTouchPoints > 0) {
this.isMobile = true;
}
In the HTML file, I wanna show/hide something if isMobile is true, and everything works but if I'm on the desktop version and I manually resize the screen to become small, isMobile is still false, i need to go inspect the element >> select mobile devices and restart page and then will appear content-based if isMobile is true, can value isMobile be set to true if i resize the screen size to be like mobile screen?
You can use something like this:
window.onresize = () => {
let isMobile = false;
console.log('RESIZING ...', window.innerHeight, window.innerWidth);
const mobileWidthThreshold = 375; // For example
if (window.innerWidth <= mobileWidthThreshold) {
isMobile = true;
} else {
isMobile = false;
}
console.log(isMobile);
}
In this case, you can listen for the window resize event and set the isMobile value.
#HostListener('window:resize', ['$event'])
onResize(event) {
// Check window size and do actions..
}
How to hide navigation menu bar on scroll down and it should appear on scrolling up using angularjs?
As I have seen a solution that library 'headroom.js' is quite useful but I am unable to implement.Please suggest an appropriate solution.
Can it be done with JQuery? I am using code like this in my app, you can use it in AngularJS if you use angular.element(document).ready.
// Navigation Scripts to Show Header on Scroll-Up
jQuery(document).ready(function($) {
var MQL = 1170;
//primary navigation slide-in effect
if ($(window).width() > MQL) {
var headerHeight = $('.navbar-custom').height();
$(window).on('scroll', {
previousTop: 0
},
function() {
var currentTop = $(window).scrollTop();
//check if user is scrolling up
if (currentTop < this.previousTop) {
//if scrolling up...
if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
$('.navbar-custom').addClass('is-visible');
} else {
$('.navbar-custom').removeClass('is-visible is-fixed');
}
} else if (currentTop > this.previousTop) {
//if scrolling down...
$('.navbar-custom').removeClass('is-visible');
if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
}
this.previousTop = currentTop;
});
}
});
Thanks to this post: scroll up/down detection
You can use this:
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('body').bind(mousewheelevt, function(e){
var evt = window.event || e //equalize event object
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0) {
$('.menu').fadeIn();
}
else{
$('.menu').fadeOut();
}
});
There is an example solution you can check out here. It is solved using CSS and JQuery.
Is there a way to detect when the user clicks the default fullscreen mode button?
These are the map options I'm using:
var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};
I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );
function onBoundsChanged() {
if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
$(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
console.log( 'FULL SCREEN' );
}
else {
console.log ('NOT FULL SCREEN');
}
}
Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:
if ( $( '.gm-style' ).height() == window.innerHeight &&
$( '.gm-style' ).width() == window.innerWidth ) {
DaveBurns answer worked with some modifications because I don't use jQuery. Also I needed to use clientHeight and clientWidth
window.google.maps.event.addListener(
map,
'bounds_changed',
onBoundsChanged,
);
function onBoundsChanged() {
if (
map.getDiv().firstChild.clientHeight === window.innerHeight &&
map.getDiv().firstChild.clientWidth === window.innerWidth
) {
console.log('FULL SCREEN');
} else {
console.log('NOT FULL SCREEN');
}
}
This solution it is working for me:
/** Full Screen event */
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('NO fullScreen!');
}
});
You can use HTML5 Fullscreen API which has the fullscreenchange event:
"When fullscreen mode is successfully engaged, the document which
contains the element receives a fullscreenchange event. When
fullscreen mode is exited, the document again receives a
fullscreenchange event".
Please note that
"For the moment not all browsers are using the unprefixed version of the API".
So, for instance, in Mozilla Firefox the event handler would look like this
document.onmozfullscreenchange = function(event) {
console.log("Full screen change")
}
I am trying to write simple 'game' from this side using pixie.js.
I tried to run it via google chrome, however I am getting strange error:
What can I do to solve it?
EDIT
Error in index.js:225 stands for this:
isWebGLSupported: function ()
{
var contextOptions = { stencil: true };
try
{
if (!window.WebGLRenderingContext)
{
return false;
}
var canvas = document.createElement('canvas'),
gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions);
return !!(gl && gl.getContextAttributes().stencil);
}
catch (e)
{
return false;
}
},
It's not an error, as another user stated. It's the welcome message that appears by default on any page with the pixi.js library loaded.
If you want to hide that message, you can add this to your page:
<script>
PIXI.utils._saidHello = true;
</script>
I am creating a Phonegap app and I really want to avoid jqm in the project, because the css is just blowing up the whole html code. So I can change the pages with
window.location = "profiles.html";
but that's a pretty hard cut in the user experience and I really want to change this to something more smooth. Are there any possibilities to enhance the changepage process, maybe with css or something?
You can use a fade effect.
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').fadeOut(speed, function() {
window.location = "profiles.html";
});
});
});
});
See it in action (jsFiddle)