I am adding a dark shadow (as a before element) to a div on touch/click And removing it after the effect is done.
First click seems to be fine but on subsequent clicks, the effects gets darker and darker (until it gets to complete black).
It is as if there are multiple layers of before's
The only solution I have found so far it to setup the div's display property as "display: block" but this required me to do some layout rework. Any other suggestions ?
Here is the class I am using to set the highlight
.myDivCls:before
{
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: .3;
background-color: rgb(0,0,0);
}
And her is the one for removing it:
.noEffectCls:before {
content: '';
background-color: transparent;
background-image: none;
position: static;
border-radius: 0;
background-size: auto auto;
background-repeat: repeat;
background-position: 0% 0%;
-webkit-background-size: auto auto;
}
Thanks!
Have you tried using a the background shorthand prooperty on the .noEffectCls:before element and setting it to transparent?
Related
I have a div with a background image. The div itself contains nothing except this code:
<div class="container" style="background-image: url(URL);"></div>
and the CSS code:
.container {
width: 100%;
overflow: hidden;
margin-bottom: 0px;
background-position-x: 50%;
background-position-y: 50%;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: local;
background-size: cover;
display: block;
position: relative;
background-color: #FFFFFF;
padding-top: 50%;
}
When trying to detect the height with:
var container_height = $('.container').height();
it returns 0 even though in reality it's approximately 200px in height.
I am assuming this is because the container has no content, only a background image with top padding. How do I fix it so I an get the actual height?
var container_height = $('.container').outerHeight();
Consider using outerHeight() instead :)
I have 2 background images and i want to position image1 over image2 in such a way that first is centered on the second. (image1 is caution symbol and image2 is the blue background). The end result should look like the image below.
But I am getting my image like this.
My code is below:
CSS
.imgPin {
background-repeat: no-repeat,repeat;
bottom: -1px;
left: -1px;
height: 39px;
width: 31px;
background-size: 100% 100%;
display: none;
position: absolute;
cursor: pointer;
opacity: 0.75;
z-index: 11;
&.active {
opacity: 1.0;
z-index: 12;
}
}
JavaScript
var divElem = document.createElement("div");
divElem .setAttribute( 'style', 'background: url( "caution.png" ), url("background.png")' );
divElem .className = "imgPin";
Is there a way to set the background size or the repeat in such a way that this could be achieved? Any help would be invaluable.
Thanks!
UPDATE:
My final css looks like this and its working:
.imgPin{
background-repeat: no-repeat;
background-position:60% 30%,center;
bottom: -1px;
left: -1px;
height: 39px;
width: 31px;
background-size:auto,100% 100%;
display: none;
position: absolute;
cursor: pointer;
opacity: 0.75;
z-index: 11;
&.active {
opacity: 1.0;
z-index: 12;
}
}
You need to correct your JS, you are specifying background which will override all the background properties specfied in the CSS. So instead use background-image to keep the CSS properties:
var divElem = document.createElement("div");
divElem .setAttribute( 'style', 'background-image: url( "caution.png" ), url("background.png")' );
divElem .className = "imgPin";
Then you may need to adjust the CSS if you still have alignment issue:
Use background-size:cover or background-size:contain to avoid the icon to stretch or simply don't specify any size to keep the original ones.
Add background-position:center in order to center both icons. You can also specify values in order to control position like this background-position: 5px 10px,10px 5px (works also with % values).
Then specify background-repeat:no-repeat (only once and it will affect both images)
The second background repeats, so change this property:
background-repeat: no-repeat,repeat;
to
background-repeat: no-repeat,no-repeat;
(and fine-tune the size and/or position)
Your second background image has repeating property.
It should be updated as follows.
background-repeat: no-repeat, no-repeat;
I am a bit new to coding. I have a div with a background image. I want to be able to change the image from its blurred version to a clearer version as I scroll down. My HTML code is like this:
<div class="intro">
<div class="blur" style="background-image: url("blurimage.png");"></div>
<div class="clear" style="opacity: 0.00666667; background-image: url("image.png");"></div>
</div>
My CSS code is like this:
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.blur{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
background-color: #222;
}
.clear{
background-size: cover;}
I have tried using many javascript functions but no avail. Please guide me as to how can I do this by using a Javascript function.
Thanks!
Using JavaScript you could try
document.addEventListener("scroll", function(event) {
// this code is executed each time the user scrolls
var scrollPosition = window.pageYOffset;
// scrollPosition is 0 at the top of the page
// it contains how many pixels have been scrolled down
});
Hope that helps.
Add this to your JS file (I assume you have jQuery included as well):
jQuery(document).ready(function($) {
scrollPosition = $(document).scrollTop();
$('body').scroll(function() {
$('.intro .clear').animate({
height: scrollPosition,
}, 300);
});
});
Also add this to .clear:
.clear {
position: absolute;
top: 0;
left: 0;
height: 0;
background-size: cover;
}
Also keep in mind that this code will work if you have your image on top of the page. Otherwise feel free to change $(document).scrollTop() with the actual selector of the parent element.
I would also recommend renaming the clear class with some other name, since if you decide to use CSS framework or plugin at later point, that class name might be reserved for clearfix styles.
see here jsfiddle
made a simple example with changing the background-color . this is for example purposes only because i can't use your images
also...you need only 1 div inside the intro and toggle classes on that div from .blur to .clear and vice-versa and use CSS to style those classes.
the idea is that you have only one div w to which you change the background depending on the scroll
HTML :
<div class="intro">
<div class="blur"></div>
</div>
CSS :
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.intro div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
}
.blur{
background-image: url("blurimage.png");
background-color: red;
}
.clearimg {
background-size: cover;
background-color:blue
background-image: url("image.png");
}
JQ :
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$(".intro div").addClass("clearimg")
$(".intro div").removeClass("blur")
}else{
$(".intro div").addClass("blur")
$(".intro div").removeClass("clearimg")
}
});
Hi guys I was trying to swap the background of two images down the footer section of my website using skrollr.js (https://github.com/Prinzhorn/skrollr). For some reason it won't scroll at all. I am trying to create a parallax site that has fixed position on the part below.
See image: http://prntscr.com/6yrckx
Here's the Markup of that part:
<div id="starynight"
data-bottom-top="opacity: 1; background: !url(images/sunny.jpg); background-size: cover;"
data--40-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--50-top="opacity: 0; background: !url(images/night.jpg); background-size: cover;"
data--60-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--70-top="opacity: 1; background: !url(images/night.jpg); background-size: cover;"
>
</div>
While here's the CSS:
#starynight{
background: url('../images/sunny.jpg') no-repeat center;
width: 100%;
height: 307px;
background-size: cover;
}
#road{
background: url('../images/road.jpg') no-repeat center;
width: 100%;
height: 145px;
background-size:cover;
}
#car{
background: url('../images/car.png') no-repeat center;
width: 325px;
height: 125px;
display: block;
position: absolute;
z-index: 9999;
left: 950px;
top: 2100px;
}
My issue here is that when I scroll this part of my website it should swap the images of the sunny.jpg and night.jpg while the car is moving from right to left and also this background image must be fixed in position. For some reason my codes won't just work. Any idea what went wrong?
See my website here: http://goo.gl/aNOCiJ
Animating backgrounds is not like animating positions or "number" data. You can't just transform one background into another by fading them (actually Firefox somehow can animate the transition, but lets not depend on that).
A solution to your problem is having 2 diferent divs for, 1 for your night scene, and other for your sunny sky just in the same position, one over the other and with the sunny one with a higher z-index.
Then what you need to animate on scroll is the opacity of the sunny sky, what makes the night scene appear.
Also I found that your level of scroll isn't enough to fade the opacity of the sunny sky completly, it ends in 0.603448.
Hope it helps, please tell me if this worked.
As stated already, background images can't be animated, only background colors. So you'll have to lay both images on top of each other and fade the top layer in like this -
*Untested
#starynight-wrap {
position: relative;
width: 100%; height: 307px;
}
#starynight-day {
position: relative;
width: 100%; height: 100%;
background: url('images/sunny.jpg');
background-size: cover;
}
#starynight-night {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: url('images/night.jpg');
background-size: cover;
}
<div id="starynight-wrap">
<div id="starynight-day"></div>
<div id="starynight-night"
data-bottom-top="opacity: 0"
data--50-top="opacity: 0;"
data--60-top="opacity: 0.5;"
data--70-top="opacity: 1;"
>
</div>
</div>
I'm trying to use jQuery's toggleClass() to click on a div and have that div expand to a height and width of 100% (in other words, full screen). I thought this would be easy, but for some reason, I'm struggling. Must be tired this morning... The following code toggles to 100% height and width, but it doesn't toggle back to the original size.
HTML
<div class="s3div1" id="s3div1"></div>
JS
$("div#s3div1").dblclick(function (event) {
$(".s3div1").toggleClass("overlay").toggleClass("s3div1");
});
CSS
.overlay {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
z-index:1000;
}
.s3div1 {
position: absolute;
z-index: 10;
top: 0px;
right: 25px;
height: 550px;
width: 225px;
border: 5px solid white;
border-radius: 25px;
float: right;
padding-right: 8%;
}
#s3div1 {
background-image: url('assets/volcano3.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Thanks in advance!
You are referencing by class name instead of the object to which the double-click event refers.
Instead use the value of $(this) which is the target object of the double-click (wrapped in a JQuery object for easier use):
$("div#s3div1").dblclick(function (event) {
$(this).toggleClass("overlay").toggleClass("s3div1");
});
I think you mean:
$("#s3div1").toggleClass("overlay").toggleClass("s3div1");
^-- # instead of .
Once you toggle the class .s3div1 wont match anymore so the 2nd time you dblclick nothing happens.
Go talk a walk, drink some coffee, eat an orange.