Monthly Archives: December 2015

Twitter Heart Button Animation Using CSS3

By | December 6, 2015

Twitter Heart Button Animation Using CSS3

Today twitter has been introduced a new heart (like) button, it is actually a replacement for favorite button. I love the way twitter has implemented cool animation effect for click action. This post will explain you, how to implement this using CSS3 and Jquery. Take a quick look at the live demo and click the hearts.

Twitter Heart Button Animation Using CSS3

How To Login With Google Account oAuth in PHPHow To Login With Google Account oAuth in PHP

HTML Code
Display the news feed based on database message ID.

Frames Background Image
Click on the image for large view.

 

Twitter Heart Button Animation Using CSS3

CSS Code
Displaying first heart frame.

CSS Animation
Here CSS code is animating the background image frame by frame,

Modify the animation timing functions based on your background frames.

JavaScript Code
Contains javascipt code $(“body”).on(‘click’,’.heart’,function(){}heart is the class name of the DIV tag. Using $(this).attr(“id”) calling DIV tag ID value.

All Done Have Fun!

Don’t Forget To Comment .

 

 

How To Display Browser Notifications from Web Application

By | December 2, 2015

How To Display Browser Notifications from Web Application

Browser desktop notification system, using this you can push notifications for event reminders, message information like whatsapp to desktop users in realtime from your web project. Very few line of JavaScript code, that can help you to interact with browser notification system. I have implemented this for 9lessons.info, you will find a most popular article notification for every 3 minutes. Take a quick look a the live demo.

How To Display Browser Notifications from Web Application

How To Login With Google Account oAuth in PHPHow To Login With Google Account oAuth in PHP

Note: Try this demo with Chrome and Firefox

Start Browser Notification
This code will initialize the browser notification system, read more about Vanilla JS(Plain JavaScript)

Push Notification
This function will help you to push notification data, here you have to modify icon URL. You can pass title, description and URL values.

Firefox mozilla notification documentation

Demo Array
The array contain most popular articles on chainwebber.com

Jquery
Contains javascipt code. $(“#notificationButton”).click(function(){}- notificationButton is the ID name of input button.

Vanilla JS
Plain JavaScript

SettimeOut
Contains simple JavaScript code, calls after 2 minutes. Here you can modify milliseconds values.

Thanks!