w3easystep | easy steps to learn web technologies w3easystep
:::: MENU ::::

How to create your own jQuery Accordion

jquery accordion

 

Sometimes Accordions are very useful to display the full content in limited amount of space.  Accordions are the collapsible panels  that carry the content.

Click the titles to expand the content under it and click to collapse.  How to create a simple Accordion with jQuery.

First of all, Include the jQuery library if it has not already included. Then append the following markup in wherever you want to read up the Accordion.

Then add the basic styles for Accordion. To change the appearance, you can add or change the css properties.

And Finally jQuery

Ok. Coool?

 
Download

Demo

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus


jQuery Magnific Popup

Magnific Popup is fully responsive lightbox and providing high end performance.  You get better experience in any device, it may be iPhone or Smartphone.

Supports:

  • HTML content
  • Images
  • Ajax content
  • iFrames
  • Gallery
  • Image zoom
  • Videos(YouTube, Vimeos, etc.)

You can use CSS transitions of your own to make it animate. you can put any HTML content either it may be text or a form.

In case of forms, Entered data is not lost when you go other page and press back.

 Lightbox gallery with magnific-popup

First, include the following files

 

Markup for gallery:

 

Add this js to your document.

 

 

 

Source: http://dimsemenov.com/plugins/magnific-popup/

Read more: http://dimsemenov.com/plugins/magnific-popup/documentation.html

 

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus


placekitten

a simple and easy way of create place holders, just give image size .
Quicker way to get pictures of Kittens.

Url with required size(width&height) gets a placeholder for you.

Samples:

 

 

 

 

To get images in gray scale, just “g” as parameter

 

 

 

 

Have fun.

 

Source:  http://placekitten.com

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus


my online tools of 2013

As this year ends up and a new year comes in. I want to share the tools used in 2013. Might be helpful for you guys.

Online Image Generator 

Online image Generator,Generate images for ad spaces, banner spaces, image spaces and more. Use URLs directly or download images for free.

Json Parser Online

“Analyze your JSON string as you type with an online Javascript parser, featuring tree view and syntax highlighting. Processing is done locally: no data send to server.

Regexp tool

HiFi Regex Tester – Live JavaScript Regular Expression Tester

HiFi CMS

XML Pretty Print

A simple XML pretty printer.

Put XML in the text area below, click the “Pretty Print XML” button, and see pretty printed XML.

Layoutit!

Create your frontend code simple and quickly with Bootstrap
using our Drag & Drop Interface Builder.

logo

 

Facebook Graph explorer 

The Facebook Graph API Explorer is a simple Facebook app that lets you browse through the JSON data returned by Facebook Graph API requests.

WriteCodeOnline.com

Write code online php code test php online php test run php code online run code online, Test your code online.

 

 

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus



GetPincode API

Getpincode.info provides an API to get a pin code of the place.

Request:

The GetPincode works over HTTP, and requests are made with GET.
It works all around the world.

To get the pincode for “Kukatpally” for example, this is the Request URL. Make sure to escape the query for best results.

 

http://www.getpincode.info/api/pincode?q=Kukatpally

Response:

Response will be in JSON format.

 

If address is not found or there is an problem for some reason, then an error will be disp

 

 

And it is free of cost for 100 requests per day,

you can use API for commercial or non-commercial purposes.

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus


Place holders for your website

Place holders for your website.

Generate banner spaces, ad spaces without need of any image file. just use the following URL.

How does it works?:

A URL with five parameters will generate an image, see the example here.

 

Ad Holders:


Banner:

 

Parameters:

Name Desc. Default
 1st  Size of the image(You can mention width and

height or simply width ex:http://onlineimagegenerator.w3easystep.info/130)

 2nd  Color of the text(Optional) #FFFFFF
3rd  Background Color(Optional)  #FF0000
4th  Text to appear on the image(Optional)  width*height

Note: Don’t  use # for color values, example: color=#ff44ff

 

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus


gmaps.js – google maps api with less pain and more fun

gmaps.js allows you to use google maps in an easy way, NO more documentation required. the easiest way to use Google Maps.

You can plot your business address on the map with gmap. you can add multiple markers and you can use directions services.
Supports custom controls,UI and Context menu.

Initial Release:

  • Map events
  • Geolocation
  • Add Markers
  • Marker infoWindows
  • Draw routes and circles
  • Initial examples

Download  Demo

The basic usage of gmaps:

Include jquery library and gmaps.js in your document. Don’t forget to register JavaScript library http://maps.google.com/maps/api/js?sensor=true

 

Add GMaps container or use existing one:

And apply Gmaps as follows:

 

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus


jqPlot – Plot your data on chart

jqPlot – A pure JavaScript Plotting.

leftcharts

Choosing charts is better way to represent your data, jqPlot is good one among them. plotting and charting with jqplot is very easy.
It produces beautiful line, bar and pie charts.

Features:

  • Numerous chart style options.
  • Date axes with customizable formatting.
  • Up to 9 Y axes.
  • Rotated axis text.
  • Automatic trend line computation.
  • Tooltips and data point highlighting.
  • Sensible defaults for ease of use.

jqPlot has been tested on IE 7, IE 8, Firefox, Safari, and Opera. You can see jqPlot in action on the tests & examples page.

 Download

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus


jquery form validation plugin and example

Jquery validate plugin makes easy to validate a form before submitting, installation and customization is very simple. It is good choice to elect this plugin to validate a form, it prevents form submitting.

It has many validation rules like email, urls, number,date, credit cards and has API methods to give you more controls on the plugin. You can write you own methods to validate your custom fields.

How to use:

First download jquery validate plugin from the link and use.

Download

Include plugin

And then, you have a form and want to validate?

 Then how to validate it? use this

Got confusion? how to handle if form id valid, add the following code.

 

 

 

 

Srihari Goud

PHP developer and web designer

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle Plus


Pages:12345