Develop Reference

Javascript play button for animation

I have a Javascript animation using Raphael which is in an external file linked to HTML. I would like to have the user click on the animation to start it rather than the animation starting as soon as the page is loaded.
window.addEventListener("load",function(){
var paper = new Raphael(document.getElementById("animation"), 800, 600);
var img = paper.image("backimg.jpg",0,0,950,600);
img.attr({"clip-rect":"0,0,800,600"});
img.addEventListener("click",function() {
var squ = paper.rect(-100,50,100,100);
squ.attr("fill", "#ffffff");
squ.animate({transform: "T450,0"}, 2000, "ease-out", explode);
var cir2 = paper.rect(400,100,1,1);
function explode(){
cir2.attr("fill","#f00");
cir2.animate({ transform:'s100' }, 2000);
}
});
});

Thank you OP for providing the code. The Raphael JS library uses SVG so the only applicable solution is to set a click event listener to the parent node which, in this case, it the element with an id of animation.
Examine the code snippet:
//https://www.w3schools.com/css/img_fjords.jpg
window.addEventListener("load",function(){
var animation = document.getElementById('animation');
var paper = new Raphael(animation, 800, 600);
var img = paper.image("https://www.w3schools.com/css/img_fjords.jpg",0,0,950,600);
img.attr({"clip-rect":"0,0,800,600"});
animation.addEventListener("click",function() {
var squ = paper.rect(-100,50,100,100);
squ.attr("fill", "#ffffff");
squ.animate({transform: "T450,0"}, 2000, "ease-out", explode);
var cir2 = paper.rect(400,100,1,1);
function explode(){
cir2.attr("fill","#f00");
cir2.animate({ transform:'s100' }, 2000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<div id="animation"></div>
Hopefully this is helpful.

if you want doing it using a button it should look like this:
<button onclick="myAnimation()">Play Animation</button>
where myAnimation is the name of the function that runs the animation.

Javascript class on path element

I'm creating a interactive map with svg and I have converted the svg format to a javasript file (rahpael). I want to put a class on a path element, to create a hover effect, but I can't seem to get it to work:
var path_cz = rsr.path("M513.4,537l-329,19.3L209.5,666c0,0,9.5,36.8,51.5,48.8l108,22.7c13.3-16.7,119-43.4,175.6-8.7l165.7-58.6 c0,0,210.2-54.5,113.6-150.5c-33.3-27.3-61.9-50.4-61.9-50.4l-72.8-5.5l-46.9,2l-154,6.7l-2.6,21L513.4,537z").attr({fill: '#4F217C',parent: 'farver','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_cz');
I've tried .attr("class","classname"); and some other stuff inside .attr, but still nothing..
Any suggestions would be appreciated, thx :)

As you are using Raphael JS, the easiest way to do this is to hook into the hover method that Raphael supplies out of the box and update it that way.
$(document).ready(function() {
var rsr = Raphael(0, 0, 1000, 1000);
var path_cz = rsr.path("M513.4,537l-329,19.3L209.5,666c0,0,9.5,36.8,51.5,48.8l108,22.7c13.3-16.7,119-43.4,175.6-8.7l165.7-58.6 c0,0,210.2-54.5,113.6-150.5c-33.3-27.3-61.9-50.4-61.9-50.4l-72.8-5.5l-46.9,2l-154,6.7l-2.6,21L513.4,537z").attr({fill: '#4F217C',parent: 'farver','stroke-width': '0','stroke- opacity': '1'}).data('id', 'path_cz');
path_cz.hover(function() {
path_cz.node.setAttribute('class', 'one');
}, function() {
path_cz.node.setAttribute('class', 'two');
});
});
For an example, here is a fiddle: http://jsfiddle.net/n9Mt6/1/

Add transition to images on my website

I have this code:
<script type="text/javascript">
var aImages = [
"images/gaming/GTAV/GTAVReviewImage1.jpg",
"images/gaming/GTAV/GTAVReviewImage2.jpg",
"images/gaming/GTAV/GTAVReviewImage3.jpg",
"images/gaming/GTAV/GTAVReviewImage4.jpg",
"images/gaming/GTAV/GTAVReviewImage5.jpg",
"images/gaming/GTAV/GTAVReviewImage6.jpg",
"images/gaming/GTAV/GTAVReviewImage7.jpg"];
var oImage = null;
var iIdx = 0;
function play() {
try {
if (oImage===null) { oImage=window.document.getElementById("review-images"); }
oImage.src = aImages[(++iIdx)%(aImages.length)];
setTimeout('play()',5000);
} catch(oEx) {
}
}
</script>
which changes the image on this page: http://chrisbrighton.co.uk/GTAV.php every five seconds.
How can I add image transition to it?
UPDATE: When I add -webkit-transition to the img tag nothing happens.
Thanks.

There are different ways to do it. A lot of people have went to CSS3 now that there is some really cool animating and transition effects... You can control your ccs3 effects using javascript. For a detailed tutorial check - controlling animations with javascript

How can I permanently set the options of jquery.typer()?

I'm using Layervault's jquery.typer (https://github.com/layervault/jquery.typer.js), with a timeout function to delay it.
I'm trying to use their default formula on the page for setting the options permanently, but, if I either write:
setTimeout(function(){
$('[data-typer-targets]').typer();
}, 4500);
$.typer.options.typerInterval = 3500;
or
$.typer.options.typerInterval = 3500;
setTimeout(function(){
$('[data-typer-targets]').typer();
}, 4500);
The typer initializes, but the options don't remain in place; the typerInterval always reverts back to the default of 2000. If I hard code the change in jquery.typer.js source, the change is permanent. I'm thinking it might be a lack of understanding javascript sytax? Thanks for any help!

try:
$('[data-typer-targets]').typer({
typerInterval : 3500
});
do like:
setTimeout(function(){
$.typer.options.typerInterval = 3500;
$('[data-typer-targets]').typer();
}, 4500);

Custom transition timing in impress.js

I'm trying to create different transition times for each slide in an impress.js presentation.
I found the code below in a book about impress.js. But checking it on JSLint it shows errors. I am not good enough with javascript to correct this myself. Anybody willing to help me out?
Edit: I need a solution without jQuery. This is because impress.js allows you to navigate through the presentation with spacebar and arrow keys and I don't want to lose that functionality.
I found that when navigating with the keys (while jQuery is timing the auto-advance) it does not respect the position where you navigated to, but forces you away from where you are. I would like instead that if you navigate to a slide (position) the auto-advance starts running the custom set time for that particular slide and advances to the next slide when the set amount of time has passed. This would be an awesome addition to impress.js. I hope this can be done. Thanks for your effort!
JSFiddle: http://jsfiddle.net/5sSE5/8/ (script added at the end of impress.js)
var step_transitions = [
{ "slide": 1, "duration": 2000 },
{ "slide": 2, "duration": 4000 },
{ "slide": 3, "duration": 1000 }
];
$(document).ready(function () {
var time_frame = 0;
step_transitions.filter(function (steps) {
time_frame = time_frame + steps.duration;
setTimeout(function () {
api.goto(steps.slide);
}); time_frame;
});
});
Addition: below script respects keyboard navigation, but all the slides have the same transition time.
var impress = impress();
impress.init();
document.addEventListener('impress:stepenter', function(e){
if (typeof timing !== 'undefined') clearInterval(timing);
var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 10000); // in ms
timing = setInterval(impress.next, duration);
});

There is an error in your code in the setTimeout:
setTimeout(function () {
api.goto(steps.slide);
}, time_frame);
It seems that the time_frame variable should be second argument of the setTimeout method.
Update
You also forgot to initialize the api variable before using it:
var api = impress();
You also need the jQuery library to be able to use the $ function.
See updated fiddle
Update 2
I reworked your code to make it continue from the first slide after the last is reached:
var step_transitions = [
{ "slide": 0, "duration": 3000 },
{ "slide": 1, "duration": 4000 },
{ "slide": 2, "duration": 2000 }
];
$(document).ready(function () {
var time_frame = 0,
api = impress(),
current_step_index = 0,
do_transition = function (){
var step = step_transitions[current_step_index];
api.goto(step.slide);
current_step_index++;
if(current_step_index >= step_transitions.length){
current_step_index = 0;
}
setTimeout(do_transition, step.duration);
};
//initial run
do_transition();
});
Note, that slides must start from 0, not 1.
See updated fiddle