Raphael images/shapes are not showing on Javascript

Raphael images/shapes are not showing on Javascript - javascript

I am having tremendous difficulty trying to figure out why my Raphael images are not showing on my HTML. I have tried many different outlets and changes to my html/js documents but still I am unable to figure out the problem. Any help is greatly appreciated!
Below is my HTML:
<body>
<h1>title of my page</h1>
<div id="int">
<svg height="400" width="550">
</svg>
</div>
<section id="p1">
<p>Paragraph 1 with some content</p>
</section>
<section id="p2">
<p>Another paragraph that pops up and has different content</p>
</section>
<div id="controls"><button id="continue">Continue the Story</button></div>
... and here is a copy of my .js document
to_p2 = function() {
/* flip from p1 to p2 */
$('#p1').hide()
$('#p2').show()
$('#continue').off()
$('#continue').click(to_p3)
}
to_p3 = function() {
/* flip from p2 to p3 */
$('#p2').hide()
$('#p3').show()
$('#continue').off()
$('#continue').click(to_p4)
}
setup = function() {
$('#continue').click(to_p2)
$('section').hide()
$('#p1').show()
paper = Raphael('int', 400, 550)
c = paper.circle(160, 120, 45)
c = paper.circle(60, 100, 30)
c = paper.circle(12, 60, 20)
c.attr ({
'fill': '#00f'
})
}
jQuery(document).ready(setup)

Related

Animation in html,css,js

I included a SVG on scroll animation that looks like this:
document.addEventListener("DOMContentLoaded", function(event) {
// Get a reference to the <path>
var path = document.querySelector('#star-path');
// Get length of path... ~577px in this case
var pathLength = path.getTotalLength();
// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;
// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;
// Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();
// When the page scrolls...
window.addEventListener("scroll", function(e) {
// What % down is it?
// https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
// Had to try three or four differnet methods here. Kind of a cross-browser nightmare.
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Length to offset the dashes
var drawLength = pathLength * scrollPercentage;
// Draw in reverse
path.style.strokeDashoffset = pathLength - drawLength;
// When complete, remove the dash array, otherwise shape isn't quite sharp
// Accounts for fuzzy math
if (scrollPercentage >= 0.99) {
path.style.strokeDasharray = "none";
path.style.fill = "#47AF9A";
} else {
path.style.fill = "none";
path.style.strokeDasharray = pathLength + ' ' + pathLength;
}
});
});
body {
/* feel free to change height */
height: 5000px;
background: linear-gradient(
to bottom,
orange,
darkblue
);
}
#star-svg {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<h1>Scroll-to-draw</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200.6" id="star-svg">
<path fill="none" stroke="white" stroke-width="2" id="star-path" d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"></svg>
</body>
</html>
The problem I am facing is that since my website has a lot of content, I want to start this animation at a certain point/position because this animation works if you scroll and since I have a lot of content in my website, whenever I scroll, the animation is happening in the background and when I reach to it, it gets over. How would I modify my js code to make the animation work only at a certain time? Any suggestions?
For example:
document.addEventListener("DOMContentLoaded", function(event) {
// Get a reference to the <path>
var path = document.querySelector('#star-path');
// Get length of path... ~577px in this case
var pathLength = path.getTotalLength();
// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;
// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;
// Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();
// When the page scrolls...
window.addEventListener("scroll", function(e) {
// What % down is it?
// https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
// Had to try three or four differnet methods here. Kind of a cross-browser nightmare.
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Length to offset the dashes
var drawLength = pathLength * scrollPercentage;
// Draw in reverse
path.style.strokeDashoffset = pathLength - drawLength;
// When complete, remove the dash array, otherwise shape isn't quite sharp
// Accounts for fuzzy math
if (scrollPercentage >= 0.99) {
path.style.strokeDasharray = "none";
path.style.fill = "#47AF9A";
} else {
path.style.fill = "none";
path.style.strokeDasharray = pathLength + ' ' + pathLength;
}
});
});
body {
/* feel free to change height */
height: 5000px;
background: linear-gradient(
to bottom,
orange,
darkblue
);
}
#star-svg {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<h1>Scroll-to-draw</h1>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200.6" id="star-svg">
<path fill="none" stroke="white" stroke-width="2" id="star-path" d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"></svg>
</body>
</html>
How would I make the animation work after the last text goes here line and make it start from there? Any suggestions? Right now it does not work like that

In your scroll listener, you should check if the element is scrolled into view, if not, wait to run the animation until the element is in view on the page.
You can use this function to determine if an element is in view:
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
(from https://stackoverflow.com/a/488073/14981680)

jQuery code to change & fade background-image CSS ONLY

I need a jQuery background fader from background to background.
I have a base to go off, but have had no success.
I have all the proper libraries included, I have triple checked.
//Array of images which you want to show: Use path you want.
var images = new Array('img/bg_0.jpg', 'img/bg_1.jpg', 'img/bg_2.jpg');
var nextimage = 0;
doSlideshow();
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.face')
.css('background-image', 'url("' + images[nextimage++] + '")')
.fadeIn(500, function() {
setTimeout(doSlideshow, 1000);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="face" style="background-image: url('img/bg_5.jpg');" class="face">
<div class="face-body">
<div class="container text-center">
<h1 class="face-title one">
<?php echo SRV_NAME; ?>
</h1>
<h2 class="face-subtitle">
<?php echo SRV_SLOGAN; ?>
</h2>
</div>
</div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>

You have to use an <img> element if you wish to fade in/out.
A background can't be animated. Only elements can. A background isn't an element, it is a property of an element.
So what I suggest here is to get rid of the background idea and use an absolute positionned image element (to have it behind your text, as a background does).
Have a look at the snippet below:
//Array of images which you want to show: Use path you want.
var images = new Array('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg', 'https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781', 'https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg');
var nextimage = 0;
doSlideshow();
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.face')
.fadeOut(500,function(){
$(this).attr('src', images[nextimage++])
.fadeIn(500, function() {
setTimeout(doSlideshow, 1000);
});
});
}
.face{
position:absolute;
top:0;
left:0;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="face">
<img src="https://www.petmd.com/sites/default/files/what-does-it-mean-when-cat-wags-tail.jpg" class="face">
<div class="face-body">
<div class="container text-center">
<h1 class="face-title one">
NAME
</h1>
<h2 class="face-subtitle">
SLOGAN
</h2>
</div>
</div>
</section>

creating loop in jquery

I'm trying to build a function that changes background(color a), box(color b) and text color(color a) when a user clicks on the refresh button. I've set the color array, but couldn't figure out how to loop the array properly. Could anyone please help?
var colors = [
["#808080", "#f08080"],
["#2f4f4f", "#cdcdc1"],
["#F3E4C3", "#191970"],
["#DD5C3D", "#495496"],
["#ffbdbd", "#bdffff"],
["#c9c9ff", "#282833"],
["#fff5ee", "#4682b4"]]
I think I can do something like this below:
$("#refresh").click(function(){
$("box").animate({
backgroundColor: colors[0][1],
}, 500);
$("box").css("color", colors[0][0]);
$("background").animate({
backgroundColor: colors[0][0],
}, 500);
//add something that triggers loop here
});
And my html below:
<body>
<section id="main" class="box" style="margin-bottom: 10px">
<div id="city"></div>
<div id="detail"></div>
<div id="icon"></div>
<div id="temperature"></div>
<div id="fcicon" class="inrow">
<div id="f">F</div><div style="opacity: 0.5">/</div><div id="c">C</div>
</div>
<div id="refresh"><i class="fa fa-refresh"></i></div>
</section>

I don't think you need a loop. Try the code below. However i would recommend you to make separate css classes and toggle between them.
var colors = [["#808080", "#f08080"],
["#2f4f4f", "#cdcdc1"],
["#F3E4C3", "#191970"],
["#DD5C3D", "#495496"],
["#ffbdbd", "#bdffff"],
["#c9c9ff", "#282833"],
["#fff5ee", "#4682b4"]];
$(document).on(function(){
var i=0;
$("#refresh").click(function(){
if(colors.length==i+1){
i=0;
}else{
i=i+1;
$("box").animate({
backgroundColor: colors[i][1],
}, 500);
$("section").animate({
backgroundColor: colors[i][0],
}, 500);
$("background").animate({
backgroundColor: colors[i][0],
}, 500);
});
}
});

Edited my example to use your HTML, works great. I changed the class from .container to .box, as that's what you're using.
Here it is as a fiddle, in case.
// Array of color pairs that we'll use for background
// colors, text colors and border colors.
var colors = [
["#808080", "#f08080"],
["#2f4f4f", "#cdcdc1"],
["#F3E4C3", "#191970"],
["#DD5C3D", "#495496"],
["#ffbdbd", "#bdffff"],
["#c9c9ff", "#282833"],
["#fff5ee", "#4682b4"]
];
// The counter refers to which pair in the array we're
// currently referencing.
var counter = 0;
// When the refresh div gets clicked,
$("#refresh").click(function() {
// check the counter and increment or reset it.
if (counter >= colors.length - 1) {
counter = 0;
} else {
counter++
}
// Now, we want to animate CSS attributes on the
// container object. We'll use the color pair
// we're currently pointing to for the background
// text and border colors.
$(".box").animate({
backgroundColor: colors[counter][1],
color: colors[counter][0],
borderColor: colors[counter][0]
}, 500);
});
.box {
position: relative;
border: 1px solid blue;
height: 200px;
width: 200px;
}
.box #city {
font-weight: bolder;
font-size: 14px;
}
#refresh {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<section id="main" class="box" style="margin-bottom: 10px">
<div id="city">Worcester, MA</div>
<div id="detail"></div>
<div id="icon"></div>
<div id="temperature"></div>
<div id="fcicon" class="inrow">
<div id="f">F</div><div style="opacity: 0.5">/</div><div id="c">C</div>
</div>
<div id="refresh"><i class="fa fa-refresh"></i></div>
</section>
Added comments to make it a bit easier to follow.

you can simply keep track of the index by creating a closure.
function looper(){
let i = 0;
return function(){
$("box").animate({
backgroundColor: colors[i][1],
}, 500);
$("section").animate({
backgroundColor: colors[i][0],
}, 500);
$("background").animate({
backgroundColor: colors[i][0],
}, 500);
i++;
if(i === colors.length){
i = 0;
}
}
}
let change = looper();
now you can listen for the event and call the function "change" accordingly.

So I would store the value in the element via data(). Makes it really easy and reusable. Take a moment and read Decoupling Your HTML, CSS, and JavaScript.
The following code is reusable and extensible. Reusable by allowing multiple buttons to have different targets to refresh. Extensible by allowing you to add as many items to the animate as you want. Honestly I'd just put the color in the js-refresh button so each refresh button can have it's own array.
$(document).ready(()=>{
var colors = [
["#808080", "#f08080"],
["#2f4f4f", "#cdcdc1"],
["#F3E4C3", "#191970"],
["#DD5C3D", "#495496"],
["#ffbdbd", "#bdffff"],
["#c9c9ff", "#282833"],
["#fff5ee", "#4682b4"]];
$(".js-refresh").on('click', (e) => {
var $this = $(e.currentTarget);
var selector = $this.data('refresh-target');
$(selector).each((i,e)=>{
var $this = $(e);
var idx = $this.data('js-refresh-index') || 1;
idx = idx >= colors.length ? 1 : idx + 1;
$this
.data('js-refresh-index', idx)
.stop()
.animate({
backgroundColor: colors[idx-1][0],
}, 1)
.animate({
backgroundColor: colors[idx-1][1],
}, 500);
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"
integrity="sha256-H28SdxWrZ387Ldn0qogCzFiUDDxfPiNIyJX7BECQkDE="
crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="main" class="box" style="margin-bottom: 10px">
<div id="city"></div>
<div id="detail"></div>
<div id="icon"></div>
<div id="temperature" class="refresh-1">Temp</div>
<div id="fcicon" class="inrow">
<div id="f">F</div><div style="opacity: 0.5">/</div><div id="c">C</div>
</div>
<div class="js-refresh" data-refresh-target=".refresh-1">
<i class="fa fa-refresh"></i>
</div>
</section>

JQuery Animate from their docs
Animation Properties and Values
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.
My Html and JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Animate</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<select id="colors">
<option value="BlueWhite">Background: Blue, Color: White</option>
<option value="YellowBlue">Background: Yellow, Color: Blue</option>
<option value="WhiteRed">Background: White, Color: Red</option>
<option value="BlackWhite">Background: Black, Color: White</option>
</select>
<div id="main" class="box" style="margin-bottom: 10px">
<div id="city"></div>
<div id="detail"></div>
<div id="icon"></div>
<div id="temperature"></div>
<div id="fcicon" class="inrow">
<div id="f">F</div><div style="opacity: 0.5">/</div><div id="c">C</div>
</div>
</div>
<button id="refresh" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
</div>
<script>
$(document).ready(function () {
var colors = {
"BlueWhite": {
"Background": "#0000ff",
"Color": "#ffffff"
},
"YellowBlue": {
"Background": "#FFFF00",
"Color": "#0000ff"
},
"WhiteRed": {
"Background": "#ffffff",
"Color": "#ff0000"
},
"BlackWhite": {
"Background": "#000000",
"Color": "#ffffff"
}
};
$("#refresh").click(function () {
var selected = $("#colors").val();
var colorObj;
if(colors[selected] != undefined) {
colorObj = colors[selected];
} else {
colorObj = colors["BlackWhite"];
}
$("#main").animate({
backgroundColor: colorObj.Background,
color: colorObj.Color
}, function () {
$(this).css("backgroundColor", colorObj.Background).css("color", colorObj.Color);
});
});
});
</script>
</body>
</html>

Shifting forward in an array when iterating over elements

I have repeating elements (section) on a page. I want to iterate the background colors of the elements between three colors that are held in a array. And within some of those elements I have text (p) that I want to iterate through those same colors, except I want it to be the next color in the array as the background.
So if I have an array that looks like ["111111", "222222", "333333"], I want the background color of the first section to be #111111 and the color of the first p to be #222222. Also there are more elements on the page than there are items in the array so we need to loop back through the array. The page when complete should look like:
<body>
<section style="background-color: #111111;">
<p style="color: #222222;">foo bar</p>
</section>
<section" style="background-color: #222222;">
<p style="color: #333333;">foo bar</p>
</section>
<section style="background-color: #333333;">
<!--no p in this one-->
</section>
<section style="background-color: #111111;">
<p style="color: #222222;">foo bar</p>
</section>
</body>
I have the background-color part done but I can't figure out how to shift to the next item in the array and start over at the first item when necessary.
var bgColors = ["111111", "222222", "333333"];
$('section').each(function(i) {
var bgColor = bgColors[i % bgColors.length];
$(this).css('background-color', '#'+bgColor);
// How to do text color???
$(this).find("p").css('color', ???);
});
The script should be flexible so you can add and change colors. Thanks.
EDIT: I realized I left out an important point which is that not every section has a p so you can't just iterate through them each independently. Also due to a c&p mishap my html didn't match my JS. Apologies.

Just use i+1 for the modulo for the foreground
It is the same logic you already apply for the bgColor, you just need to go one more for the foreground
var bgColors = ["red", "green", "blue", "yellow"];
$(function() {
$('.section').each(function(i) {
var bgColor = bgColors[i % bgColors.length];
var fgColor = bgColors[(i + 1) % bgColors.length];
$(this).css('background-color', bgColor);
$(this).find(".text").css('color', fgColor);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<div class="text">foo bar</div>
</div>
<div class="section">
<div class="text">foo bar</div>
</div>
<div class="section">
<div class="text">foo bar</div>
</div>
<div class="section">
<div class="text">foo bar</div>
</div>

You can have a logic like
var bgColorIndex = i % bgColors.length;
var bgColor = bgColors[i % bgColors.length];
$(this).css('background-color', '#'+bgColor);
var fgColor = bgColorIndex + 1 === bgColors.length ? bgColors[0] : bgColors[bgColorIndex + 1];
$(this).find("p").css('color', fgColor);
It checks if the next index is equal to the length, set the color to the first item, otherwise set to the next color by incrementing.
Code example
var bgColors = ['red', 'blue', 'green', 'yellow'];
$(document).ready(function() {
$('.section').each(function(i) {
var bgColorIndex = i % bgColors.length;
var bgColor = bgColors[i % bgColors.length];
$(this).css('background-color', bgColor);
var fgColor = bgColorIndex + 1 === bgColors.length ? bgColors[0] : bgColors[bgColorIndex + 1];
$(this).find(".text").css('color', fgColor);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="section">
<div class="text">foo bar</div>
</div>
<div class="section">
<div class="text">foo bar</div>
</div>
<div class="section">
<div class="text">foo bar</div>
</div>
<div class="section">
<div class="text">foo bar</div>
</div>
</body>

Do you specifically need to do this in JavaScript for some reason, or would a pure CSS solution be preferable? Because you can achieve the same effect with :nth-child():
.section:nth-child(3n+1) {
background-color: #111;
}
.section:nth-child(3n+1) .text {
color: #222;
}
.section:nth-child(3n+2) {
background-color: #222;
}
.section:nth-child(3n+2) .text {
color: #333;
}
.section:nth-child(3n+3) {
background-color: #333;
}
.section:nth-child(3n+3) .text {
color: #111;
}
More performant, no FOUC, works for people with JavaScript disabled, etc.
Codepen: https://codepen.io/anon/pen/aLyOwJ

Fly-in content boxes on button click?

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;
}

Develop Reference

JavaScript is the programming language of the Web.

Raphael images/shapes are not showing on Javascript - javascript

Related

Animation in html,css,js

jQuery code to change & fade background-image CSS ONLY

creating loop in jquery

Shifting forward in an array when iterating over elements

Fly-in content boxes on button click?

Categories

Resources