Is it possible to change title bar style/colour on chrome packaged apps?
My app has a black menu bar of its own and the plain white chrome title bar looks bizarre above it. I'd be happy with the default OS title bar.
You should have something like this to create your main application window:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
bounds: {
width: 1024,
height: 768
}
});
});
This will make a default window with a Chrome-style frame. In order to remove that frame from your window, you can use frame: none as another option of the create method, like this:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
bounds: {
width: 500,
height: 309
},
frame: 'none'
});
});
Related
I have created a portfolio-type (WordPress-based) website, using FullPage and Flexslider (as a absolute positioned pop-up), and it has a FullScreen button, which is currently giving me some nightmares, but only on the second ".section" in of the FullPage (it only has two sections).
I am also using SlimScroll.js as advised on the FullPage documentation as it can be taller than the window.
For Chrome the animation is "clunky", and when it goes fullscreen it waits like a second until it actually does. Please see the image below:
Screenshot of transition happening
I have added the following code and it worked for the first section, but not to the second section...:
html:not(.ios) .fp-section.active {
height: 100vh !important;
}
html:not(.ios) .fp-section.active .fp-tableCell {
height: 100vh !important;
}
On Safari, though, the transition is smooth but, every now and then, when it finishes it flickers...!
On Firefox there's not much problem as the fullscreen fades in and out. (Is there a way to replace it for a zoom-type animation?
My FullPage settings:
$('#fullpage').fullpage({
// Navigation
slideNavigation: false,
// Scrolling
easingcss3: 'cubic-bezier(0.850, 0.000, 0.250, 1.000)', //easeInOutCirc
scrollingSpeed: 500,
scrollOverflow: true,
// Design
controlArrows: false,
// Events
afterLoad: function(anchorLink, index) { // after changing section
if (index == 1){
// Load scrollDown link so that you don't have to load it afterwards
$('#main').load(scrollDown + ' .main-content', function(){
$.fn.fullpage.reBuild();
});
// Hide menu
if ( $( '#site-navigation' ).hasClass( 'toggled' ) ) {
$( '#site-navigation' ).removeClass('toggled');
$( '#site-navigation .menu-toggle').attr( 'aria-expanded', 'false' );
$( '#site-navigation ul').attr( 'aria-expanded', 'false' );
}
}
colorInversion();
popupSlider();
},
afterRender: function() { // so that it applies to first section too
colorInversion();
popupSlider();
},
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { // after changing slide
//$.fn.fullpage.reBuild();
popupSlider();
}
});
My FlexSlider settings:
$('#popup-slider').flexslider({
animation: 'slide',
slideshow: false,
easing: 'easeInOutExpo',
animationSpeed: 0,
customDirectionNav: $(".flex-direction-nav a"),
// Usability features
video: true,
// Special Properties
manualControls: '.popup-slider-link',
// Callback API
start: function(slider){
$('.slides li *').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
},
after: function(){ // After each slider animation completes
flexslideColorInversion(); // Check for color inversion
$('#popup-slider').data('flexslider').vars.animationSpeed = 500; // Put animation speed back to 500
},
});
(Flexslider is initialised inside the popupslider() function.)
Is there a way to "fix" these issues?
Thank you so much in advance to anyone who may be able to help me with this.
EDIT:
I have seen that the lag in Chrome was because the popup was over the thumbnails and therefore was still resizing them even though they weren't in view; my solution to this was to apply a "display: none" to when the popup slider was on.
The Flicker in Safari is because FullPage.js changes the sections' sizes and their "translate3d", so there is a flicker when that adjustment occurs. The default Fullpage.js characteristic is to actually show part of the section above while it's adjusting, but as I am using 100vh for the .active section it doesnt show on Chrome, Opera or Firefox and only flickers in Safari (hence me wondering what the flicker was!)
Probably the only way around it is to recode Fullpage.js's translate3d (and height/width) codes also with "vh" so that it doesn't have to adjust the size. If any one has a ready code of this, that would be really appreciated! (IE8 is support is not required).
Cheers
I am creating an app window like this:
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
//Create the app window
chrome.app.window.create(
'test.html',
{
frame: "none",
bounds:
{
width: 700,
height: 600,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
},
maxWidth: 700,
maxHeight: 600,
resizable: false,
id: "test"
}
);
but it shows on screen as only 591 pixels tall!
When I view the HTML/CSS in Chrome as a local HTML page, it shows as the proper height of 600 pixels tall. Why does creating it as a window make it 9 pixels too short?
It was caching the size I had set the window to in a previous version and not allowing that to be changed via the create method. The only fix I found was to do:
function(myWin)
{
myWin.moveTo( Math.round((screenWidth-width)/2), Math.round((screenHeight-height)/2) );
myWin.resizeTo( 700, 600 );
}
in the callback for the create method
I'm manually porting an extension I wrote in Chrome over to Firefox. I'm attaching a panel to a widget, and setting the content of that panel as an HTML file. How can I make the panel shrink and grow with the content? There's a lot of unsightly scroll bars and grey background right now.
var data = require("self").data;
var text_entry = require("panel").Panel({
width: 320,
height: 181,
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
require("widget").Widget({
label: "Text entry",
id: "text-entry",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: text_entry
});
Not setting the height property of the panel makes it quite tall.
You might want to check out this example that resizes the panel based on the document loaded. If you want to resize based on changes to the content size, at least on initial load:
https://builder.addons.mozilla.org/package/150225/latest/
( sorry for the delay in respinding, been afk travelling )
I want to lock the horizontal scroll of my webpage in mobile Safari.
Specifying the width n height in background.js fixed the problem for iPad :
if(B.msie<=8 || B.iPad) (function() {
var mixin, i,
bg_tile = static_url('bg_tile');
if(B.iPhone || B.iPad) {
bg_tile = static_url('iOS_bg_tile');
}
for(i in mixin={
width: 768,
height: 600,
fade: false,
srcs: {
tile: bg_tile,
radial: static_url('bg_radial')
},
customCSS: function(el) {
el.style.background = 'url('+this.srcs.tile+')';
},
mainSrc: 'radial'
}) if(mixin.hasOwnProperty(i)) BG.BackgroundView.prototype[i] = mixin[i];
})();
But if I add a similar block for iPhone it's giving zooming problem.
Any suggestion how can I lock the horizontal scroll in iPhone?
Thanks in advance.. :)
Have you tried using a meta tag for viewport, fix the width as device width.
<meta name = "viewport" content = "width = 320">
When using Sencha Touch to create a panel - you can tell the panel to enable a fullscreen property. THe panel will fill the space available by the device.
It seems to have a bug or not deal with a bookmark that has been saved to the home screen - and floats underneath the status bar at the top.
Is there a property or setting to manage this behaviour OR are am I going to have to program the logic to determine how much padding is required dependent on device and orientation ?
Example below will fit nicely in mobile Safari, but if you save to Home Screen and load it up - the Toolbar sits underneath the Status Bar.
var buttons = [
{text: 'Button'},
{xtype: 'spacer'},
{text: 'Blue', ui: 'action'},
];
var toolbar1 = new Ext.Toolbar({
dock: 'top',
title: 'Panel',
items: buttons
});
var windowHeight = Ext.Element.getViewportHeight();
var windowWidth = Ext.Element.getViewportWidth();
var homePage = new Ext.Panel ({
fullscreen: true,
cls: 'homePage',
dockedItems: [toolbar1],
layout: 'fit',
html: '<h2>Testing Ext.js Panel</h2><p>Height:' + windowHeight +'</p><p> Width:' + windowWidth +'</p>',
animation: 'slide'
});
Thanks in advance.
Hi Ket — This is actually the default behavior... The status bar is always visible, even in a fullscreen web app. There are three tips you may find useful:
You can use a translucent statusbar, which is still there but will overlay your content. To do this, in Ext.setup(), you can use "statusBarStyle: 'black-translucent'"
"window.navigator.standalone" will detect whether you're in fullscreen mode or not.
Instead of measuring window width/height, you could break your H2 and P into separate components, and give the P area a layout of 'fit'
Hope that helps-