Node - display window when ready - javascript

I am trying to show the window after the URL and everything inside that page is loaded. This is the script:
var loadWindow = new BrowserWindow({
width: 500,
height: 300,
frame: false,
resizable: false,
fullscreen: false,
scrollbars: false,
show: false
})
loadWindow.loadUrl('file://' + __dirname + '/index.html')
What I tried:
loadWindow.on('ready', function(){
loadWindow.show()
})
I also tried to on('loaded'), but none of these is working. What is the best solution to load a URL inside a page and display it only after everything is loaded?

Related

How to get cursor position outside a window in ElectronJS

I'm creating a 600 x 300 window in Electronjs and I want to get the cursor position all over the screen, even if the cursor is outside the window. How can I do this?
My window:
let win = new BrowserWindow({
width: 600,
height: 300,
transparent: true,
show: false,
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
nodeIntegrationInWorker: true,
},
})
I am getting the position this way, but if I move the cursor outside the window it stops working (The windows is focused).
ipcMain.handle('getPoint', async(event, someArgument) => {
const point = screen.getCursorScreenPoint()
return point
})

How to make new window appear with loading indicator while preload?

I am trying to make a window application in Electron.js. When I run it, it makes preload.js script:
const mainWindow = new BrowserWindow({
width: 500,
height: 500,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
});
I want a new window with a loading indicator to appear till preload.js not finish. How can I reach it?
create first the loading window like this:
loadingWindow = new BrowserWindow({
width: 512,
height: 384,
resizable: false,
transparent: true,
frame: false,
})
loadingWindow.loadFile('views/loading.html')
make shure that you clear this window if you close it
loadingWindow.on('closed', function () {
loadingWindow = null
});
than create your main window but hide it
const mainWindow = new BrowserWindow({
width: 500,
height: 500,
show: false, // hide this window
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
});
mainWindow.loadFile('yourFile.html');
than get the did-finish-load event to close the loading window and show the mainWindow
mainWindow.webContents.on('did-finish-load', () => {
if (loadingWindow) loadingWindow.close();
mainWindow.show();
})

Jquery .load() works locally but not on the server

I am not quite sure what is causing the issue here. I am trying to load a view into a Jquery dialog using the .load() function. On my local machine everything works fine, but on the server the URL that ends up being created is not correct because it is adding the parameter to the URL twice.
The links are dynamic from a webgrid which is where the #item.GrouperIDForLookip comes from.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load('/Home/_Groupers/?GroupIDForLookup=' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
On my local machine everything works fine and the URL for the load works. But on the server when running it the URL that ends up being created is %2fHome%2f_Groupers%2f%3fGroupIDForLookup%3d2&GroupIDForLookup=2 which doubles the GroupIDForLookup gives me a GET 404 (page not found).
Does anyone happen to know what would cause this to happen? If you need more code just let me know.
Please update the URL in the load function in the below code.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load(
'#URL.Action("_Groupers", "Home")?GroupIDForLookup' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>

Jquery Dialog box scrolls to a link, how to keep it at the top

I have a dialogbox that shows the contents of an HTML file.
In this file there is a href link at the bottom.
Now everytime the dialog is shown, it automatically scrolls to that link and sets focus to it.
How can I set the scroll position back to the top after the dialog shows?
Here is the jquery code:
<script type="text/javascript">
$(function()
{
$('#faq1_pnM').dialog(
{
title: 'Frequently asked questions',
autoOpen: false,
modal: true,
show: 'puff',
hide: 'puff',
open: function() {
var e1 = $(this);
var scrollY = this.scrollHeight;
e1.scrollTop(scrollY);
e1.parent().queue(function(next) {
e1.scrollTop(scrollY);
next();
});
},
resizable: false,
closeOnEscape: true,
width: '650',
height: '500',
minWidth: '500',
minHeight: '500'
}).dialog('open');
});
</script>
As you can see, I tried with the open: function... stuff, but that doesn't do the trick.
Did I miss something?
Found the solution:
I removed the scrollY variable and replaced it for 0 (zero).

Jquery Dialog..What am I doing wrong?

I am not sure what I am doing wrong. The dialog box comes but it does not follow any of the settings I specified.
function voteToday(id,userid){
$(".pleaseLogin").dialog({
autoOpen:false,
bgiframe: true,
resizable: false,
width:200,
height:75,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
$(".pleaseLogin").dialog('open');
}
You generate two different dialogs, one doesn't open but has options, one does open but has no options.
If you give more information where you got this dialog from, I could answer how to fix it.
EDIT
I was wrong, but found out that this code works fine. The only option that doesn't seem to work is autoOpen: false, but you open the box after you give that option.
function voteToday(id,userid){
$(".pleaseLogin").dialog('open');
}
$(document).ready(function(){
$(".pleaseLogin").dialog({
autoOpen: false,
bgiframe: true,
resizable: false,
width:500,
height:75,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
$('.something').click(voteToday);
});
why not use the autoOpen: true setting? seems like the problem stems from calling .dialog() twice. You'll want to create the dialog when the DOM is ready, and then simply call the open method on it within your voteToday function.

Categories

Resources