Okay, so, I'm using JQuery to show/hide a 'Processing' div element on my page. Below is the basic code:
function ShowLoading(){
$(divLoadingPanel).show();
}
function HideLoading(){
$(divLoadingPanel).hide();
}
Inside of my various Javascript functions I call ShowLoading() and HideLoading() as necessary. When viewing the page in FireFox, everything works correctly. When viewing it in Chrome, the loading panel is never seen. HOWEVER, if I debug and break at the line after the panel should be
displayed, it's there. It will display fine when walking the code manually, but not if I don't use a breakpoint and the debugger. That's got me baffled. Here's the code for the div itself:
<div id="divLoadingPanel" class="Loading_Panel" style="display: none">
<br>
<img src="./images/8.gif">
<br><br>
<font class="Loading_Text">Processing...</font>
</div>
And, finally, here's the class info for the panel:
.Loading_Panel {
position:fixed;
top: 50%;
left: 50%;
width:300px;
height:150px;
margin-top: -75px;
margin-left: -150px;
background: #E9F2FA;
border-radius: 10px;
border: 1px solid #1C4E7C;
}
Any help would be appreciated.
Change your code to:
function ShowLoading(){
$("#divLoadingPanel").show();
}
function HideLoading(){
$("#divLoadingPanel").hide();
}
Related
I have a page that has to do quite a bit of work (5-6 seconds) of loading data from all over the place on the initial connection. It is slow because of the api endpoints I am calling, I have no control over it.
Is there a way to get a loading div to show before it starts doing all of its data collection?
The below doesnt do anything. I believe its because the page already starts gathering data before it gets to the jquery. I could be wrong. myjs.js is the file name and it is the first thing loaded on my page.
$('body').on('load', function(){
$body.addClass("loading");
});
and does the same thing
$(document).ready(function() {
$body.addClass("loading");
});
In layman's terms:
User goes to https://somewebsite.com
Jquery loading div shows
other functions run to gather data
jquery loading div is removed.
This is in the laravel framework if that affects anything.
There is actually a pretty simple way to do this. I recently experienced something similar.
I did something like this:
window.addEventListener('load', (event) => {
setTimeout(() => {
$('.jumping-dots-loader').slideUp(650);
}, 1000);
});
.jumping-dots-loader {
width: 100vw !important;
height: 100vh !important;
background-color: white;
z-index: 99999999999999999999999;
display: block;
border: none;
border-radius: 0;
margin: 0;
position: fixed;
padding: 20% 35%;
text-align: center;
}
.jumping-dots-loader span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: rgba(147, 194, 61, 1);
margin: 35px 0.85rem;
}
/* Add in animation */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumping-dots-loader">
<span></span>
<span></span>
<span></span>
</div>
<h1>
Howsit going?
</h1>
If you go through Mozilla's docs about the document.readystatechange event, you will see how the browser handles the loading order and can use this to your advantage. In my example, I add a container div which will cover the user's viewport. Then style some dots (add your own animation to them) which will be displayed while the document is loading. When the load state is reached, the placeholder div will be hidden and the loaded page is displayed.
I need to show a Modal in TypeScript. I don't want to use any library(bootstrap,..) to style it, I have to use own less styling for it. what I can use to Create a Modal? it can be a javascript modal that supported by typescript and by all browsers.
I tried to use showModal() like this:
This is my TypeScript Code:
function CreateModal() {
document.getElementById("myDialog").showModal();
}
It gave me this error - showModal is not exists.
even if It works it is not supported in IE and Firefix only works in chrome.
and this is my index.html
<script src="scripts/TypeScripts/Modal.js"></script>
<button onclick="CreateModal()">Show dialog</button>
<dialog id="myDialog">This is a dialog window</dialog>
I tried to use Onclick as well but it says does not existed.
span.onclick = function () {
modal.style.display = "none";
}
I know it's been a few months since this question was asked, but I recently had the same problem and was able to get a solution working.
In the typescript, you can ignore the need for the HTMLDialogElement by casting your dialog to type any.
openMyDialog() {
let myDialog:any = <any>document.getElementById("myDialog");
myDialog.showModal();
}
In your HTML, you just attached this function to the angular (click).
<button (click)="openMyDialog()">Open My Dialog</button>
The same technique can be used for the dialog's show() and close() functions.
If you're up for doing everything manually, you can place a partially transparent grey DIV over everything on the page, then a single DIV on top of it with your dialog. Toggle visibility with JS/CSS, and you're able to style any way you like it.
Here's a quick example, with a significant need for improved styling:
div.greyModal {
opacity: 0.7;
background-color: grey;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.modalContent {
opacity: 1;
position: fixed;
width: 75%;
left: 50%;
margin-left: -37.5%;
height:100px;
background-color: white;
border: solid 4px black;
border-color: black;
}
<div>
This is the web page content. <span style="color:red">This is red text that appears faded when the modalToggle divs are visible</span>
</div>
<div class="greyModal modalToggle">
</div>
<div class="modalContent modalToggle">
This is the content of my modal dialog
</div>
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
I'm working on a page with inputs on it that will be printed frequently. When printed, the page requires quite a different layout, with different labels and information presented. To make this simpler, I've got separate CSS for Print and Screen, and labels that correspond to the data from the foreground.
Here's a simplified version of what I'm working with:
<style>
#media screen {
#testback {display: none;}
#txtName
{
padding: 10px;
margin: 10px 20px;
border-radius: 8px;
border: 2px solid #888;
}
}
#media print {
#testfore {display: none;}
#lblName {
position: absolute;
top: 5%;
right: 25%;
}
}
</style>
<div id="testfore">
<input id="txtName" type="text" placeholder="Name..." />
</div>
<div id="testback">
<label id="lblName"></label>
</div>
JSFiddle: http://jsfiddle.net/h1vu13p1/1/
I'm hoping to go for a minimalistic approach, where the stuff in the background is only updated when the user decides to print the page, i.e. when the Print Preview or the Print Dialog is brought up. Are there any JQuery triggers that connect to either of those events?
There are about fifteen inputs on the page. If I can't update them when checking the print stuff, and instead have to do it on change/keyup, is there a way to avoid writing a separate function for each input? I was considering using classes, but then I wouldn't know how to get the info to the right labels on the hidden div.
Can you try this?
window.onbeforeprint = function() {
$('#lblName').text($('#txtName').val());
};
http://jsfiddle.net/7LL2hwwk/
if you want to solve this with js here you can take a look this:
$('input[id^="txt"]').on('change',function(){
var name = $(this).attr('id');
$('#lbl'+name.replace('txt', '')).text($(this).val());
});
http://jsfiddle.net/d5b39w8c/
I have an image which may have some divs over it (specifying certain selections within that image). These divs are supposed to be clickable. Something like that:
#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; }
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer; top: 20px; left: 20px; }
<div id="divOuter">
<img src="SomeImage.jpg" />
<div id="divInner"></div>
</div>
$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });
In chrome and FF it works as expected (pointer appears over the div, and clicking it alerts "divInner" and then "divOuter").
However, in IE8 it didn't - I got the same behavior only when hovering/clicking on the inner div borders. When clicking inside that div, only "divOuter" was alerted.
How can this be fixed?
Here's a hack: add an CHAR like "O" to the inner div, and then give it an enormous font size(depends on the area you want to span over):
#divInner { /* ... */; font-size: 1000px; color: transparent; }
(Also set "overflow: hidden" I think.)
IE likes there to be something there in the container for the click to affect. If it's just completely empty, it ignores clicks.
a fiddle: https://jsfiddle.net/cbnk8wrk/1/ (watch in IE!)
I had the same problem with an unordered list, see Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6
The solution : give the div a background color and make it transparent with a filter.
Adding an 1x1 px transparent background gif to the div is also working.
#divInner { background: url(/images/transparent.gif); }