I have a problem, before adding the JS, just with the HTML and CSS, the two images overlapped well but since I added this function to my code, the concerned image (icon-cart-white) is no longer arranged in the same position and I do not know what to change so that it returns to normal, if you know how to fix this problem I would be very grateful. Thank you
This is before i add the JS
This is after i add the JS
HTML (before the JS) :
<img class="calebasse-icon-cart-white" src="calebasse-white" alt ="white-icon-cart">
<img class="calebasse-icon-cart-black" src="calebasse-black" alt ="black-icon-cart">
HTML (with the JS) :
<iconcart id="iconcart">
<img class="calebasse-icon-cart-white" src="calebasse-white" alt ="white-icon-cart">
</iconcart>
<img class="calebasse-icon-cart-black" src="calebasse-black" alt ="black-icon-cart">
CSS :
.calebasse-icon-cart-white {
position: absolute;
width: 75%;
height: 75%;
z-index: 2;
}
.calebasse-icon-cart-black {
position: absolute;
width: 75%;
height: 75%;
z-index: 1;
}
JS :
let iconcart = document.getElementById('iconcart');
document.addEventListener('scroll', function() {
let scrollPosition = window.pageYOffset;
if (scrollPosition <= 50) {
iconcart.style.opacity = 1 - scrollPosition / 50;
} else {
iconcart.style.opacity = 0;
}
});
I tried to change the position: absolute; to position: relative; to solve the problem but it wasn't better, i thought the problem was the CSS but in fact in not really sure, it can also be the JS.
Solved.
Instead of creating tag i just put the id in the tag and it worked, I don't really know why but it's fine for me. Thank you Pete for helping me with the Minimal, reproducible example article.
Related
here I have a big problem.
I try to cover a div by an image, so that it is disabled, except that I can not adapt to the size of the window, I managed to produce a code, here is the result: https://i.stack.imgur.com/tMY53.png
and sometimes it gives this bug: https://i.imgur.com/Cwck9Ol.png in both cases, the image is not centered from the top, I tried full value (all that between 20 & 30) but it does not help ..
Here is my code:
var width=$('.soon').width();
var height=$('.soon').height();
$('.soonIMG').css('width', width);
$('.soonIMG').css('height', height);
$('.soonIMG').css('top', -height-20.5);
$( window ).resize(function() {
var width=$('.soon').width();
var height=$('.soon').height();
$('.soonIMG').css('width', width);
$('.soonIMG').css('height', height);
$('.soonIMG').css('top', -height-20.5);
});
How to solve the problem? Thank you all!
As per your description, I understood like you want to block a specific div with some kind of image. So here I've given some CSS with this you can achieve that.
CSS
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 999;
top: 0;
left: 0;
position: absolute;
}
And place the following HTML in the div which you want to block with image.
<div class="overlay">
<!-- Here you can add HTML for the image/content which you want to show on that div and write CSS for that as well -->
</div>
Hope this helps for you, and let me know if any further changes/suggestions needed for this.
So I am writing a custom parallaxing thing for a website I am working on.
It's very simple:
$('.bl-content').scroll(function(){
$('.prlx-image img').each(function(){
if($(this).parents('div.prlx-image').offset().top < $('.page-type--sfs .bl-content').height()){
$(this).css('bottom', $('.page-type--sfs .bl-content').scrollTop() * -.3);
}
});
});
It basically checks to see if the image is on the page and only then starts pulling the image up slightly faster slower than the page scrolls. The problem here is that the value the image is being pulled by is the same for each image. So it works fine for any images already on the page when it loads but anything further down has already "parallaxed" out of its container by the time it gets into view.
The images are just absolutely positioned within a container div.
I need to start scrollTop from zero when the image gets scrolled into view...
UPDATE:
I have been playing around with this and think I am on to something:
var offset = []
$('.prlx-image').each(function(i){
offset[i] = $(this).offset().top;
});
$('.bl-content').scroll(function(){
$('.prlx-image img').each(function(i){
if($(this).parents('div.prlx-image').offset().top < $('.page-type--sfs .bl-content').outerHeight()){
$(this).css('bottom', ($('.page-type--sfs .bl-content').scrollTop() * -.3) - offset[i]);
}
});
});
So now if I subtract the value of i from the value of scrollTop() theoretically that should work....but for some reason it is not working :(
If it helps the html each image is contained in looks like this:
<div class="prlx-image">
<img src="/assets/uploads/menncars.jpg" class="img-responsive">
</div>
And the CSS:
prlx-image{
height: 350px;
margin: 30px 0;
overflow: hidden;
position: relative;
}
.prlx-image img{
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
I got my page working how I wanted it (based on the previous question I asked). However, when I display the timeline (default is display:none) it creates a large gap of empty space beneath it. How can I remove this empty space? I just want the timeline to replace the image when it is clicked and vice-versa.
Here is my code pen
I don't know what code to include here.
You are using position:relative and giving css top value. That is causing this issue. I have done some change in css with position and top values. That works as you require.
#timeline{
position:absolute;
background-color:beige;
/*top:-829px;*/
top:210px;
width: 755px;
height: 827px;
margin-left: 180px;
}
Hope this resolves your issue.
change the css,
#main-image-div{
position: relative;
margin: 0 auto;
width: 750px;
height: 400px;
}
#main-image-div img{
max-width: 100%;
}
#timeline{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Hope this will solve the issue.
I created a nicer toggle effect and i think that's what you wanted.
http://codepen.io/anon/pen/dvdLpY
var img = $('img');
var list = $('.list');
list.hide();
img.click(function(){
$(this).fadeToggle(function(){
list.fadeToggle();
});
});
list.click(function(){
$(this).fadeToggle(function(){
img.fadeToggle();
});
});
I have two images...
function leftMove(el) {
if (el.className == "la") {
el.className = "la1";
getElementById(ra).className = "ra1";
} else {
el.className = "la";
getElementById(ra1).className = "ra";
}
}
.la {
position: absolute;
bottom: 370px;
opacity: .5;
}
.ra {
position: absolute;
bottom: 370px;
left: 1637px;
opacity: .5;
}
.la1 {
position: absolute;
bottom: 370px;
left: 500px;
opacity: 1;
}
.ra1 {
position: absolute;
bottom: 370px;
left: 1137px;
opacity: 1;
}
<img src="img.png" width="290" height="228" id="la" class="la" onclick="leftMove(this)">
<img src="img.png" width="290" height="228" id="ra" class="ra" onclick="rightMove(this)">
...that I am trying to modify. Specifically, I am trying to change the class of both images when either image is clicked. An example of the javascript I am using is:
The end goal would be to have both images reference new CSS, shown here:
If I do it correctly, both images should move and change opacity. For some reason, only the image with the "la"/"la1" class moves and changes opacity, while the "ra"/"ra1" image does nothing. I'm pretty sure this is because my javascript is broken, but I don't know why. Any advice would be greatly appreciated.
This is the first code I've written, so please be gentle if I'm being obtuse.
Thanks for taking the time. :)
You need to pass a string to getElementById and call the function on document:
document.getElementById("ra").className = "ra1";
...
document.getElementById("ra1").className = "ra";
I have been trying to scale an image in javascript so it is 15% of the screen width. The problem is now that javascript automaticcaly scales from the top down and i want to scale from bottom to top. Thank you in advance!
ps: jquery library is included.
html:
<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
js:
document.getElementById("image").width=window.innerWidth * 0.15;
First, you do not need jQuery, nor any JavaScript at all to get this to work as you would like. It can be done in pure CSS.
Second, this is not an issue with the way images scale, but an issue with positioning the image after it has been scaled.
Please see my jsfiddle showing how to accomplish this with pure CSS and position how you would like.
HTML:
<div id='imagewrapper'>
<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
CSS:
#image {
width: 15vw;
position: absolute;
bottom: 0;
right: 0;
}
#imagewrapper {
position: relative;
width: 768px;
height: 576px;
}