background preloader

Raphaël Reference

Raphaël Reference
Creates a copy of existing animation object with given delay. delay number number of ms to pass between animation start and actual animation Returns: object new altered Animation object Animation.repeat(repeat)⚓➭ Creates a copy of existing animation object with given repetition. repeat number iterations of animation. Element.animate(…)⚓➭ Creates and starts animation for given element. params object final attributes for the element, see also Element.attr ms number of milliseconds for animation to run easing optional string easing type. callback function callback function. or animation animation object, see Raphael.animation Returns: object original element Acts similar to Element.animate, but ensure that given animation runs in sync with another given element. el element to sync with anim animation to sync with easing type. element Sets the attributes of the element. attrName attribute’s name value object of name/value pairs attrNames array in this case method returns array of current values for given attribute names key any Related:  raphael.js

Raphaël—JavaScript Library Processing.js JSON Raphael.js Tutorial Preview Download Free Preview Never mind the HTML5 canvas, here’s SVG with Raphael.js! For 15 years, front-end web developers have missed out on one of the most basic parts of any programming environment: drawing. Fortunately, browsers are now capable of displaying SVG: scalable vector graphics. In this 50 minute Raphael.js tutorial, you’ll benefit from tips and tricks we’ve learned from over a decade of working with drawing systems, and several years of working with Raphael. Whether you’re a back-end database developer or a front-end designer, you’ll become confident with basic drawing, text, animation, and interaction that’s now available to you with the straightforward API of Raphael.js and the open standard of SVG. Topics covered: Available as part of a PeepCode Unlimited subscription (including streaming on our iOS app!) Includes a typed transcript. Skills

Google Web Toolkit GWT is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, Blogger. It’s open source, completely free, and used by thousands of developers around the world. What’s New in GWT 2.8.0 What’s inside the toolbox? The GWT SDK contains the Java API libraries, compiler, and development server. Plugin for Eclipse The Plugin for Eclipse provides IDE support for GWT and App Engine web projects. Get Started Developing with GWT Write The GWT SDK provides a set of core Java APIs and Widgets. Constructing AJAX applications in this manner is more productive thanks to a higher level of abstraction on top of common concepts like DOM manipulation and XHR communication. Debug Optimize Run

An Introduction to the Raphael JS Library Raphael JS is a lightweight and super-sexy JavaScript framework that allows you to draw vector graphics in your browser! In this tutorial, I will introduce you to some basic drawing functionality, take a look at animation, provide DOM access and finally finish off by creating a cool widget for your site... Framework: Raphael JSVersion: 1.0Difficulty: Beginner to IntermediateEstimated Completion Time: 30 minutes Let's get started by downloading the Raphael JS framework from here. With that downloaded, let's set up a simple HTML document called index.htm and include Raphael in it. N.B. When we draw with Raphael, we do so onto a canvas. I generally prefer the latter method (b), since we usually know where our divs are. All our drawing methods will now be bound to the paper variable. Now that we have our canvas, let's draw some shapes onto it. First off, a circle. This will draw a circle with a radius of 80px with its center placed at x = 100, y = 100. Next, let's draw a rectangle.

RGraph: HTML5 canvas graph library based on the HTML5 canvas tag Creating a chart with raphael.js from a google spreadsheet - Jérémi Joslin's blog We want to get data from a google spreadsheet and display it as a chart using gRaphaël . We are going to transform the following spreadsheet into a bar graph. gRaphaël’s goal is to help you create stunning charts on your website. gRaphaël is based on raphael.js . Raphael.js is a small JavaScript library that should simplify your work with vector graphics on the web. It currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. You can download the code of the sample at the end of this article. 1. Google spreadsheet offers to serve its data thanks to the Google Data Protocol . 1.1 Preparing our spreadsheet Create a spreadsheet that look like our (2 columns: the first one contain the label, and the second one the data) Save and publish the spreadsheet (Warning! 1.2 Loading the spreadsheet data /* * Specify the information about our spreadsheet */ var spreadsheet_id = "tiRm6cBSE3AZJnyLC6Wlysw" , worksheet_id = "od6" ; 2. You have now a beautiful Graph. see the result

ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting - (HTTP) IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. Current version: 2.1 beta4. IE7.js Upgrade MSIE5.5-6 to be compatible with MSIE7. IE8.js Upgrade MSIE5.5-7 to be compatible with MSIE8. You do not need to include IE7.js if you are using IE8.js IE9.js Upgrade MSIE5.5-8 to be compatible with modern browsers. You do not need to include IE7/IE8.js if you are using IE9.js The script only fixes images named: *-trans.png If you want the fix to apply to all PNG images then set a global variable as follows: var IE7_PNG_SUFFIX = ".png"; You must set this variable before including the IE7.js script. <script src="IE8.js">IE7_PNG_SUFFIX=".png";</script> The suffix will ignore query string parameters. var IE7_PNG_SUFFIX = ":"; By default, the PNG will be stretched (this simulates tiling). You may link directly to these files if you wish:

Introduction to Raphaël.js Introduction SVG, short for Scalable Vector Graphics, is a XML-based language for describing objects and scenes. SVG elements can fire events and can be scripted with JavaScript. Drawing Your First Scene Let's begin by drawing a simple scene with Raphaël. Each SVG object can have attributes assigned to it for things like the the color, rotation, stroke color and size, etc. Drawing Advanced Shapes with Paths A path is a series of instructions used by the renderer to create objects. The code and figure below show a rectangle and closed curved drawn with paths. Drawing Text Having illustrations without the ability to draw text would be really boring, luckily, Raphaël provides two methods to draw text. The second method, print, draws the text as a collection of paths. The Vegur font isn't in Raphaël, nor is any font for that matter. Events The snippet below binds a function to rotate a given letter in "ROCKS" 45 degrees when it is clicked. SVG vs Canvas Authoring Tools for SVG svg-edit Inkscape

Universal Internet Explorer 6 CSS | Stuff & Nonsense - (HTTP) How do you answer the Internet Explorer 6 question? Design for better browsers, then design alternative solutions to handle IE6 bugs?Write a remedial IE6 stylesheet to address layout issues?Use JavaScript to bootstrap CSS support in IE6?Make your site look exactly the same in IE6 as in any other browser? As Jeremy wrote last year. All of these different methods for dealing with IE6 demonstrate that there's no one single answer that works for everyone. Design for better browsers, then design alternative solutions to handle IE6 bugsI've often written that designers shouldn't be limited by lowest common denominator browser capabilities. Are these the only options? No. Universal Internet Explorer 6 CSS When I asked myself why people visit my sites, and the ones that I make for other people, the answer was always “for the content”. universal-ie6-css on Google Code I think that Universal Internet Explorer 6 CSS pushes all the right buttons as a concept, but of course this is only version one. .

Animated Skills Diagram with Raphaël In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle […] View demo Download source In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs. Let’s start with the markup. The Markup The HTML structure is going to consist of a main container with the class ‘get’. The CSS In the CSS we will only do two things: hide the elements with the class ‘get’ and set the width and height of the div with the id ‘diagram': The JavaScript Now, let’s go one step further. Conclusion View demoDownload source