I'm using a very simple loading Javascript on my page that says something like:
$(window).load(function() { $("#spinner").fadeOut("250"); })
Then in my CSS
#spinner {
display: none;
position: fixed;
text-align: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100001;
background: white;
}
#spinner:after {
position: fixed;
content: "Loading, it will take a few seconds, please wait";
color: black;
top: 50%;
margin-left: -242px;
}
Now I want it to load just the first time someone visit that page instead of everytime (it looks very annoying).
Any help will be really appreciated.
Federico
To do what you want, you'll have to store information between page loads using cookies, localstorage, or some database or something.
As mentioned in my comments above however, you might consider rethinking the original design / working on performance if you feel it needs a spinner attached to page load in the first place.
Related
Thank you! Now, It works very well :D
I have a CSS problem.
I use overflow: auto. But, when many list are added, the page is obscured. How can I fix it?
I used parcel-bundler. Here is my app. Link
Help me.
This is common when using flexbox to center a box vertically. You can fix it by adding margin: auto to .todo
.todo {
background: #fff;
min-width: 500px;
width: 80%;
padding: 10px;
border-radius: 10px;
position: relative;
margin: auto;
}
Remove you overflow:auto; from wrapper and set it to todo with max-height: 100%;
(wait I saw a problem created on your button then because it is loosing its position please use #AdamAzad answer)
I have a problem reading out the correct height of a DIV with jQuery in Safari. I am using jQuery("#x").height() to read out the height of the element. In the real situation, I use the result later on in the page. It works well in Chrome, Firefox and IE, but not in Safari.
Here is some code that I have extracted from my page that demonstrates the problem:
The CSS:
#x {
position: absolute;
top: 0px;
margin-top: 80px;
right: 54%;
width: 40vw;
height: auto;
max-width: 330px;
padding: 10px 3.1vw 16px;
background: #ddd;
}
.y {
position: relative;
width: 100%;
max-width: 330px;
height: auto;
max-height: 330px;
}
.y img {
width: 100%;
height: auto;
}
(some parameters seem superfluous or strange, but I need them in my context and it doesn't change the problem if I leave them out)
HTML:
<div id="x">
<h2>Header</h2>
<div class="y">
<img src="https://placehold.it/330" alt="my image">
</div>
<p class="z"><span>Some text</span><br>Some more text...</p>
</div>
Now, with this jQuery code I am getting different results depending on the browser:
console.log(jQuery("#x").height());
I put all this into a codepen: http://codepen.io/anon/pen/MyELJV?editors=1111
If you load it in Firefox, the console output is 469. If you load it in Safari, it's 154. (addition: in both Chrome/MacOS and in IE11/Win7 the value is 466). Some small part of the difference is due to different default styles, but the main problem is that Safari doesn't take the image into account when getting the height.
If tried different things (that didn't solve the problem):
I tried innerHeight(), outerHeight() and outerHeight(true) instead of height() - no basic difference (slightly different values, but still the problem in Safari).
I added width=330 heigth=330 as attributes to the img tag, it works in the codepen, but not in my real situation (with another image). Apart from that, the whole thing is responsive, so I'd like to omit these attributes anyway.
By the way: The original images are all 330x330px (i.e. all have aspect ratio 1:1), but they are scaled down on smaller screens.
I'd be very grateful for a solution...
I changed your css so that safari doesn't change height of image.
#x {
position: absolute;
top: 0px;
margin-top: 80px;
right: 54%;
width: auto;
height: auto;
/* max-width: 330px; */
padding: 10px 43px 16px;
background: #ddd;
}
.y {
position: relative;
width: 100%;
max-width: 330px;
height: auto;
max-height: 330px;
}
.y img {
width: auto;
height: auto;
}
Also use load function to fetch exact height of #x.
$(window).load(function(){
console.log($("#x").height());
});
You can refer the changed code here.
I fought a lot with this issue. Safari have a lot of troubles getting the height of an element but I found a javascript method that return the correct height of a specific element.
Here I give you the link and the support confirmation. Actually I used that in a project where I was needing to control an animation depending of an element height.
I hope that it could help someone in my same situation.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Use the getBoundingClientRect and access to the height attribute like this:
element.getBoundingClientRect().height
I'm getting nowhere with this. I have an element, which is using a :before pseudo selector.
CSS is like this:
.initHandler:before {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
height: 110%;
z-index: 999999;
background-color: white; /*background:white url(../images/ajax-loader.gif) no-repeat center center;*/
content: "initializing...";
text-align: center;
font-color: #ccc;
line-height: 150px;
vertical-align: bottom;
}
This gives me a white background for my app, which is loading "behind the curtain". On iOS I'm using a startup image, which I'm setting in the page head before jquery and jquerymobile are loaded.
I now want to change the background of my initHaendler:before element to the determined iOS splashscreen.
However I need to this in pure javascript and I have no idea how to select a class/pseudoelement to set a css value.
Can someone help out?
Thanks!
Setting CSS pseudo-class rules from JavaScript seems to suggest that you can't and offers a workaround by appending a stylesheet to the document. I'm unsure if it'd work on iOS but it's worth a shot
Take a look at my website: http://homegym.sg/index.php/weight-tree-rack.html
If you mouseover the "more view" words under the product image, an additional images box will appear. Normally it's appearing normally in the center. However when i make my window size smaller, the position of the box will change.
I am using slideviewerpro script and i believe it is the one positioning the box but i am not able to tackle the problem. Here is the source of the script: http://homegym.sg/skin/frontend/default/electronics01-black/js/jquery.slideViewerPro.1.0.js
I believe the additional image box is in div#thumbSlider, have did some try and error modification of the js file but failed to solve the problem.
Ok. First of all, your div with width:660px; in product-img-box needs to have position:relative; added to it. Then you need to change the following rule
.product-view .product-img-box #ui0 {
position: absolute;
top: 600px;
left: 580px;
height: 60px;
}
to
.product-view .product-img-box #ui0 {
position: absolute;
height: 60px;
left: 50%;
margin-left: -200px;
margin-top: 15px;
}
widgets.css:589
And then just tweak from there. :)
I have div that I display dynamically when certain conditions arise.
When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)
I don;t quite get how they do it. I have everything else working in my own custom code except that piece.
Can anyone help me learn how?
Place a div over the content and set an opacity. I use this in one of my sites.
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
div#error_wrapper {
z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
If you create a layer that is the full width & height of your page and give it a higher z index than your whole page, you can create this effect. Then put your appearing div over it.
Just use global div of the size of the page to cover any other content:
http://jsfiddle.net/CHkNd/1/
Here is an example that you can play around with.
http://jsfiddle.net/r77K8/1/
Hope this helps.
Bob