Hi I use following code to show splash screen , before page is loaded
loadingx = new BrowserWindow({ width: 920, height: 1000, transparent: true, frame: false, alwaysOnTop: true });
loadingx.loadURL(`file://${__dirname}/splash.html`);
mainWindow.once("ready-to-show", () => {
loadingx.hide();
mainWindow.show();
});
mainWindow.webContents.on("did-start-loading", () => {
loadingx.show();
});
It was working fine , until i tried it in full screen mode in MAC , this small loading screen is opening into new tabs.
So is there anyway to show splash screen , without creating new window. thanks.Right now I am using onreadystatechange responses to show custom loading icon, but its not good as above method.
Related
so I am working on a small feature. Basically, it adds a border to the desktop. So far, I got the design and everything down, but the two windows (two monitors) layer over everything else. So I can’t click anything on my computer because the borders (which have a transparent background) are over everything.
Example:
https://user-images.githubusercontent.com/43588940/46045103-819c4480-c0d1-11e8-92ce-6c36b4ec6cc9.png
As you can see, the borders work but I can’t click anything on my desktop because it is blocking it.
So my question is, how can I link these borders to the desktop? Sort of like a desktop gadget. I just want it to stay in the background, so it isnt blocking all the computer functions.
Also, I can't click through the border because it is a transparent window and electron doesnt support clicking through transparent windows (feelsbadman). So I'm kinda screwed i just want borders on my desktop with this lol
My code:
const electron = require('electron')
const { app, BrowserWindow, globalShortcut } = require('electron')
let win
function runGouge() {
```
let displays = electron.screen.getAllDisplays();
let externalDisplay = displays.find((display) => {
return display.bounds.x !== 0 || display.bounds.y !== 0
})
win = new BrowserWindow({
name: "Gouge4 ",
width: 400,
frame: false,
toolbar: false,
transparent: true,
show: false,
parent: "explorer.exe",
x: externalDisplay.bounds.x + 50,
y: externalDisplay.bounds.y + 50
})
win.setMenu(null);
//win.webContents.openDevTools();
win.maximize();
win.show();
win.loadFile('index.html');
win.setSkipTaskbar(true);
win.showInactive();
win.center();
win2 = new BrowserWindow({
name: "Gouge2",
frame: false,
toolbar: false,
transparent: true,
show: false,
})
win2.setMenu(null);
//win2.webContents.openDevTools();
win2.setIgnoreMouseEvents;
win2.maximize();
win2.show();
win2.loadFile('index_blank.html');
win2.setSkipTaskbar(true);
win2.showInactive();
win2.center();
```
}
app.on('ready', runGouge);
Why not just use HTML to generate the border? You can create 3 divs, position one to the bottom (position: absolute; bottom: 0), float one to the left (float: left) & one to the right (float: right).
The first div will have background-color: purple, and the other two will have a gradient background-image: linear-gradient(rgba(0, 0, 0, 0), purple)
This will ensure that the bounding boxes of all of these elements will be confined and won't interfere with your site's functionality. To overlay them all you just set the z-index to be higher than all the other elements in your site.
You can disable mouse events on your BrowserWindow with setIgnoreMouseEvents. That means every event will be forwarded to the window behind that - won't block.
For example:
const {app, BrowserWindow} = require('electron')
const path = require('path')
app.once('ready', () => {
let win = new BrowserWindow({
frame: false,
focusable: false,
transparent: true,
alwaysOnTop: true,
fullscreen: true
})
win.loadURL(path.join(__dirname, 'background-frame.html'))
win.setIgnoreMouseEvents(true)
})
I've chosen properties for BrowserWindow which I think fit a window you described but it's up to you
I have built a kiosk app for Chrome with app builder, but even if the key of doing a kiosk app is that it will be displayed at full screen, I don´t manage to get rid of the top bar (I have removed the homepage button etc. but can´t display it at total full screen). I`d like to know if there´s any commando for this in html or javascript and in which file it should be added.
In the backgroung.js file I´ve added the line "state: 'fullscreen' but it does not work (I've also added the permission for fullscreen in the manifest file):
var runApp = function() {
if (chrome.power) {
chrome.power.requestKeepAwake('display');
}
console.log(config);
chrome.app.window.create(
config ?
'exported_app_view.html' :
'designer_view.html',
{
id: 'KioskDesignerWindow',
width: 1100,
height: 720,
minWidth: 800,
minHeight: 600,
state: 'fullscreen'
},
function(win) {
if (!this.X) { return; }
var window = win.contentWindow;
window.onload = function() {
this.$addWindow(window);
var Y = this.X.subWindow(window, 'Kiosk Designer Window');
this.DOM.init(Y);
}.bind(this);
win.onClosed.addListener(function() {
this.$removeWindow(window);
}.bind(this));
}.bind(this));
}.bind(this);
Yes, you can do it with JavaScript. In background.js, your 3rd parameter to chrome.app.window.create is that callback function that has the win argument - add this line:
win.fullscreen();
https://developer.chrome.com/apps/app_window#type-AppWindow
If you hit escape while your app is running you may get the title bar back, but next time it runs it will go fullscreen again.
everyone
I have a popup that opened when click button from another popup. When the popup open it has scroll bar that I don't expect it appear.
var win = $("#q-exp-add-edit-window").kendoWindow({
draggable: false,
visible: false,
modal: true,
//position: {
// top: 5,
// left: 8
//},
resizable: false,
}).data("kendoWindow");
//Set the Window Title
win.title("Entry Notes");
//Set the Window Width & Height
$("#q-exp-add-edit-window").css("width", "870");
$("#q-exp-add-edit-window").css("height", "460");
$("#q-exp-add-edit-window").html("");
win.refresh({
url: ExpensesEditGrid.urlAddEditNote + params,
iframe: true
});
//Center & Open the Window
win.center();
win.open();
Here is image:
Many thanks for help .
Decrease the inner table height and width,
so that only inner table will fit and get scrolls inside model.
check the model height and width (or try to assign)
and change the following lines, less than models size.
$("#q-exp-add-edit-window").css("width", "870");
$("#q-exp-add-edit-window").css("height", "460");
I'm creating a Chrome packaged app that has two pages [for now]. And by pages a mean actual .html files. One is called login.html and the another is index.html.
Now everything related to the user is stored in chrome.storage.local.
Here is the code for launching the pages in chrome.js.
chrome.app.runtime.onLaunched.addListener(function () {
var dimensions = getDimensions(screen),
positions = getPositions(screen);
chrome.storage.local.get('login', function (result) {
if(result.login.status === "loggedOut") {
chrome.app.window.create('login.html', {
id: 'loginWindow',
'bounds': {
'width': 400,
'height': 600
},
minWidth: 400,
minHeight: 600,
maxWidth: 400,
maxHeight: 600,
frame: 'none'
});
} else {
chrome.app.window.create('index.html', {
id: 'mainWindow',
'bounds': {
'top': positions.top,
'left': positions.left,
'width': dimensions.width,
'height': dimensions.height
},
minWidth: dimensions.width,
minHeight: dimensions.height,
maxWidth: dimensions.width,
maxHeight: dimensions.height,
frame: 'none'
});
}
});
});
Now because chrome.storage.local.get login.status === loggedOut it pops the login page with the login form. So how do I proceed when the user puts the correct credentials. How do I close the login window and then open the main. The code above is just to open the index.html next time and not showing the login again.
I have done the code to check the credentials and that works, but I want to now close the login form window and open a new index.html with the same bounds, max-, minwidths and heights as you can see in the code above.
Here is what I'm looking for: [this is now in login.js which is called inside login.html]
if(login === success) {
// close login window and goto mainWindow
} else {
// Username or password is wrong
}
Thanks in advance!
What you have to do to accomplish this is to add this tho check if changes happen inside the chrome.storage.local.
chrome.storage.onChanged.addListener(function(changes, namespace) {
chrome.storage.local.get('login', function (result) {
if (result.login.status === "loggedIn") {
chrome.app.window.get('loginWindow').close();
chrome.app.window.create('index.html', {
id: 'mainWindow',
'bounds': {
'top': positions.top,
'left': positions.left,
'width': dimensions.width,
'height': dimensions.height
},
minWidth: dimensions.width,
minHeight: dimensions.height,
maxWidth: dimensions.width,
maxHeight: dimensions.height,
frame: 'none'
});
}
});
});
Of course you could use those changes and namespaces but I chose to leave them out.
MiroRauhala has answered your direct question, but maybe you should rethink how your app is structured.
Chrome apps don't have navigation like a normal site does. They have windows, and each window corresponds to a different html page. Instead of closing one window and opening a new one up with the exact same bounds, you could just have different divs within the one document which you hide and show as necessary.
I think changing your structure will lead to a simpler app in the long run.
If you do go with the separate window approach you will need to be careful. For example, if you add an id to a window and specify bounds, the bounds are only applied the first time it is shown. Afterwards it remembers the bounds. You can get around that by creating it hidden, then moving it, then showing it. You might run into other things like this as you're using the chrome apps platform in a way it wasn't designed for.
Im having a bit of trouble of getting a Royal Slider working in a lightbox - If you take a look at this page: http://www.wearewebstars.dk/frontend/Test/boerneunivers2.html - And then click the arrow, where it says "Hvad er Myanmar" - Then it opens a lightbox with a gallery - However, the container of thumbnails only get a width of 36px - But the if I resize the window, then it gets the full width of all the thumbnails, and places the thumbnails correctly - Any ideas? I've tried resizing the window programmaticly, but cant get it to work:
The script I have is:
$(".toggle-gallery-8").on("click", function(event){
$('#gallery-8').royalSlider({
fullscreen: {
enabled: true,
nativeFS: true
},
controlNavigation: 'thumbnails',
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 850,
loop: false,
imageScaleMode: 'fill',
navigateByClick: true,
numImagesToPreload:5,
arrowsNav:true,
arrowsNavAutoHide: true,
arrowsNavHideOnTouch: true,
keyboardNavEnabled: true,
usePreloader: true,
fadeinLoadedSlide: true,
globalCaption: true,
globalCaptionInside: false,
updateSliderSize: true,
thumbs: {
appendSpan: false,
firstMargin: true,
}
});
$('#gallery-8').royalSlider('updateSliderSize', true);
/*if($(".window.fade.in").length() > 0){
$(".window").trigger("resize");
}*/
});
Looking on the developer site I found that it's a known issue that sometimes happens.
If slider size is dynamic: try to resize your browser, if after
resizing layout looks correctly - this is the issue.
If slider size is static: change size of root slider element via
Chrome Web Inspector or Firebug and resize browser window. Or just run
jQuery('.royalSlider').royalSlider('updateSliderSize', true); in
console and see if it fixes your problem.
Doc: http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slider-content-area-shrinks
You can try to call updateSliderSize method:
setTimeout(function () {
$('.royalSlider').royalSlider('updateSliderSize', true);
}, 500)
after the slider definition, the setTimeout is needed to handle a little timing issue.