I have a asp.net solution that uses ajax. One of the features using update progress panel is that the contents are only revealed when an ajax request is going on in the background.
So I want to basically show a black transparent background which stops the user from doing anything, and also display a box in the center of the screen that says please wait, and has a loading gif.
I was able to get the black background using this:
<asp:UpdateProgress ID="AjaxAnimation" runat="server">
<ProgressTemplate>
<center>
<%-- <asp:Image ID="loadingImage" runat="server" src="/_layouts/images/PDFLibrary/ajax-loader.gif"/> --%>
<div class="dim"></div>
</center>
</ProgressTemplate>
</asp:UpdateProgress>
Css
.dim
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:100 !important;
background-color:black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
But how can I have a box in the center of the screen?
Something as following?:
<div class="dim" runat="server">
<span class="msg">Please wait...</span>
</div>
.dim
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:100 !important;
background-color:black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
.dim .msg {
display:inline-block;
position: absolute;
width: 200px
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
You need to use position:absolute and negative margin.
position: absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
width:200px;
height:200px;
Please have a look my code here
Related
I have some images that I use CSS to make a darker background.
This makes the images darken on hover. It can be seen at rtsb.co.uk on the main images.
However when viewing the images, the background is shown slightly behind the images, seen as a grey stripe under each image. the images are 600px height, but for some reason, the code for 'outerLink' makes it 607px height and so the bar appears, this can be seen using Chrome dev tools when viewing the page.
.outerLink {
background-color: #e8e8e8;
display: block;
opacity: 1;
filter: alpha(opacity=100);
}
img.darkableImage {
opacity: 1;
filter: alpha(opacity=100);
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
I've tried looking at everything to find where this added 7px comes from but I can't find it anywhere.
Even if I change the name of the CSS to .outerLinktest, the tag above still seems to pick up a height of 19px from somewhere.
I cannot add a height CSS attribute to .outerLink as the page is dynamic for mobiles etc and the images resize due to this so won't always be 600px high.
Have you tried to put
display:flex;
instead of
display:block;
in outerLink?
.outerLink {
background-color: #e8e8e8;
display: flex;
opacity: 1;
filter: alpha(opacity=100);
}
I've tried it with the inspector and it works.
Snippet:
.outerLink {
background-color: #e8e8e8;
display: flex;
opacity: 1;
filter: alpha(opacity=100);
}
img.darkableImage {
opacity: 1;
filter: alpha(opacity=100);
display: block;
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
also make the image display:block;
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block; /*<----*/
}
or change outerlink background color into white maybe...
Use display:block; on img class.
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block;
}
Snippet:
.outerLink
{
background-color:#e8e8e8;
display:block;
opacity:1;
filter:alpha(opacity=100);
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block;
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
Check Fiddle
You may set position attributes to your classes :
.outerLink
{
background-color:#000;
display:block;
opacity:1;
filter:alpha(opacity=100);
position:absolute;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
position: relative;
top:0;
left:0;
}
I have a div and I want that on click an other div slides in. I want to achieve this with css3 :target.
Like you can see in the code snippet the :hover works. When hovered an animation start to fade some info in. When you click on the image I want that an other div fades in on the top by calling the same animations as used on hover.
Can somebody help with getting the :target working?
body{
margin: 0px;
}
.image{
position: relative;
width:300px;
height:auto;
}
.image img{
width:100%;
}
.download{
position: absolute;
top:0px;
left:0px;
height:80%;
width:100%;
background-color: gray;
display:none;
}
.info{
position: absolute;
bottom:0px;
left:0px;
height:20%;
width:100%;
background-color: green;
opacity: 0;
}
.info p{
padding: 5px;
margin: 0px;
}
.image:hover .info{
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera */
animation: show 0.5s;
opacity: 1;
}
.image:target .download{
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera */
animation: show 0.5s;
opacity: 1;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
/* Standard syntax */
#keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
<div class="image"><!-- I detect everything on this div-->
<img src="http://3.bp.blogspot.com/-gaBTIWFTWOo/UTeneLuwWyI/AAAAAAAABJE/E1GQBY4TJ8k/s1600/post-apocalypse-new-york.jpg">
<div class="download"><!-- this div should fade in on click (:target)-->
download
</div>
<div class="info"> <!-- this div should fade in on hover-->
<p>Image 1</p>
</div>
</div>
This can be achieved via jquery: http://jsfiddle.net/swm53ran/13/
$('.image').on('click', function(){
$(this).find('.download').fadeIn(500);
});
i know you want to achieve this with :target, but you can do both animations through jquery to keep consistent if you would like. just another option...
i think i got it the way you wanted with css:
added anchor tag surrounding image, added id #dl to download div...heres the fiddle http://jsfiddle.net/swm53ran/14/
:target {
display:block;
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera*/
animation: show 0.5s;
opacity: 1;
}
<div class="image"><!-- I detect everything on this div-->
<a href="#dl">
<img src="http://3.bp.blogspot.com/-gaBTIWFTWOo/UTeneLuwWyI/AAAAAAAABJE/E1GQBY4TJ8k/s1600/post-apocalypse-new-york.jpg"/>
<div class="download" id="dl"><!-- this div should fade in on click (:target)-->
download
</div>
<div class="info"> <!-- this div should fade in on hover-->
<p>Image 1</p>
</div>
</a>
</div>
I want to change, when I click on image, the hover image position. Now* the image hover enlarge on bottom, and I want with enlargement on top (see the image link).
I have added this code :
HTML:
<div class="image"></div>
CSS:
.image { background:url(image url); height:50px; width:50px; }
.image:hover { background:url( image url ); height:400px; width:400px; }
Image:
try this
.image:hover {
cursor: pointer;
height:400px;
width: 400px;
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */
}
it works ..
I am trying to hide a progress bar after a certain amount of seconds and show a div.
I have coded this jsFiddle but does not seem to be working.
jsFiddle
you can do this easly in css
.blue{
width: 200px;
background-color: blue;
height:30px;
left:40px;
top:30px;
padding:5px;
}
.blue>div{
background-color:red;
height:25px;
width:50px;
top:10px;
}
<div class="blue" ><div>20%</div></div>
You need browser prefixes:
#keyframes bubbly
{...}
#-moz-keyframes bubbly /* Firefox */
{...}
#-webkit-keyframes bubbly /* Safari and Chrome */
{...}mymove
#-o-keyframes bubbly /* Opera */
{...}
So it works in almost all browsers.
The z-index CSS property doesn't work on Internet Explorer 7, 8 and 9. How can I workaround this problem?
HTML:
<div>
<input type="text">
<span>label</span>
</div>
CSS:
body{background:#ddd;}
div{
position:relative;
width:250px;
height:30px;
line-height:30px;
background:#fff;
border:1px solid #666;
z-index:0;
}
input{
background:none;
border:0;
position:absolute;
top:0px;
left:0px;
width:242px;
height:22px;
padding:4px;
z-index:2;
*line-height:30px; /* ie7 needs this */
line-height /*\**/: 30px\9; /* ie8 needs this */
}
span{
position:absolute;
top:0px;
left:4px;
z-index:1;
}
input:focus + span{
filter: alpha(opacity=50);
-khtml-opacity: 0.50;
-moz-opacity: 0.50;
opacity: 0.50;
}
If you click on the label, the input doesn't focus
You can see what happens here: http://jsfiddle.net/YKFuZ/2/
I've updated your code a bit - http://jsfiddle.net/YKFuZ/6/
IE doesn't render z-index properly. So set your div's Position to absolute. And IE doesn't support the :focus pseudo-selector. I would stick to javascript whenever IE is concerned.
EDIT: The input's parent is set to relative whereas the input element itself is set to absolute. Z-index will not be properly rendered in such a case.