PHP – HTML5

August 18, 2016 selvabalajee Leave a comment

PHP

Starting with PHP 5, the object model was rewritten to allow for better performance and more features. This was a major change from PHP 4. PHP 5 has a full object model.

features in PHP 5 are the inclusions of visibility, abstract and final classes and methods, additional magic methods, interfaces, cloning and typehinting.

PHP treats objects in the same way as references or handles, meaning that each variable contains an object reference rather than a copy of the entire object. See Objects and References

Features

Visibility : The visibility of a property or method can be defined by prefixing the declaration with the keywords public, protected or private.

HTML

How do you improve the performance of a website.

code unification :Each CSS file must be loaded before the page can be displayed in an internet browser.
compress css and javascript files:We can compress a CSS file by removing unnecessary spaces, comments,
Using sprite images instead of multiple images
Always put javascripts at the bottom of the page.

What is bootstrap ?

Bootstrap is CSS framework for developing responsive, mobile first projects on the web. Current version of bootstrap is v3.3.6. Bootstrap also comes with two preprocessors: less and saas.

Bootstrap uses 12 column grid system. Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen size

What new features has been added in bootstrap 3?

New Glyphicons icon font!
Smallest file size.
New grid system.
its uses CSS compressors (Less/Saas)

Difference between container and container-fluid in bootstrap?

.container has a max width pixel value, whereas .container-fluid is max-width 100%.

.container-fluid continuously resizes as you change the width of your window/browser by any amount.

.container resizes in chunks at several certain widths, controlled by media queries (technically we can say it’s “fixed width”

because pixels values are specified, but if you stop there, people may get the

impression that it can’t change size – i.e. not responsive.)

Tell me latest jquery version ?

Latest version of jquery is V-3.1.0 (11-8-2016)

Difference between html5 tag and normal tag ?

HTML5 tag are called as semantic tags.

A semantic element clearly describes its meaning to both the browser and the developer.

<aside>

<main>

<mark>

<nav>

<time>

Difference between live and bind function in jquery.

The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs.

The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead.

Some new fautures of css3?

border-radius (border-radius: 25px;)
box-shadow (box-shadow:3px 3px 3px 2px #797979;)
Text Shadow ( text-shadow: #aaa 2px 2px 2px;)
Multiple Backgrounds

.container {

/* fallback */

background: url(image/bg1.png) no-repeat;

/* modern browsers */

background: url(image/bg1.png) 0 0 no-repeat,

url(image/bg2.png) 100% 0 no-repeat;

}

Transition

We can add animation to an element using transition. We need to specify these parameters.

transition-property
transition-duration
transition-timing-function
transition-delay

div {

width: 150px;

height: 150px;

background: red;

/* For Safari 3.1 to 6.0 */

-webkit-transition-property: height;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in-out;

-webkit-transition-delay: 1s;

/* Standard syntax */

transition-property: height;

transition-duration: 2s;

transition-timing-function: linear;

transition-delay: 1s;

}

what is closest in jquery ? What’s the difference between .closest() and .parents(‘selector’)?

.closest() method begins its search with the element itself before progressing up the DOM tree, and stops when current element matches the selector.

.parents() Begins with the parent element, get the parent of each element in the current set of matched elements

What is json?

JSON stands for JavaScript Object Notation. JSON is language independent, lightweight data interchange format. JSON data is written as key value pairs.

Eg :”name”:”Selva”

Explain position property in css?

The CSS positioning properties allow you to position an element. There are four different positioning methods: Static, Fixed, relative, absolute.

Difference between $(this) and this in jquery?

Keyword ‘this’ is a native DOM element. $(this) is a jQuery object that allows you to call functions such as .addClass() on it.

Will HTML5 canvas supported in IE ?

HTML5 canvas is not supported in IE version less than 9. ExplorerCanvas(excanvas) a JS library is the option to render HTML5 canvas for IE6, 7, and 8.

what is jsonp?

JSONP is nothing but JSON with padding. JSONP is mostly used in RESTFull APIs(Cross domain request). JSONP is a simple trick to overcome XMLHttpRequest same domain policy. (As you know one cannot send AJAX (XMLHttpRequest) request to a different domain.). JSONP request appends the callback function with URL. Eg: http://www.abcs.com/example.php?callback=simplecallback

Whenever the server receives the callback it will return the data. The data can be accessed using that call back function.

A simple implementation of JSONP request.

(function() {

var flickerAPI = “http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?”;

$.getJSON( flickerAPI, {

tags: “mount rainier”,

tagmode: “any”,

format: “json”

})

.done(function( data ) {

$.each( data.items, function( i, item ) {

$( “” ).attr( “src“, item.media.m ).appendTo( “#images” );

if ( i === 3 ) {

return false;

}

});

})();

// ]]>

How do you create a simple plugin in jquery?

Sample plugin creation code is given below:

(function($){

$.fn.showLinkLocation = function() {

return this.filter(‘a’).each(function(){

$(this).append(

‘ (‘ + $(this).attr(‘href’) + ‘)’

);

});

};

}(jQuery));

// Usage example:

$(‘a’).showLinkLocation();

List out some CSS Frameworks for creating responsive templates?

Bootstrap

-> Bootstrap is mobile first framework. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Foundation 3

-> Foundation 3 is built with Sass, a powerful CSS preprocessor. “Pricing Tables” is an interesting componenet in foundation 3. Pricing tables are suitable for marketing site for a subscription-based product. It also offers super cool features like Right-to-left text direction support.

Skeleton

Skeleton is a small collection of CSS files that can help to rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

YAML 4

YAML 4 is built on SAAS. You can check the documentation in the above link.

ResponsiveAeon

Responsive Aeon is a simple, fast, Intuitive css framework. It contains almost 120 lines of code and only 1kb minified.

What is the difference between canvas and svg?

<canvas> is an HTML element which can be used to draw graphics using JavaScript. This can be used to draw graphs, create animations etc.

The <canvas> element is not supported in older browsers, but is supported in recent versions of all major browsers.

The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property. The declaration is as follows.

SVG stands for Scalable Vector Graphics (SVG) is based on XML markup language, for describing 2D vector graphics.

Can you explain the difference between cookies, sessionStorage and localStorage.?

LocalStorage stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data – unlike cookie expiry.

Local storage and session storage are perfect for non sensitive data. The data stored in localStorage and sessionStorage can easily be read or changed from within the client/browser

so should not be relied upon for storage of sensitive or security related data within applications.

Data stored in the SessionStorage is only available for the duration of the browser session (and is deleted when the window is closed) – it does however survive page reloads.

In cookie, we can store 4096 bytes of data. Data stored in the cookie can be hacked by the user, unless the site uses SSL. We can also prevent injections like Cross-Site Scripting (XSS)/Script injection using httponly in the header.

Explain about quirks mode?

There are three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode.

Quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition.

However, invalid HTML – with respect to the chosen DOCTYPE – can also cause the browser to switch to quirks mode.

What is meant by hardware acceleration?

It means the graphical rendering is done on dedicated hardware (your GPU / graphics card) rather than your CPU. Hardware acceleration generally produces more fluid animation.In general you should always enable hardware acceleration as it will result in better performance of your application.

This will usually be a higher frame rate (the number of images displayed per second), and the higher the frame rate, the smoother the animation.

How can you load css resources conditionally?

Using CSS media querises we can load CSS contidionally. If you want to load the stylesheet for the device less than 600px, then you can declare as below.

This style sheet will only load for screen size less than 600px.

Difference between article and section tag in HTML5. How can you nest them in your document?

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

So basically the section element should contain related information bunched under a common heading.

The HTML5 <article> element represents a complete composition in a web page or web application that is independently distributable or reusable, e.g. in syndication.

This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

We can nest article inside a section tag and vice versa. This is completely legal interms of HTML5.

What happen when you dont use doctype?

When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications.

Also HTML5 tags such as < article >,< footer >, < header >, < nav >, < section > may not be supported if the Doctype is not declared.

What are data- attributes good for?

The data-* attributes is used to store custom data related to the page or application.The custom data can be used in JavaScript to complete events or animations.

Which set of definitions, HTML attributes or CSS properties, take precedence?

CSS properties take precedence over HTML attributes. If both are specified, HTML attributes will be displayed in browsers without CSS support but won’t have any effect in browsers with CSS support.

How do I eliminate the blue border around linked images?

in your CSS, you can specify the border property for linked images:

a img { border: none ; }

However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.

Explain about HTML5 local storage ?

There are two ways to store data in HTML as objects locally :

localStorage – store data across session acess
sessionStorage – storing data for current session only

Data will be stored in key/value pair format.

example:

localStorage.empid=”420″;

sessionStorage.companyname = “Thiruvarur info tech ”;

explain CSS media queries ?

CSS media queries are used to develop responsive templates for different layout of screen, print, mobile , tablet or any other resolutions

CSS media queries can be added in 3 ways as like CSS style sheet :

Internal stylesheet : <style type=”text/css”>

@media only screen and (max-width: 600px){

/* rules apply to the device resolution is 480px or less */

}

</style>

Imported stylesheet : @import “tablet.css” (min-width: 800px) and (max-width: 1200px);

External stylesheet: <link rel=”stylesheet” type=”text/css” href=”deskto.css” media=”screen and (min-width: 1200px), print and (min-resolution: 300dpi)” />

explain css inheritance ?

Inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element. For the root element, which has no parent element, the inherited value is the initial value of the property.

what is javascript inheritance ?

In simple terms, inheritance is the concept of one thing gaining the properties or behaviours of something else.

Inherited children inherit their parent’s behaviour To say A inherits from B, is saying that A is a type of B.

In JavaScript You must use a special object called prototype.

function Animal() {}; // This is the Animal *Type*

Animal.prototype.eat = function () {

alert(“All animals can eat!”);

};

function Bird() {}; // Declaring a Bird *Type*

Bird.prototype = new Animal(); // Birds inherit from Animal

Bird.prototype.fly = function() {

alert(“Birds are special, they can fly!”);

};

The effect of this is that any Birds you create (called an instance of Bird) all have the properties of Animals

var aBird = new Bird(); // Create an instance of the Bird Type

aBird.eat(); // It should alert, so the inheritance worked

aBird.fly(); // Important part of inheritance, Bird is also different to Animal

var anAnimal = new Animal(); // Let’s check an instance of Animal now

anAnimal.eat(); // Alerts, no problem here

anAnimal.fly(); // Error will occur, since only Birds have fly() in its prototype

explain javascript associative array ?

Associative arrays are where we can associate a key string with a value string

JavaScript objects are also associative arrays.

i.e the property emp.Name can also be read by calling emp[‘Name’]

We can access each property by entering the name of the property as a string into the array

it refers to accessing the DOM elements of HTML also [as object or associative array]

explain JS Namespace ?

Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace

and also helps to organize blocks of functionality into easily manageable groups that can be uniquely identified.

JavaScript doesn’t builtin support of namespacing but using objects and closures we can achieve a similar effect.

javascript Namespacing patterns :

1) Single global variables :

var myApplication = (function(){

function(){

/*…*/

return{

/*…*/

}

})();

2) Object literal notation :

var myApplication = {

getInfo:function(){ /**/ },

// we can also populate our object literal to support

// further object literal namespaces containing anything

// really:

models : {},

views : {

pages : {}

collections : {}

};

3) Nested namespacing :

var myApp = myApp || {};

// perform a similar existence check when defining nested

// children

myApp.routers = myApp.routers || {};

myApp.model = myApp.model || {};

myApp.model.special = myApp.model.special || {};

// nested namespaces can be as complex as required

4) Immediately-invoked Function Expressions :

// an (anonymous) immediately-invoked function expression

(function(){ /*…*/})();

// a named immediately-invoked function expression

(function foobar(){ /*..*/}());

// this is technically a self-executing function which is quite different

function foobar(){ foobar(); }

5) Namespace injection :

// define a namespace we can use later

var ns = ns || {}, ns2 = ns2 || {};

// the module/namespace creator

var creator = function(val){

var val = val || 0;

this.next = function(){

return val++

};

this.reset = function(){

val = 0;

}

creator.call(ns);

// ns.next, ns.reset now exist

creator.call(ns2, 5000);

// ns2 contains the same methods

// but has an overridden value for val

// of 5000

Type of webservice ?

there are two types of web service….1. SOAP [Simple Object Access Protocol] Webservice and 2. RESTful [REpresentational State Transfer] Webservice.

SOAP is a messaging protocol , REST is a design philosophy , not a protocol.

SOAP:

you define your interface in a .wsdl file, which describes exactly which input parameters are expected and how the return values will look like

there are tools to generate the .wsdl files out of java class hirarchies. JAXB for example

there are also tools to generate java objects/classes as part of eclipse for example (don’t know the name in the moment).

SOAP is very strict. Every request is validatet against the wsdl before processing.

A good but not so easy to start with framework for SOAP WS is Apache CXF

REST: (no hands on experience up to now, feel free to correct and improve 😉 ):

a way to access a webserver or web application to retrieve data from or send to it.

it’s only negotiated, how it is accessed.

common is something like this http://server.domain.com/app/type/id=123 to retrieve object of type type with id=123 very intuitive, but no automatic validation of requests.

The main advantages of REST web services are:

Lightweight – not a lot of extra xml markup
Human Readable Results
Easy to build – no toolkits required

SOAP also has some advantages:

Easy to consume – sometimes
Rigid – type checking, adheres to a contract
Development tools

What is namespacing?

In many programming languages, namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace. They’re also extremely useful for helping organize blocks of functionality in your application into easily manageable groups that can be uniquely identified.Namespacing Fundamentals

Single global variables
Object literal notation
Nested namespacing
Immediately-invoked Function Expressions
Namespace injection

Single global variables

One popular pattern for namespacing in JavaScript is opting for a single global variable as your primary object of reference. A skeleton implementation of this where we return an object with functions and properties can be found below:

var myApplication = (function(){

function(){

/*…*/

return{

/*…*/

}

})();

Object literal notation

Object literal notation can be thought of as an object containing a collection of key:value pairs with a colon separating each pair of keys and values. It’s syntax requires a comma to be used after each key:value pair with the exception of the last item in your object, similar to a normal array.

var myApplication = {

getInfo:function(){ /**/ },

// we can also populate our object literal to support

// further object literal namespaces containing anything

// really:

models : {},

views : {

pages : {}

collections : {}

};

One can also opt for adding properties directly to the namespace:

myApplication.foo = function(){

return “bar”;

}

myApplication.utils = {

toString:function(){

/*..*/

export: function(){

/*..*/

}

Nested namespacing
Immediately-invoked Function Expressions (IIFE)s
Namespace injection

Explain about css specificity

what is the use of box shadow and tell me the syntax.

how to acheive rounded corners in css3.

How will you improve the performance of a website.

What is the use of sprite images.

What are the different font formats and how will you include in your css stylesheet.

What is responsive web page layout.

What is fluid layout and advantages of it ?

What do you know about css animations. Will you do css3 animation if we give google access?

what are the css frameworks you know. have you ever used any css frameworks like LESS SAAS?

Difference between HTML4 and HTML5?

What is the use of canvas ? have you ever used it.

What is the main difference between canvas and svg?

What are semantic tags in html5. What is the main advantage of it.

How will you add a jquery to your page.

What is the diiference between javascript and jquery?

Tell me the difference between document.ready and onload function in jquery?

how can u apply css in jquery?

Can you dynamicaaly add a div using jquery ?

What are filters in jquery?

What is an anonymous function in jquery and how will you define it?

Have you ever heared about MVC in javascript?

Javascript or Jquery which is faster ?

How can you animate using Jquery?

Tell me the use of is() , eq() methods in jquery?

Why we use index() method in jquery.

Tell me jquery.noConflict() method.

Have you ever contributed any plugin?

Tell me what are the Jquery UI you know. And how can you customize them.?

Categories: 2016, ajax Tags: balaji, balt, bootstrap, google, HTML, JavaScript, JQuery, PHP, sathiya, selvabalaji, Technology, Wordpress

Ajax WordPress Login

December 24, 2013 selvabalajee Leave a comment

We are happy to release “Ajax WordPress Login” a new WordPress This plugin allow you to display login widget in your WordPress. It’s useful for sites that would like to avoid the normal WordPress login pages. Login uses AJAX and jQuery effects.

http://wordpress.org/plugins/wp-ajax-login/

Features:

Login Form.
Register Form.
Forgot Password Form.
Error handling without refreshing your screen.
Optional ReCaptcha verification for login and register forms.
Control forgotten password request.
Work with forced SSL logins.
Specific option to show link to profile page and dashboard.
Customizable redirect URL after log in or log out.
Option to show or hide avatar and change it size.
It’s responsive!

Capture

Categories: selvabalaji Tags: AJAX, balaji, balajisathiya, balt, citybalt, google, gundooz, JavaScript, JQuery, Login, Password, Publishers, sathiya, selvabalajee, selvabalaji, SSL, Syed Balkhi, Tools, Transport Layer Security, Uniform Resource Locator, vallu, Wordpress

Magento’s Default Files and Folders Structure

October 15, 2013 selvabalajee Leave a comment

This part of the Magento tutorial will provide detailed information regarding the Magento’s default files and folders structure.

You will learn more about the functions of main files and folders included in the Magento package.

The files and folders included in the main directory are as follows:

• .htaccess – contains mod_rewrite rules, which are essential for the Search Engine Friendly URLs. There you can also find standard web server and php directives that can improve your web site performance.

• .htaccess.sample – this is a backup of the .htaccess file. If you modify .htaccess it can be used in order to get the default settings.

• 404 (directory) – The folder stores the default 404 template and skin for Magento.

• app (directory) – This folder contains the modules, themes, configuration and translation files. Also there are the template files for the default administrationtheme and the installation.

• cron.php – a Cron Job should be set for this file. Executing of the file on a defined time period will ensure that the complicated Magento caching system will not affect the web site performance.

• downloader (directory) – This is the storage of the web downloader files. They are used for the installation and upgrade of Magento through your browser.

• favicon.ico – the default favicon for Magento. A small icon that is shown in the browser’s tool bar once your web site is loaded.

• index.php – the main index file for Magento.

• index.php.sample – A backup of the default index file. It can be used to revert the changes in a case of a index.php modification.

• js (directory) – Contains the pre-compiled libraries of the JavaScript code included in Magento.

• lib (directory) – The Magento core code is located in this folder. It contains the software’s PHP libraries.

• LICENSE_AFL.txt – The Academic Free License under which the Magento software is distributed.

• LICENSE.txt – The Open Software License under which the Magento software is distributed.

• media (directory) – This is the storage of the Magento media files – images out of the box, generated thumbnails, uploaded products images. It is also used as a container for importing images through the mass import/export tools.

• mage (in versions older than 1.4.2.0 this tool was called pear)- The file controls the automatic update through the downloader script and SSH. It handles the update of each individual Magento module.

• php.ini.sample – This file contains sample php directives that can be used in order to modify your PHP setup. If you want to alter the default setup edit the file and then rename it to php.ini.

• pkginfo (directory) – Contains files with information regarding the modules upgrades’ changes.

• report (directory) – This folder contains the skin of the Magento errors reports.

• skin (directory) – There are located the themes files – images, JavaScript files, CSS files, Flash files. Also there can be found the skin files for the installation of skins and administration templates.

• var (directory) – Cache, sessions, database backups, data exports and cached error reports can be found in this directory.

If you want to modify an existing template or set a new one you should know that the template files are separated in 3 folders:

• /app/design/frontend/default/YOUR_TEMPLATE_NAME/layout/ – Contains the .xml files that define which modules should be called by the template files and loaded in defined areas on the site.

• /app/design/frontend/default/YOUR_TEMPLATE_NAME/template/ – Contains files and subfolders that structure the final output for the users using the functions located in the layout/ folder.

• /skin/frontend/default/YOUR_TEMPLATE_NAME/ – Contains the CSS, images, JavaScript and Flash files related to the template.

Categories: 2013, balt., blog, Magento, News, Open-source, PHP, php function, selvabalaji, Technology, web services Tags: .htaccess, Academic Free License, balaji, balajisathiya, balt, baltsathiya, Cron, JavaScript, Magento, Open Software License, PHP, sathiya, Secure Shell, Selva, selvabalaji, selvasathiya

Google Web Designer

October 1, 2013 selvabalajee 1 comment

What is Google Web Designer?

Google Web Designer is an advanced web application that’s built with HTML5 which lets you design and build HTML5 advertisements and other web content using an integrated visual and code interface. Using Google Web Designer’s design view you can create content using drawing tools, text, and 3D objects, and you can animate objects on a timeline. Once you’re done creating your content, Google Web Designer outputs clean human-readable HTML5, CSS3, and Javascript.

When you create advertising creatives with Google Web Designer, you can use a library of components that lets you add image galleries, videos, ad network tools, and more.

Google Web Designer’s Code view lets you create CSS, JavaScript, and XML files, using syntax highlighting and code autocompletion to make your code easier to write, with fewer errors.

System requirements

	Minimum	Recommended
Operating system	Windows® 7/ Windows 8 Mac® OS X 10.7.x or later	Windows® 7/ Windows 8 Mac® OS X 10.7.x or later
Processor	Intel Pentium® 4 or AMD Athlon 64 processor	Intel Pentium® 4 or AMD Athlon 64 processor
Memory	2 GB RAM	4 GB RAM
Screen resolution	1280×1024	1920×1080
Application window size	1024×768 minimum	1024×768 or larger
Internet connection	Required for initial use after download, for updates, and for help access.	Required for initial use after download, for updates, and for help access.

The Web Designer interface

Google Web Designer has a large central area for building your projects and editing code. The central area is surrounded by a tool bar, a tool options bar, a timeline, and a set of panels that let you do several things, including modify elements, add components, and add events.

1. Tool panel 2. Tool options panel 3. Timeline 4. Color, Properties, Components, Events and CSS panels

The workspace

In the center of the Google Web Designer interface is the workspace. In Design mode, the workspace shows your images, text, and other elements visually, just as they will be displayed as they will appear in a browser. In Code view the workspace shows your code with appropriate color coding and formatting.

View bar

The view bar lets you choose between Design and Code mode, lets you preview your HTML and publish your ad, and lets you change the zoom level and which page you’re working on.

Tools

The tool bar contains tools for creating and manipulating elements on the stage and in the workspace. This includes tools for creating text and simple page elements, color selection tools, and 3D tools.

Tool	Description
Selection tool	Select and move objects in the workspace
3D object rotate tool	Rotate objects in three dimensions
3D object translate tool	Move objects in three space
Tag tool	Create HTML tags of any type by clicking and dragging on the stage
Text tool	Add text
Shape tool	Create elementary shapes
Paint bucket tool	Modify the color of elements in your project
Ink bottle tool	Modify the line color and stroke of elements in your project
3D stage rotate tool	Change your 3D view of the project
Hand tool	Change your view of the workarea
Zoom tool	Zoom in and out on your creative

Tool options

The tool options bar shows options for the currently selected tool. For example, when the text tool is selected, the tool options bar shows font and text layout options.

Timeline

The timeline lets you create animations using keyframes. In Quick mode, the animation is created scene by scene; in Advanced mode you can animate each element separately.

Panels

The panels section of the interface contains the Color, Properties, Components, Events and CSS panels. Panels can be minimized or dragged to a different position in the panels section.

Open source components and licenses

Included Software and Licenses

The following open source software is distributed and is provided under other licenses and/or has source available from other locations.

Package name	License
Webfont	Apache license 2.0
LESS – Leaner CSS v1.3.3	Apache license 2.0
GL-Matrix	The zlib/libpng license
jsbeautify	MIT license
uglifyjs	BSD license
Codemirror 2	MIT license
Chromium Embedded Framework	BSD Simplified license
NSIS (Nullsoft Scriptable Install System)	zlib/libpng license, bzip2 license, and Common Public License version 1.0
Zip Utils	info-ZIP license, zlib license
JSON CPP	MIT license
Google Fonts	Open source font licensing

Categories: 2013, blog, google, News, Open-source, selvabalaji Tags: AdMob, balaji, balt, Cascading Style Sheets, CSS, DoubleClick, google, Google Web Designer, gundooz, HTML5, JavaScript, sathiya, Selva, selvabalaji, Web design, XML

Jquery Timeago Implementation with PHP.

July 8, 2013 selvabalajee Leave a comment

Nowadays timeago is the most important functionality in social networking sites, it helps to updating timestamps automatically. Recent days I received few requests from 9lessons readers that asked me how to implement timeago plugin with dynamic loading live data using PHP. In this post I am just presenting a simple tip to implement timeago in a better way.

Why Live Query
LiveQuery utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

Code
Contains javascipt code. $(this).timeago()- here this element is refers to timeagoclass selector of the anchor tag.

// <![CDATA[
javascript” src=”js/jquery.min.js”>
// ]]>
// <![CDATA[
javascript” src=”js/jquery.livequery.js”>
// ]]>
// <![CDATA[
javascript” src=”js/jquery.timeago.js”>
// ]]>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.timeago”).livequery(function() // LiveQuery
{
$(this).timeago(); // Calling Timeago Funtion
});
});
</script>

//HTML & PHP Code
<!–?php
$time=time(); // Current timestamp eg: 1371612613
$mtime=date(“c”, $time); // Converts to date formate 2013-06-19T03:30:13+00:00
?>

You opened this page <a href=’#’ class=’timeago’ title=”<!–?php echo$mtime; ?>“></a>

Categories: 2013, ajax, Economy, News, OFFER, Open-source, Paypal, PHP, php function, Plugin, Regional, selvabalaji, seo, Twitter, web services, Wordpress, World cup, World News, Yahoo Tags: anchor tag, code lt, Document Object Model, FAQs Help and Tutorials, Function (song), HTML, HTML element, JavaScript, JQuery, Languages, PHP, php time, Programming, social networking sites, software, Technology

Export html to ms excel file in php

January 4, 2013 selvabalajee Leave a comment

In this article,I will explain how to export html to excel(.xls) file. we are going to export an HTML table (or any html data) to a MS Excel document as it is displayed on the HTML page.
it is very easy to export HTML data to excel in PHP. Lets see Below code

<!–?php

if(isset($_POST[‘excel’]) && $_POST[‘excel’])

{

# Download Excel (.xls) File…

header(‘Content-Type: application/force-download’);

header(‘Content-disposition: attachment; filename=ExportHtmlToExcel.xls’);

header(“Pragma: “);

header(“Cache-Control: “);

echo $_POST[‘excel’];

exit();

}

<html>

<head>

function getHtmlData()

{

$(“#excel”).val(‘<table border=”1″>’+$(“#info”).clone().html()+'</table>’);

return true;

}

</script>

</head>

<title>Export HTML to Excel in PHP</title>

// <![CDATA[
src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’>
// ]]>

</head>

<body>

<tr>

<th>First Name : </th>

Last Name :

</tr>

<tr>

Test First Name

</tr>

</table>

</form>

</body>

</html>

Categories: 2013, ajax, Browser, Country, face book, Facebook, Facebook integration, General, google, Nation, News, OFFER, Open-source, PHP, php function, selvabalaji, seo, sneha, Social Network, software, Technology, Uncategorized, web services, Wordpress, Yahoo Tags: Excel, Header (computing), HTML, html data, Internet media type, JavaScript, Microsoft Excel, PHP, Web cache

WP Google Drive Plugin

June 30, 2012 selvabalajee 1 comment

We are Released New wp google drive plugin to make back of your wordpress site files to google drive.

http://wordpress.org/extend/plugins/wp-google-drive/

Exclusive tutorial on How to Backup your WordPress blog to Google Drive. It is always recommended to backup your WordPress blog, which includes files (themes, plugins etc) and SQL tables (all your blog posts, comments, drafts etc are stored as tables in database).

Whenever your blog is gone (due to unsecured activities or some other reasons), these backups will help to get back your blog. In some cases, using 3rd party plugins and themes can also lead to malfunction of your blog, here also these backups helps to retain back your blog.

Reasons to Backup WordPress Blog to Google Drive

Its a Google Product and is free to use up-to 5GB.
Can get access to backups on any of the devices like Smartphones, Tablet PC’s, Laptops etc.
Backups will be uploaded in quite less time (sometimes based on internet connection also).
Highly Secure and reliable service, so there wont be any loss of data in the process.
Backups can be shared with your blog partners (if have any) with a single click of mouse

How to Backup WordPress blog to Google Drive

Download and Install Google Drive for WordPress plugin from official WordPress plugin repository.

Google Drive for WordPress Plugin »

Here is the step-by-step guide that helps to backup your WordPress blog to Google Drive. Brief list of things you have to do in this tutorial:

Login to Google API and create a Client ID in it.

Authorizing the Plugin by using Client ID and Client Secret.

Setting up the plugin frequency to take backups.

Follow this link Google APIs Console and login to your Google Account.

Go to “API Access” tab and click on “Create an OAuth 2.0 client ID”

Follow this link Google APIs Console and login to your Google Account.

Go to “API Access” tab and click on “Create an OAuth 2.0 client ID”

In the pop-up window, give a product name and upload logo before clicking on “Next” button.

By default “Web Application” will be selected and don’t change it.

In “Your site or hostname” section, click on “More Options” to expand link sections.

Now, paste the link in the “Backup Settings” page here. Enter domain name in “JavaScripts” origin field.

Click on “Create Client ID” and you have successfully created a Client ID using Google API Console.

Copy the Client ID and Client Secret from API dashboard and paste them in “Backup Settings” page.

You have to authorize the plugin by clicking on “Allow Access” button.

Allow Access to the Plugin and the entire setup has been successfully installed.

Check Out : WordPress Plugin

How to automatically Backup WordPress blog to Google Drive

Now, you can configure this plugin further by entering the custom folder ID of your Google Drive.
Also define the maximum number of backups (use any positive integer in that field).
Set the frequency of backup and everything will be automatically stored in your Google Drive.

6 Tips For Hosting WordPress On Rackspace Cloud Sites (rackspace.com)
7 WP Plugins For My Content Curation Blog (contentcurationdesktop.com)
How to Move WordPress Site to New Host: Zero Downtime (shoutmeloud.com)
WordPress Plugins: The Best of the Best (boldlygoing.com)

Categories: 2011, 2012, Android, API Shares, bank, Bing, blog, bollywood, Browser, Cell Phone, cinema, Cinema News, computer, Country, cricket, Economy, face book, Facebook, Facebook integration, Film, football, General, google, hockey, Hockey world cup, https://selvabalaji.wordpress.com, Icc Ranking, internet, IPL, Joomla, Men in Black 3D, Mobile, movie, movies, Music, Nation, News, OFFER, Open-source, Our Country, Paypal, PHP, php function, Plugin, political, Regional, Review, securenext, selvabalaji, seo, sneha, Social Network, software, software development, sports, sports News, T20, Technology, Twitter, web services, Wordpress, World cup, World News, Yahoo Tags: Application programming interface, back up, backup, Backup WordPress, Bakup WP with Google drive, Drive backup, google, Google Account, Google API Console, google drive, Google drive for Wordpress, JavaScript, Plug-in (computing), Publishers, securenext google drive, Smartphone, Tools, Wordpress, wordpress backup, WP Google drive

How to Make a Slick Ajax Contact Form with jQuery and PHP

June 16, 2012 selvabalajee 1 comment

Contact forms can be useful way for visitors to contact the owner of a site. They’re easy to use, and since they don’t expose the site owner’s email address in the page, they cut down on spam too.

However, contact forms can also be cumbersome, especially as they’re usually on a separate page. The visitor has to visit the contact form page, fill in the details, view yet another response page, and then try to make their way back to the page they were originally reading.

Fortunately, Ajax gives us a way round this problem. By embedding the form in the page, and submitting the form data via Ajax, the user never has to leave the current page. It also provides a smoother experience for the user.

In this tutorial we’ll build a nice-looking, embedded Ajax contact form that the user can summon up by clicking a link in the page. Along the way, we’ll explore various topics, including:

HTML5 form fields
How to use fallback techniques to make the form function even if the browser has JavaScript turned off
Using CSS techniques to create attractive forms
Writing a secure form mailer using PHP
Animating page elements with jQuery, and, of course…
Using jQuery to make Ajax requests

Before you begin, check out the finished product by clicking the View Demo button above. This opens a new page with some dummy content, and a couple of “Send us an email” links. Click one of these links to display the form.

Step 1: Create the markup

Let’s start with the HTML for our page. This includes the form itself — we’ll hide it initially using JavaScript when the page loads — and also some dummy content and a couple of “Send us an email” links that will display the form when clicked:

<!doctype html>

<html lang="en">

<head>

<title>A Slick Ajax Contact Form with jQuery and PHP</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

</head>

<body>

<div id="content">

<p style="padding-bottom: 50px; font-weight: bold; text-align: center;"><a href="#contactForm">~ Send us an email ~</a></p>

<p style="padding-top: 50px; font-weight: bold; text-align: center;"><a href="#contactForm">~ Send us an email ~</a></p>

</div>

<form id="contactForm" action="processForm.php" method="post">

<h2>Send us an email...</h2>

<ul>

<li>

<label for="senderName">Your Name</label>

<input type="text" name="senderName" id="senderName" placeholder="Please type your name" required="required" maxlength="40" />

</li>

<li>

<label for="senderEmail">Your Email Address</label>

<input type="email" name="senderEmail" id="senderEmail" placeholder="Please type your email address" required="required" maxlength="50" />

</li>

<li>

<label for="message" style="padding-top: .5em;">Your Message</label>

<textarea name="message" id="message" placeholder="Please type your message" required="required" cols="80" rows="10" maxlength="10000"></textarea>

</li>

</ul>

<div id="formButtons">

<input type="submit" id="sendMessage" name="sendMessage" value="Send Email" />

<input type="button" id="cancel" name="cancel" value="Cancel" />

</div>

</form>

<div id="sendingMessage" class="statusMessage"><p>Sending your message. Please wait...</p></div>

<div id="successMessage" class="statusMessage"><p>Thanks for sending your message! We'll get back to you shortly.</p></div>

<div id="failureMessage" class="statusMessage"><p>There was a problem sending your message. Please try again.</p></div>

<div id="incompleteMessage" class="statusMessage"><p>Please complete all the fields in the form before sending.</p></div>

</body>

</html>

I’ve omitted the dummy content in the above code, since it’s not relevant to the tutorial.

The form sends its data to a processForm.php script that does the actual emailing. (We’ll write this PHP script in a moment.) By setting the form’s action attribute to "processForm.php", we ensure that the form is usable even with JavaScript disabled. Later, our JavaScript will read this action attribute so that it knows where to send the Ajax request.

The form itself uses some HTML5 form features such as placeholders, the email field type, and the required attribute to ensure that all the fields have been filled in. We’ll also add JavaScript validation for browsers that don’t yet support HTML5 validation.

Step 2: Add the CSS

Now we’ll add the CSS to our HTML page in order to style the page and form. The bulk of the CSS positions the form and status messages in the centre of the window, and styles the form and form fields.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

<style type="text/css">

/* Add some margin to the page and set a default font and colour */

body {

margin: 30px;

font-family: "Georgia", serif;

line-height: 1.8em;

color: #333;

}

/* Set the content dimensions */

#content {

width: 800px;

padding: 50px;

margin: 0 auto;

display: block;

font-size: 1.2em;

}

#content h2 {

line-height: 1.5em;

}

/* Add curved borders to various elements */

#contactForm, .statusMessage, input[type="submit"], input[type="button"] {

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

/* Style for the contact form and status messages */

#contactForm, .statusMessage {

color: #666;

background-color: #ebedf2;

background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );

background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );

border: 1px solid #aaa;

-moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);

-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);

box-shadow: 0 0 1em rgba(0, 0, 0, .5);

opacity: .95;

}

/* The form dimensions */

#contactForm {

width: 40em;

height: 33em;

padding: 0 1.5em 1.5em 1.5em;

margin: 0 auto;

}

/* Position the form in the middle of the window (if JavaScript is enabled) */

#contactForm.positioned {

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin-top: auto;

margin-bottom: auto;

}

/* Dimensions and position of the status messages */

.statusMessage {

display: none;

margin: auto;

width: 30em;

height: 2em;

padding: 1.5em;

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.statusMessage p {

text-align: center;

margin: 0;

padding: 0;

}

/* The header at the top of the form */

#contactForm h2 {

font-size: 2em;

font-style: italic;

letter-spacing: .05em;

margin: 0 0 1em -.75em;

padding: 1em;

width: 19.5em;

color: #aeb6aa;

background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */

border-bottom: 1px solid #aaa;

-moz-border-radius: 10px 10px 0 0;

-webkit-border-radius: 10px 10px 0 0;

border-radius: 10px 10px 0 0;

}

/* Give form elements consistent margin, padding and line height */

#contactForm ul {

list-style: none;

margin: 0;

padding: 0;

}

#contactForm ul li {

margin: .9em 0 0 0;

padding: 0;

}

#contactForm input, #contactForm label {

line-height: 1em;

}

/* The field labels */

label {

display: block;

float: left;

clear: left;

text-align: right;

width: 28%;

padding: .4em 0 0 0;

margin: .15em .5em 0 0;

font-weight: bold;

}

/* The fields */

input, textarea {

display: block;

margin: 0;

padding: .4em;

width: 67%;

font-family: "Georgia", serif;

font-size: 1em;

border: 1px solid #aaa;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;

-webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;

box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;

background: #fff;

}

textarea {

height: 13em;

line-height: 1.5em;

resize: none;

}

/* Place a border around focused fields, and hide the inner shadow */

#contactForm *:focus {

border: 1px solid #66f;

outline: none;

box-shadow: none;

-moz-box-shadow: none;

-webkit-box-shadow: none;

}

/* Display correctly filled-in fields with a green background */

input:valid, textarea:valid {

background: #dfd;

}

/* The Send and Cancel buttons */

input[type="submit"], input[type="button"] {

float: right;

margin: 2em 1em 0 1em;

width: 10em;

padding: .5em;

border: 1px solid #666;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);

-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);

box-shadow: 0 0 .5em rgba(0, 0, 0, .8);

color: #fff;

background: #0a0;

font-size: 1em;

line-height: 1em;

font-weight: bold;

opacity: .7;

-webkit-appearance: none;

-moz-transition: opacity .5s;

-webkit-transition: opacity .5s;

-o-transition: opacity .5s;

transition: opacity .5s;

}

input[type="submit"]:hover,

input[type="submit"]:active,

input[type="button"]:hover,

input[type="button"]:active {

cursor: pointer;

opacity: 1;

}

input[type="submit"]:active, input[type="button"]:active {

color: #333;

background: #eee;

-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;

-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;

box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;

}

input[type="button"] {

background: #f33;

}

/* Header/footer boxes */

.wideBox {

clear: both;

text-align: center;

margin: 70px;

padding: 10px;

background: #ebedf2;

border: 1px solid #333;

}

.wideBox h1 {

font-weight: bold;

margin: 20px;

color: #666;

font-size: 1.5em;

}

</style>

<!--[if lt IE 8]>

<style>

/* IE7 needs the fields to be floated as well as the labels */

input, textarea {

float: right;

}

#formButtons {

clear: both;

}

/*

IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.

The negative margins are half the element's width/height.

*/

#contactForm.positioned, .statusMessage {

left: 50%;

top: 50%;

}

#contactForm.positioned {

margin-left: -20em;

margin-top: -16.5em;

}

.statusMessage {

margin-left: -15em;

margin-top: -1em;

}

</style>

<![endif]-->

Let’s look at some interesting sections of the CSS:

Style for the contact form and status messages
We give the form and status boxes a nice gentle top-to-bottom gradient using -webkit-gradient and -moz-linear-gradient, and we also add a drop shadow with box-shadow (and its vendor-specific variants). Finally, we give the form and message boxes an opacity of .95 (95%), which makes the page content just show through — a nice subtle effect.
Position the form in the middle of the window (if JavaScript is enabled)
Initially, we simply place the form inline after the page content. This is so that the form can be used for non-JavaScript-enabled browsers without getting in the way of the content. However, for JavaScript browsers, we want the form to appear in the centre of the window, over the top of the content.Our #contactForm.positioned rule does just that. It uses fixed positioning, sets the top, bottom, left and right values all to zero, and ensures that all 4 margins are set to auto. This centres the element both horizontally and vertically in most modern browsers. Later we’ll use our JavaScript to add the positionedclass to the form.We also position the status message boxes in the same way.
The header at the top of the form
Our form includes a nice “Send us an email…” header with an image of a postage stamp. Our #contactForm h2rule styles this header. We give the text a large italic style and space the letters out slightly. We also add margin and padding to create space around and inside the header. We use some negative left margin (-.75em) on the header to bypass the padding on the form, so that the header goes right to the left edge of the form. We also set the width of the header to 19.5em so that it exactly matches the width of the form.Why -.75em and 19.5em? Because ems cascade, and we’ve set our font size to 2em. So -.75em actually becomes -1.5em (the width of the form’s padding), and 19.5em becomes 39em (the width of the form, minus 1em for the h2‘s padding). Phew! Maybe I’ll use pixels next time… :)We also set the heading’s colour, give it a dark background, position the postage stamp image in the top right corner, add a thin bottom border, and add curved top corners.
The fields
We give the input and textarea fields an attractive font, a rounded border using border-radius, and a gentle inner shadow using box-shadow. We also float the field labels left so that they sit alongside the fields. When a field is focused (clicked on or moved to with the Tab key), we give it a blue border and remove the shadow. We also set outline: none to remove the blue outline added by some browsers. Finally, we use the :valid pseudo-class to give correctly completed fields a green background, for those browsers that support HTML5 form validation.
The Send and Cancel buttons
input[type="submit"] selects the Send Email button, while input[type="button"] selects the Cancel button. We float them right to position them side by side, and add some margin to give them space. We give them a fixed width, and some padding to make them a decent size. We add a rounded border and subtle drop shadow, and specify text and background colours. We also make the buttons slightly transparent (opacity: .7), and make them fully transparent when hovered over to highlight them. We use a CSS transition to fade the opacity slowly. Finally, when the buttons are clicked (:active) we move the shadow inside the buttons to give a “pressed” appearance, and give them a black-on-white colour scheme.

Step 3: Build the PHP form mailer

We’ve now created our form page, and styled the form. The next step is to build a short PHP script to actually send the email messages. This script will reside on the web server. When the user submits the form, the form’s data is sent to the PHP script, which then sends the email and returns a response indicating whether or not the email was sent successfully.

Here’s the PHP script — call it processForm.php, and save it in the same folder as the form page you created in Steps 1 and 2:

<?php

// Define some constants

define( "RECIPIENT_NAME", "John Smith" );

define( "RECIPIENT_EMAIL", "john@example.com" );

define( "EMAIL_SUBJECT", "Visitor Message" );

// Read the form values

$success = false;

$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";

$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";

$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";

// If all values exist, send the email

if ( $senderName && $senderEmail && $message ) {

$recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";

$headers = "From: " . $senderName . " <" . $senderEmail . ">";

$success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );

}

// Return an appropriate response to the browser

if ( isset($_GET["ajax"]) ) {

echo $success ? "success" : "error";

} else {

?>

<html>

<head>

<title>Thanks!</title>

</head>

<body>

<?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>

<?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>

<p>Click your browser's Back button to return to the page.</p>

</body>

</html>

<?php

}

?>

This script is fairly straightforward. Let’s break it down:

Define some constants
First we define some config options for the name and email address of the person who will receive the email message. (Change these to your own name and email address.) We also set a subject for the message.
Read the form values
Next we check for our 3 form fields, senderName, senderEmail and message, in the posted form data. For each field, we check if it exists. If it does then we pass its value through a regular expression to remove any potentially malicious characters that a spammer might try to use, and store the result in a variable. If it doesn’t exist then we set the variable to an empty value.
If all values exist, send the email
If the 3 field values all contain data then we send the email. First we construct the recipient string from the recipient name and email address. Then we add a "From:" header to the message using the name and email address that the visitor entered in the form. This is the “From:” value that the recipient will see in their email program. Finally, we use the PHP mail() function to send the email message, storing the return value in the variable $success. (mail() returns true if it managed to send the email, or false otherwise.)
Return an appropriate response to the browser
Once we’ve attempted to send the email, we send a “success” or “error” message back to the browser as appropriate. If the request URL contained an "ajax" parameter then we know the form was submitted via Ajax using our JavaScript code, so we simply return the value "success" or "error"to the JavaScript, which will then display an appropriate message to the user. However, if the form was submitted without using Ajax then the user must have JavaScript turned off in their browser. In this situation, we display a more helpful error message in the browser, with instructions to the user to use their Back button to return to the page.Our JavaScript will add the ajax parameter to the URL when it submits the form, as you’ll see in Step 6.

Step 4: Include the jQuery library and set the delay

Our form is actually functional now. You can open the page in a browser, click the “Send us an email” link to jump to the form, fill in the fields, and submit the form to send the message.

However, we’re now going to enhance our form using JavaScript to make the experience nicer for the user.

We’ll use jQuery to do most of the heavy lifting, so the first step is to include the jQuery library in the page’s head element:

1	`<script` `type="text/javascript"` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>`

Here we’ve linked directly to the jQuery library on Google’s CDN, but you can download the library and host it on your own server if you prefer.

We’ll also add a global config variable, messageDelay, to control how long the message boxes appear on the screen. This value is in milliseconds. Feel free to change it to a shorter or longer time:

<script type="text/javascript">

var messageDelay = 2000; // How long to display status messages (in milliseconds)

Step 5: Write the `init()` function

The first stage of our form-enhancing JavaScript is the init() function. This sets up the form so that it can be shown and hidden on demand, and also modifies the form so that it will be submitted using our JavaScript, rather than sent natively by the browser.

Here’s the code:

// Init the form once the document is ready

$( init );

// Initialize the form

function init() {

// Hide the form initially.

// Make submitForm() the form’s submit handler.

// Position the form so it sits in the centre of the browser window.

$('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

// When the "Send us an email" link is clicked:

// 1. Fade the content out

// 2. Display the form

// 3. Move focus to the first field

// 4. Prevent the link being followed

$('a[href="#contactForm"]').click( function() {

$('#content').fadeTo( 'slow', .2 );

$('#contactForm').fadeIn( 'slow', function() {

$('#senderName').focus();

} )

return false;

} );

// When the "Cancel" button is clicked, close the form

$('#cancel').click( function() {

$('#contactForm').fadeOut();

$('#content').fadeTo( 'slow', 1 );

} );

// When the "Escape" key is pressed, close the form

$('#contactForm').keydown( function( event ) {

if ( event.which == 27 ) {

$('#contactForm').fadeOut();

$('#content').fadeTo( 'slow', 1 );

}

} );

}

Let’s look at each chunk of the above code:

Init the form once the document is ready
We use the jQuery object, $, to trigger our init() function once the DOM is ready.
Hide the form, set the submit handler, and position the form
The first thing we do inside the init() function itself is make some changes to our form, #contactForm.First we hide it from the page using the jQuery hide() method. Then we set its submit event handler to our submitForm() function (which we’ll write in a moment). This ensures that, when the user submits the form, submitForm() is called instead of the native browser form submission kicking in. Finally, we add the positioned CSS class to the form to reposition it in the centre of the browser window.
Make the “Send us an email” links open the form
Next we bind an anonymous event handler function to the “Send us an email” links’ click events. This function fades out the page content so it’s only just visible in the background; fades the contact form in; and sets the focus on the “Your Name” field, ready for the user to start filling in the form. Finally, the function returns false to prevent the links from being followed.
When the “Cancel” button is clicked, close the form
Now we bind another anonymous function to the “Cancel” button’s click event, so that the user can close the form by clicking the button. The function simply fades the form out, and fades the page content back in.
When the “Escape” key is pressed, close the form
Similarly we bind a function to the contact form’s keydown event, so that we can read any key the user presses when they’re viewing the form. In this function, we check if the user has pressed the “Escape” key (character code: 27). If they have then we close the form by fading it out, and fading the content in.

Step 6: Write the `submitForm()` function

We’ve now set up our form so that, rather than being submitted in the usual fashion, it will trigger the submitForm() function when the user submits it. This function needs to do some validation and, if all is well, submit the form data to the PHP script via Ajax.

Here’s the function in full:

// Submit the form via Ajax

function submitForm() {

var contactForm = $(this);

// Are all the fields filled in?

if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {

// No; display a warning message and return to the form

$('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();

contactForm.fadeOut().delay(messageDelay).fadeIn();

} else {

// Yes; submit the form to the PHP script via Ajax

$('#sendingMessage').fadeIn();

contactForm.fadeOut();

$.ajax( {

url: contactForm.attr( 'action' ) + "?ajax=true",

type: contactForm.attr( 'method' ),

data: contactForm.serialize(),

success: submitFinished

} );

}

// Prevent the default form submission occurring

return false;

}

Here’s how the function works:

Store the contact form in a variable
Since we’ll be using it a lot throughout the function, we start off by storing the contact form element in a contactForm variable. This element is available to our function as the this variable, since the function is the event handler for the element’s submit event. We wrap the element in a jQuery object to make it easier to work with.
Check all the fields are filled in
Now we check that each field’s value is not empty by using the jQuery val() method on each field.
Display a warning if the form isn’t completed
If 1 or more of the fields are empty, we fade out the form, then fade in the #incompleteMessage div, which contains the “Please complete all the fields…” message. We keep the message there for the time specified by the messageDelay variable, then fade it out again. Once it’s faded out, we fade the form back in so that the user can complete it.
Submit the form if it is completed
Now we get to the meat of the JavaScript. If the form is completed then we first fade out the form, and fade in the “Sending your message…” box. Now we call the jQuery ajax()method to submit the form via Ajax to the PHP script. We pass the following arguments to the method:

url

The URL to send the form to. We grab this from the form’s action attribute, and append an ajax=true parameter to the query string so that our PHP script knows the form was sent via Ajax, rather than via the usual method.

type

The type of request to make ("POST" or "GET"). We grab this from the form’s method attribute, which in this case is set to "POST".

data

The data to send with the request. For this, we call the jQuery serialize() method on the contact form object. This method takes all the field names and values in the form and encodes the data in a query string. We then pass this string to the ajax() method so it can send the data to the PHP script.

success

This is a callback function that will be called once the Ajax request has finished and the browser has received the response from the server. We set this to our submitFinished() function, which we’ll write in a moment.
Prevent the default form submission occurring
Finally, our event handler returns false to prevent the form being submitted in the usual way.

Step 7: Write the `submitFinished()` function

The last function we need to write is submitFinished(), which is called once the Ajax response from the PHP script has been received by the browser. This function needs to check the response and display a success or error message as appropriate:

// Handle the Ajax response

function submitFinished( response ) {

response = $.trim( response );

$('#sendingMessage').fadeOut();

if ( response == "success" ) {

// Form submitted successfully:

// 1. Display the success message

// 2. Clear the form fields

// 3. Fade the content back in

$('#successMessage').fadeIn().delay(messageDelay).fadeOut();

$('#senderName').val( "" );

$('#senderEmail').val( "" );

$('#message').val( "" );

$('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );

} else {

// Form submission failed: Display the failure message,

// then redisplay the form

$('#failureMessage').fadeIn().delay(messageDelay).fadeOut();

$('#contactForm').delay(messageDelay+500).fadeIn();

}

</script>

The function works as follows:

Get the response
jQuery passes the response from the PHP script as an argument to the submitFinished() function. We take this string and pass it through the jQuery trim() method to remove any whitespace.
Fade out the “sending” message
Next we fade out the “Sending your message…” box by calling the jQuery fadeOut() method.
If email was sent successfully, display a success message
If the response variable holds the string "success", as returned by our PHP script, then we know that the email was successfully queued for delivery. So we fade in the success message, hold it for a couple of seconds, then fade it out. We also reset the form fields to empty values, in case the user wants to send another message. Finally, once the success message has faded out, we fade the page content back in.
If there was a problem, display a failure message
If the PHP script returned anything other than "success" then we know there was a problem with the submission, so we display the failure message stored in the #failureMessage div, then fade the form back in so that the user can correct any problems with the form.

And that’s the end of our JavaScript!

Summary

We’ve now built our slick Ajax contact form. Not only does it look good, but it’s easy to use, and the visitor can send an email without ever having to leave the page they are reading. Nice!

AjaxQ jQuery Plugin – A Tiny, Simple jQuery Plugin For Sequential Ajax Requests (functionn.blogspot.com)
jQuery Roundup: Joconut, jQuery Table Sort, jQuery.pushevent (dailyjs.com)
useful php,jquery scripts (bput4all.wordpress.com)

Categories: blog, computer, General, google, internet, News, Open-source, Paypal, PHP, php function, Plugin, Regional, Review, securenext, selvabalaji, seo, Technology, Wordpress, World News Tags: AJAX, Cascading Style Sheets, Contact geometry, HTML, JavaScript, JQuery, Languages, PHP, Programming

50 Essential PHP Tutorial and Examples for Beginners

June 16, 2012 selvabalajee 1 comment

Here is best php tutorial and examples for for beginner and advanced web developer to find out more about php script and project. Some tutorial also have example source code that you can download free. It is really important basics of programming with PHP to find truly tutorial with examples for easy download and testing.

In addition, PHP is one of the most popular server running side scripting languages today. It is used to create dynamic web pages that interact with the user offering customized information. PHP offers many advantages: it is fast, stable, secure, easy to use and open source (free).

Web applications have been improving user experience thanks to a lot of recently developed new technology such jQuery, CSS3, HTML5. The new feature improvement was create to fix all the design solutions. You can create php project easy with CSS3, HTML5 and jQuery. Recently, responsive design platform layout was a useful part for web designer to learn more.

You may interested with php tutorials with examples bellow:

Categories: selvabalaji Tags: Cascading Style Sheets, Dynamic web page, JavaScript, JQuery, PHP, Programming, Scripting language, Tutorial

How to create simple tree structure menu using jquery and css

March 27, 2012 selvabalajee 1 comment

Hey Everyone! It’s been long since I wrote any tutorial but I hope you must be enjoying.

This week I have a simple solution yet to another complicated problem. It’s the tree structure menu and here are its features.

Multiple branches or sub menus.
Dynamic change of arrows on toggle of the menu items.
Simple css for easy understanding.
Ultra slim Jquery.
Sliding animation for the sub menus.

Now that you know its features here is where you can download them from. You are free to use it anywhere.

Now for the learning part, like always I’ll give you a whole break up on how I did it.

HTML Part

First we will get out HTML ready. Create a main un-ordered list with ID ‘treeMenu’. Inside this ul tag we have the first level menu items inside each li tag. If you would like to have the second level sub items then within one li tag create another ul tag and place the sub items inside it. Now for that li tag add a class called ‘contentContainer’. This is for our reference so that we know whichever li tag with class ‘contentContainer’ will have a ul item nested inside which will have second level items. And we set display none to all the second level and third level ul items. Because we don’t want to see them in the first go. They should slide down only on clicking their parent li tag.

Note: Do not forget to include JScript.js file in the header. We add this for the jquery code to work in the later part. It is the normal jquery code that you get from www.jquery.com

To be more clear here is the code.

Tamilnadu
- Thiruvarur
  - BHEL
  - Thiruvarur
    - Sannathi street
    - THiruvarur
- Selam
- Chennai
- Madurai

Bangalore
Orissa
Mangalore
Calicut
Cochin

Andhra

Now for the Jquery part

As we all know jquery is the simplified form of javascript and it has some great functions. One such function is ‘toggle()’. This function gives out a even with every click. For eg: if the first click gives out ‘A’ event, the second click gives ‘B’ event and so on. Now these events can be got with the use of multiple ‘function()’ separated by a comma. Each function() will output a event. Here how it goes in simple terms.

$("#id").toggle( function() { // START FIRST CLICK FUNCTION // WRITE ANY ACTION HERE }, // END FIRST CLICK FUNCTION function() { // START SECOND CLICK FUNCTION // WRITE ANY ACTION HERE }, // END SECOND CLICK FUNCTION … … … function() { // START LAST CLICK FUNCTION // WRITE ANY ACTION HERE } // END LAST CLICK FUNCTION ); // END TOGGLE FUNCTION

After the last click function if still the #id is clicked then it start looping to the first click function. This is how a toggle() function works. Now that we understood this lets look into our code and see how it has helped us.

First we get ul tag through its id and target all its li tags.

$("#treeMenu li").toggle();

Now the first function() meant for the first click does the following magic.

On click on the li it finds its child ul and slide it down. We will be using the slideDown() function for this magic. It animates the sub menu to slide down and appear.
Then we check if that li which was clicked hasClass ‘contentContainer’. We will be using hasClass() function for this magic. By default in css we will add a right arrow icon to the ‘contentContainer’ class.
So if the hasClass() turns out to be positive then we replace ‘contentContainer’ class with ‘contentViewing’ class. Now the ‘contentViewing’ class has a down arrow added to it through css.
And this is how we change the arrows in response to the closing and opening of the menus.
Now for the closing of the menus we will be using Second click function(). Because the first function() is used for the first click, automatically the second click calls for the second function().
Again here will check up if the li has a ul as its child and slide it up. We will be using slideUp() function for this magic. It animates the menu to move up and disappear.
Also we would replace the ‘contentViewing’ class with ‘contentContainer’ class. So that the arrow changes automatically back to closed mode.

Here is the full jquery code.

// <!--[CDATA[ // $(document).ready(function() { //Class 'contentContainer' refers to 'li' that has child with it. //By default the child ul of 'contentContainer' will be set to 'display:none' $("#treeMenu li").toggle( function() { // START FIRST CLICK FUNCTION $(this).children('ul').slideDown() if ($(this).hasClass('contentContainer')) { $(this).removeClass('contentContainer').addClass('contentViewing'); } }, // END FIRST CLICK FUNCTION function() { // START SECOND CLICK FUNCTION $(this).children('ul').slideUp() if ($(this).hasClass('contentViewing')) { $(this).removeClass('contentViewing').addClass('contentContainer'); } } // END SECOND CLICK FUNCTIOn ); // END TOGGLE FUNCTION }); // END DOCUMENT READY // ]]>

Now for the beautiful CSS

Just a few padding and margins to keep them appealing. Do not miss to note the arrow images I have given in the CSS.

/* START TREE MENU */ #treeMenu li { border-left: 1px solid #FF7300; padding:0 0 10px 10px; color:#FFFC00; } #treeMenu li.contentContainer { background:url('right.png ') no-repeat -3px 6px; color: #FFFFFF; cursor: pointer; } #treeMenu li.contentViewing { background:url('down.png ') no-repeat -4px 6px; color: #FFFFFF; } .contentContainer ul, .contentViewing ul { color:#FFFC00; margin:15px 0 0 10px; } /* END TREE MENU */

And that is it my friend. It is done. I hope you understood this magic. Do let me know through comments if you have any doubts and I’ll be glad to clear it out.

CODE HERE
<style>

body{
    margin:0;
    padding:0;
    background:#f1f1f1;
    font:70% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:150%;
    text-align:left;
}
a{
    text-decoration:none;
    color:#057fac;
}
a:hover{
    text-decoration:none;
    color:#999;
}
h1{
    font-size:140%;
    margin:0 20px;
    line-height:80px;    
}
#container{
    margin:0 auto;
    width:680px;
    background:#fff;
    padding-bottom:20px;
}
#content{margin:0 20px;}
p{    
    margin:0 auto;
    width:680px;
    padding:1em 0;
}

</style>

</head>

<body>

<div id="container">
    <div id="content">
        <ul id="sitemap">
            <li><a href="#">First link</a>
                <ul>
                    <li><a href="#">First link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Second link</a></li>
                    <li><a href="#">Third link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Fourth link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
            <li><a href="#">Second link</a>
                <ul>
                    <li><a href="#">First link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Second link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Third link</a></li>
                    <li><a href="#">Fourth link</a></li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
            <li><a href="#">Third link</a>
                <ul>
                    <li><a href="#">First link</a></li>
                    <li><a href="#">Second link</a></li>
                    <li><a href="#">Third link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Fourth link</a></li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
            <li><a href="#">Fourth link</a>
                <ul>
                    <li><a href="#">First link</a></li>
                    <li><a href="#">Second link</a></li>
                    <li><a href="#">Third link</a></li>
                    <li><a href="#">Fourth link</a></li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
            <li><a href="#">Fifth link</a>
                <ul>
                    <li><a href="#">First link</a></li>
                    <li><a href="#">Second link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Third link</a></li>
                    <li><a href="#">Fourth link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
        </ul>
    </div>
</div>

JS : code 

this.sitemapstyler = function(){
    var sitemap = document.getElementById("sitemap")
    if(sitemap){

        this.listItem = function(li){
            if(li.getElementsByTagName("ul").length > 0){
                var ul = li.getElementsByTagName("ul")[0];
                ul.style.display = "none";
                var span = document.createElement("span");
                span.className = "collapsed";
                span.onclick = function(){
                    ul.style.display = (ul.style.display == "none") ? "block" : "none";
                    this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
                };
                li.appendChild(span);
            };
        };

        var items = sitemap.getElementsByTagName("li");
        for(var i=0;i<items.length;i++){
            listItem(items[i]);
        };

    };    
};

window.onload = sitemapstyler;

jQuery and CSS Menus with Animations (itswadesh.wordpress.com)
creating unordered list with jquery (daniweb.com)
20 jquery drop down menus you should try (itswadesh.wordpress.com)
Superslides – A jQuery Full Screen Slider Plugin (functionn.blogspot.com)
Interactive Image Vamp up with jQuery, CSS3 and PHP (mt-soft.com.ar)

Categories: API Shares, internet, Open-source, PHP, securenext, selvabalaji Tags: Cascading Style Sheets, CSS, Data Formats, HTML, HTML element, JavaScript, JQuery, Style Sheets, Thiruvarur

Adding your Twitter feed to your website with jQuery

October 11, 2010 selvabalajee 2 comments

Image via CrunchBase

If you or your company has a Twitter account, chances are you’d like to promote it and display your latest tweets from your website. Since many websites – both personal and increasingly business – are built on blogging software such as WordPress, this is usually achieved via a plugin, of which there are many out there.

But what if you simply want to add your live Twitter feed to a “normal” web page? Twitter itself provides a number of HTML widgets, but in this article I’ll show you how easy it is to achieve with a little bit of JavaScript, CSS, and jQuery.

In case you haven’t come across it before:

What is jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It’s very powerful and makes life a whole lot easier when writing JavaScript. To include jQuery in your webpage, simply add the following within the <head> tags:

// <![CDATA[javascript" src="http://jqueryjs.google]]> code.com/files/jquery-1.3.2.min.js"></script>

This uses the version that is hosted on Google Code, which saves you having to download the file.

Twitter API

Twitter itself provides a complicated API to allow access to all sorts of things. A lot of this complication arises around authentication, and necessarily so, but thankfully to simply retrieve a stream of tweets, authentication isn’t required (as long as the user in question hasn’t hidden their tweets).

First of all the API provides many different ways to obtain a user’s statuses. I won’t go into any of them other than the one that I favour, and this is the one that I’ll talk about here: user_timeline.

user_timeline

This returns a number of the most recent statuses posted by the user. It can return the data in different formats: XML, JSON, RSS and Atom. I favour JSON, a lightweight data-interchange format, so this is the one that I will talk about.

You can use a number of parameters, and a full list of what they can do can be found on the Twitter API description for user_timeline. For now, I will only use a few relevant ones.

Give me the Tweets!

To retrieve the data for a particular Twitter account (I will use pcpro in this example here) you call the following:

$.getJSON(“http://twitter.com/statuses/user_timeline.json?
screen_name=pc_pro&count=10&callback=?”,
function(tweetdata) {
// do some stuff here
});

This will return the last 10 tweets from the pc_pro account in JSON format in the tweetdata variable. By default, retweeted tweets are not included in this feed, but to include them, add the &include_rts=1 parameter above, and they will be returned.

Of course we now have to make sense of this data, parse it and actually do something with it.

On our HTML page, define a <ul> and give it the id tweet-list. This is where we will hold our tweets. The above code is then extended to do the following:

$.getJSON(“http://twitter.com/statuses/user_timeline.json?screen_name=pc_pro&count=1O&callback=?”, function(tweetdata) {
var tl = $(“#tweet-list”);
$.each(tweetdata, function(i,tweet) {
tl.append(“<li>“” + tweet.text + “”– ” + tweet.created_at + “</li>”);
});
});

Some explanations: var tl = $(“#tweet-list”); grabs a reference to the <ul> element that we created above. We need this as we will add each tweet to it.

$.each(tweetdata, function(i,tweet) {… is the start of a jQuery loop, in this case iterating through each item in tweetdata and storing it temporarily in tweet. The following line then adds the tweet within an

item. The actual text of the tweet is contained within the text data member, and here we put double quotes around it, and the time it was created is contained within the created_at data member.

This will now display the last 10 tweets in list format on the relevant HTML page.

However, if there are links contained in the tweet, they won’t be clickable, and the created date is a bit long and not like the Twitter standard timelines such as “about a minute ago” or “two hours ago”. We can fix this with the following two functions urlToLink(); which we call on tweet.text:

function urlToLink(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(exp,”$1“);
}

and relTime(); which we call on tweet.created_at:

function relTime(time_value) {
time_value = time_value.replace(/(\+[0-9]{4}\s)/ig,””);
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var timeago = parseInt((relative_to.getTime() – parsed_date) / 1000);
if (timeago < 60) return ‘less than a minute ago’;
else if(timeago < 120) return ‘about a minute ago’;
else if(timeago < (45*60)) return (parseInt(timeago / 60)).toString() + ‘ minutes ago’;
else if(timeago < (90*60)) return ‘about an hour ago’;
else if(timeago < (24*60*60)) return ‘about ‘ + (parseInt(timeago / 3600)).toString() + ‘ hours ago’;
else if(timeago < (48*60*60)) return ‘1 day ago’;
else return (parseInt(timeago / 86400)).toString() + ‘ days ago’;
}

So we need to change the above line to the following:

tl.append(”

“” + urlToLink(tweet.text) + “”– ” + relTime(tweet.created_at) + “

“);

This will be called when the HTML page is loaded (or you can load it some other time, it’s up to you of course) and this is done using jQuery by inserting the code within:

$(document).ready(function() {
// code here
});

which basically calls the code when the entire DOM has been loaded.

End Result

The main difference is the URL in included in the &.getJSON() call which should be:

http://api.twitter.com/1/account-name/lists/list-name/statuses.json?callback=?

where account-name is the name of the account, in this case pc_pro, and list-name is the name of the list, in this case staff.

Tech Note: Creating Tweet Buttons Dynamically (littlegreenfootballs.com)
JQuery Templates, Data Link, and Globalization (weblogs.asp.net)
Real Time Twitter Search via Websocket or Comet using the Atmosphere Framework (jfarcand.wordpress.com)
15 Way Cool and Useful jQuery Plugins For Web Design and Development | CreativeFan (creativefan.com)
Cached Commons (cachedcommons.org)
Tech Tweets for 4-Oct-2010 (elijahmanor.com)

Categories: blog, computer, Country, face book, Facebook, General, google, https://selvabalaji.wordpress.com, internet, Joomla, News, Open-source, Our Country, Paypal, PHP, Plugin, Review, securenext, selvabalaji, software, software development, Technology, Twitter, web services, Wordpress Tags: Application programming interface, Google Code, HTML, JavaScript, JQuery, JSON, Online Communities, Twitter

WordPress is going to most popular content management system: Market analysis.

March 13, 2010 selvabalajee 4 comments

The most popular open-source software ,WordPress is also starting to find a niche as a low-cost corporate CMS (content management system), at least for managing relatively simple Web sites.

“In the last six months or so, over half the sites being launched with WordPress are really not blogging sites per se, they are complete sites,” said Raanan Bar-Cohen, vice president of media services for Automattic, the company WordPress developer Matt Mullenweg started to offer a hosted version of the software.

Such use has caught at least some of the CMS community by surprise.

“There’s a debate raging within Twitter about whether traditional blogging platform WordPress is also a CMS,” wrote Tony Byrne in a blog post. Byrne is the founder of the CMS analyst firm The Real Story Group, formerly called CMS Watch. “Our take: many organizations are using WordPress as a CMS. That makes it a CMS.”

“A larger enterprise would almost never want [to] use one of those tools for a major web property. But they offer useful alternatives for [small and medium-size business] scenarios, as well as simpler projects,” Byrne elaborated.

WordPress, created in 2003, uses a variety of open-source programs and open standards, such as PHP, MySQL, JavaScript, HTML and CSS. But now a day all scripts like JQuary, AJAX and many other scripts works with it.

Across the Web, about 21 million sites use WordPress in one form or another, according to Bar-Cohen. Automattic offers a free hosted version of WordPress, as well as paid hosted versions with extra features and support.

Byrne admitted he was skeptical at first of the idea of using WordPress as a CMS. Out of the box, it doesn’t have many of the capabilities, such as workflow or advanced version control, needed even for basic CMS duties.

“It’s one thing to run a blog with a few extra plug-ins and widgets. It’s another to run a corporate Web site,” Byrne said in an interview.

Nonetheless, The Real Story Group spoke with customers and examined Web sites. It found that if an organization had to maintain a relatively simple Web site, one with 50 pages or fewer, then WordPress could prove to be a low-cost, relatively easy-to-maintain option.

“It’s not a [full] development platform, but it can drive a simple Web site fairly capably,” Byrne said.

While it is less sophisticated than many CMS packages, such as the open-source Drupal, it could provide an alternative to other simple platforms, like Joomla and the .Net-driven DotNetNuke.

In this realm, WordPress offers a few distinct advantages, most notably its intuitive interface. “WordPress has an ease of use that is something other vendors could learn from,” Byrne said.

Also, thanks to third-party developers, WordPress has a wide array of plug-ins to extend its functionality, some of which can be used to tackle CMS chores. For instance, a plug-in called Edit Flow offers workflow, or the ability to route a document to multiple parties for editing and approval.

Overall, the WordPress site itself lists more than 8,600 plug-ins. Plugins help your browser perform specific functions like viewing special graphic formats or playing multimedia files.

WordPress has its downsides as well. For one, access control is quite limited, Byrne said. The software offers only sitewide roles. Anybody with administrative rights has the ability to edit any page on the entire site. Someone from human resources, for instance, wouldn’t be restricted to editing only HR pages.

Another shortcoming is the lack of advanced content modeling. While a site can host a series of Web pages, it would be difficult to make finer distinctions among the pages — for a news site to separate news articles from case studies and features, for instance.

Making such distinctions would be possible through some development work, though other CMSes can make this sort of templating much easier.

In general, the deeper into development that a Web site administrator must go, the more the organization should consider another platform, Byrne said.

That said, WordPress is being used as a CMS in some quarters. The Harvard Gazette, The Wall Street Journal’s All Things Digital Web site and the New York City public television station WNET all run on the software.

For WNET, using WordPress cut the cost of setting up a television Web site, from an estimated average of US$25,000 to $40,000 down to $5,000 to $10,000, according to a white paper posted by WNET and digital design firm Tierra Innovation, which helped with the implementation.

The approach that WordPress designers take, Bar-Cohen said, is to keep the core of the software as simple as possible, allowing users to add on additional features through plug-ins.

This approach differs from most other CMS offerings in its simplicity, Bar-Cohen argued. Many packages will come bundled with lots of features such as polls and forums. The administrator may pull out these features if they are not needed on the site, but that work will need to be repeated each time the software is upgraded.

“We keep the core flexible and don’t try to throw everything into it,” he said.

Categories: Country, General, internet, News, Open-source, PHP, Plugin, Review, securenext, selvabalaji, software, software development, web services, Wordpress, World News Tags: Bar-Cohen, CMS, content management system, HTML and CSS, JavaScript, Matt Mullenweg, MySQL, open-source software, PHP, plugins, Wordpress

10 PHP programmers wanted

March 8, 2010 selvabalajee Leave a comment

We are going to recruit 10 PHP programmers in our Chennai branch. The candidate should have minimum 1 year experience in PHP and Joomla like open sources are added advantage. If you know anybody who is looking for a job, please send their resumes to prabakaran@securenext.net or murugan@securenext.net . We need the following details

Current CTC

Expected CTC

Referred By

Number of days to Join

How To Integrate Facebook With WordPress

September 28, 2009 selvabalajee 3 comments

How To Integrate Facebook With WordPress

Facebook is one of those Web phenomena that impress everyone with numbers. To cite some: about 250 million users are on Facebook, and together they spend more than 5 billion minutes on Facebook… every day. These numbers suggest that we should start thinking about how to use Facebook for blogging or vice versa.

We did some research to find out how the integration of Facebook with WordPress and vice versa works, or — in other words — how you can present your WordPress blog on Facebook or use the functionality of Facebook on your WordPress-powered blog. Both of these can be achieved with a set of WordPress plug-ins, a couple of which we’ll present here in detail.

1. Integrating A WordPress Blog Into Facebook

Integrating a WordPress blog into Facebook is actually quite simply achieved via the Facebook API. The Facebook API makes programming applications that can be spread via Facebook almost a piece of cake. A lot of interactive browser games are on Facebook, such as the currently popular “Mafia Wars.” This game allows users to start a mafia family with their friends, with the goal of becoming an important figure in the virtual underground crime scene. To start a clan, you invite other friends on the network to join. This is the growth strategy of any application on Facebook: the simple snowball effect.

The applications sustain themselves through earnings generated by displaying advertisements, which also makes Facebook an even more attractive platform to develop on. This symbiosis generates growth for both Facebook and its applications.
Plug-In Installation and Configuration

John Eckman developed the WordPress plug-in Wordbook in early 2009. This plug-in allows WordPress blog owners to integrate their blog in Facebook. This gives a blog two lives: one as an application on Facebook (such as, for example, my private FreigeistBlog)

To access a blog via Facebook, you need to first grant access to the application. To do this, go to the so-called “canvas” page, which is where the Facebook twin of the blog lives (my example). However, granting access to the blog’s application means that the administrator of the blog also has access to information about you as a user (this is what most applications aim for: information such as date of birth, gender and educational status allows them to display quite targeted ads).

The application we’re dealing with is a simple blog and, in this sense, quite innocent, but we should state outright that the Facebook API as it is now treats blogs and websites as applications, which may not be appropriate, given the issue mentioned above. Facebook users who authorize the blog application can now easly send comments and share posts from within Facebook. The data, however, is still stored in the original database on the server where the blog is installed.

This makes it look as though Facebook serves merely as a simple feed reader. Yet, we get some other benefits. The blog on Facebook can be used to create a community around it by taking advantage of Facebook’s snowball effect, because friends of the blog’s users will see in their activity stream that they have been participating on the blog. Furthermore, it means that Facebook users will see new posts from your blog whenever they sign in to Facebook and can easily follow comments, making your blog more accessible.

To create a Facebook twin of your blog, first you have to set up a new application. To do this, you need a Facebook account and have to register as a developer using the preceding link. All of this can be done in a few minutes.

Create a new Facebook application

Once you have agreed to the terms of use, give your application a name. Then you will receive your API key and a secret, which you will need later.

Settings for the Facebook application. Large view.

Then, you have to submit a so-called “post-authorize callback URL.” This is the address on your server to which Facebook will send a notice whenever a user authorizes access to the application. By the same logic, there is also the “post-remove callback URL,” which receives a notice when a user removes the application. Both of these events are handled by the Wordbook plug-in. You merely need to write the address of the blog’s root directory with a trailing slash.

Facebook application settings: Define callback URLs. Large view.

The third step is to claim your canvas page, which is the page through which a Facebook user accesses your blog, and a canvas callback URL, which is the page from which content is retrieved. Again, include a trailing slash, or else internal links on your blog won’t work with their Facebook twin.

Facebook application settings: Define canvas page. Large view.

Now you have some choices to make, namely, how to set up your canvas page. You have a choice between iFrame and FBML. FBML is a Facebook XML scheme with which you can use specific Facebook tags (such as tags to display user profiles). You can also use it to access certain Facebook procedures. However, the Wordbook plug-in works with iFrames, which allow Javascript and other tags, and which FBML does not support.

To distinguish between them rather crudely, you can say that iFrames give the developer more flexibility but, unlike FBML, restrict access to Facebook procedures. Another advantage of iFrames is that code that Facebook retrieves from the canvas callback URL need not be parsed by the FBML parser, which could yield a performance gain. With iFrames, only internal links on the blog need to be adjusted. And the “resizeable” option allows Facebook’s JavaScript code to adjust the size of the iFrame to Facebook’s layout.

Now the hard work is done. All that’s left is to install the Wordbook plug-in using the standard WordPress method: install and activate. Then you can change the plug-in’s settings on the settings panel, and here you will need your application ID and the secret. You also have to tell the plug-in where the canvas page is located, so that internal links can be adjusted.

Adjusting the settings of the Wordbook plug-in

And that’s it! If you want, you could activate or deactivate some other options, such as the commenting function and whether users can add your application to their profile by displaying the latest posts from your blog in their profile.

Browsing through the blog via Facebook. Large view.

The plug-in allows you to play around a little bit. But as we said, you are somewhat limited in how fully you can integrate your blog into the Facebook canvas. But the next plug-in we’ll look at integrates a bit of Facebook into your blog.

2. Integrating Facebook In A WordPress Blog

To begin, a little history lesson is needed. Many users do not like having to register for each blog where they would like to post comments, especially if they already have accounts on so many other social networks, such as Facebook and MySpace. So a single online ID for several purposes would be ideal, wouldn’t it? That’s the idea behind the OpenID protocol, which started in 2005. It decentralizes the identification of users for various providers and services. In essence, you can create an account on Facebook and connect it to services such as MySpace or even a personal blog. If you want to change your profile for all of these services, that too is decentralized: you simply change the settings on your Facebook account. OpenID is a chance to make the Web and its services more easily accessible. There are reasonable risks and concerns involved, but also many opportunities.

Facebook announced in 2007 that it would implement OpenID, and others followed, which explains why we now find more and more buttons that say “Connect with Facebook” or “Google Friend Connect.” This leads us to our second plug-in, Facebook Connect WordPress plug-in, which almost seamlessly integrates Facebook into your blog.

The plug-in allows users to comment on a blog using their Facebook account; and if they are already signed in or on Facebook, they need not sign in again. Users do not have to register for a unique account on the blog because the plug-in retrieves the user’s information directly from the Facebook API. With access to the user profiles on Facebook, you can display your users’ profile pictures, which adds a personal touch to your blog.

The plug-in integrates a lot of Facebook functions: for example, users can send invitations and share stories and comments on Facebook, which gives your blog the benefit of word-of-mouth marketing. To do this, you need to activate the plug-in option that publishes a user’s activity in their respective activity feed. Last but not least, you can enable a gadget that displays the profile pictures of your blog’s most recent visitors, similar to “Google Friend Connect.”

10 reasons for developing web applications with PHP

September 21, 2009 selvabalajee 10 comments

If you are a budding web developer or are looking to learn a web programming language then you really should consider learning php. In this article I’ll present 10 good reasons why PHP should be one of the modern web programming languages on your professional development short-list.

1: Free, experienced support from a 1000 php communities:
Actually, there are probably many more than 1000 communities that can provide you with php help. There are literally hundreds of dedicated PHP web development forums and hundreds more that have php sub-forums. Help for the php beginner is literally a forum post away. Generally speaking you’ll find an answer to your problem in a very short time. Getting help from more experienced php coders is a great pleasure because it can remove a lot of the uncertainty accompanying learning something new.

2: The cost of an open source application is nothing:
Unlike other propriety coding languages (notably Microsoft’s aspx language) you don’t pay a cent to get started with php programming. In fact you don’t need to obtain or download any php software to begin. Simply use an open source editing tool and start coding. Upload your code to a cheap hosting account and you are away. You can readily obtain open source editors from a variety of sources. A search on Google for “php editors” returns hundreds of possibilities. As you progress you can download packages such as LAMP or WAMP so you can see php in action in a live server environment.

3: Open source has better security – because everyone knows what is in it:
Again, unlike propriety web serving systems, everyone can see what php is made of. Some people will argue that this makes php less secure because everyone knows what php specific exploits exist. My view is that the open nature of php literally “forces” the php developers and community to keep abreast of security issues and to respond to them as soon as possible. Be aware however that it is easy to make simple security mistakes with php – and all languages suffer from this characteristic – you just need to do your research to keep your web applications secure.

4: Hundreds of existing php code examples:
In addition to forums that provide advice and experience for free you’ll also find hundreds of examples that will help you get started and move ahead as a PHP Programmer. From simple code to connect to a database, more complex examples that allow you to grab data from an external website or a full-blown example of AJAX and php integration it is all there for you to study, take apart and build upon.

5: Scores of existing code frameworks:
Frameworks are a relatively recent development and they can save you heaps of time and heaps of heartache. Simply, frameworks are like pre-fabricated houses. A team of developers have combined their efforts to solve the problem of repetitive programming tasks. Frameworks allow you to get up and running with both simple and complicated web applications in a matter of hours. There are scores of php frameworks for a wide variety of tasks. Again a simple search on Google will provide you with a large array of frameworks to choose from and explore.

6: Interoperability with web 2.0 applications:
Modern web 2.0 applications are largely characterized by mashups and desktop style user interfaces. php is an excellent choice for interacting with other websites and providing rich user experience. Simple php commands like curl or fopen allow you to grab data from other websites with relative ease. Php works well with javascript so you can provide your end users with modern, responsive interfaces that are way beyond the old static interfaces of days past.

7: Many content management systems use php:
If you decide that you want to be a website designer or programmer then php is an excellent choice. Many of the modern content management systems (CMS) use php. WordPress, Drupal, Joomla – these very popular CMS packages all use php. Each CMS usually has a vibrant php developer community. And if you become expert in one or more php-based CMS then you stand a very good chance of finding ongoing work customizing CMS packages for clients or website providers.

8: php is scalable to the largest web applications:
Some of the most frequented and popular websites on the planet use php. php will scale up to meet the most exacting requirements for websites such as joomla.org and wordpress.com. These websites provide 24X7 availability for thousands of concurrent users without skipping a beat. If you have the next facebook or myspace application in mind then php is definitely a development language worth considering.

9: Most web hosting companies support PHP:
Most of the website hosting providers will support php. It is a standard component of most Linux based hosting accounts. Remember we talked about LAMP and WAMP earlier? Well the ‘P’ stands for php. If you want your applications to run on Linux-based (and some Windows-based) web hosting platforms then php is an obvious choice.

10: Coding with php is fun!
Hopefully by now I have convinced you that php is a web development language that at the very least is worth serious consideration. And while you consider seriously the option of developing with php I’d like to leave you with this last thought: Coding with php is fun. I have spent countless hours writing simple php applications, customizing php-based CMS packages and generally mucking abut with php. And generally speaking (not counting the odd pulling out of my hair every now and then) every hour with php has been more than worth the effort and extremely rewarding.

Categories: blog, General, google, Joomla, Open-source, PHP, Technology, web services, Wordpress Tags: AJAX, clsys, CMS, coders and logic, Drupal, hosting, JavaScript, Joomla, LAMP, live server, mashups, ontent management systems, open source application, PHP, php coders, php communities, php editors, PHP Programmer, WAMP, web applications, web developer, Wordpress

Wanted :: Web Developer – PHP (10 Positions 2009)

August 17, 2009 selvabalajee 1 comment

SecureNext Software Solutions showcases the best designs for all its online and offline solutions & services. With us you will learn about an emerging field, work with world-class clients in a dynamic/entrepreneurial environment and have a free hand to experiment and try out new ideas.

Responsibilities/ Role Description:

Will have to work on PHP, MySQL, Linux, XML, HTML, VB Script, JavaScript and Web Authoring tools etc.
Will be required to do thorough analysis on Database Structures.
Excellent Working knowledge of Codes and Syntax is essential.
The incumbent will be required to work under pressure and stringent deadlines.

Desired Profile/ Skills:
M.Sc / MCA / B.Tech/B.E with minimum of 1+ years of experience as a Web Developer .

Should have handled projects alone.
Excellent Working knowledge of Codes and Syntax is essential with strong troubleshooting skills.
Good understanding for the working and architecture of RDBMS.
Knowledge of Open source is added advantage.Like(WordPress and Joomla, etc ..)
Project Management skills (needs to demonstrate a degree of self- sufficiency and be a self starter).
Should be aggressive enough to learn new technologies and work under pressure and stringent deadlines.
Excellent communication skills (written and verbal).
Solid understanding of Web Production process.

Note:- This is a Chennai based position. Kindly Send your Updated profile to baburaj@securenext.net

	Subramani K Iyer on SINGAM II- My Review- EXC…
	เบอร์สวย on Jawaharlal Nehru – Lady…
	commercial music on ONLINE MARKETING TIPS…
	Jeannie on Jawaharlal Nehru – Lady…
	IBCSpisk on Availability Check in Registra…

Archive

Rate this:

Share this:

Features:

Rate this:

Share this:

Rate this:

Share this:

What is Google Web Designer?

System requirements

The Web Designer interface

The workspace

View bar

Tools

Tool options

Timeline

Panels

Open source components and licenses

Included Software and Licenses

Rate this:

Share this:

Rate this:

Share this:

Rate this:

Share this:

Reasons to Backup WordPress Blog to Google Drive

How to Backup WordPress blog to Google Drive

How to automatically Backup WordPress blog to Google Drive

Related articles

Rate this:

Share this:

Step 1: Create the markup

Step 2: Add the CSS

Step 3: Build the PHP form mailer

Step 4: Include the jQuery library and set the delay

Step 5: Write the init() function

Step 6: Write the submitForm() function

Step 7: Write the submitFinished() function

Summary

Related articles

Rate this:

Share this:

Rate this:

Share this:

Hey Everyone! It’s been long since I wrote any tutorial but I hope you must be enjoying.

HTML Part

Now for the Jquery part

Here is the full jquery code.

Now for the beautiful CSS

Related articles

Rate this:

Share this:

Related Articles

Rate this:

Share this:

Rate this:

Share this:

Rate this:

Share this:

How To Integrate Facebook With WordPress

Rate this:

Share this:

Rate this:

Share this:

Rate this:

Share this:

Subscribe Via Email

Agaram Foundation

Top Clicks

Email Subscription

My Group Fans

Latest Gallery

Recent Posts

Top Posts

Pages

Site Info

selvabalaji

Top Rated

Recent Comments

Vistor Location

Step 5: Write the `init()` function

Step 6: Write the `submitForm()` function

Step 7: Write the `submitFinished()` function