Posts in category JavaScript
Active charts using Highcharts
- 14
- Sep
Active charts using Highcharts
If you are looking how to create active charts (or diagrams) with information – our new article is for you. I have browsed the web, and found one good and serious solution – Highcharts library. This is pure javascript library which offers interactive and intuitive charts. This library supports various of possible charts: area, line, spline, areaspline, pie, column and other. I think that this is the best way to produce information for viewers. In today’s demo I prepared several examples with different charts.
Read more
How to create a game using jQuery
- 12
- Sep
How to create a game using jQuery
Today we are making a simple puzzle game called “Fifteen”. The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tutorial is to look at this simple browser-based game and explain how it was made line by line. It’s a great way to learn jQuery. For this tutorial, We will use a 2D image square-sliding game I created last week and I will go over each line of code to demonstrate the train of thought. I really do believe that breaking this game up into explanations on per-line basis will help you understand how to use jQuery in your own projects.
Read more
3D CSS3 Book Generator with jQuery
- 30
- Aug
3D CSS3 Book Generator with jQuery
Today we made up my mind to develop something really interesting and useful for you. A new jQuery plugin – as a generator of books. The main idea is to display user friendly book basing on raw text (with images). The book consists of pages, each page consists of 2 sides (as in a usual book), there are buttons Back-Next at the sides of pages to navigate through the pages, and when we turn the pages we see that the pages are turned in 3D (powered by CSS3). In order to achieve this 3D effect we use CSS3 transform (rotate3d, preserve-3d and rotateY) and transition effects.
Read more
Webcam Video Capture in HTML5 and CSS3 filters
- 27
- Aug
Webcam Video Capture in HTML5 and CSS3 filters
As we know – HTML5 defines a new element called <video> for embedding video. Usually people use this element to embed a video into web page. It is very convenient. Because the <video> element is designed to be usable without any detection scripts. You can just specify multiple video files, and browsers that support HTML5 video will choose one based on what video formats they support. Now, let’s imagine that we can use the same element to access a user’s camera and microphone. Our article opens these boundaries. I’m going to show you how to capture a video from your webcam in HTML5, and even more, I will show you how to pass this video into <canvas> object, and even – how to apply custom CSS3 filters to our video.
How to create an animated old letter
- 24
- Aug
How to create an animated old letter
Today we will create an animated old letter. In this letter, we will use an animated pen. When the pen dries out – we’ll dip it in the ink. And even more, we add the feature to emulate the errors that will be erased during typing. Now let’s look at the implementation.
Javascript cross-domain api for your website
- 22
- Aug
Javascript cross-domain api for your website
Welcome our readers. Today I would like to give a small but very important lesson where we will create our own cross-domain javascript api. I think that many of you have already tried to implement something similar, and maybe you faced with the impossibility of normal operation with the API functions at third-party domains. Basically, you just can not make a normal AJAX requests to a remote server and receive a reply in your javascript function. And all because of security regulations. But today I’ll show you how to solve this problem.
Last.fm javascript API practice
- 15
- Aug
Last.fm javascript API practice
Today I would like to give you something new, we have already talked about different social networks like facebook, google or twitter, but we haven’t tried other services, as example – musical services. I’ve prepared for you an example of work with Last.fm. As we know, this is huge musical website with rich api. In our tutorial we are going to create a script with next functionality: In the beginning it will obtain the top weekly artists (chart), then, we will remember a first one artist (as a top artist), and in the next step we will obtain information about him. And finally, in the third step we will get the top tracks by him. I sure that such script will be very useful for any music website.
Read more
How to display twitter posts using javascript
- 10
- Aug
How to display twitter posts using javascript
I think that displaying your Twitter posts on your website is a wonderful way to show people in-time news. This feature can be very useful for your project. Because it can can inspire your website’s visitors to follow you on Twitter. I am going to create simple script which loads twitter posts and renders into HTML format using JsRender jQuery library. Everything is on the client side.
Facebook API – Get friends activity
- 08
- Aug
Facebook API – Get friends activity
Today I want to show you how to display activity feeds of your friends at your website. Ever wondered what your friends were doing on the Facebook Pages that you both like? Most of you can answer ‘yes’. And today we are going to display that activity feed at your website, I am going to use Facebook API (using fql.query). The result script can show us different feed types, for instance: status update, posted links, notes, photos, videos and other. Everything are located in ‘stream’ FQL table. So, let’s look to the realization.
How to get your Google+ profile info and friend’s activity using the Google JS API
- 01
- Aug
How to get your Google+ profile info and friend’s activity using the Google JS API
Today I would like to tell you about several interesting things. It is Google JavaScript API v3 and new generation of jQuery Templates – JsRender. I will show you how to setup authentication with Google (OAuth 2.0) and perform some API requests. One of them is obtaining info of logged-in member, and second one is obtaining an activity feed of your friends. Another side of our tutorial is jQuery templating. I will show you how to render HTML content using templates.
