spinner reloader image seems behind the overlay - javascript

I have wrote a code stuff to show a spinner reloader image with overlay. The code is working fine but the problem is that the image seems behind the overlay and is not in the real color also the Loading... text is not coming with the reload image.
My code is as given below
Can anyone please tell me some solution for this
Working Demo
html
<div ng-app='myApp' ng-controller="Controller">
<div id="darkLayer" class="loader ng-hide" ng-show="loader">Loading...</div>
<button ng-click="show()">Show Progress</button>
</div>
script
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.loader = false;
$scope.show = function () {
$scope.loader = true;
};
});
css
.loader {
background-color: #FAFAFA;
filter: alpha(opacity=50);
/* IE */
opacity: 0.5;
/* Safari, Opera */
-moz-opacity: 0.50;
/* FireFox */
z-index: 1000;
height: 100%;
width: 110%;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://i.stack.imgur.com/K8MeK.gif);
position: absolute;
top: 0px;
left: -13px;
}

The loading text is there (top left corner), you just didn't position it to center.
The image is not behind the overlay, but it's opacity is set to 50%, thus the change in color.
For example, here it is without the overlay, the gif is still transparent.
If you want the gif to show with full opacity (and the text also) but keep a transparent overlay, you can use RGBA background-color, like so (live demo):
background-color: rgba(250, 250, 250, 0.5);

I've modified the fiddle you've posted. Please take a look. You have to have an alpha channel in your background color instead of opacity on the entire loader.
The reason why your loader text is not in the right position is that you haven't positioned it to be in the specific position you want! I've fixed this in the below fiddle. Please see how it's done and try to adopt it to your requirement.
Working demo

Related

How to stop a CSS animation when it meets the screen edge?

I created this demo:
http://cristiantraina.altervista.org/boxfall/
When you click, it creates a red falling box.
The problem is that using only css there are no ways to detect the size of the screen, in fact in my demo I specify that the box has to fall for 1000px, regardless of the actual height of the screen.
This is the code of the keyframe:
#include keyframes("fall"){
to{
top: 1000px;
}
}
I can't use bottom:0px; because I wouldn't know from where to start the fall, and I didn't solve my main problem.
This is the FallBox.js script:
function FallBox(x, side, parent){
this.x = x;
this.parent = parent || $("body");
this.side = side || Math.random()*200;
this.createBox();
this.fall();
}
FallBox.prototype.createBox = function(){
box = document.createElement('div');
$box = $(box); // I hate brackets
$box.addClass("box");
$box.css({
width: this.side+"px",
height: this.side+"px",
left: this.x+"px",
top: "-"+(this.side+5)+"px"
});
this.box = $box;
}
FallBox.prototype.fall = function(){
this.parent.append(this.box);
this.box.addClass("fall");
}
I know that I could use overflow:hidden; in the parent div, but I don't think that this is the ideal solution. First because a user can have got a screen with a superior height, then because I want to the box stops when it meets the edge, as the border was ground and it shouldn't pass through.
Another solution that I found on the web, it's to use the CSSOM API, but not even mozilla developers are sure of the compatibilty of these.
So, how can I stop an animation when it meets the screen edge, since javascript fails to inject properties?
Thank you.
If you're looking for a css-only solution, you could use the css calc feature (http://caniuse.com/#feat=calc) in combination with vh (http://caniuse.com/#search=vh).
document.querySelector(".box").addEventListener("click", function() {
this.classList.toggle("is-dropped");
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background: red;
transition: top 2s;
}
.box.is-dropped {
top: calc(100vh - 100px);
}
<div class="box"></div>
You coul use the translatey() CSS transform function to shift each div up by 100% of its own height. That way you would just need 2 rules to change the value of the top position without having to worry about height in each case.
(function(d,M){
var div=d.createElement("div"),
wait=0,size;
d.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(1);
div.classList.remove("go");// necessary so that newly created divs don't just get added to the bottom of the page
size=M.max(M.floor(M.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=M.max(M.floor(M.random()*this.offsetWidth)-size,0)+"px";
this.appendChild(div);
setTimeout(function(){
div.classList.add("go");// adding this class starts the animation.
wait=0;
},5);
}
},0);
})(document,Math);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear;
position:absolute;
top:0;
transform:translatey(-100%);
}
div.go{
top:100%;
}
ORIGINAL SOLUTION
As the height of the box is being set dynamically in your JavaScript, your CSS isn't going to know the height of each box but that doesn't stop you using the CSS calc() function to set the top position you want to animate each to, much like you currently do to set its starting top position. Here's a quick, rough example, with an alternative solution in the comments that doesn't use calc(), if you'd prefer.
var div=document.createElement("div"),
wait=0,size;
document.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(0);
size=Math.max(Math.floor(Math.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=Math.max(Math.floor(Math.random()*this.offsetWidth)-size,0)+"px";
div.style.top="-"+size+"px";
this.appendChild(div);
setTimeout(function(){
div.style.top="calc(100% - "+size+"px)"; /* This is the important bit */
// div.style.top=document.body.offsetHeight-size+"px"; /* Alternative solution, without using calc() */
wait=0;
},5);
}
},0);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear; /* Using a transition instead of an animation */
position:absolute;
}

Can you fix a div and make it change opacity, size and position as you scroll with CSS3

I'm not even sure how to search this question. But effectively I'm trying to figure out how this website is achieving this fixed opacity/size changing effect on their table: http://sqlzoo.net/wiki/SELECT_within_SELECT_Tutorial . If you scroll down you'll see the effect on the table. When you hover over it it pops out having the data more visible.
The only thing I can think of is using a fixed div that when scrolled past a certain point triggers a jquery UI event that shrinks while decreasing opacity and then an on hover event that reverses this effect.
Achieving this animation in the way I described above seems inefficient and I'm not sure if more (or all) can be done with CSS3. So basically can you achieve the effect shown on the page provided completely or almost completely in CSS3.
Also i looked at the source of the page and couldn't fish it out of the css and scripts they include.
Here's a fiddle of what I have so far. Haven't started on scrolling yet:
HTML
<div id="stuff">Blahblah</div>
CSS
div {
width:250px;
height:250px;
border:2px solid #a1a1a1;
}
JavaScript
$( "#stuff" ).click(function() {
$( "#stuff" ).animate({
width: "20%",
height:"20px",
opacity: 0.4
}, 1500 );
});
http://jsfiddle.net/thed0ctor/1kx5jg1e/
You could do this easily with a combination of CSS3 transform and a bit of Javascript / jQuery:
Demo Fiddle: http://jsfiddle.net/abhitalks/hcwyth8n/2/
Relevant CSS:
#hanger {
width: 200px; height: 200px;
background-color: #00f;
position: fixed; /* Position fixed important */
top: 10px; right: 10px;
opacity: 1;
transition: 0.5s all; /* Animate transitions */
}
#hanger.dim { /* Style to make it appear dimmed */
transform: scale(.75); /* Make it smaller */
opacity: 0.5; /* Make it dimmer */
}
#hanger.dim:hover { /* To change back on hover only when it is dimmed */
transform: scale(1); /* Back to original size */
opacity: 1; /* Back to original opacity */
}
Relevant jQuery Code:
$(window).on("scroll", function() { /* When window scrolls, */
if ($(window).scrollTop() > 50) { /* Check if it scrolls more than 50 pixels */
$("#hanger").addClass("dim"); /* Apply class dim */
} else {
$("#hanger").removeClass("dim"); /* Otherwise remove class dim */
}
});
Hope that helps.
.
Pseudo code only:
window.scroll(function(){
if (window.scrolltop > selectedElement.offset().top){
selectedElement.animate({
transform: scale(.75),
opacity: .5
position: fixed
});
}else{
selectElement.animate({
transform: scale(.75),
opacity: 1
position: static
});
}
});
The links provided in the he pseudo code should point you in the right direction.

Change gradient background-color, slow animation

I'm trying to change the background color on a section.
<section id="welcome" class="gradientBlue">
<div class="mainTitle">
<h1>Sdesigns</h1>
<h2>Taking web design to the next level</h2>
<div class="centerArrow">
<i id="0" class="icon-caret-down arrow arrowDown"></i>
</div>
</div>
</section>
The is how it currently looks:
The Idea is when I press the arrow the background changes to another gradient color. I already set this class up. So It should slowly fade-in class "gradientGreen".
.gradientGreen{
background-color:#39b54a;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#8dc63f), to(#205075));/* Safari 4-5, Chrome 1-9 */
background: -webkit-radial-gradient(circle, #8dc63f, #39b54a);/* Safari 5.1+, Chrome 10+ */
background: -moz-radial-gradient(circle, #8dc63f, #39b54a);/* Firefox 3.6+ */
background: -ms-radial-gradient(circle, #8dc63f, #39b54a);/* IE 10 */
}
I already tried this and many more in Jquery but it always changes instant. I hope anyone can help me.
$('.arrowDown').click(function(e) {
$("#welcome").addClass("gradientGreen");
}
See DEMO.
You can detach the background from the element by creating two separate <div>s with the gradients that are absolutely positioned beneath the target element. Then you can animate with the opacity to switch between these two gradients.
<section id="welcome">
<div class="mainTitle"><!-- your text --></div>
<div id="back1" class="gradientBlue"></div>
<div id="back2" class="gradientGreen"></div>
</section>
#welcome {
position: relative;
}
#back1 {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
}
#back2 {
position: absolute;
width: 100%;
height: 100%;
z-index: -2;
top: 0;
left: 0;
}
Then change the opacity of the initial background.
$('.arrowDown').click(function (e) {
$("#back1").animate({opacity: 0}, 1000);
});
You might want to take a look at the transition property. It's all CSS3, no jquery needed !
Edit : my bad, as Antony said you can't apply transitions to background gradients.

How to get this kind of web page effect

The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.
Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.
You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal
This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.
It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;
You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals

How can I create Javascript Buttons with Themes?

I have a button which is attached to a js action. It currently uses <a onMouseUp="..."><img.... The problem is that I want the buttons to be able to change the images depending on the theme (i.e. css file). Since the image is specified in the html itself, this doesnt work. Does anyone know how to implement this?
Instead of having the image in the HTML, you should assign it as a background on the anchor element, as defined in a stylesheet.
a.example {
display:inline-block;
height:20px;
width:20px;
background-image:url(/images/buttonExample.png)
}
That's an easy one (assumed I understood your question):
a) Create your images for the states you want:
a.1 - standard display;
a.2 - mouse over; (hover)
a.3 - mouse down; (active)
b) Define the many different buttons in your css:
b.1 - themeCities
.tcButton { width:100px; height:24px;
background-image: transparent url(theurl) no-repeat top left; }
.tcButton:hover {
background-image: transparent url(thehoverurl) no-repeat top lef; }
.tcButton:active {
background-image: transparent url(theactiveurl) no-repeat top left; }
b.2 - themeNature
.tnButton { width:100px; height:24px;
background-image: transparent url(theurl) no-repeat top left; }
.tnButton:hover {
background-image: transparent url(thehoverurl) no-repeat top lef; }
.tnButton:active {
background-image: transparent url(theactiveurl) no-repeat top left; }
and so fourth.
You should consider sprites otherwise you are going to end up with an unmanageable amount of images. Another consideration is on the size of the buttons: width and height.
I can help on sprites, ... if needed. There are free websites that manage that for you. I am a control freak and use Adobe Fireworks for all my sprites needs as far as creating the sprite images.
Then, still with the images or sprites in mind, you might want to use a css-ninja suggestion on how to accelerate the images pre-loading:
.body:after {
content: url(image-url-1) url(image-url-2) url(image-url-n);
display:none;
}
Trick on creating sprites:
a) make sure background is transparent and save them either as gif or png32;
b) make sure they are the same sizes for the three states otherwise you are going to have jittery displays;
c) once all the images are done, assemble them in a large transparent background image;
d) space them in that new large transparent image; aligning them top and left;
e) give some space between each image. Some suggest 50 pixels between images side-by-side and top-down. I don't follow that. I just give some space between them.
f) the most difficult task in hard coding sprites: write down it's coordinates in the large transparent image: top, left, width, height.
To use a sprite image you go like this (as one of many variations):
.msSprites { background: transparent url(url-of-the-sprite-image.gif) no-repeat;
top left; } /* msSprites = my site sprites */
.tcButton { background-position: 0 0; width:100px; height: 24px; }
.tcButtonHover { background-position: 0 -150px; width:100px; height: 24px; }
/* margin-left at 0px; margin-top:150px ... in the large transparent image */
.tcButtonActive { background-positon: 0 -300px; width:100px; height: 24px; }
/* margin-left at 0px; margin-top:150px ... in the large transparent image */
.tnButton { background-position: -150px 0; width:100px; height:24px; }
/* margin-left at 150px; margin-top at 0 px .. in the large transparent image */
... and so fourth
Application:
Regular images:
<button class='tcButton' onClick ....>This is fun</button>
Sprites:
<button class='msSprites tcButton' onClick ...>This is even more fun</button>
The sprite, in this case, is formed of the big transparent image and the location of the button you want to use.
I hope I have really confused the heck out of you .... or opened your thinking cap wide open.
Good luck!
If you are using jQuery you could change the image tags source attribute.
<img src="oldImageSrc.jpg" />
Then in the javascript method:
function changeButton() {
$("img", this).attr("src", "newImageSrc.jpg");
}

Categories