Develop Reference

How to detect image has overlap and show/hide upper image automatically when overlapping in javascript

I am working for a website. There is a fixed image in right side. Also there are images in body of webpage. When i scroll down the fixed image is overlap on body image. I want right side fixed image will hide automatically when both image is overlapping.
Please check above image. 22s text is upper image and light green is back image. so i want when 22s is overlapping over light green color. 22s image will hide automatically and show again when there is no overlapping.
below is css code and every image has id selector. so we can select both image by id in javascript. But how i can hide and show the upper image when overlapping.
.sec {
text-align: center;
font-size: 15px;
font-weight: 800;
margin-top: -13px;
padding: 20px;
background-color: #0e3d04;
color : white;
height: 60px;
width: 60px;
border-bottom-left-radius: 40px;
}

You could use z-index:-1 for the fixed image. It should not hide it but also won't overlap your other images.

I think I found just the thing you are looking for. You should be able to do it using javascipt.
function isObjOnObj(a,b){
var al = a.left;
var ar = a.left+a.width;
var bl = b.left;
var br = b.left+b.width;
var at = a.top;
var ab = a.top+a.height;
var bt = b.top;
var bb = b.top+b.height;
if(bl>ar || br<al){return false;}//overlap not possible
if(bt>ab || bb<at){return false;}//overlap not possible
if(bl>al && bl<ar){return true;}
if(br>al && br<ar){return true;}
if(bt>at && bt<ab){return true;}
if(bb>at && bb<ab){return true;}
return false;
}
a and b are the two images and if the function returns true you can hide the image you want and if it false you can unhide it.
You can check this function using the scroll event listener so that every time the user scroll it will check if the two images are overlapping or not. Please let me know if you need more help.
reference: reference link

Detects when an element cross any div of a certain class

I have a dark-colored menu that sometimes crosses over sections with the same dark background, so am trying to switch its class to change its colors everytime it crosses over dark colored sections.
$(window).scroll(function(){
var fixed = $("section.fixed-header");
var fixed_position = $("section.fixed-header").offset().top;
var fixed_height = $("section.fixed-header").height();
var toCross_position = $(".dark").offset().top;
var toCross_height = $(".dark").height();
if (fixed_position + fixed_height < toCross_position) {
fixed.removeClass('light-menu');
} else if (fixed_position > toCross_position + toCross_height) {
fixed.removeClass('light-menu');
} else {
fixed.addClass('light-menu');
}
});
This works fine when I only have one div with the dark class inside the same page. However, if there are several different divs with the dark class inside the same page, it will only work for the first div. How could I include all the other divs with the same dark class in here?

Instead of listening to scroll event you should have a look at Intersection Observer (IO).
This was designed to solve problems like yours. And it is much more performant than listening to scroll events and then calculating the position yourself.
Of course you can continue using just scroll events, the official Polyfill from W3C uses scroll events to emulate IO for older browsers. Listening for scroll event and calculating position is not performant, especially if there are multiple elements. So if you care about user experience I really recommend using IO. Just wanted to add this answer to show what the modern solution for such a problem would be.
I took my time to create an example based on IO, this should get you started.
Basically I defined two thresholds: One for 20 and one for 90%. If the element is 90% in the viewport then it's save to assume it will cover the header. So I set the class for the header to the element that is 90% in view.
Second threshold is for 20%, here we have to check if the element comes from the top or from the bottom into view. If it's visible 20% from the top then it will overlap with the header.
Adjust these values and adapt the logic as you see.
Edit: Edited it according to your comment, please note that you may see the effect better if you remove the console.log from my code so they don't clutter up your view.
I added one div where the header doesn't change (the green one)
const sections = document.querySelectorAll('.menu');
const config = {
rootMargin: '0px',
threshold: [.2, .9]
};
const observer = new IntersectionObserver(function (entries, self) {
entries.forEach(entry => {
console.log(entry); // log the IO entry for demo purposes
console.log(entry.target); // here you have the Element itself.
// you can test for className here for example
if (entry.isIntersecting) {
var headerEl = document.querySelector('header');
if (entry.intersectionRatio > 0.9) {
//intersection ratio bigger than 90%
//-> set header according to target
headerEl.className=entry.target.dataset.header;
} else {
//-> check if element is coming from top or from bottom into view
if (entry.target.getBoundingClientRect().top < 0 ) {
headerEl.className=entry.target.dataset.header;
}
}
}
});
}, config);
sections.forEach(section => {
observer.observe(section);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.g-100vh {
height: 100vh
}
header {
min-height: 50px;
position: fixed;
background-color: green;
width: 100%;
}
header.white-menu {
color: white;
background-color: black;
}
header.black-menu {
color: black;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<p>Header Content </p>
</header>
<div class="grid-30-span g-100vh menu" style="background-color:darkblue;" data-header="white-menu">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
data-src="/images/example_darkblue.jpg"
class="lazyload"
alt="<?php echo $title; ?>">
</div>
<div class="grid-30-span g-100vh no-menu" style="background-color:green;" data-header="black-menu">
<h1> Here no change happens</h1>
<p>it stays at whatever state it was before, depending on if you scrolled up or down </p>
</div>
<div class="grid-30-span g-100vh menu" style="background-color:lightgrey;" data-header="black-menu">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
data-src="/images/example_lightgrey.jpg"
class="lazyload"
alt="<?php echo $title; ?>">
</div>

The reason is that however the JQuery selector selects all elements with .dark classes, when you chain the .offset().top or .height() methods on it, it will only save the first one into the variable:
var toCross_position = $(".dark").offset().top;
var toCross_height = $(".dark").height();
You could map all positions and heights into arrays and then you should also make the
var toCross_position = $(".dark").offset().top;
var toCross_height = $(".dark").height();
// only the first div's pos and height:
console.log(toCross_height, toCross_position);
var positions = $('.dark').toArray().map(elem => $(elem).offset().top);
var heights = $('.dark').toArray().map(elem => $(elem).height());
console.log('all .dark positions:', positions);
console.log('all .dark heights:', heights);
.dark {
background-color: #222;
color: white;
margin-bottom: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dark">Dark</div>
<div class="dark">Dark</div>
<div class="dark">Dark</div>
<div class="dark">Dark</div>
check if your header crosses them by looping through those values.

Html5UP Highlights changes. How to change background behaviour?

I'm trying to make a couple of changes to the HTML5UP Highlights site. You can see from the preview here https://html5up.net/highlights that as you scroll down to the next section of the page the background image changes like this:
Then if you resize the window the original background image is displayed and the second image becomes included in the content like this:
I'm trying to work out how the background image changes in the first screen shot. I'm trying to always show the original background as in the second screenshot regardless of screensize and always include the sub images in the content. Basically I'm trying to emulate the second screenshot in all screen sizes.
I can see there are these sections in the CSS for different screen sizes:
#media screen and (max-width: 980px) {
.main .image.primary {
display: block;
margin: 0 0 4em 0;
}
}
So I've changed this for the Main version too and commented out display:none.
.main .image.primary {
/*display: none; */
display: block;
margin: 0 0 4em 0;
}
This seems to add the content images regardless of screenshot but I can't work out what changes the background image on screen resize?

1st part: remove the background transition
To disable the background transition effect, look in your assets/js/main.js file. You'll find a part title with the comment // Main sections. (line 156+). A little lower, You'll find the following:
// Create bg and append it to body.
$bg = $('<div class="main-bg" id="' + $this.attr('id') + '-bg"></div>')
.css('background-image', (
'url("css/images/overlay.png"), url("' + $primaryImg.attr('src') + '")'
))
.appendTo($body);
This creates an element for the background image, that depends on the current element.
And after that, You'll find the code to add/remove this element with or without transition (line 194+):
if (skel.canUse('transition')) {
options.init = function() { $bg.removeClass('active'); };
options.enter = function() { $bg.addClass('active'); };
options.leave = function() { $bg.removeClass('active'); };
}
else {
$bg
.css('opacity', 1)
.hide();
options.init = function() { $bg.fadeOut(0); };
options.enter = function() { $bg.fadeIn(400); };
options.leave = function() { $bg.fadeOut(400); };
}
You can just delete or comment that part, and the transition effect should be gone.
2nd part: always show the content images
Here you already found the correct place in the assets/css/main.css file. Just set
.main .image.primary {
display: block;
}
and remove the min-height property:
.main .container:before {
/*min-height: calc( 100vh - 13em );*/
content: '';
display: inline-block;
vertical-align: middle;
width: 1px;
}
No everything shoud work as your second screenshot.

Jquery hover keep firing on a tag

The idea is that when users mouse over each name in the list, the div with id preview will have background image. The first a does not have a problem, but when I added the href, JavaScript keep firing the hover event. What is the problem here?
HTML
<ul>
<li><a>John</a></li>
<li>Sam</li>
<li>Tom</li>
</ul>
<div id="preview"></div>
JavaScript
jQuery(function() {
var names = $('a');
var bg = document.getElementById('preview');
names.hover(
changeBackground, handlerOut
);
function changeBackground(e) {
console.log('hover');
var image = 'http://londonalley.com/wp-content/uploads/2014/08/creativesUS3bb-1920x1080.jpg';
if (bg.style.cssText.length == 0) {
bg.style.cssText = builtStyle(image);
bg.style.display = "block";
}
}
function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: 101;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
image + ");"
}
//handle mouse leaves
function handlerOut() {
console.log('out');
if (bg.style.cssText) {
bg.style.cssText = "";
}
}
});
JSfiddle: https://jsfiddle.net/rattanak22/q96a6dz4/

Solution: Simply change your z-index css in the builtStyle function from 101 to -1
z-index: -1;
Note: You have specified opacity twice in your CSS.

The problem is you are setting background image as absolutely positioned without z-index. So when you hover over "a" tag, changeBackground function assigns an background image which is absolutely positioned with no z-index. That will bring image on top above all, like one more layer above "a" tag. As this new layer comes up, mouse cannot reach "a" tag which triggers hoverOut, and the cycle continues for every mouse moment.
function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: -1;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
image + ");"
}
https://jsfiddle.net/pradosh987/9p0pjtd4/
I have assigned -1 z-index to background image and that works.

After looking at your site, simply, change your css rules to:
#content-wrapper {
position: relative;
z-index: 102;
overflow: hidden;
}
#preview{
pointer-events: none;
}

Change color of HTML element based on previous value - CSS

I would like to change the background-color of an element in HTML using CSS when the element is hovered on. Here is what I have:
h1 {
background-color: rgb(100,60,0);
}
h1:hover {
/* increase background-color red component by 50 */
/* new background-color would be rgb(150,60,0) */
}
I can't figure out how to achieve that.
Also, I have seen some suggestions online about doing it with LESS or SASS but I would really prefer a pure-CSS solution.
Thank you very much.

You can't add logic or function in a CSS like you would do in other programming langages. If you want to do so, you need a CSS pre-processor like Sass or LESS that will generate the CSS result.
But you have to know that LESS or Sass will generate normal CSS (as you said pure CSS) because they are CSS. It's like a CSS extension...
For exemple with Sass:
$color: rgb(100,60,0);
h1 {
background-color: $color;
&:hover {
// increase background-color red component by 50
// new background-color would be rgb(150,60,0)
background-color: adjust-color($color, $red: 50);
}
}
will generate following CSS
h1 {
background-color: #643c00;
}
h1:hover {
background-color: #963c00;
}

This isn't a CSS solution but this should work(untested) as required. The second listener is for changing the colour back, so you can remove it if you don't need it =)
var elements = document.getElementsByTagName('h');
//get all elements with h tag
for(var i = 0; i< elements.length;i++)
{
var element = elements[i];
element.addEventListener("mouseenter", function() //adds event listener for mouse moving onto element
{
var currentBGColor = getComputedStyle(elements[i])['backgroundColor'];
// gets current background color
var parts = currentBGColor.replace(/[a-z|(|)]/gi,'').split(',');
//removes rgba( & ), then cuts string by comma
elements[i].style.backgroundColor = 'rgba('+parseInt(parts[0]+50)+''+parts[1]+''+parts[2]+''+parts[3]+')';
//set new style
}
element.addEventListener("mouseleave", function() //adds event listener for mouse leaving element
{
var currentBGColor = getComputedStyle(elements[i])['backgroundColor'];
// gets current background color
var parts = currentBGColor.replace(/[a-z|(|)]/gi,'').split(',');
//removes rgba( & ), then cuts string by comma
elements[i].style.backgroundColor = 'rgba('+parseInt(parts[0]-50)+''+parts[1]+''+parts[2]+''+parts[3]+')';
//set new style
}
}