I'm trying to detect when a div.text is on top of another (within the parent div#element), the background of the parent should change depending the existance of the overlap.
The issue is that when there's no overlap the script still detects one, this may be caused because each .text compares their position with itself over again.
$(".text").each(function() {
var self_text = $(this),
self_textid = self_text.attr('id'),
self_textLeft = self_text.position().left,
self_textTop = self_text.position().top,
self_textWidth = self_text.width(),
self_textHeight = self_text.height();
$(".text").each(function() {
var self_shape = $(this),
self_shapeLeft = self_shape.position().left,
self_shapeTop = self_shape.position().top,
self_shapeWidth = self_shape.width(),
self_shapeHeight = self_shape.height();
// check if .text overlaps
if (
(self_textLeft + self_textWidth) > self_shapeLeft &&
self_textLeft < (self_shapeLeft + self_shapeWidth) &&
(self_textTop + self_textHeight) > self_shapeTop &&
self_textTop < (self_shapeTop + self_shapeHeight)
) {
// overlap
$('#elements').css('background', 'red');
} else {
// no overlap
$('#elements').css('background', 'green')
}
});
});
#elements,
.text {
position: absolute;
}
.text {
width: 50px;
background: blue;
}
#elements {
height: 250px;
width: 400px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
<div class="text" style="left: 20px; top: 20px;">text1</div>
<div class="text" style="left: 100px; top: 50px;">text2</div>
<div class="text" style="left: 10px; top: 200px;">text3</div>
<div class="text" style="left: 10px; top: 45px;">text4</div>
</div>
How can I tell the script to ignore itself whenever it loops again without changing the .text class, also is there any way that code could be improved ?
It's because you include the div itself to check against, try adding it to a not:
var $textDivs = $(".text"); // cache this so you are not performing the lookup every time in your loop
$textDivs.each(function() {
var self_text = $(this),
self_textid = this.id,
self_textLeft = self_text.position().left,
self_textTop = self_text.position().top,
self_textWidth = self_text.width(),
self_textHeight = self_text.height(),
hasNotMatched = true;
$textDivs.not(self_text).each(function() { // added to a not so not checked against itself
var self_shape = $(this),
self_shapeLeft = self_shape.position().left,
self_shapeTop = self_shape.position().top,
self_shapeWidth = self_shape.width(),
self_shapeHeight = self_shape.height();
// check if .text overlaps
if (
(self_textLeft + self_textWidth) > self_shapeLeft &&
self_textLeft < (self_shapeLeft + self_shapeWidth) &&
(self_textTop + self_textHeight) > self_shapeTop &&
self_textTop < (self_shapeTop + self_shapeHeight)
) {
// overlap
$('#elements').css('background', 'red');
hasNotMatched = false;
return false; // break out of each loop so as no need to process anymore and so overlap doesn't turn back green
} else {
// no overlap
$('#elements').css('background', 'green')
}
});
return hasNotMatched; // this will break out of outer loop if matched on inner loop
});
#elements,
.text {
position: absolute;
}
.text {
width: 50px;
background: blue;
}
#elements {
height: 250px;
width: 400px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
<div class="text" style="left:20px; top:20px;">text1</div>
<div class="text" style="left:100px; top:50px;">text2</div>
<div class="text" style="left:90px; top:40px;">text3</div>
<div class="text" style="left:190px; top:30px;">text4</div>
</div>
You can exclude the current element with
$(".text").not($(this))
There's also an issue with the logic of your solution - if the last elements checked don't overlap it will change the background to green. One way to handle this is to set the background to green as the default. And if an overlap is detected change the background to red.
There are a few more optimizations that could be made here - like once an overlap has been detected it could exit.
Like this:
$(".text").each(function() {
$('#elements').css('background', 'green');
var self_text = $(this),
self_textid = self_text.attr('id'),
self_textPosition = self_text.position(),
self_textLeft = self_textPosition.left,
self_textTop = self_textPosition.top,
self_textWidth = self_text.width(),
self_textHeight = self_text.height();
$(".text").not($(this)).each(function() {
var self_shape = $(this),
self_shapePosition = self_shape.position(),
self_shapeLeft = self_shapePosition.left,
self_shapeTop = self_shapePosition.top,
self_shapeWidth = self_shape.width(),
self_shapeHeight = self_shape.height();
// check if .text overlaps
if (
(self_textLeft + self_textWidth) > self_shapeLeft &&
self_textLeft < (self_shapeLeft + self_shapeWidth) &&
(self_textTop + self_textHeight) > self_shapeTop &&
self_textTop < (self_shapeTop + self_shapeHeight)
) {
// overlap
$('#elements').css('background', 'red');
}
});
});
#elements,
.text {
position: absolute;
}
.text {
width: 50px;
background: blue;
}
#elements {
height: 250px;
width: 400px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
<div class="text" style="left: 20px; top: 20px;">text1</div>
<div class="text" style="left: 100px; top: 50px;">text2</div>
<div class="text" style="left: 10px; top: 200px;">text3</div>
<div class="text" style="left: 10px; top: 45px;">text4</div>
</div>
Related
I'm currently working on a project where the logo color should change depending on the background color. I would prefer to do this with CSS classes.
Unfortunately, the problem is: As soon as the first DIV of the class "bg02" is scrolled, the class changes for the logo too, but as soon as the following "bg02" divs are scrolled, nothing happens anymore. What am I doing wrong? Can you help me?
Here's my code:
JavaScript
$(document).on("scroll", function() {
var scrollPos = $(document).scrollTop();
$('#logo').each(function() {
var currDiv = $(this);
var refElement = $('.bg02');
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#logo').removeClass("inverted");
currDiv.addClass("inverted");
} else {
currDiv.removeClass("inverted");
}
});
});
CSS
#logo {
position: fixed;
top: 20px;
left: 5%;
z-index: 100;
font-size: 26px;
font-weight: 700;
color: #000;
}
#logo.inverted {
color: #fff;
}
.bg01, .bg02 {
position: relative;
width: 100%;
height: 600px;
}
.bg01 {
background: #fff;
}
.bg02 {
background: #000;
}
HTML
<div id="logo">Logo</div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg01"></div>
<div class="bg02"></div>
Your issue is that $('.bg02').position() can only return a single position, so it returns the position for the first one.
To use your method of checking scrollTop(), you need to loop .bg02 not #logo
Couple of small changes to your code:
Loop .bg02:
$('.bg02').each(function() {
var refElement = $(this);
and a "break" inside the if - return false to stop the loop continuing and removing the inverted class for the later .bg02 that doesn't match
if (positioncheck) {
$("#logo").addClass("inverted");
return false;
}
You can also "tweak" when the logo gets inverted by considering its position, eg:
var scrollPos = $(document).scrollTop()
+ $("#logo").position().top
+ ($("#logo").height() / 2)
as it was, it would only invert when bg02 got to the top.
Updated snippet:
$(document).on("scroll", function() {
var scrollPos = $(document).scrollTop()
+ $("#logo").position().top
+ ($("#logo").height() / 2)
$('.bg02').each(function() {
var refElement = $(this);
if (refElement.position().top <= scrollPos
&& refElement.position().top + refElement.height() > scrollPos) {
$('#logo').addClass("inverted");
// found one, so exit .each
return false;
} else {
$('#logo').removeClass("inverted");
}
});
});
#logo {
position: fixed;
top: 20px;
left: 5%;
z-index: 100;
font-size: 26px;
font-weight: 700;
color: #000;
}
#logo.inverted {
color: #fff;
}
.bg01, .bg02 {
position: relative;
width: 100%;
height: 200px;
}
.bg01 {
background: #fff;
}
.bg02 {
background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="logo">Logo</div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg01"></div>
<div class="bg02"></div>
javascript beginner here! so i'm trying to do a box(that is inside a larger box) move from the top to the edge of the box. Here's the code:
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5);
function boxmove() {
if (loc == 320) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox">
<div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>
The problem is that the small box doesn't exactly ends up at the edge, it goes more to the right. I tried doing
boxcont.style.left = (loc - 0.5) + "px";
but doesn't work. pretty sure the solution is simple but as a newbie here it's confusing me :p. Oh and i also tried doing ++ to the 0.5 and Number(0.5) so it reads it as a decimal but still doesn't work!
the big gray box is not set to the correct height and width that corresponds with the small red box's movement. You have it going down 1 and to the right 1 every 5 however, your actually going across a rectangle, not a square. set your width and height the same for the gray box and slightly adjust the stopping point to a little bit less.
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5); // every five milliseconds
function boxmove() {
if (loc == 290) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox" style = "height: 320px; width: 320px">
<div id="boxcont" ></div>
</div>
<button id="boxbtn">Move the box</button>
if (loc == 270) {
instead of
if (loc == 320) {
Gets you there.
300px is the width of the containing div and the moving div is 30px wide so 300-30=270px
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5);
function boxmove() {
if (loc == 270) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox">
<div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>
I'm having a hard time understanding the formula to detect if a text is on a rotated shape, the formula I use right now is similar to the image below:
There's now a new variable which is the angle, here's the code :
https://jsfiddle.net/b62bkthk/2/
onornot();
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
if(angle < 0) angle +=360;
return angle;
}
function onornot() {
$(".text").each(function() {
var self_text = $(this),
self_textLeft = self_text.position().left,
self_textTop = self_text.position().top,
self_textWidth = self_text.width(),
self_textHeight = self_text.height();
$(".shape, .background").each(function() {
var self_shape = $(this),
self_shapeLeft = self_shape.position().left,
self_shapeTop = self_shape.position().top,
self_shapeWidth = self_shape.width(),
self_shapeHeight = self_shape.height();
var angle = getRotationDegrees($(this));
if((self_textLeft + self_textWidth) > self_shapeLeft && self_textLeft < (self_shapeLeft + self_shapeWidth) && (self_textTop + self_textHeight) > self_shapeTop && self_textTop < (self_shapeTop + self_shapeHeight)){
alert(self_text.attr('id') + ' is on ' + self_shape.attr('id'));
} else {
alert(self_text.attr('id') + ' is NOT on ' + self_shape.attr('id'));
}
});
});
}
.elements,
.element {
position: absolute
}
#s1 {
background: #ffffff;
width: 400px;
height: 180px;
}
#t1 {
top: 20px;
left: 30px;
}
#s2 {
background: #333333;
top: 150px;
width: 400px;
height: 40px;
transform: rotate(330deg);
}
#t2 {
top: 161px;
left: 0px;
width: 400px;
text-align: center;
}
#t3 {
top: 100px;
left: -50px;
width: 400px;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout" style="position:relative; margin-top:30px; margin-left:50px;">
<div class="elements">
<div id="s1" class="element background"></div>
<div id="t1" class="element text" style="color:red;">text</div>
<div id="s2" class="element shape"></div>
<div id="t2" class="element text" style="color:red;">text invert</div>
<div id="t3" class="element text" style="color:red;">text3</div>
</div>
</div>
As you can see, some texts are on the rotated shape but the alert box says that it is NOT on. What would the new formula look like ?
So I have a set of elements called .project-slide, one after the other. Some of these will have the .colour-change class, IF they do have this class they will change the background colour of the .background element when they come into view. This is what I've got so far: https://codepen.io/neal_fletcher/pen/eGmmvJ
But I'm looking to achieve something like this: http://studio.institute/clients/nike/
Scroll through the page to see the background change. So in my case what I'd want is that when a .colour-change was coming into view it would slowly animate the opacity in of the .background element, then slowly animate the opacity out as I scroll past it (animating on scroll that is).
Any suggestions on how I could achieve that would be greatly appreciated!
HTML:
<div class="project-slide fullscreen">
SLIDE ONE
</div>
<div class="project-slide fullscreen">
SLIDE TWO
</div>
<div class="project-slide fullscreen colour-change" data-bg="#EA8D02">
SLIDE THREE
</div>
<div class="project-slide fullscreen">
SLIDE TWO
</div>
<div class="project-slide fullscreen colour-change" data-bg="#cccccc">
SLIDE THREE
</div>
</div>
jQuery:
$(window).on('scroll', function () {
$('.project-slide').each(function() {
if ($(window).scrollTop() >= $(this).offset().top - ($(window).height() / 2)) {
if($(this).hasClass('colour-change')) {
var bgCol = $(this).attr('data-bg');
$('.background').css('background-color', bgCol);
} else {
}
} else {
}
});
});
Set some data-gb-color with RGB values like 255,0,0…
Calculate the currently tracked element in-viewport-height.
than get the 0..1 value of the inViewport element height and use it as the Alpha channel for the RGB color:
/**
* inViewport jQuery plugin by Roko C.B.
* http://stackoverflow.com/a/26831113/383904
* Returns a callback function with an argument holding
* the current amount of px an element is visible in viewport
* (The min returned value is 0 (element outside of viewport)
*/
;
(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i, el) {
function visPx() {
var elH = $(el).outerHeight(),
H = $(win).height(),
r = el.getBoundingClientRect(),
t = r.top,
b = r.bottom;
return cb.call(el, Math.max(0, t > 0 ? Math.min(elH, H - t) : (b < H ? b : H)), H);
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
// OK. Let's do it
var $wrap = $(".background");
$("[data-bg-color]").inViewport(function(px, winH) {
var opacity = (px - winH) / winH + 1;
if (opacity <= 0) return; // Ignore if value is 0
$wrap.css({background: "rgba(" + this.dataset.bgColor + ", " + opacity + ")"});
});
/*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
.project-slide {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.project-slide h2 {
font-weight: 100;
font-size: 10vw;
}
<div class="project-slides-wrap background">
<div class="project-slide">
<h2>when in trouble...</h2>
</div>
<div class="project-slide" data-bg-color="0,200,255">
<h2>real trouble...</h2>
</div>
<div class="project-slide">
<h2>ask...</h2>
</div>
<div class="project-slide" data-bg-color="244,128,36">
<h2>stack<b>overflow</b></h2>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
Looks like that effect is using two fixed divs so if you need something simple like that you can do it like this:
But if you need something more complicated use #Roko's answer.
var fixed = $(".fixed");
var fixed2 = $(".fixed2");
$( window ).scroll(function() {
var top = $( window ).scrollTop();
var opacity = (top)/300;
if( opacity > 1 )
opacity = 1;
fixed.css("opacity",opacity);
if( fixed.css('opacity') == 1 ) {
top = 0;
opacity = (top += $( window ).scrollTop()-400)/300;
if( opacity > 1 )
opacity = 1;
fixed2.css("opacity",opacity);
}
});
.fixed{
display: block;
width: 100%;
height: 200px;
background: blue;
position: fixed;
top: 0px;
left: 0px;
color: #FFF;
padding: 0px;
margin: 0px;
opacity: 0;
}
.fixed2{
display: block;
width: 100%;
height: 200px;
background: red;
position: fixed;
top: 0px;
left: 0px;
color: #FFF;
padding: 0px;
margin: 0px;
opacity: 0;
}
.container{
display: inline-block;
width: 100%;
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Scroll me!!
</div>
<div class="fixed">
</div>
<div class="fixed2">
</div>
I am new to web development but highly fascinated by it. So, basically I am creating a light-box where thumbnails of images will be appear on screen and they will appear bigger in size when user clicks over them. Now, I want when user hovers over the gallery images/thumbnails then some text should appear over the current image with may be some animation or basically mouser-hover should cause some event to happen but I am unable to do it. Text should be added dynamically or may be previously stored in an array or something of that sort. Please have a look at my code and tell me how to modify it in order to achieve such effect and if you know a better and easier way to do so then feel free to share. Thank you so much!!
HTML:
<div class="gallery">
<ul id="images"></ul>
<div class="lightbox">
<div class='limage'>
</div>
<div class='left'>
</div>
<div class='right'>
</div>
<div class='close'>
x
</div>
</div>
</div>
JAVASCRIPT:
var gallery_slider = new Array();
gallery_slider[0] = "im1.jpg";
gallery_slider[1] = "im2.jpg";
gallery_slider[2] = "im3.jpg";
function displayAllImages() {
var i = 0,
len = gallery_slider.length;
for (; i < gallery_slider.length; i++) {
var img = new Image();
img.src = gallery_slider[i];
img.style.width = '200px';
img.style.height = '120px';
img.style.margin = '3px';
img.style.cursor = 'pointer';
document.getElementById('images').appendChild(img);
}
};
$(function() {
displayAllImages();
});
$(function() {
$('img').click(function() {
var hell = (this).src;
display(hell);
});
});
function display(hello) {
$('header').css('display', 'none'); /*for some other purposes*/
$('.limage').html("<img src=" + hello + " >");
$('.lightbox').css("display", "block");
$('.lightbox').fadeIn();
$('.right').click(function() {
var im = new Array();
var x;
var p;
for (x = 0; x < gallery_slider.length; x++) {
im[x] = gallery_slider[x];
}
for (p = 0; p < im.length; p++) {
if (im[p] == hello) {
break;
} else {
continue;
}
}
if (p >= (im.length - 1)) {
p = -1;
}
$('.limage').fadeOut(0);
$('.limage').html("<img src= " + im[p + 1] + ">");
$('.limage').fadeIn(500);
hello = im[p + 1];
});
$('.left').click(function() {
var im = new Array();
var x;
var p;
for (x = 0; x < gallery_slider.length; x++) {
im[x] = gallery_slider[x];
}
for (p = 0; p < im.length; p++) {
if (im[p] == hello) {
break;
} else {
continue;
}
}
if (p == 0) {
p = (im.length);
}
$('.limage').fadeOut(0);
$('.limage').html("<img src= " + im[p - 1] + ">");
$('.limage').fadeIn(500);
hello = im[p - 1];
});
$('.close').click(function() {
$('.lightbox').fadeOut();
$('header').css('display', 'block'); /*for some other purposes*/
});
};
CSS:
.gallery {
width: 100%;
height: 400px;
overflow: hidden;
margin: auto;
}
.gallery ul {
list-style: none;
}
.lightbox {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 106;
}
.close {
color: #fff;
border: 1px solid #fff;
border-radius: 100px;
background-color: #000;
position: absolute;
top: 10px;
right: 20px;
padding: 10px;
font-family: firstfont;
font-size: 30px;
z-index: 101;
cursor: pointer;
}
.close:hover {
background-color: #ebebeb;
color: #000;
}
.left {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.right {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.limage {
position: relative;
margin: auto;
top: 17%;
left: 15%;
max-width: 90%;
max-height: 90%;
}
There might be some bugs in coding. Watch out.
This code is working for displaying images as thumbnails as a matrix and as slider in lightbox when clicked upon them. I am not able to figure out how to add hover functionality to initial thumbnails.
Jsfiddle :
http://jsfiddle.net/psd6cbd7/1/
I'd suggest putting a div inside the image div containing the text and then using CSS to hide/show it.
HTML:
<div class="gallery">
<ul id="images"></ul>
<div class="lightbox">
<div class='limage'>
<div class=".caption">Caption here</div>
</div>
<div class='left'>
</div>
<div class='right'>
</div>
<div class='close'>
x
</div>
</div>
</div>
CSS:
.limage { position: relative; }
.caption { display: none; }
.limage:hover .caption { display: block; position: absolute;}
Why you using array to store the images? Anyways, assume that you still using array, below is some example code that you want try:
HTML:
<ul id="images">
</ul>
<!-- assume this is the place that you want to display the caption -->
<div id="caption"></div>
Javascript:
var images = new Array();
images[0] = "p1.png";
images[1] = "p2.png";
images[2] = "p3.png";
images[3] = "p4.png";
var captions = new Array();
captions[0] = "Picture 1";
captions[1] = "Picture 2";
captions[2] = "Picture 3";
captions[3] = "Picture 4";
var x = $("#images");
var y = $("#caption");
const prefix = "image-";
if you are using HTML5:
for (var i = 0; i < images.length; i++) {
x.append("<img class='roll' src='" + images[i] + "' data-caption='" + captions[i] + "'>");
}
$(".roll").mouseover(function(){
//do whatever effect here when mouse over
y.html($(this).attr("data-caption"));
});
If you want to backward compatible:
for (var i = 0; i < images.length; i++) {
x.append("<img id='" + prefix + i + "' class='roll' src='" + images[i] + "'>");
}
$(".roll").mouseover(function(){
//do whatever effect here when mouse over
var index = $(this).attr("id").substring(prefix.length);
y.html(captions[index]);
});
Hope that this will help.