How to trace out overlapping DIVs - javascript

I have four divs which are animated using size, height and positions; that means, these divs change their height, width, left and top.
FOCUS:
I want to stop that animation when any of these two divs become overlapped.
HTML:
<div id="container_1">
<div id="anim_1"></div>
<div id="anim_2"></div>
</div>
<div id="container_2">
<div id="anim_3"></div>
<div id="anim_3"></div>
</div>
If any two anim divs of any container (i.e. container_1 OR container_2) bocome overlapped then I have to stop the animation of both two container divs.
Now, how can I trace out this overlapping using JQUERY or JAVASCRIPT?
Please suggest me.
Thanks in advance.

Take a look to the answer in this other question:
Efficiently Detect When Sibling Elements Overlap

Related

How can I lock a resizable div to the bottom of the page?

I have 2 resizable divs in a container. One resizable div is contained in the second one.
<div id="container">
<div id="div1" class="droppable resizable1">
<div id="div2" class="droppable resizable2"></div>
</div>
</div>
Actually, I have two problems with these divs and I think they are linked.
First, if I resize div1, div2 and again div1 to the bottom, div2 is moving out of the container.
The second problems happens in the same way. The div2 is going up with the same tests as in the first problem, that's why I think they are linked.
I have tried to change my CSS but I haven't found a solution. At start I thought it comes from the minHeight of JQueryUI so I checked the documentation but my resizable function looks right.
I have made a https://jsfiddle.net/Spydaxx/4ez2xtan/85/ so you can see what I am trying to do.
I want the two divs to be lock at the bottom and resizable upwards. Actually, I have some troubles with the position when resizing but the resize itself looks well.
Thank you for your help and your time.
so if I understand correctly you want to be able to move either div freely within the height restrictions you set. unless you need the divs nested, which I'm not sure if that would work with what you're trying to do, this will work
<div id="container">
<div id="div1" class="droppable resizable1"></div>
<div id="div2" class="droppable resizable2"></div>
</div>
$(".resizable1").resizable({
handles: 'n',
containment:'#container',
minHeight: 100
});
$(".resizable2").resizable({
handles: 'n',
containment: '#container',
minHeight: 50
})
I didn't change any css so I didn't include the code here. just don't nest the divs and change the container for div2

How to change images in a selected div on mouse scroll like parallax effect?

First of all, thank you so much for checking my question.
I'm working on a web site and need to change images vertically in a selected div like a parallax effect. There are 3 images and need to change them.
There are 3 images in a div. Check the following screenshots.
This is the image 1. All these 3 images are half width of the screen.
And this is image 2.
Like this, there is another image 3. The yellow color content in the right side is not changing. Now i added just a simple scroll bar to scroll.
I need to add either parallax effect on these images to scroll vertically or quickly change images on mouse scroll.
Example for parallax effect I need to add : http://pixelcog.github.io/parallax.js/
Or I want to apply this effect : https://codepen.io/RenanB/pen/GZeBNg
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
<h2>Parallax Speed -1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
<h2>Parallax Speed 1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
<h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
<h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
<h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
<h2>Parallax Speed 0.75</h2>
</div>
But only issue is, when I apply the same code to my images, this effect is activating to my full site.
Most importantly ,no matter from where user scrolling the page, I need to scroll to these 3 images, show all 3 and then scroll down to next section.
I added above parallax code, but it's applying to the whole site and not working.
What is the best way to apply above mentioned 2 methods to my web site ?
Well, as soon as you played with code, you need to see that those scripts and effects builded inside a wrapper, so the main thing in parallax effect is to have a nicely 100% width and height so you can see the delay and responsiveness in your website, what I can tell you do is the following :
Wrap your images inside a div with name like ( image_wrapper ).
Add a class for every image parent div like ( image_section ).
specify the 100% width and height for image_sections.
Add a height for the image_wrapper as this :
.image_wrapper{ height:calc( 100% * 4 ); }
100% for the full height, 4 for the number of images to have in parallax

Trouble showing only 3 thumbnails after mouse drag

I have a thumbnail gallery, a div that show only 3 thumbnails at once, user can mouse drag left or right to show more.
current fiddle: http://jsfiddle.net/31ua6jL3/2/
What i want to achieve:
-All the 6 box to align in one line, but only show the left 3 first. If outside the div, the right 3 will be hidden
-When i drag box out of the div, the box will be hidden
<div class="container">
<div class="image_holder">
<div class="drag">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</div>
I have some trouble with this, and i don't want to use a plugin. Can somebody guide me on the right track?
i'm trying to do something like http://www.pikachoose.com/, u can see that it contain 5 thumbnails, what i want to do is more than 10 thumbnails in 1 line but only 5 visible, and user can mouse drag to slide to view through the other thumbnails.
First what you need to do is add the following style inside .image_holder
overflow : hidden;
What overflow decides is when the contents inside a box overflows it, how should it react. Using hidden we've decided to make the contents hide inside the box.
Problem in your code :
Now as you've specified the width of .image_holder to 300px when it's inner elements will have cumulative width more then it's own width they will break down to bottom left.
Solution :
So to make all these elements get hidden when they overflow the .image_holder you have to keep another div that holds all the elements with a high range of width. Fortunately you have that div which is .drag. Just give it a bigger width,
.drag{
width : 1000px;
}
Now this .drag div will flow inside the .image_holder and as it's width is a big value all elements will be in one row and they also will flow inside .image_holder div as you expected.
Here's a working fiddle : jsFiddle
References :
CSS overflow Property

DOM node Coordinate while HTML rendering

I use Chrome and http://www.aaai.org/Conferences/AAAI/aaai13.php for test.
There is a structure like that.
<div class="content">
<div class="right">...</div>
<div class="left">...</div>
</div>
I just have no idea about why the "content" div's size is 940px * 70px which is much smaller than the size of the "right" div and the "left" div.
Sorry for not knowing how to screenshot for this problem
Elements which are floating doesn't use vertical space without clear. You can add empty element with "clear: both"-css to use that vertical space.
See more info from here:
What methods of ‘clearfix’ can I use?

How to make 2 divs that are inside one "top panel" but in different cornes not to overlap one another when window size is changed?

So let us look at google: it looks like:
But when we resize page it starts to overlap...:
I wonder how to make it so that when page is minified right div would start to behaive like left ones. I wonder how to create such "top panel" with jQuery?
Tough to tell you exactly what to do since you provided no code, but you want to set a min-width for your menu bar so it's wide enough to accommodate everything.
<div id="menuWrapper">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
#menuWrapper{
min-width:750px;
}

Categories