Hi I'm new to Js and I'm doing some simple moving of object with the Raphael library, but one of my functions doesn't work, even though it should.
Here's some of the code:
/*Moving Objects*/
var mainBall = paper.circle(650,340,30);
var mainRect = paper.rect(430,310, 50,50);
/*Moving Object attributes*/
mainBall.attr({fill:"45-purple-yellow"});
mainRect.attr({fill:"45-purple-yellow"});
and the functions
function leavePipeB1(){
mainBall.animate({cx:550, cy:340}, 1200, "linear", ball1ToMagnet);
}
function ball1ToMagnet(){
mainBall.animate({cx:130, cy:115}, 1300, "elastic", showRect);
}
function leavePipeR1(){
mainRect.animate({cx:550, cy:340}, 1200, "linear");
}
function hideBall(){
tempBall.hide();
}
function hideRect(){
tempRect.hide();
}
function hideEll(){
tempEll.hide();
}
function showRect(){
tempRect.show();
}
I call them like this:
hideRect();
hideEll();
leavePipeB1();
hideBall();
leavePipeR1();
But leavePipeR1() doesn't work.
Any way I could fix this?
This is because a Rect doesn't have a cx,cy property. Swap those for x,y instead.
Related
Alright, so I am having a bit of trouble with Raphael and automatic updating of elements.
I've got a file called objects.js which looks something like this:
window.onload = function() {
paper = Raphael(document.getElementById('ikoner'), 600, 200);
pump = paper.circle(50,100,50);
pump.data("id","pump");
pump.data("tag",':="output".tag5:');
}
function objectFill (table) {
paper.forEach(function(e){
var tagValue = e.tag.innerHTML;
var tagId = e.id.innerHTML.trim();
if (tagValue == 0) {
paper.getById(tagId).attr({fill:"white"});
}
}
}
On my main page I've got a script which then calls objectFill on a certain interval, and updates the fill color of my objects.
Now to the problem; when I run the page I get the error that paper is undefined in objectFill. How do I make sure that objectFill will be able to find the paper? I've also tried declaring it outside like:
var paper;
window.onload = function() {
paper = Raphael(document.getElementById('ikoner'), 600, 200);
}
But I do not get that to work either. Anyone know what the problem might be?
I'm getting to grips with SVG.js
I have a pattern effect that I've created and would like to use in a number of SVG's.
I can create it in one SVG with the following code...
$( document ).ready(function() {
var draw = SVG('geo').size(1200, 1700);
// 100 lines of js creating geometric pattern, effectively this...
var rect = draw.polygon(coordinates).fill('#fff').stroke({ width: 1, color:'#fff'}).opacity(0)
});
This creates an SVG with ID geo. But I'd like to use this code again to generate various SVG's, ideally with different options (colour etc).
SVG('geo') refers to a particular SVG, how do I make it so I can apply this to any SVG I want on the page?
Hope that made sense
You can define a function that does this repeatedly. Something like the following:
function create_svg(dom_id, width, height, coord) {
var draw = SVG(dom_id).size(width, height);
var rect = draw.polygon(coord)
.fill('#fff')
.stroke({
width: 1,
color: '#fff'
})
.opacity(0);
}
$(function() {
create_svg('geo', 1200, 1700, coordinates);
create_svg('geo2', 1000, 1500, other_coordinates);
)};
If you need to use the created SVGs further, later on in the code, you could make the create_svg function return the created SVG object to a variable in your document.ready function.
I want to repeat the animation of the myDoughnut animation every 5 seconds. At the moment it only animates on page load.
<script>
var doughnutData = [
{
value: 80,
color:"#74cfae"
},
{
value : 20,
color : "#3c3c3c"
}
];
var myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
</script>
I have tried using
setInterval("Chart();", 500);
I am still learning Javascript so a little unsure as to if I am referencing the correct function and where to place the setInterval code.
The animation can be viewed at the bottom of this website: http://www.chartjs.org/
Many thanks for any guidance and direction!
You should pass a proper function to setInterval.
I looked for a way to replay the animation of Chart object but i couldn't find any directive in ChartJS documentation.
Here is how you function should look like:
setInterval(function () {
myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
}, 2000);
Here is working JSFiddle.
setInterval takes a function as parameter.
Try:
setInterval(function(){ Chart(); }, 500);
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/
I am using tweenlite/tweenmax to do animations in an html file. I want to trigger animations based on scroll position (like www.onlycoin.com). However, I cannot figure out how to do a second animation on one imagine after I do the first one (in my example, I am trying to move an image left and then move it back right). Any idea how to do this? Here is what I have:
var controller = $.superscrollorama(),
handleComplete = function(elem) {
console.log('complete', elem);
$('#'+elem).css('rotation', 0);
};
var likeAnimations = new TimelineLite();
var likeReverse = new TimelineLite();
controller.addTween($('#one'),
likeAnimations.append([
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete:
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}})
])
})
]),
300,
400);
Any help would be awesome.
The special property onComplete accepts a function.. from the TweenMax Docs
onComplete : Function - A function that should be called when the tween has completed
so you would have to either make an anonymous function like this:
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete: function(){
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}
});
or you will have to put your tween inside a function, and have your first tween's onComplete callback reference a function.
myFunction() {
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete: myFunction
});
You are basically adding the tween for the onComplete callback, instead of the expected function.
Checkout the GreenSock TweenMax Docs