Animated timeline with javascript - javascript

I am trying to create some time line effect. It will have couple of points for each time with designated picture inside a circle.
I want them to be clickable. When I click, I want another picture(plane) to move from its current location to where it is clicked within 1 second and shrink and disappear. Something similar to following GIF.
I have found couple of examples but I couldn't put them together to achieve what I want. I really searched a lot but couldn't solve it on my own. I am an iOS developer and no background on web development.
I will appreciate if you can help me on this.

Give a relative position to the timeline. Then you can get the position of a clicked circle, and assign it to the movable one. Add CSS transitions to have a better visual result.
Example using jQuery:
$(document).on("click", ".point", function () {
var $this = $(this);
var $abs = $(".is-absolute");
$abs.css("top", $this.position().top);
$abs.css("left", $this.position().left);
});
http://jsfiddle.net/dsr4esn3/

Related

Multiple CSS Animation alignment Issue

I have been trying to trigger two animations placed at two different places simultaneously to move them away from each other via JavaScript - {{id}}.className. But as soon as the animation begins, the second element with id - p2 displaces automatically from its original position just before the animation starts.
Here is my Codepen link. And yeah, I'm using Bootstrap with this.
Can anyone help me out?
UPDATED
You remove all the class values from your two divs when you click on button.
So just replace :
e2.className = "pop2";
e1.className = "pop1";
By :
e2.classList.add('pop2');
e1.classList.add('pop1');
That will add the new class (pop1 and pop2) to the others existing by default (col-sm-7 and col-sm-5) and it work perfectly.

JS toggleClass right way

I've this project where when I click on the plant the scale changes and show some texts.
http://www.gaianet.com.br/Nissin-teste/
I've this project where I should click on a planet and scale's it and show another div by opacity.
Right now i've been trying to do by js using toggle class but I need some help to make it work right.
If I click on first planet it works fine, but when this planet is 'selected'and I click on another all the classes start to toogle and the scale and opacity goes crazy.I don't know how to make a 'reset' to the original css if I click on another planet when one has already changed the class.
$(".layer.planeta1").click(function(){
$(".institucional").toggleClass("escala-planeta repo1-1");
$(".planet-info1").toggleClass("opacidade-planeta ");
$(".educacao").toggleClass("escala-menor-planeta repo1-2");
$(".pdv").toggleClass("escala-menor-planeta repo1-3");
});
$(".layer.planeta2").click(function(){
$(".educacao").toggleClass("escala-planeta repo-2-1");
$(".planet-info2").toggleClass("opacidade-planeta ");
$(".institucional").toggleClass("escala-menor-planeta repo-2-2");
$(".pdv").toggleClass("escala-menor-planeta repo-2-3");
});
$(".layer.planeta3").click(function(){
$(".pdv").toggleClass("escala-planeta");
$(".planet-info3").toggleClass("opacidade-planeta ");
$(".educacao").toggleClass("escala-menor-planeta");
$(".institucional").toggleClass("escala-menor-planeta");
});
I'm sure there should a way better way to do that but I have no idea how.
Thanks a lot
I think I am clear on the acceptance criteria, but just to be sure, here is what I am going with:
When I click on a planet, I want it to scale.
If I click on a planet that is already scaled, I want it to reset to original scale.
When I click on a planet, I want to 'reset' any other planets to their original scale, and scale the planet I clicked on if it is not already scaled.
Given that, you might try being more explicit about what needs to happen when you click on a 'planet':
$('.planet').on('click', function(event){
$('.planet').removeClass('scale'); // Explicitly remove the scale class from other planets
$(this).toggleClass('scale'); // Scale the one I am clicking on, or if it's already scaled, revert it
});
A simplified example demonstrating this: http://codepen.io/anon/pen/xbMJRd
If it is creating so much of hassle using then I would use jQuery addClass and removeClass instead of toggleClass.
Another suggestion, I would save jQuery dom elements in a variable so that I dont search on entire dom again and again.

jQuery/Javascript/HTML transform div into another with animation

I am working on something that might require a bit of animation in html/css or some jQuery or such. The essence of the question lies in alternating one div with another (both located in the same area on the website) constantly...perhaps in ten second intervals. This fiddle here:
http://jsfiddle.net/arunpjohny/asTBL/
the html is here:
<div id="quote1">
<span class="quote">I am a quote</span>
<span class="author">Author Name</span>
</div>
<div id="quote2">I am another quote</div>
<div id="quote3">I am yet another quote</div>
and javascript is here:
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})
basically covers the alternating divs every x amount of seconds. The main issue I have is the animation/transformation part of it. Maybe using the fiddle's elements and layout, how would one make the divs alternate in a revolving door style animation. Where the first div revolves into the page essentially and the other side of that revolving door is the new page? And it does this every 10 seconds or so? I researched and maybe html2canvas is the way to go but I am unsure I could grasp that content. Any help?
UPDATE:
I'm an extreme newbie to coding. I found this wonderful site
http://davidwalsh.name/css-flip
that has the flip effect I'm looking for. Is there a way to use this with jQuery to make this effect occur every ten seconds on some div? Instead of the effect occurring everytime one moves the mouse over it?
The whole thing can be done just with CSS animations and 3D transforms, which give you functions to rotate things round an axis, and to do that continuously at regular frequencies.
For the continuous animation part of it, see an article at http://css-tricks.com/almanac/properties/t/transition/. For a demo of what can be achieved see a small continuously rotating display I put on one of my own sites at http://www.dataprotectioncourse.co.uk/ (it needs a recent version of IE to see it in action, but works on all the other browsers fine). And you already have the reference you quoted to tell you how to rotate things.
You just have to combine the rotations with the continuous animating to get what you want.

Possible to use javascript to create a static-border/having webpages slide between one another

edit: I don't want to just take content from different pages and load it into the current page. What I really want to do is load different html files that will be interactive within the television. I have found that it is difficult to do this because you can't load html files into DIV's and you can't click on links through a transparent png file.
Hello,
I am building a website for a tv show that my friends and I make called Every Single Day.
here you can see the mock up of what I have so far:
http://www.uvm.edu/~areid/cs195/final/S/S.html
as of right now, the image I am using is just one big image that I sliced up with Photoshop.
What my goal is, is to use some sort of script to make it so the outside television will stay in place statically and the web-content within the television will transition without reloading the outer-most television.
I wanted to combine this technique with something similar to the fss slider script to allow each page on the site to slide, making it look like it is a continuation of the room. -Perhaps this isn't even the best way to achieve my desired result.
I have all of my images drawn and sliced, all I need now is some direction in what exactly to search for to find the pieces I am looking for.
Thank you very much, I am pleased to have joined this community,
cooper reid
Edit 5: http://jsfiddle.net/wdm954/pqAJK/10/ (Shows addition content.)
Edit 4: http://jsfiddle.net/wdm954/pqAJK/7/
This demo includes panning to specific frames.
var h = $('.clickable div').height(); //height of a single content DIV
var divCount = 0;
$('.clickable div').each(function() { divCount++; }); //count number of content DIVs
$('.pan').click(function(e) {
e.preventDefault(); //prevent default action (of <a>)
if ($('.content div').is(':animated')) return false; //disable click while animating
var x = $(this).attr('href'); x = $(x).index(); //get index of destination element
$('.content div').animate({top: -x*h +'px'}, 2000); //animate to destination
});
$('#tv-right').click(function() {
if ($('.content div').is(':animated')) return false; //disable click while animating
$('.content div').animate({top: '-='+h+'px'}, 2000); //animation
//if last div then go back to the start
if ($('.content div:last').css('top') == (-h * (divCount - 1)) +"px") {
$('.content div').stop().animate({ top: '0px' }, 1000);
}
});
Edit 3: http://jsfiddle.net/wdm954/pqAJK/5/
Ok, check this demo out. Clicking on the right side of the TV (where you may put some buttons) will scroll the content in the screen. When you reach the last content section, the next click will return to the first content section. I layered the content so the background divs scroll behind the TV image and the content scrolls above (so you can click on it. There are a few other tricks thrown in but look it over and you should get the idea.
Edit 2: http://jsfiddle.net/wdm954/pqAJK/3/ (Click the TV to see the transition. This has content divs instead of just a background image).
Edit: Check out this demo: http://jsfiddle.net/wdm954/pqAJK/
I would first cut out the screen part of the TV and save it has a .png with transparency so you can see what is behind the screen portion of the TV.
Then you can add a background image and animate that with jQuery to slide into view the portion you would like to display.
I *personally wouldn't use any slices, kind of an old school technique for when most people didn't have high speed connections.
Wrap everything inside the outer television in a <div>
Create seperate HTML pages that just has the HTML of the content that you want inside the television.
Use jQuery's AJAX get method to get the HTML for the page without refreshing it.
e.g. Your "single" image is in a <td> with ID "rightframe". So when rightframe is clicked, you might want to get the html of a page called single.html and put that inside the television (let's assume your <div> or <table> that has the code has ID content):
$('#rightframe').click(function() {
$.get('single.html', function(data) {
$('#content').html(data);
});
});
Edit: For the sliding part, you would have to create two separate tables/divs side by side, one for the current page, and one for the page that is being loaded. Then you could use a jQuery plugin like Slidy http://www.wbotelhos.com/slidy/ to transition between them.
Personally I think it would be much cooler if you could put an animated GIF of TV white noise on the television while the page is loading :)
Something along the following: http://jsfiddle.net/Vzdu7/

Changing Button Attributes to Match Slider Window

Greets,
First - this site is incredible. I've learned a ton of great things here!
I'm using a jquery based slider program to display a sequence of pictures (a series of books). Beneath the slider window I've positioned a "PDF" buttons. I'm trying to sort how to have the button download the file associated with whatever image is currently displayed in the slider box. So if "Picture #3" is showing in the slider window I need the PDF button to be associated with the respective #3 file. I believe I need to change each button's attributes dynamically to match what's showing in the slider window.
You can view the beta site at beta
I suspect I'll need some sort of javascript to snag the click event and feed it to the button's attributes. That's as far as my shaky legs can carry me with this one. Can anyone point me in the right direction? I'm a real noob at this and learning slowly so use small words!
Cheers,
TY
You're on the right track. I think this would probably work, but I'm not used to culling from arrays of jQ elements.
Put the filename into an alt tag in your list items, then use this script:
$('#download-button').click( function() {
var left_pos = $('ul').css('left');
var win_width = $('ul').innerWidth();
left_pos = left_pos * (-1) /* Will convert from negative to positive */
var slide_num = left_pos/win_width;
var slides = $('ul').find('li');
$(this).attr('src', 'path/to' + slides[slide_num].attr('alt'));
});
Also, upon checking the living DOM while playing around with the slider, I noticed that it seemed to jump a bit if you changed directions toward the end of/beginning of the slides. You may want to investigate that

Categories