I'm trying to create two animated boxes that appear on a button click, similar to the one when "About Me" is clicked on http://riccardozanutta.com/ . I wasn't able to figure how he did it, so I decided to go about it using modals. However, I was having trouble with getting both boxes to animate at the same time when I used two separate ones. I am able to get it to work when I have one modal with two different divs such as :
<div id="myModal" class="modal col-xs-12 col-lg-6">
<!-- Modal content -->
<div class="modal-content1">
<span class="close">×</span>
<h2>About Me</h2>
<p>blah blah>
</div>
<div class="modal-content2 col-xs-12 col-lg-6">
<span class="close">×</span>
<h2>Super powers</h2>
<p>blah blah>
</div>
</div>
However it is just one animation, and they are not joined together as in the one I'd like (with it also having them entering in from separate areas). Are modals what I need to do this, or is there a better way? While I was trying to find examples, I didn't find any that had two boxes. I'd appreciate any pointers in the right direction. Thank you in advance!
You can work on this and try to get it as close to your vision as possible. I just forked it, and edited a little to provide you an example and a place to work and find your perfect solution. Good luck!
Here's the example code:
JS
var test = document.getElementById('test');
var test1 = document.getElementById('test1');
function translate(elem, x, y) {
var left = parseInt(css(elem, 'left'), 10),
top = parseInt(css(elem, 'top'), 10),
dx = left - x,
dy = top - y,
i = 1,
count = 20,
delay = 20;
function loop() {
if (i >= count) {
return;
}
i += 1;
elem.style.left = (left - (dx * i / count)).toFixed(0) + 'px';
elem.style.top = (top - (dy * i / count)).toFixed(0) + 'px';
setTimeout(loop, delay);
}
loop();
}
function css(element, property) {
return window.getComputedStyle(element, null).getPropertyValue(property);
}
window.onclick = function(e) {
var arr;
if (e.target.nodeName === 'BUTTON') {
test.style.cssText = 'visibility:visible;';
translate(test, +50, +50);
test1.style.cssText = 'visibility:visible;';
translate(test1, +200, +50);
}
};
HTML
<button title="100 100">Translate to (100, 100)</button>
<!-- Modal content -->
<div id="test">
<span class="close">×</span>
<h2>About Me</h2>
<p>blah blah>
</div>
<div id="test1">
<span class="close">×</span>
<h2>Super powers</h2>
<p>blah blah>
</div>
CSS
#test {
position: absolute;
left: 50px;
top: 500px;
visibility: hidden;
}
#test1 {
position: absolute;
left: 100px;
top: -500px;
visibility: hidden;
}
Related
I'm trying to make a single static website, which when an div child of comes into viewport (precisely, when div element comes into the upper 50% of the viewport) changes the corresponding div's class in side-nav to "active". It should work scrolling down and up.
So far I've tried several solution from other threads on SO, none successful. I assume I've been approaching this wrong.
$(window).on('scroll', function() {
$("#vars-args").each(function() {
if (elementInViewport2($(this))) {
$(this).find("#div1a").addClass("active");
}
});
});
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while (el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="side-nav">
1
2
3
4
5
6
</div>
<div id="content">
<div id="div1">
<!--content-->
</div>
<div id="div2">
<!--content-->
</div>
<div id="div3">
<!--content-->
</div>
<div id="div4">
<!--content-->
</div>
<div id="div5">
<!--content-->
</div>
<div id="div6">
<!--content-->
</div>
</div>
Also note that content of each div inside can be larger than the size of viewport.
I have been having problems getting the javascript to work. Also please note that the current JS is copied from some other thread.
This can be achieved using the IntersectionObserver as told by #cloned in the comments: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
To achieve this, you need a callback function passed as a parameter which is executed once isIntersecting is true, an option object (below it sets the threshold at 50% of the element) and an IntersectionObserver.
The callback toggles the active class to the a element according to the entry's id.
At the end we loop through the divs and make our observer observe them.
const callback = (entries, observer) => {
entries.forEach(entry => {
const navItem = document.querySelector('#' + entry.target.id + 'a');
if (entry.isIntersecting) {
console.log(navItem.getAttribute('id'));
navItem.classList.add('active');
} else {
navItem.classList.remove('active');
}
});
};
const options = {
threshold: 0.5
};
const observer = new IntersectionObserver(callback, options);
const container = document.getElementById('content');
const targetElements = container.querySelectorAll('div');
targetElements.forEach(element => {
observer.observe(element);
});
Here is a JSBin to demonstrate it https://jsbin.com/riyuhediso/47/edit?html,js,console,output
Note that although it demonstrates its feasibility it's not been profiled for performance issues which can be significant so I don't vouch for it.
If you are using Bootstrap you can use the ScrollSpy lib https://getbootstrap.com/docs/4.1/components/scrollspy/ and there is also ScrollMagic which is great http://scrollmagic.io/
You need to filter out which element is inside the viewport with the help of .getBoundingClientRect()
Checkout this
and check if any content has it's top and bottom within the half of the viewport ( window.innerHeight )
I took help of filter function to find out the index of contents that is within the built in function and set the .active class of the corresponding anchor.
Have a look at the snippet:
var direction = 0; // a variable to keep track of scrolled position;
$(window).on('scroll', function() {
// check if window is scrolling up or down;
if ($(window).scrollTop() > direction) { // if true, window scrolling scrolling down;
$('#side-nav').find('a').removeClass('active'); // remove active class from all anchors
$('#side-nav').find('a').eq(
// .eq() selector helps to find elements with index number, and here we pass a filter to find the content that is within the viewport;
$('#content').find('div').filter(function(index) {
return this.getBoundingClientRect().y <= (window.innerHeight / 2) && this.getBoundingClientRect().y + this.getBoundingClientRect().height > window.innerHeight / 2;
}).index()
).addClass('active');
// update the current scroll position now;
direction = $(window).scrollTop();
} else { // if false, window scrolling scrolling up;
$('#side-nav').find('a').removeClass('active'); // remove active class from all anchors
$('#side-nav').find('a').eq(
$('#content').find('div').filter(function(index) {
return this.getBoundingClientRect().y < (window.innerHeight / 2) && this.getBoundingClientRect().y + this.getBoundingClientRect().height > window.innerHeight / 2;
}).index()
).addClass('active');
// update the current scroll position now;
direction = $(window).scrollTop();
}
});
* {
margin: 0;
padding: 0;
}
#side-nav {
/* feel free to remove or change, only for testing */
position: fixed;
width: 100%;
top: 0;
padding: 15px;
}
#side-nav a {
/* feel free to remove, only for testing */
text-decoration: none;
color: grey;
margin-right: 5px;
font-size: 24px;
font-weight: bold;
}
#side-nav a.active {
color: #000;
/* sets color for the default active class */
}
#content div {
min-height: 600px;
background-color: #cecece;
border-bottom: 1px solid #fff;
box-sizing: border-box;
padding: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="side-nav">
<a href="" id="div1a" class='active'>1</a>
<!-- set a default class assuming the first one will be in viewport while window loads -->
2
3
4
5
6
</div>
<div id="content">
<div id="div1">
<p>One</p>
</div>
<div id="div2">
<p>Two</p>
</div>
<div id="div3">
<p>Three</p>
</div>
<div id="div4">
<p>Four</p>
</div>
<div id="div5">
<p>Five</p>
</div>
<div id="div6">
<p>Six</p>
</div>
</div>
This is more in the realm of "is this possible without a stupid amount of code?" and to get some ideas of how to go about it. If I had a css representation of a dinner table, and wanted to position 4-10 chairs around it, I might create the divs like this (inline to show what I'm doing compactly)
<div style="position:relative;width:200px;height:200px;">
<div id="table" style="position:absolute;width:100px;height:100px;"> </div>
<div id="chair1" style="position:absolute;width:10px;height:10px;"> </div>
<div id="chair2" style="position:absolute;width:10px;height:10px;"> </div>
<div id="chair3" style="position:absolute;width:10px;height:10px;"> </div>
<div id="chair4" style="position:absolute;width:10px;height:10px;"> </div>
</div>
Where there's a div to hold it all and a div to represent 4 chairs and a table. But what if my dynamically created code needed to create 6, 8, or 10 chairs? How would I go about spacing them dynamically off the table at an even rate around the table? Thoughts?
You need JavaScript in order to set the chairs. Something to get you started:
HTML:
<div id="room">
<div id="table"></div>
</div>
CSS:
#room {
position:relative;
width:200px;
height:200px;
}
#table {
background:blue;
position:absolute;
width:100%;
height:100%;
}
.chair {
background:red;
position:absolute;
width:10px;
height:10px;
}
JavaScript using jQuery:
var $chair = $('<div class="chair">');
var $room = $('#room');
var top = 0;
var left = 0;
var stepSize = 20;
var createChairs = function(amount) {
for (var i = 0; i < amount; i++) {
var newChair = $chair.clone();
newChair.css({top: top, left: left});
$room.append(newChair);
left = left + stepSize;
}
}
createChairs(10);
You create a function which you pass the amount of chairs you wish, then you go around the border and set as much chairs as wished. This example does not include the border handling yet i.e. it will just set chairs from the top left to the top right. But handling borders should be easy doable with a few conditions. You should have gotten the idea.
Fiddle: https://jsfiddle.net/s0oady2q/
I really don't know how you would be able to do this without at least a little bit of JavaScript. In fact, even if you tried to use some kind of calc() magic, you would still run into the issue that calc() doesn't support sin() or cos() calls.
Here is a small, pure JavaScript way to get what you want though:
/*jslint browser:true*/
(function(doc) {
"use strict";
var TABLE_RADIUS = 100;
function each(arr, cb) {
return Array.prototype.forEach.call(arr, cb);
}
function deg2rad(deg) {
return ((deg * Math.PI) / 180);
}
function pos(deg, r) {
return {
x: (r * (Math.cos(deg2rad(deg)))),
y: (r * (Math.sin(deg2rad(deg))))
};
}
function chairIterator(chair, chairIndex, chairArr) {
var circPos = pos(chairIndex / chairArr.length * 360, TABLE_RADIUS);
chair.style.top = circPos.y + "px";
chair.style.left = circPos.x + "px";
}
function tableIterator(table) {
var chairs = table.querySelectorAll(".chair");
each(chairs, chairIterator);
}
function main() {
var tables = document.querySelectorAll(".table");
each(tables, tableIterator);
}
doc.addEventListener("DOMContentLoaded", main);
}(document));
.table {
display: inline-block;
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 50%;
background-color: red;
}
.table .chair {
position: absolute;
width: 10px;
height: 10px;
background-color: blue;
}
<div class="table">
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
</div>
I'm looking for a generic (native) Javascript function that could tell if an element is visible, that can take into account elements in a "carousel" (aka "slider"); These are usually containers with "slides", each an element positioned to the left (or right) of the previous one - but only one of them is actually visible.
An example can be seen in this web page:
http://www.technobuffalo.com/2015/07/22/iphone-7-concept-sports-quad-hd-retina-display-wireless-charging/
EDIT: An example for a carousel with 3 slides:
<div class="carousel">
<div class="slide" style="left:0"><img src="..." /></div>
<div class="slide" style="left:640px"><img src="..." /></div>
<div class="slide" style="left:1280px"><img src="..." /></div>
</div>
<style>
.carousel {
width: 640px;
height: 460px;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
}
</style>
The function should return false for the images not directly visible in the carousel.
I've tried numerous techniques suggested in answers in SO to questions regarding visibility detection, amongst them - checking offsetParent, offsetLeft, offsetRight, and using getComputedStyle and checking display, and more, but all of them return true for the invisible images in the carousel.
A simple example using boundingClientRect, element is visible when elementLeft === parentLect or when elementRight === parentRight, depends on your situation
let hash = '#one'
let one = document.getElementById('one')
let two = document.getElementById('two')
let three = document.getElementById('three')
function getResult (el) {
let elementRect = el.getBoundingClientRect()
let parentRect = el.parentElement.getBoundingClientRect()
return `
${el.id} - visible: ${elementRect.left === parentRect.left || elementRect.right === parentRect.right}`
}
function hashChange() {
document.querySelector(`${location.hash || hash} .content`).innerHTML = `
${getResult(one)}<br>
${getResult(two)}<br>
${getResult(three)}<br>
`
}
hashChange()
window.addEventListener('hashchange', hashChange)
.carousel {
display:flex;
height:200px;
width:200px;
overflow-x:hidden;
}
.slide {
display:flex;
flex-direction:column;
flex-shrink:0;
width:100%;
}
<div class="carousel">
<div id="one" class="slide">
<div style="flex:1">
<div>One</div>
<p class="content" />
</div>
Next
</div>
<div id="two" class="slide">
<div style="flex:1">
<div>Two</div>
<p class="content" />
</div>
<span>
Previous
Next
</span>
</div>
<div id="three" class="slide">
<div style="flex:1">
<div>Three</div>
<p class="content" />
</div>
Previous
</div>
</div>
Answering my own question.
// This function will return true if an element inside a "carousel" is visually invisible.
function isOffsetHidden(elem) {
if (elem.nodeName == "BODY") return false;
// find out if any parent of the element has 'overflow:hidden':
var p = elem, isOverflow = false;
while ((p=p.parentNode) && p.nodeName!=="BODY") {
if (window.getComputedStyle(p)['overflow']=="hidden") {
isOverflow = true;
break;
}
}
if (isOverflow) {
var er = elem.getBoundingClientRect(),
pr = p.getBoundingClientRect();
return (er.right < pr.left || er.bottom < pr.top || er.left < pr.right || er.top < pr.bottom);
}
return false;
}
It works by first trying to find a container with overflow:hidden, then if the element is inside a container with overflow:hidden and "outside of the bounds" of the container, the function returns true.
In the while loop we need to stop when the element is body, otherwise it will go on until Document and will throw an error saying that the argument for window.getComputedStyle "does not implement the Element interface".
I'll also re-edit the title of the question to be more specific to the problem.
<body>
<div id = "SiteContainer">
<div id = "NavigationButtons"></div>
<div id = "ShowReelContainer">
<div id= "NavigationBackward" name = "back" onclick="setPosition();">x</div>
<div id= "NavigationForward" name = "forward" onclick="setPosition();">y</div>
<div id = "VideoWrapper">
<div id = "SlideShowItem">
<img src="Images/A.png" alt="A"></img>
</div>
<div id = "SlideShowItem">
<img src="Images/B.png" alt="B"></img>
</div>
<div id = "SlideShowItem">
<img src="Images/C.png" alt="C" ></img>
</div>
</div>
</div>
</div>
<script>
var wrapper = document.querySelector("#VideoWrapper");
function setPosition(e)
{
if(e.target.name = "forward")
{
if!(wrapper.style.left = "-200%")
{
wrapper.style.left = wrapper.style.left - 100%;
}
}
else
{
if(e.target.name = "back")
{
if!(wrapper.style.left = "0%")
{
wrapper.style.left = wrapper.style.left + 100%;
}
}
}
}
</script>
</body>
Hi, I am very new to javascript. What I am trying to do, is change the x-position of a div when another div (NavigationForward or NavigationBackward) is clicked. However it does not appear to do anything at all. Basically if the div with name forward is clicked, I want to translate the VideoWrapper -100% from it's current position and +100% when "back". The css div itself VideoWrapper has a width of 300%. Inside this div as you can see is a SlideShowItem which is what will change. Perhaps I am adding and subtracting 100% the wrong way?
EDIT:
Thanks everyone for helping me out with this...I had just one more query, I am trying to hide the arrows based on whether the wrapper is at the first slide or the last slide. If its on the first slide, then I'd hide the left arrow div and if it's on the last, I'd hide the right arrow, otherwise display both of em. Ive tried several ways to achieve this, but none of em work, so Ive resorted to using copies of variables from the function that works. Even then it does not work. It appears that my if and else if statements always evaluate to false, so perhaps I am not retrieving the position properly?
function HideArrows()
{
var wrapper2 = document.getElementById("VideoWrapper");
var offset_x2 = wrapper2.style.left;
if(parseInt(offset_x2,10) == max_x)
{
document.getElementById("NavigationForward").display = 'none';
}
else if(parseInt(offset_x2,10) == min_x)
{
document.getElementById("NavigationBackward").display = 'none';
}
else
{
document.getElementById("NavigationForward").display = 'inline-block';
document.getElementById("NavigationBackward").display = 'inline-block';
}
}
//html is the same except that I added a mouseover = "HideArrows();"
<div id = "ShowReelContainer" onmouseover="HideArrows();">
To achieve this type o slider functionality your div VideoWrapper must have overflow:hidden style, and your SlideShowItemdivs must have a position:relative style.
Then to move the slides forward or backward you can use the style left which allows you to move the divs SlideShowItem relative to it's parent VideoWrapper.
I've tested this here on JSFiddle.
It seems to work as you described in your question, although you may need to do some adjustments, like defining the width of your slides, how many they are and so on.
For the sake of simplicity, I defined them as "constants" on the top of the code, but I think you can work from that point on.
CSS
#VideoWrapper{
position:relative; height:100px; white-space:nowrap;width:500px;
margin-left:0px; border:1px solid #000; overflow:hidden; }
.SlideShowItem{
width:500px; height:100px;display:inline-block;position:relative; }
#NavigationForward, #NavigationBackward{
cursor:pointer;float:left; background-color:silver;margin-right:5px;
margin-bottom:10px; text-align:center; padding:10px; }
HTML
<div id = "SiteContainer">
<div id = "NavigationButtons">
</div>
<div id = "ShowReelContainer">
<div id= "NavigationBackward" name = "back" onclick="setPosition('back');">prev</div>
<div id= "NavigationForward" name = "forward" onclick="setPosition('forward');">next</div>
<div style="clear:both;"></div>
<div id = "VideoWrapper">
<div class= "SlideShowItem" style="background-color:blue;">
Slide 1
</div>
<div class = "SlideShowItem" style="background-color:yellow;">
Slide 2
</div>
<div class = "SlideShowItem" style="background-color:pink;">
Slide 3
</div>
</div>
</div>
</div>
JavaScript
var unit = 'px'; var margin = 4; var itemSize = 500 + margin; var itemCount = 3; var min_x = 0; var max_x = -(itemCount-1) * itemSize;
function setPosition(e) {
var wrapper = document.getElementById("VideoWrapper");
var slides = wrapper.getElementsByTagName('div');
var offset_x = slides[0].style.left.replace(unit, '');
var curr_x = parseInt(offset_x.length == 0 ? 0 : offset_x);
if(e == "forward")
{
if(curr_x <= max_x)
return;
for(var i=0; i<slides.length; i++)
slides[i].style.left= (curr_x + -itemSize) + unit;
}
else if(e == "back")
{
if(curr_x >= min_x)
return;
for(var i=0; i<slides.length; i++)
slides[i].style.left= (curr_x + itemSize) + unit;
} }
After you analyze and test the code, I don't really know what's your purpose with this, I mean, you maybe just playing around or trying to develop something for a personal project, but if you are looking for something more professional avoid to create things like sliders on your own, as there are tons of plugins like this available and well tested out there on the web.
Consider using jQuery with NivoSlider, it works like a charm and is cross browser.
I would recommend using jQuery, this will reduce your coding by quite a bit. Can read more here: http://api.jquery.com/animate/
I've created a simple fiddle for you to take a look at. This example uses the .animate() method to reposition two div elements based on the CSS 'left' property.
CSS:
#container {
position: absolute;
left: 1em;
top: 1em;
right: 1em;
bottom: 1em;
overflow: hidden;
}
#one, #two {
position: absolute;
color: white;
}
#one {
background: pink;
width: 100%;
top:0;
bottom:0;
}
#two {
background: blue;
width: 100%;
left: 100%;
top:0;
bottom:0;
}
HTML:
<div id="container">
<div id="one">Div One</div>
<div id="two">Div Two</div>
</div>
JavaScript/jQuery:
var one, two, container;
function animateSlides(){
one.animate({
left : '-100%'
}, 1000, function(){
one.animate({
left : 0
}, 1000);
});
two.animate({
left : 0
}, 1000, function(){
two.animate({
left:'100%'
}, 1000);
});
};
$(function(){
one = $('#one');
two = $('#two');
container = $('#container');
setInterval(animateSlides, 2000);
});
JSFiddle Example: http://jsfiddle.net/adamfullen/vSSK8/3/
I have this simple JavaScript code that is supposed to side a div in and a div out. it is working perfectly when it comes to sliding in. By working perfectly is sliding the div easily. However when you click slideout the div just disappears from the browser. I don't know why and I cant find a fault. My code is here
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
function slideIt()
{
var stopPosition = 50;
var slidingDiv = "";
slidingDiv = document.getElementById("d3");
if (parseInt(slidingDiv.style.left) < stopPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
setTimeout(slideIt, 1);
}
}
function slideOut()
{
var startPosition =-150;
var slidingDiv = "";
slidingDiv = document.getElementById("d4");
if (parseInt(slidingDiv.style.left) > startPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) - 2 + "px";
setTimeout(slideOut(), 1);
}
}
</script>
<div id="d1" onclick="slideIt();">Slide in</div>
<div id="d2" onclick="slideOut();">Slide out</div>
<div id="d3" style="position: absolute; left:-150px; top:300px" >horizontally sliding div</div>
<div id="d4" style="position: absolute; left:150px; top:300px">horizontally sliding div</div>
</body>
</html>
You don't need to invoke slideOut in the second timeout. Remove the parentheses.
setTimeout(slideOut, 1);
Here is a demonstration: http://jsfiddle.net/cctqf/