I am creating an window with a significant initialization process and I would like to keep the window hidden until init finishes. Right now at the beginning of my js code I hide the window right after it is created and then show it when init is complete. But this creates a less than pleasing flash when the app is launched as the window appears, disappears and then re-appears.
Is there a way to keep the window invisible while the init runs?
My best guess, without seeing your code, is that you need to hide the application window using CSS in the head section of your page. This way it is hidden before the browser ever renders the page. Trying to hide the window with Javascript won't work as nicely. That's because the script can't hide the window until after the browser creates it. So, depending on conditions, the user might see it flash on start.
The snippet below shows how to do this using the CSS visibility attribute. Alternatively, you may also use the display attribute.
Show and then run the snippet to try.
setTimeout(function() {
// some long init process here
// make visible on ready
window.spinner.style.display = 'none';
window.app.style.visibility = 'visible';
}, 3000);
#app {
height: 10em;
visibility: hidden;
background-color: white;
}
h3,
h4 {
margin: 0;
padding: 4px;
color: white;
background-color: steelblue;
}
#spinner {
height: 100px;
position: absolute;
}
body {
background-color: lightgray;
}
<h3>Header</h3>
<div id="content">
<img id="spinner" src="http://i.stack.imgur.com/kOnzy.gif">
<div id="app">APPLICATION READY</div>
</div>
<h4>footer</h4>
I agree with #jeff about providing some sort of progress indicator. However, the standard way to create a window that's hidden by default in Electron is to use the show option when creating the browser window:
const myWindow = new BrowserWindow({ show: false });
Then when loading/processing is finished you can make the window visible:
// this code runs in the renderer process
import { remote } from 'electron';
remote.getCurrentWindow().show();
Hide it first with CSS. display: none or visibility:hidden.
Then show with javascript by changing display or visibility after init.
Related
I have a gif that loads once (i.e gif doesn't loop) when a button is clicked. This is used to signify that a user has successfully copied their serial number as shown in this screenshot:
I have set this up using the following code, CSS:
.greentickactive {
visibility: hidden;
}
JS:
<script>
document.getElementById("copyButton2").onclick = function() {
document.getElementById("greentickactive").style.visibility = "visible";
}
</script>
With 'greentickactive' as the gif CSS class and 'copyButton2' representing the trigger for the state change. This is all working, but the gif must be loading when the page loads (I am presuming as I can't see it on load), and I need it to only load when the button (copyButton2) is clicked. I tried replacing;
document.getElementById("greentickactive").style.visibility = "visible";
with
document.getElementById("greentickactive").style.display = "block";
and amending the CSS to;
.greentickactive {
display: none;
}
but this causes spacing issues on the page and still doesn't allow the gif animation to play at the correct time. Does any one know of another method to achieve this or maybe something that's wrong with this setup?
You can defer the loading of the image until copy is clicked, and to handle the spacing issues, just set the height & width of the element.
Assuming you have the following css for .greentickactive:
.greentickactive {
width: 64px;
height: 64px;
display: inline-block;
background-color: transparent;
background-repeat: no-repeat;
}
you can then change your javascript to:
document.getElementById("copyButton2").onclick = function() {
document.getElementById("greentickactive").style.backgroundImage = 'url("/path/to/image/greentick.gif")';
}
Let me know how that works out for you.
I have been researching this for a long time and this topic seems to be very underrepresented in the coding world. I am using the Jquery Layout UI in my application,
http://layout.jquery-dev.com/
And we only have South and Center panes. I want to be able to "undock" the South pane similar to how devtools can undock from the bottom of the browser and become its own window. i.e.
I tried inspecting devTools to see if I could get any hints from the available code there but wasn't able to find anything useful. Does anyone have ideas on how this could be achieved, or if there are code examples anywhere online that I may have somehow missed? Again, my application is using the jquery layout UI with the South region being the one i want to be able to "undock" and dock back.
There is no way to simply "undock" it. You would have to create a separate page that displays what you want to undock.
You would then create a button that (with Javascript) first removes the bottom portion of your page and then opens a popup with the part you just removed (the separate page).
It's not too hard to create but keep in mind that popup blockers could block it. The Devtools are part of the browser so they aren't affected by a popup blocker.
Here's a working jsFiddle: https://jsfiddle.net/Loveu79d/
$("#popout").click(function() {
$(".bottom").hide(); // You could also use jquery to remove the div from the DOM
$(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height
window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div
});
html,
body {
height: 100%;
}
.top {
border-bottom: 1px solid #000;
}
.top, .bottom {
height: 49%;
}
.fillpage {
height: 100%;
}
.bottom {
color: #FFF;
background: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<h1>Top part</h1>
<button id="popout">Open popup</button>
</div>
<div class="bottom">
<h1>Bottom part</h1>
</div>
In this case we have the red bottom div with "Bottom part" in it. You would have to create a separate page that has only that content in it, for example "bottom.html". Then you take my code and put that page in the Javascript part where it says "http://www.google.com".
If the bottom part of your page contains content that has been edited client side you would have to use cookies or a database to store those modifications and then load them in the bottom.html page.
I have made a website, something like a control panel that controls different devices connected to microcontroller (the website itself is hosted on microcontroller).
I encounter this problem: If user change state of some check box (you can think of them like on/off buttons) and immediately after that sends some other command, my system crashes. To avoid this I need to introduce delay that would disable user for clicking any other button on website for specific amount of time (in my case 5 seconds). I am using JavaScript to communicate http requests to/and from my microcontroller so I am looking for JavaScript based solution.
Hope I made myself clear and thank you for your help.
Since the post states the website itself is hosted on a micro-controller, jQuery may be inappropriate (storage constraints) for the answer. The general theme however is still the same. When a user changes an appropriate control show a modal div with a 'please wait' or some other message.
You don't mention the browser you want to target so I'm assuming a chrome or firefox version.
CSS:
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
z-index: 1001;
display: none;
}
.modal.active {
display: block;
}
HTML (Place this div somewhere in the root of body, and only once):
<div id="modal" class="modal">
<h3>Please wait...</h3>
</div>
JavaScript:
// get your elements
var element = document.getElementById("myField");
var modal = document.getElementById("modal");
// opens the modal
function openModal() {
modal.classList.add("active");
}
// closes the modal
function closeModal() {
modal.classList.remove("active");
}
// opens the modal, then closes it after a timeout period
function openTemporaryModal(var timeout) {
openModal();
setTimeout(function() {
closeModal();
}, timeout);
}
// used as an event callback
function modalForFiveSeconds() {
openTemporaryModal(5000);
}
// Attach the event callback to the element/event you want to open the modal:
element.addEventListener('change', modalForFiveSeconds);
References:
MDN: document.getElementById
MDN: element.classList
MDN: window.setTimeout
MDN: element.addEventListener
You can use below step.
Create one HTML Div
Make that div as Visible false or display:none
Set height and width for Div. make it screen.Width and screen.Height
when user click on Checkbox - set that div visible=true or display:block for 5 Seconds.
After 5 Seconds make it invisible.
First of all you will need to attached an EVENT to all of the checkboxes you have.
Something like this:
$.("input[type='checkbox']").change(disableScreen);
Create a div that would disable the screen
<div id="disablingDiv" ></div>
Then we have to create a new function called disableScreen.
function disableScreen() {
var $disablingDiv= $("#disablingDiv");
$body.addClass("disablingDiv");
window.setTimeout(function () {
$body.removeClass("disablingDiv");
}, 5000);
}
.disablingDiv
{
/* Do not display it on entry */
display: none;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
/* make it white but fully transparent */
background-color: white;
opacity:.00;
filter: alpha(opacity=00);
}
Hiding div solution was taken from "Disable all page elements with transparent div"
I wasn't sure how to correctly word the title, but here's what I have going on. I have two images in the body of the html.
<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="b1" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="b2" alt="night" />
The corresponding css is as follow (basically makes one of them the background):
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
Here is the javascript:
window.onload = function() {
setBackground();
}
function setBackground() {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
//setTimeout(function() {setBackground()}, 1000);
}
What currently happens now is that one image will display briefly because I"m waiting until the page has loaded to hide both the backgrounds. How would I go about hiding the backgrounds before the page has completely loaded?
Maybe with css on your images:
display: none;
So, styles will be like:
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
display: none;
}
I think you want to use jQuery.ready:
jQuery(function($) {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
});
The window.onload function is fired when all external sources is loaded (styles, scripts, images, etc..)
jQuery's ready method is fired when the DOM is ready.
A little article about the difference
Take the function out of the window.onload call, and move it to between two script tags at the top of the page. The browser reads from top to bottom, so it will execute the code as soon as it sees it.
so make your code look something like this:
<head>...
<script>
setBackground();
</script>
...</head>
i think you have to create a custom functions for this, you can have all your content hidden, once the page is ready .load() you hide you background then show the new background and the content
If I understand correctly, you want to preload the images and keep them hidden until you need them.
Rather than JavaScript, css seems to be the way to go here. However if you use display:none; some browsers might decide to delay the image load. My suggestion is to move the images offscreen:
#b1, #b2 {
left: -9999px;
top: -9999px;
z-index: -1;
position: absolute;
}
[Update] Here is a test page for display:none:
http://www.quirksmode.org/css/displayimg.html
It mentions that Opera will not load the images.
I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?
Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)
I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });
I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}