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.
This is a very odd question, of which I am fairly confident I already know the answer, however, before I go ahead with the fix that I am trying to avoid, I thought it was worth asking others as you may see this from a different angle
I am currently writing a plugin that takes a certain element (can be any DOM node), and wraps it with a div. The purpose of the plugin is to add a 'blinds' effect to elements which can then be used to reveal the element on scroll.
Note: Wrapping with a div is absolutely essential to the functionality I am implementing.
My question, quite simply, is anybody aware of a smart way to preserve the styles from the element being wrapped and ensure it visually remains the same as it was before the div wrapping, and, whilst retaining the dimensions so another div can be inserted within the wrapper and be the same dimensions of it's sibling.
See this very basic example (before and after - notice the blue blind):
.test {
display: flex;
flex-flow: column;
height: 200px;
text-align: center;
}
.test:nth-child(1) {
background: #999;
}
.test:nth-child(2) {
background: #666;
}
.test > * {
flex: 0 1 auto;
}
.test h1 {
margin: auto 0 0;
color: #fff;
}
.test p {
margin: 0 0 auto;
color: #fff;
}
.test-wrapper {
position: relative;
width: max-content; /* Fix for example purposes */
margin: 0 auto; /* Fix for example purposes */
}
.test-wrapper .blind {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: blue;
opacity: 0.5;
}
<div class="test">
<h1>Before wrapper inserted</h1>
<p>Some description</p>
</div>
<div class="test">
<div class="test-wrapper">
<div class="blind"></div>
<h1>After wrapper inserted</h1>
</div>
<p>Some description</p>
</div>
Before answering, these are the solutions I am trying to avoid:
'copying' or 'moving' the styles (or certain styles) from the child to the parent as this is likely to cause a huge mess... Open to suggestions though
Defining styles for test-wrapper in the site's CSS as test-wrapper is a plugin specific element.
The obvious, and very easy, solution is to just define the styles for the wrapper instead of the child in my CSS (SCSS). I appreciate this may be the only way, but I ideally want to avoid this as what I am building is a plugin and I want the HTML/CSS to work with and without the element wrapper in place.
I want an interactive experience for my users.. AND I want to remain responsiveness. I try to learn the web by making a card game.
What I have is things to click on, which are supposed to be appearing somewhere else on the page. (Im using jQuery so far)
The (simplified) use-case is:
var card = $('[card=X]').remove();
$('.board').append(card);
Now I want to add some animation to it.
I am failing in choosing an appropriate framework.
In the ones that I tried I couldn't time the removal, or the animation was gone, when I tried to call the removal, in a callback. Which was horrible, because the removal either fired before the callback or not at all. Or there was nothing left to be reattached..
So it should be more then just 'blur' or 'fade'.
So I want to detach a thing with an animation, place it somewhere else, and make it 'appear' there with an animation.
As a superb bonus, those animations would have an orientation, so that the 'from' and 'where to' are visible appearing to the end user. (Like an arrow or a line drawn between those 2 locations.)
(Sry for not being more specific, but asking that question for all the frameworks/ libs out there appears not that appealing..)
edit:
Nick pointed me in the right direction. My issue was the boilerplate code. I adjusted the code he provided. (added fade in animation + have the things 'reappearing' with event handler)
..thus I marked his answer as correct. (even that it wasn't, he didn't append the original thing, instead he created a new one.)
$('.cards ').on('click', '[card-id]', function() {
$(this).fadeOut(1000, function() {
var old = $(this).remove();
$('.cards').append(old);
old.fadeIn();
});
for(var i = 0; i < 6; i++) {
$('.cards').append('<div class="card" card-id="'+i+'"></div>');
}
$('[card-id]').click(function() {
$(this).fadeOut(2000, function() {
$(this).remove();
$('.cards').append('<div class="card" card-id="'+$(this).attr('card-id')+'"></div>');
});
});
.card {
position: relative;
display: inline-block;
width: 120px;
height: 180px;
background-color: #F4F4F4;
border: 1px solid #E8E8E8;
border-radius:5px;
margin: 15px;
cursor: pointer;
}
.card:after {
content: attr(card-id);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: 700;
font-family: courier, serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cards"></div>
Consider using .animate() from Jquery. There is a lot you can do with it.
Take a look at the API: http://api.jquery.com/animate/
I have the following code:
<div id="div3"><img src="" width="20px" /></div>
<div id="div4">
... -> menu
</div>
which by using the following:
div3{
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -10px;
}
#div4{
display: none;
float:right;
position: absolute;
left: 60%;
top: 50%;
margin-top: -15px;
margin-left: -70px;
}
#div3:hover + #div4 {
display: block;
}
I make the div4 show, after hovering #div3 (which is an image) . However I want div4 appears and remains after uncovering the #div3. I tried couple of codes in jquery but they do not work.
can you help?
As PHPGlue said, you can't do that with just CSS.
You can do something like this using jquery, adjust the code based on your needs:
HTML
<div id="one">Hover me!</div>
<div id="two">HELLOO!</div>
JS
$("#one").on("hover", function(){
$("#two").show();
});
FIDDLE
You can (effectively) do this in pure CSS, such that it works in modern browsers. The trick is to use a very large value for a transition-delay when the hover exits. Like this:
#div3:hover + #div4 { opacity:1; height:20px;transition-delay:0s; }
#div4 { opacity:0; height:0; transition-delay:360000s; }
See http://jsfiddle.net/7Fw3A/1/
Make sure that #div4 is always displayed while it is hovered over. Change your last CSS selector to something like:
#div3:hover + #div4, #div4:hover {
display: block;
}
It will still go away when you move the mouse away from both div3 and div4, but that is often what you want to happen. If not, it's probably best to use a jQuery solution (I'm sure others will post one).
You could possibly add another transparent div that covered the full height and width of the page, give it a high z-index, and make sure that both it and div4 are displayed when that div is hovered over (as it will always be), but that sounds like a bad idea.
As PHPglue said, you need Javascript to do this. (this is only one example. feel free to use whatever JS you want)
$('#div3').hover(function() {
$('#div4').css('display', 'block');
}
I assume you want to make #div4 to appear once you've hovered over #div3, so do the following.
$('#div3').on('mouseover', function () {
$('#div4').addClass('visible');
$(this).off('mouseover');
});
This will add the class visible to #div4 when you mouseover #div3 for the first time. If you add a css selector .visible { visibility: visible; } then this will adjust #div4s css.
I want to display the alert box but for a certain interval. Is it possible in JavaScript?
If you want an alert to appear after a certain about time, you can use this code:
setTimeout(function() { alert("my message"); }, time);
If you want an alert to appear and disappear after a specified interval has passed, then you're out of luck. When an alert has fired, the browser stops processing the javascript code until the user clicks "ok". This happens again when a confirm or prompt is shown.
If you want the appear/disappear behavior, then I would recommend using something like jQueryUI's dialog widget. Here's a quick example on how you might use it to achieve that behavior.
var dialog = $(foo).dialog('open');
setTimeout(function() { dialog.dialog('close'); }, time);
May be it's too late but the following code works fine
document.getElementById('alrt').innerHTML='<b>Please wait, Your download will start soon!!!</b>';
setTimeout(function() {document.getElementById('alrt').innerHTML='';},5000);
<div id='alrt' style="fontWeight = 'bold'"></div>
setTimeout( function ( ) { alert( "moo" ); }, 10000 ); //displays msg in 10 seconds
In short, the answer is no. Once you show an alert, confirm, or prompt the script no longer has control until the user returns control by clicking one of the buttons.
To do what you want, you will want to use DOM elements like a div and show, then hide it after a specified time. If you need to be modal (takes over the page, allowing no further action) you will have to do additional work.
You could of course use one of the many "dialog" libraries out there. One that comes to mind right away is the jQuery UI Dialog widget
I finished my time alert with a unwanted effect.... Browsers add stuff to windows. My script is an aptated one and I will show after the following text.
I found a CSS script for popups, which doesn't have unwanted browser stuff. This was written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO. This script I will show after the following text.
This CSS script above looks professional and is alot more tidy. This button could be a clickable company logo image. By suppressing this button/image from running a function, this means you can run this function from inside javascript or call it with CSS, without it being run by clicking it.
This popup alert stays inside the window that popped it up. So if you are a multi-tasker you won't have trouble knowing what alert goes with what window.
The statements above are valid ones.... (Please allow).
How these are achieved will be down to experimentation, as my knowledge of CSS is limited at the moment, but I learn fast.
CSS menus/DHTML use mouseover(valid statement).
I have a CSS menu script of my own which is adapted from 'Javascript for dummies' that pops up a menu alert. This works, but text size is limited. This hides under the top window banner. This could be set to be timed alert. This isn't great, but I will show this after the following text.
The Prakash script above I feel could be the answer if you can adapt it.
Scripts that follow:- My adapted timed window alert, Prakash's CSS popup script, my timed menu alert.
1.
<html>
<head>
<title></title>
<script language="JavaScript">
// Variables
leftposition=screen.width-350
strfiller0='<table border="1" cellspacing="0" width="98%"><tr><td><br>'+'Alert: '+'<br><hr width="98%"><br>'
strfiller1=' This alert is a timed one.'+'<br><br><br></td></tr></table>'
temp=strfiller0+strfiller1
// Javascript
// This code belongs to Stephen Mayes Date: 25/07/2016 time:8:32 am
function preview(){
preWindow= open("", "preWindow","status=no,toolbar=no,menubar=yes,width=350,height=180,left="+leftposition+",top=0");
preWindow.document.open();
preWindow.document.write(temp);
preWindow.document.close();
setTimeout(function(){preWindow.close()},4000);
}
</script>
</head>
<body>
<input type="button" value=" Open " onclick="preview()">
</body>
</html>
2.
<style>
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
<script>
// written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO
</script>
<body>
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
</body>
3.
<HTML>
<HEAD>
<TITLE>Using DHTML to Create Sliding Menus (From JavaScript For Dummies, 4th Edition)</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Hide from older browsers
function displayMenu(currentPosition,nextPosition) {
// Get the menu object located at the currentPosition on the screen
var whichMenu = document.getElementById(currentPosition).style;
if (displayMenu.arguments.length == 1) {
// Only one argument was sent in, so we need to
// figure out the value for "nextPosition"
if (parseInt(whichMenu.top) == -5) {
// Only two values are possible: one for mouseover
// (-5) and one for mouseout (-90). So we want
// to toggle from the existing position to the
// other position: i.e., if the position is -5,
// set nextPosition to -90...
nextPosition = -90;
}
else {
// Otherwise, set nextPosition to -5
nextPosition = -5;
}
}
// Redisplay the menu using the value of "nextPosition"
whichMenu.top = nextPosition + "px";
}
// End hiding-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.menu {position:absolute; font:10px arial, helvetica, sans-serif; background-color:#ffffcc; layer-background-color:#ffffcc; top:-90px}
#resMenu {right:10px; width:-130px}
A {text-decoration:none; color:#000000}
A:hover {background-color:pink; color:blue}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<div id="resMenu" class="menu" onmouseover="displayMenu('resMenu',-5)" onmouseout="displayMenu('resMenu',-90)"><br />
Alert:<br>
<br>
You pushed that button again... Didn't yeah? <br>
<br>
<br>
<br>
</div>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
<input type="button" value="Wake that alert up" onclick="displayMenu('resMenu',-5)">
</BODY>
</HTML>
Pure HTML + CSS 5 seconds alert box using the details element toggling.
details > p {
padding: 1rem;
margin: 0
}
details[open] {
visibility: hidden;
position: fixed;
width: 33%;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
transform-origin: center center;
outline: 10000px #000000d4 solid;
animation: alertBox 5s;
border: 15px yellow solid
}
details[open] summary::after {
content: '❌';
float: right
}
#keyframes alertBox {
0% { visibility: unset}
100% { visibility: hidden }
}
<details>
<summary>Show the box 5s</summary>
<p>HTML and CSS popup with 5s tempo.</p>
<p><b>Powered by HTML</b></p>
</details>
Nb: the visibility stay hidden at closure, haven't found a way to restore it from CSS, we might have to use js to toggle a class to show it again. If someone find a way with only CSS, please edit this post!!
If you are looking for an alert that dissapears after an interval you could try the jQuery UI Dialog widget.
tooltips can be used as alerts. These can be timed to appear and disappear.
CSS can be used to create tooltips and menus. More info on this can be found in 'Javascript for Dummies'. Sorry about the label of this book... Not infuring anything.
Reading other peoples answers here, I realized the answer to my own thoughts/questions. SetTimeOut could be applied to tooltips. Javascript could trigger them.
by using this code you can set the timer on the alert box , and it will pop up after 10 seconds.
setTimeout(function(){
alert("after 10 sec i will start");
},10000);
You can now use the HTMLDialogElement.
In this example a dialog is created when you click the button, and a timeout function is created to close it:
async function showMessage(message) {
const dialog = document.createElement("dialog");
document.body.appendChild(dialog);
dialog.innerText = message;
dialog.show();
setTimeout(function () {
dialog.close();
}, 1000);
}
<button class="btn" onclick="showMessage('This is my message')">click me!</button>
If you want you can test it on codepen.
function alertWithTimeout(title,message,timeout){
var dialog = $("<div id='dialog-confirm' title='"+title+"'>"+message+"</div>").dialog();
setTimeout(function() { dialog.dialog('close'); }, timeout);
}
alertWithTimeout("Error","This is the message" ,5000);