Creative Art

Best jQuery Lightbox Scripts

2012-01-09T23:53:00.000+05:30

Light box is nice tool to displays images using modal box. jQuery is very popular for modal dialogs because of its very easy implementation and it make website more friendly and interactive.
In this article I collected the best and Efficient Lightbox based on the jQuery Javascript library.

jQuery lightbox

A jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup.

fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

lightbox2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

PrettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

jquery nivo zoom

2012-01-09T23:22:00.003+05:30

Nivo Slider is the world’s most popular jQuery image slider, and it’s completely free!
Nivo Zoom is popular jQuery plugin that allows you to zoom the image. This plugin comes with 5 different zoom types, Optional overlay support, Supports HTML captions, Simple clean & valid markup, Loads of settings to tweak and others. The plugin is lightweight (4kb compressed), focused only on images and comes with a bunch of settings. Nivo Zoom, by default, doesn’t use overlays but can display the bigger image with an overlay where the opacity and colors of it can be customized.

Features

Specify position of larger image relative to the thumbnail
Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position
Optional overlay support
Supports HTML captions
Simple clean & valid markup
Customizable settings
Lightweight: Packed version only weighs 4kb

For more details Visit

jquery tab panel

2012-01-09T23:21:00.001+05:30

Tabbed panels are very useful and one of the most popular way to place a lot of information on a page without losing usability. Here is listed popular JQuery Tabs tutorials and plugins which you can use in your project.

Tabs with Next/Previous :
View Live Demo
Smooth tabbed menu in jQuery :Simple plug-in that allows for a large number of tabs to fit into a small space
View Live Demo
Slick Tabbed: This script allows you to create a slick tabbed content area using CSS and jQuery.
View Live Demo
Simple Tabs w/ CSS & jQuery: This jQuery plugin supplies an easy way to create tabbed menu with our lovely jQuery library
View Live Demo
AJAX Tabs: This tabbed panel allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.
View Live Demo

jquery iframe auto height

2012-01-09T23:17:00.002+05:30

A simple solution for automatically resize iframe height depending on content.
In page call jQuery library and in head script part past below script.

$(function () {
            $('#myIframe').load(function () {
                  this.style.height =
                   this.contentWindow.document.body.offsetHeight + 'px';
            });
});

jcarousel tutorial

2012-01-09T23:16:00.002+05:30

There are lots of jQuery plugins for slider, but jCarousel is a best jQuery plugin for controlling a list of items in horizontal or vertical order. It works with all major browsers. To use the jCarousel component, include the jQuery library, the jCarousel source file and a jCarousel skin stylesheet file inside the tag of your HTML document.

jquery dotdotdot

2012-01-09T23:15:00.002+05:30

jQuery.dotdotdot is an advanced cross-browser ellipsis for multiple line content. It adds an ellipsis after cut off text to indicate that there is more text than currently visible. Not only on a single line of content, but also particularly on multiple lines of content.

To use add jquery library and script file in header and on document ready call function.

For more details Visit

How To Set A Default Landing Tab For Your Facebook Page

2012-01-09T23:12:00.000+05:30

Steps:

Open the newly created page and click on edit page link.
On edit page select “Manage Permission” tab from left menu. It will reload the right hand side of the page, now from right hand panel search for select drop down “Default Landing Tab” label and select the appropriate tab from select drop down, this tab will be loaded in place of default wall when visitor is not a fan or not logged in.

jqPagination jQuery Pagination Plugin

2012-01-06T23:50:00.004+05:30

jqPagination is a effective jQuery plugin for quickly creating a pagination interface and functionality for your web site or application..
The plugin is controlled with the special class names and attributes of HTML elements (for defining the prev, next buttons or setting the max pages).
It has a pretty unique, simple-yet-functional feature which is the ability to clicking on the pagination item and setting the page to be displayed manually.
jqPagination has a single callback which is ran when a pagination request is made and returns the page number to be displayed.
Its design can be customized easily and the plugin degrades nicely when JavaScript is disabled.

Demo

Best Mobile Frameworks for web development

2012-01-06T23:45:00.001+05:30

jQTouch

Zepto/jQuery is a Open Source plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, Android, iPod Touch, and other devices.
Demo

Sencha Touch

Sencha Touch is HTML5-based framework for developing mobile web apps aimed at next generation, touch enabled, devices. It’s currently compatible with Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices.
Demo

Zepto.js

Zepto.js is a minimalist JavaScript framework for modern browsers, with a jQuery-compatible syntax.
Demo

JQuery Mobile Framework

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
Demo

jQuery Geo location plugin for map relation actions

2012-01-06T23:32:00.000+05:30

jQuery Geo is an open-source popular framework for map/geolocation related actions.
The plugin uses the open source map servers like Open Street Map, WMS and Esri ArcGIS for pulling the map data. The maps created are mobile-friendly and have lots of built-in methods for customization.
jQuery Geo is very well-documented and supported with a bunch of examples.

show mapping data and handle direct user interaction with the map
use geospatial functions like calculating bounding boxes, measuring the distance between geometries, etc.

Demo

jQuery News Ticker

2012-01-06T23:15:00.002+05:30

jQuery News Ticker

Many websites today including news ticker to display your latest headlines or to show other features in a tiny space. jQuery News Ticker is useful plugin, inspired from the BBC news ticker, that simplifies creating them. News Ticker enables users to show unordered lists, RSS feed, HTML file, or content in a simple yet slick customizable interface.It support for loading content via an RSS feed.
Demo Download

Best jQuery Chart Libraries

2012-01-06T00:41:00.000+05:30

In this article we listed best chart libraries that you can use in your projects. Most of them are free for personal and commercial use.

Jquery GraphUp Plugin

“GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.” and only 4kB.
Demo.

jQuery Highcharts

Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Demo

jqPlot

jqPlot is a plotting and charting plugin for the jQuery. jqPlot produces beautiful line, bar and pie charts with many features you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Demo

Flot

Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Demo

jQuery Google Charting

The current version is 1.4.1 and is available under the GPL or MIT licenses. Whilst the API itself is pretty simple to use (the format to generate graphs is to form a complex url with multiple query string parameters), the plugin goes one step further and actually forms that complex url for you, by allowing you to set the parameters you want with simple jQuery calls:

nivo zoom tutorial

2012-01-05T23:56:00.002+05:30

Features

Specify position of larger image relative to the thumbnail
Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position
Optional overlay support
Supports HTML captions
Simple clean & valid markup
Customizable settings
Lightweight: Packed version only weighs 4kb

For more details Visit: http://nivozoom.dev7studios.com/

steps to create facebook page

2012-01-05T23:53:00.001+05:30

Quick easy steps to create facebook page tab are as follows.

Step 1: Login to facebook account.
Step 2: Open url https://developers.facebook.com/apps in browser.
Step 3: In right hand section, find “create new app” button and click it.
Add display name, namespace is optional and select agree checkbox.
Step 4: Once its saved it will load next page where you can find settings in the “Basic” section of your apps in the Developer App under ‘Select how your app integrates with Facebook’. Click ‘Page Tab’ to expand the Page Tab settings, and the Page Tab fields will appear, here you have to add the tab name, and application url & Secure Page Tab URL e.g. http://phptechi.com/. secure url is mandatory now. Click on save changes. On same page you can find “App ID:” at the top copy it somewhere in notepad/ text editor.
Step 5: Now open url in another tab http://www.facebook.com/pages/ and click on create page button and create page.
Step 6: Adding an App/ page tab to a Page.
Open new tab and pest following url into that. It will show “chose facebook page” dropdown. now select the newly created page. Dont forget to replace
“YOUR_APP_ID” with application id copied in step 4 and “YOUR_URL” with “application url” used in step 4.
Format : http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Sample URL : http://www.facebook.com/dialog/pagetab?app_id=214247878655791&next=http://172.20.150.166/sampalApp/
If you follow all the steps correctly it should add page tab in newly newly created page. Just refresh/ reload page thats all !!.

Best jQuery grid plugins

2012-01-05T23:50:00.000+05:30

There are so many jQuery grid plugins. Each having different features and capabilities. Below I listed the best jQuery grid plugins which you can use in your projects

Flexigrid: http://flexigrid.info/ : Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
jQuery Grid: http://www.trirand.com/blog/ :
jqGridView: http://plugins.jquery.com/project/jqGridView jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.
Ingrid: http://reconstrukt.com/ingrid/ :Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
DataTable : http://www.datatables.net/index : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Slickgrid : http://code.google.com/p/slickgrid/
TableSorter: http://tablesorter.com/:tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/
Sigma Grid: http://www.sigmawidgets.com/products/sigma_grid2/

jQuery feed menus tutorial

2012-01-05T23:42:00.003+05:30

There are many way to get or promote your site become popular. One of the popular method is by submiting your site to rss feed. When feeds became popular, it worked to have one icon on your site to point your readers in one location.
Demo

jQuery UI 1.8 features

2012-01-05T23:42:00.000+05:30

jQuery UI 1.8 just released. The biggest changes are, of course, the new widgets themselves.

Core – the core of jQuery UI, required for all interactions and widgets
Widget – the widget factory, base for all widgets
Mouse – the mouse widget, a base class for all interactions and widgets with heavy mouse interaction
Position – a utility plugin for positioning elements relative to other elements

The Position Utility

With this, you can position any element relative to any other, or even relative to the parent window or your mouse.

The Button Widget

With the button widget you can create a fully theme-able button from any imaginable element you want to use as a native button.Traditionally buttons had an input type of submit, reset, image or button, but progressively developers are creating from elements such as anchor tags. The Button widget makes this an attractive alternative for developers who want new styles to their website.

The Autocomplete Widget

This is maybe the most requested feature, which made it into the latest release of jQuery UI – The Autocomplete. The Autocomplete widget makes any text input field pop up a menu to help the user in completing their search or entry, provide suggestions and improvements to search criteria they’re entering.

jQuery UI 1.8 you can download from:

Minimized version: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js
Full Version with comments: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js

jquery 3d carousel

2012-01-05T23:40:00.001+05:30

3D Carousel is a powerful jQuery plugin enabling you to create 3D carousel with great features. It can be fully customizable controlled by mouse. jQueryCarousel uses JSON as source data provider.
Demo

jquery jcarousel tutorial

2012-01-05T23:39:00.001+05:30

Demo

jQuery full Screen background Images

2012-01-05T23:37:00.001+05:30

If you are looking for how to Full Screen Background Images then use Backstretch is a simple plugin. It is a simple plugin jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.

demo.

jquery multiselect plugin

2012-01-05T23:33:00.001+05:30

If you are looking for multiselect a combo box then use jQuery UI MultiSelect Widget is pretty good . It is a configurable plugin for jQuery. It converts

jQuery Date Picker plugin

2012-01-05T23:31:00.002+05:30

jQuery Date Picker plugin allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.

jQuery:

$(function()
{
 $('.date-pick').datePicker();
});

css:

a.dp-choose-date {
 float: left;
 width: 16px;
 height: 16px;
 padding: 0;
 margin: 5px 3px 0;
 display: block;
 text-indent: -2000px;
 overflow: hidden;
 background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
 background-position: 0 -20px;
 cursor: default;
}
input.dp-applied {
 width: 140px;
 float: left;
}

best jQuery Custom Scrollbar

2012-01-05T23:30:00.000+05:30

We ofeten need custom scrollbarsto scroll the content. Here I listed some best custom scrollbar which you can use in your future projects.

jScrollPane

jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS.

Tiny Scrollbar

Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

jQuery Custom Content Scroller

A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.

ShortScroll – A jQuery UI scroll bar

Jesse Baird has developed this custom scrollbar as a jQuery UI widget after seeing the scroll bar in Google Wave, which added functionality and style making much better than the browser default scroll bar..CSS3 background gradients to do all of the fancy background stuff so if you plan to support Internet Explorer and care about eye candy, plan on creating your own background images.

custom div scrollbar

This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. This small candy weights only 2.2 Kb. Here the rangeinput is used to control scrolling of a DIV. A little more coding and you can present your products like Apple does.
Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support.

LionBars

A free to use, lightweight jQuery plugin that makes scrollbars look like in OSX Lion.

jQuery quickie

This is a great technique that could be used on loads of websites. Instead of the regular pagination, where the user has to click to see the next page, unlimited scroll automatically loads the next page when the user is at the bottom.

Best Jquery autocomplete Plugins

2012-01-03T00:47:00.002+05:30

Jquery autocomplete allows you to easily create autocomplete/autosuggest boxes for text input fields. In this article will share 10 Useful Jquery Autocomplete Plugins which you can use in your future projects.
Ajax AutoComplete for jQuery
Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields.
It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.
jQuery Plugin: Auto Complete
Auto-complete takes data from the user tries to the list of words corresponding to the form of user input. The operation depends on the selected input, and also provides TN-dropping from the inside, so all you need is style ready for them. No adjustment is required, but the path to your script Ajax must be right, and you need the style in which UL drop-down.
jQuery plugin: Autocomplete from bassistance.de
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
How To: jQuery Autocomplete
This tutorial guides you through the preparation of an application for self-plugin jQuery bassistance.de complete this operation. Its very simple. Once you have your AutoComplete settings, since there was a link at the top of the documentation covers only your PHP functions.
jQuery Autocomplete
A small and simple yet robust form input autocomplete plugin. Uses either preloaded or Ajax request driven JSON data with options for formatting the list items and returned input value and custom events called when selecting an item or canceling the autocomplete box.
jQuery Autocomplete
This script is based on jQuery Autocomplete plugin made by PengoWorks listed just above. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc. It’s easily to edit the style of the dropdown result box, there are a couple of css classes.
Another jQuery Autocomplete Plugin
A jQuery autocompleter with caching options to limit server requests.
JQuery Autocomplete with Ajax PHP and MySQL
I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more.
Scriptaculous Autocomplete
An Ajax autosuggest script is supposed to help the visitor and present in real time (as they type) some possible results based on their entered words/characters. In my opinion, this is a great feature to enhance the user experience. It’s very easy to build an autocomplete form using scriptaculous and prototype. You just need one line of javascript.

jQuery Popup Modal Dialog

2012-01-03T00:33:00.001+05:30

jQuery UI Dialog
jQuery UI has always been my favorite tool for creating custom and rich User Interface. JQuery UI Dialog is part of the jQuery UI which is a complete bundle of effects and plugins built on jQuery. It is customizable via css and can be implemented in any project without restrictions. You can use this dialog box in five different forms: basic dialog, modal dialog, modal message, modal confirmation, modal form.
jqModal
qModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, and makes a great base as a general purpose windowing framework. It can be customized and it can act as a dialog, notice, modalbox, confirm-box, iframe-box or it can even display inline divs in modal windows.
NyroModal
Modal popup windows provide a quick way to show data without reloading the entire page. It has the ability to define many callbacks at different time in the process to allow you to edit the settings, the data or do whatever you need. It has error handling also and a nice function that I loved was to call _blank targeted iframes.
ColorBox
ColorBox is a lightweight, customizable lightbox plugin that simulates some things that you would like to accomplish with a jQuery popup modal dialog window. It can allow you to show popup ajax, inline and iframed content as well as photos and other media. It’s writting in jQuery plugin format and can be chained with other jQuery commands.
Simple jQuery Modal Window Tutorial
In this tutorial, I’m going to share how to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to “modal” and grab the DIV #id defined in the href and displays it as a modal window. jQuery has made everything so simple, be sure to check out the demonstrations, examples I made.
SimpleModal
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
Boxy
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.
ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
FancyBox
FancyBox is another jQuery plugin with nice easing and resize effects. This guy wanted something fresh and Mac-like so he created a plugin that delivers this ideea and style. It can group images in galleries and has a nice easeOutBack effect when closing the modal window. Check it out, it is simple and fancy!
jQuery BlockUI Plugin
The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

Best jQuery Tooltip Plugins

2012-01-03T00:24:00.000+05:30

Tooltips are very importa in website design. In mouse hover out the extra information show hide without hampering basic design or the main information.

Mostly Tooltip is hidden by default, when user hovers the cursor over an element it show extra information. jQuery make very easy to add an attractive tooltip to your website. Browsers will automatically display a tooltip when you provide a title attribute. Internet Explorer will also use the alt attribute.

qTip
qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tons of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!

Tooltip
Tooltip may be one of the most used tooltip plugins for jQuery. You can setup multiple tooltips on the same page that use different appearances as well as use PNG background images that render well in IE by simply using a built-in fixPNG option. This tooltip lis licensed under MIT/GPL.
Simpletip
Simpletip is exactly like it sounds; a simple jQuery tooltip plugin. Written by Craig Thompson, SimpleTip allows you to create tooltips with ease on any element on the page. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.. Simpletip is the predecessor to qTip listed above.

BeautyTips
BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called “talk bubbles” or “help balloons”) associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways.

jTip
jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user.

jQuery Tools: Tooltip
This tool corrects the situation. You’ll get a professional piece of sofware that is easy to understand and use. The tooltip plugin comes with two default effects: slideup and toggle and you can easily build your own effects. Positioning is flexible and there are redundant features. Inside the tooltip you can have any combination of HTML such as images, tables and forms. Tooltips can appear in any size and at any opacity.

Coda Popup Bubbles
Coda is a web development tool for the Mac that is popular among designers and developers. This isn’t an actual plugin for jQuery but is a tutorial that will walk you through every step of creating Coda-like tooltips. Code is all available as well as a demo and screencast.

Best Free Rich-Text Editors

2012-01-03T00:19:00.002+05:30

Rich-text editors are web components that allow users to edit and enter text within a web browser.
There are many rich-text editors out there. Here I listed best rich editor which you can use in your project.

TinyMCE

TinyMCE is an open source rich-text editor. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API.TinyMCE is very easy to integrate into other Content Management Systems.

Demo

FCK Editor

FCKeditor is another wildly popular open source online rich-text editor. It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data. It's lightweight and doesn't require any kind of installation on the client computer.
Demo

NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features.
Demo

Yahoo YUI Rich Text Editor

The Rich Text Editor is a UI control that replaces a standard HTML textarea; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution. The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.
Demo

WYMEditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup. WYMeditor's main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible.
Demo

BXE

BXE is an XML-based WYSIWYG editor that allows you to change an entire web page.
Demo

jquery cycle example

2011-12-31T18:52:00.000+05:30

When I came across this plugin and simple example first thing came to my minde that how to add “previous and Next” Button in slide show, so lets do it. I am using same HTML Code & CSS style used in“JQuery Cycle Plugin – Basic Example 2″. Please refer that so that you can understand.

<div id="slide1" class="pics">
<img src="images/beach1.jpg" height="200" width="200">
<img src="images/beach2.jpg" height="200" width="200">
<img src="images/beach3.jpg" height="200" width="200">
</div>
<div class="nav"><a href="#" id="prev">Prev</a> <a href="#" id="next">Next</a></div>

CSS Style for previous and Next buttona long with configuration.

Example 1: jQuery cycle plugin previous and Next links for slider.

$('#slide1').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});

Example 2: jQuery cycle plugin auto rotation. hover to pause, click to see next image.

$('#slide1').cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: '#s3',
pause: 1
});

Example 3: jQuery cycle plugin – show numeric pagination.

$('#slide1')
.before('
<div id="nav">')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
</div>

Quick Tips

/* How to stop slide show */
$('#slideshow').cycle('stop');
/* How to pause slide show */
$('#slideshow').cycle('pause');

Share this nice post:

jquery Accordion menus examples

2011-12-31T18:50:00.001+05:30

jQuery UI accordion:
The jQuery UI accordion widget is a great way to group logical sections of your page together and it can used very effectively for navigation.

jquery-ui-accordion

Demo Download

Simple Accordion with CSS and jQuery

Detailed tutorial how to create great looking accordion menu. It is really simple way to build a sliding accordion

jquery-simple-accordion

Demo Download
Accordionza – jQuery Plugin
Accordionza is a very flexible and lightweight jQuery accordion plugin.
Features: Easily configure all effects and speed, pause on hover, autoplay and autorestart, collapseable captions and more.

Demo
Horizontal Accordion Menu
This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

horizontal-javascript-accordion-menus

Demo
TinyAccordion JavaScript Accordion

This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. It now includes multi-level support, a parameter to determine whether only one panel can be expanded concurrently, and a hide/show all toggle.
Demo Download

Happy New year

2011-12-31T18:43:00.001+05:30

10 best jQuery Table Manipulation Plugins

2011-12-22T23:49:00.000+05:30

This article we are sharing some useful jQuery table plugins for you to display, sort, filter and manipulate your data in table. These plugins help you to create superb tables which are easy to impliment.

1. DataTables
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Features: ajax auto-loading of data, pagination, sorting columns, highlight sorted columns, extensive plug-in support, themeable by CSS.

2. Flexigrid
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

3. 2. TinySort
A plugin to sort child nodes by (sub) contents or attributes. It is very useful for ordering unordered lists or tables, but works on any type of node.
4. jTPS
jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability.

5. Colorize – jQuery Table Plugin
Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.

6. Fixed Header Tables
Fixed Header Tables takes valid table HTML and builds a fixed header as done in Microsoft excel and a scrolling body with optional footer.
7. jExpand
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.
8. Column Hover
A jQuery-plugin that highlights whole columns in a table when hovering over them. It’s supporting tables with colspans and rowspans, too!

9. tablesorter
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It supports multi-column sorting, cross-browser and easily extensible via its widget system.

10. Table Drag and Drop JQuery plugin
I’ve been using JQuery for a while now and really agree with its tag line that it’s the “The Write Less, Do More, JavaScript Library”. We’ve also got this code for dragging and dropping table rows that has proved very popular, so it seemed natural to combine the two and wrap up the table drag and drop as a JQuery plugin.

Reindex data in magento

2011-12-22T23:46:00.000+05:30

There are different ways we can re-index data in magent.

Example 1: reindex data via magento admin panel.
Easiest way is to login magento admin panel, got o “Systems > Index Management” and select all indexs, action to “Reindex Data” and click on submit button.
Example 2: how to reindex data programmatically in magento?.
Magento has different 9 different indexes. If you want to refresh all of them then following code will help you.

for ($i = 0; $i < = 8; $i++) {
$process = Mage::getModel('index/process')->load($i);
$process->reindexAll();
}

Example 3: Out of the box data reindexing in magento?.
Create a file reindex.php and execute this file on linux command prompt. If you reindex data manually using following script it will resolve the problem like reindex is incomplete or still showing indexing from long time, etc.
PS: Change path for ‘Mage.php’ & “indexer.php” file path in following code according to environment.

set_time_limit(0);
error_reporting(0);
require_once '/var/www/html/app/Mage.php';
umask(0);
$indexer="/var/www/html/shell/indexer.php";
if(file_exists($indexer))
{
$idxlist=array("catalog_product_attribute",
"catalog_product_price",
"catalog_product_flat",
"catalog_category_flat",
"catalog_category_product",
"catalog_url",
"catalogsearch_fulltext",
"cataloginventory_stock");
//reindex using magento command line
foreach($idxlist as $idx)
{
echo "reindex $idx n ";
exec("php /var/www/html/shell/indexer.php --reindex $idx");
}
}

Example 4: simple command to reindex in magento?.
If you are very good in linux then go the command prompt and execute following command to reindex data.

jquery cycle plugin

2011-11-27T11:43:00.001+05:30

jquery cycle plugin is the best plugin for slide show. Its very lightweight and very easy to configure.
First we need jQuery Library and cyble plugin. Either you download them or include them using following scripts.
Example:
Specify the effect name by either passing a string to the cycle

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
script>
<div class="slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" height="200" width="200">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" height="200" width="200">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" height="200" width="200">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" height="200" width="200">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" height="200" width="200">
div>

css best practice

2011-11-27T11:41:00.001+05:30

Avoid using inline styles in page.
Declare your most generic items first, then the not-so-generic and so on.
Organize the Stylesheet with a Top-down Structure
If you don’t have to reference specific object, it is strongly recommended to use class instead of id selectors
Use Useful Naming Conventions: Use lowercase characters to define your class. Use always presentational naming example. When assigning a class or id, ask yourself “What is this element for? Avoid using names that rely on location
CSS Shorthand makes development much easier and keeps your CSS clean, short & accessible.
Use Multiple Classes
Avoid Extra Selectors
Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements
If layout is not so complex in order to justify multiple files then it is better to have one large css file rather than multiple small files because that way you reduce http requests.
Giving precise and clear class names to your elements is a key. This will seriously avoid confusion & let you understand your CSS better and faster.
Combining all background images into one single image and displaying them using background positions is all we call CSS Sprites. CSS Sprites reduces the number of HTTP requests, saves bandwidth and loads faster.
Global Reset ensures almost an identical presentation of a site across all the browsers. There are many different resets from simple to complex ones.
CSS frameworks good for rapidly speed up our development time and creating clean grid structure. Some popular frameworks are:
960 CSS Framework, Blueprint CSS Framework, YAML, Yahoo YUI Grids CSS etc.
Using a CSS Frameworks is not always recommended but a CSS Reset is all you need.
Always use em instead of pt, px, cm
Optimize your css with CSS Compressors
Its always important to validate your CSS when you build it. This is to make sure that your CSS is error free and is interpreted in the right way in all the browsers. The W3C Validator has been a very popular online tool that validates CSS.
-------------------------
We should take a closer look at the elements and identify possible problem areas.
At this early stage you may need to make important design decisions so you must have a clear idea of how the design can be achieved from the very start. If you identify areas that are impossible to create on a living web page or would cause to many browser issues then its best to locate them now and notify the client before you begin.
Webpage Layout
After analyze your mockup Make webpage structure layout , Group content together, wrap each group with an rectangle, name each rectangle, comment each layer with comment.
PSD Group layers
Unnamed layers (Layer 1, Layer 1 copy, etc.) can be confusing and time consuming. Items that are logically connected should be grouped together. If your psd template is not proper group ask designer for grouping or just link each layers with groups.
Fixed, Fluid layout
The first question that needs to be asked is whether this is a fixed or liquid layout where each column can stretch.
We can group web-page layouts into three categories based on how their
width is set: ? xed-width, liquid (or ? uid), and elastic.
Browser support and accessibility
Confirm about target browser and audience before slicing your page. If client not targeting ie6 browser then you can free to use png image without any trick.However, if your target audience is broader or less computer savvy, then make sure to program for IE6. If website user also using ipad/iphone then use viewport for iPad sites.
Web safe fonts?
If in layout used fonts are not web safe font then clear client about the performance and browser related issue. Install font in your matchine before slicing your template.
File and Folder Structure:
Let’s create a proper folderand/file structure in root folder. When I set up a site for the first time my first job is to design how the pages are going to look then I usually construct the front page. This page should always be called index.htm or index.html. If your site is a small site, with only 5-10 pages, you may want to just have your web pages within your root folder without any subdirectories, but if your site is larger, and especially if you expect it to grow over time, you might want to consider having each page in it’s own directory.

jquery detect os (Operating system)

2011-11-26T13:24:00.001+05:30

The best way to detect a Operating system using JQuery. You can easily detect whether you are on linux or mac or window operating system.
$(‘#osInfo’).html(“Your OS is: ” + $.client.os + “”);
//To detect Mac OS:
if((navigator.platform.indexOf(“Mac”) != -1)) {
// code
}
$.browser.linux();
$.browser.mac();
$.browser.win();

Magento 404 error page Customization

2011-11-26T13:17:00.001+05:30

In this article we will show you how to Customizing the Magento Error Report and Maintenance Page. Also we will talk about how to configure 404, 503 & 500 error pages.

1. Magento 404 error page
when I started looking outside I came to know that Magento has a built-in error page. Whenever a customer visits a non-existing page, he is automatically redirected to a built-in 404 error page. However, we can change the default error page to our own custom error page. It’s not a tough dance to dance. quick 5 steps to configure 404 error page.

Step 1. Magneto has a strong CMS section. We can set our own error page by using it. We can also set a custom error page by changing the no-route template. Log in to your Magento Admin Panel and point your browser to CMS > Pages.

Step 2: Now open the page named 404 not found 1

Step 3: You will see that the Page information menu is active. Check the status as to whether it’s enabled or not. If it’s enabled then the content on this page will be shown or else the error page will show the content of no-routee.phtml file from your template directory or as specified in your layout file.

Step 4: From the left navigation panel, click on content. The content will be shown in
the editor. Click on Show/Hide Editor button to disable the visual editor.

Step 5: Now replace the content from the editor with your own content

and we are done with 404 error page layout change.

2. Magento 503 error page
Add the following rule to the start of your Magento .htaccess

RewriteRule ^report/.* 503.html [L,R=503]

RewriteRule ^report/.* 503.html [L,R=503]

This will then redirect any requests for an error report page using a 503 response code (Service Unavailable) and display the 503.html page in place of the standard Magento page. Similarly we can create page that will custom error message for 500 error.

3. Magento 500 error page.

RewriteRule ^report/.* 500.html [L,R=503]

How to Setup Mangeto

2011-11-26T13:14:00.001+05:30

1. Manual Installation of Magento

Step 1: Download the latest stable Magento package from Magento Community

Step 2: Change the file permissions for the Magento files.

- file: magento/var/.htaccess
- directory: magento/app/etc
- directory: magento/var
- all the directories under: magento/media

If you are using FTP, set the permissions of each to 777 or check read/write/execute for owner, user and group. If you are using SSH,
use the following commands:
chmod o+w var var/.htaccess app/etc
chmod -R o+w media
Step 3: Create a MySQL database and assign a user to it through cPanel -> MySQL Databases. Remember the database details, since you will need them during the script installation.
The MySQL database is created with your username as prefix – username_databasename, and this is the name you have to use for your application.
Step 4: In our example we will install Magento in the public_html/magento folder. Once the package is uploaded and extracted and you have a MySQL database, navigate to http://yourdomainname.com/magento:
Step 5: Choose the preferred Time Zone, Locale and Currency and Click on the Continue button.
Step 6: Enter the database details: Database Name, User Name and User Password. You can leave the other options intact. Click on the check box next to “Skip Base URL validation before next step”.
Step 7: At this point you should enter the personal information and the admin login details which you want to use. You can leave the Encryption Key field empty and the script will generate one for you.
Step 8: Write down your encryption key; it will be used by Magento to encrypt passwords, credit cards and other confidential information.
Well done! Your Magento installation was successfully completed. Now you can navigate to its Frontend or Backend.

2. Importing the Sample Data

Step 1: Download sample data from magento commerce website.
Step 2: Copy image into the media folder of magento.
Step 3: Now create new database and import some sample data to our newly created database before we install Magento.
Step 4: Reinstall magento using steps mentioned above (except creating new database). Mentioned magento database which has sample data. Magento will auto detect. If database has set of tables then it will skip the table creation and will auto detect product, category and other settings which are imported using sample data.

3. System Requirements

PHP Compatibility:
- 5.2.13+
- Required extensions:
  - PDO_MySQL
  - simplexml
  - mcrypt
  - hash
  - GD
  - DOM
  - iconv
  - curl
  - SOAP (if Webservices API is to be used)
- Safe_mode off
- Memory_limit no less than 256Mb (preferably 512)
MySQL:
- 4.1.20 or newer
- InnoDB storage engine

OR You can test your server for compatibility by following these simple steps:

Download the magento-check file to your computer and unzip it.
Upload the extracted magento-check.php file to the Magento directory on your server
In your browser navigate to this page: ( e.g. domain/magento-check.php )

magento country flag

2011-11-26T13:02:00.001+05:30

Magento is a new professional open-source eCommerce solution offering unprecedented flexibility and control. To show country flags in website header or footer section. Quick and easy steps to add country flags in header / footer are as follows.

< ?php if(count($this->getGroups())>1): ?>
<div id="countrySelector" class="w940 mT10">
<ul>
< ?php foreach ($this->getGroups() as $_group): ?>
<li>
<a alt="<?php echo $this->htmlEscape($_group->getName()) ?>" hre="" f="< ?php echo $_group->getHomeUrl(); ?>">
<img sr="" c="<?php echo $this-/>getSkinUrl('images/flag' . $this->htmlEscape($_group->getName()) . '.png') ?>" alt="< ?php echo $this->htmlEscape($_group->getName()) ?>" height="18" width="26">
</a>
</li>

< ?php endforeach; ?>
</ul>
</div>

< ?php endif; ?>

Step 2: Now add entry into page.xml file and file header block i.e. “html_header”.In case if you want to add flags in footer section then search for footer block and add following line in footer and do little css to align it correctly.Step 3: Upload flag images into “skin/frontend/currentTheme/images/” directory and make sure the flag file names are having store name is part of flag name.(i.e. Image name is “flagEnglish.gif”, “flagGerman.gif”. So store names are “English”, “German”, etc)Now clean the magento cache and reload the home page and you are done!!.In case if you are not able to see the flags then let me know, i would love to help you.

How to get all shopping cart items and total in magento

2011-11-26T12:55:00.001+05:30

Here, I will show you how you can get all shopping cart items and total in magento. Magento has a the feature to create rules in the Shopping Cart. fallow below steps.

     $items = Mage::getSingleton('checkout/session')->getQuote()->getAllItems();  
     foreach($items as $item) {  
        echo 'Product ID: '.$item->getProductId().'';  
        echo 'Product Name: '.$item->getName().'';  
        echo 'Product Sku: '.$item->getSku().'';  
        echo 'Product Quantity: '.$item->getQty().'';  
        echo 'Product Price: '.$item->getPrice().'';  
      
    if ($this->helper('tax')->displayCartPriceInclTax() || $this->helper('tax')->displayCartBothPrices()):  
        $_incl = $this->helper('checkout')->getPriceInclTax($item);  
        echo 'Product Price: '. $this->helper('checkout')->formatPrice($_incl- $item->getWeeeTaxDisposition());  
    else:  
        echo 'Product Price: '. $magento_style_price = Mage::helper('core')->currency($item->getPrice());  
    endif;  
       echo "";  
     }  
      
    // Total items added in cart  
    $totalItems = Mage::getModel('checkout/cart')->getQuote()->getItemsCount();  
      
    // Total Quantity added in cart  
    $totalQuantity = Mage::getModel('checkout/cart')->getQuote()->getItemsQty();  
      
    // Sub Total for item added in cart  
    $subTotal = Mage::getModel('checkout/cart')->getQuote()->getSubtotal();  
      
    //grand total for for item added in cart  
    $grandTotal = Mage::getModel('checkout/cart')->getQuote()->getGrandTotal();

How to add featured product in magento

2011-11-26T12:48:00.001+05:30

This tutorial will show you how to implement a featured products. First you have to create the static block using magento admin panel and then include this static block into the magento. There are different ways we can add static blocks. yet another attempt to explain with quick and easy examples.
Example 1: how to include static block in phtml file?
Let us suppose, you have created static block with identifier “promo_block” in magento admin.
Now, you can call the static block from any phtml file with the help of following code:

echo $this->getLayout()->createBlock('cms/block')->setBlockId('promo_block')->toHTML();

Example 2: How to include static block on product view page?
We will refer the same static block “promo_block”. Now open “catalog.xml” file from current theme folder (i.e.design/frontend/themeName/layout/catalog.xml) and search for string “”.
You can add following code just before closing tag of product view page. we are adding “promo_block” static block into right reference. However you can add this block into any area like “content”, “left”, etc

<reference name="right">
<block type="cms/block" name="promo_block" as="promo_block">
<action method="setBlockId"><block_id>promo_blockblock_id>action>
block>
reference>

Share this nice post:

jQuery contains() example

2011-11-26T12:33:00.001+05:30

jQuery.contains() check to see true if both parameters are DOM nodes and the second parameter is contained inside the first.
Syntax:
$(“div:contains(jquery)”)
// selects all elements matched by that contains the text “jquery″.

Example:
$(“div:contains(‘jquery’)”).css(“color”, “red”);

jQuery closest() method

2011-11-26T12:32:00.001+05:30

jQuery closest() method works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn’t match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned.
Passing in a context will typically make your closest() calls much faster.
Example:
$(‘input[type="button"]‘).click(function() {
$(this).closest(‘li’).fadeOut();
});

Jquery fix IE7 z-index Issues

2011-11-26T12:29:00.001+05:30

To resolve this issue use blow conditional code for ie7. This code will start with a z-index of 1000, and decrement the z-index for each DIV element of the page by 10, giving the first DIV a z-index of 1000, the second, 990, the third 980, and so on.
$(function() {
var zIndexNumber = 1000;
$(‘div’).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber -= 10;
});
});

2011-11-21T23:29:00.001+05:30

HTML5 new elements for better structure
New Doctype:

1.

element: a straddles an article, which is intended to be an independently distributable document, like an article in a magazine.Here are this element’s attributes:

. accesskey
. class
. contenteditable
. contextmenu
. dir
. draggable
. hidden
. id
. lang
. spellcheck
. style
. tabindex
. title

>
<html>
<body>
<article>
<header>
<h1>It’s going to rainh1>
<p><time pubdate datetime=”2010-10-09T14:28-08:00”>time> p>
header>
<p>Current forecast is for bigtime rain.p>
<section>
<h1>Commentsh1>
<article>
<footer>
<p>Posted by: Sam Buddp>
<p><time pubdate datetime=”2010-10-10T19:10-08:00”>
time>p>
footer>
<p>We need the rain.p>
article>
section>
article>
body>
html>

element:The

element represents an aside to the text, such as a sidebar. The text in an

element is usually set
off from the main body of text. Here are the attributes of this element.

. accesskey
. class
. contenteditable
. contextmenu
. dir
. draggable
. hidden
. id
. lang
. spellcheck
. style
. tabindex
. title

3. For multimedia content, sounds, music or audio/ video streams.

<strong><audio>strong> : Supports multimedia content, sounds, music or other audio streams
<strong><video>strong> : Supports video content, such as a movie clip and video streams
<strong><source>strong>: Media resources for media elements, defined inside video or audio elements
<strong><embed>strong> : Embedded content, such as a plug-in
<strong><track>strong> : Text tracks used in mediaplayers

4. The The canvas element can be more useful with JavaScript to make drawings on a web page.
5. The Element: The element can appear as a button, check box, or radio button.
e.g. command tag tutorial.

<menu type=”toolbar”>
<command type=”radio” radiogroup=”colors” checked=”checked” label=”Left” onclick=”red()”>
<command type=”radio” radiogroup=”colors” label=”Center” onclick=”blue()”>
<command type=”radio” radiogroup=”colors” label=”Right” onclick=”green()”>
<hr>
<command type=”command” disabled
label=”Publish” onclick=”publish()”>
menu>

<aside>

<bdi>

<mark>

<meter>

<nav>

<ruby>

<rt>

<rp>

<time>

<wbr>

New Media Elements:

<audio>

<video>

<embed>

<track>

WYSIWYG Text and HTML Editor

2011-11-21T23:27:00.001+05:30

An HTML editor is a software application for creating web pages. Here are 10 WYSIWYG (“what you see is what you get”) editors that are commonly used.

TinyMCE

TinyMCE, also known as the Tiny Moxiecode Content Editor. It is a platform independent an open source web based Javascript HTML WYSIWYG editor. It’s easy to integrate, and is highly customizable with themes and plugins. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.
Features:
Easy to integrate – Only a few lines of code needed.
Customizable – Themes and plugins, block invalid elements and force attributes.
Browserfriendly – Mozilla, MSIE, FireFox, Opera, Safari and Chrome.
Lightweight – PHP/.NET/JSP/Coldfusion GZip compressor, Makes TinyMCE 75% smaller and a lot faster to load.
AJAX Compatible – You can easily use AJAX to save and load content!
International – Multilanguage support using language packs.
Open Source – Free under the LGPL license, millions of ppl help test and improve this editor every day.

fckeditor

This HTML text editor brings to the web much of the power of desktop editors like MS Word. It’s lightweight and doesn’t require any kind of installation on the client computer.
Features:
Outputs XHTML 1.0
CSS support for better integration with your web site
Font formatting: type, size, color, style, bold, italic, etc
Text formatting: alignment, indentation, bullets list, etc
Cut, Paste, and Paste as Plain Text, Undo and Redo
Paste from Word cleanup with auto detection
Image insertion, with upload and server browsing support
Right click context menus support
Plugins support
Spell checker
Lightweight and fast
Automatic browser detection and customization

Yahoo YUI Rich Text Editor

The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution. it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.

NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features.

WYMeditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup.
Features:
XHTML strict + CSS compliant
No font or text formatting, sizes or colors – WYMeditor is CSS-based
Designed to be easy to integrate into your application
No installation needed – this is 100% Javascript code – no plugin, no extension
Image, link, table support
Skins support via CSS
APIs, plugins support
Free and Open Source
Major browsers support

MarkItUp!

Markitup is a Jquery plugin that allows you to turn textarea’s into markup editors in any markup you wish. It’s lightweight (the script weighs in at only 6.5kb), supports keyboard shortcuts, has a built-in Ajax live preview and many more features that make markItUp! an excellent choice.

jQTouch plugin for mobile web development

2011-11-21T23:26:00.001+05:30

jQTouch is a jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and and Palm webOS.
Script:


dp-highlighter
$(document).jQTouch({
   icon: 'jqtouch.png',
   statusBar: 'black-translucent'
});

Features (Now Beta 3!):
Easy Setup
Image Preloading
Callback Events
Javascript Behavior
Full Strength Ajax
Offline Caching
Added minified code

Magento error page Customization

2011-11-21T23:24:00.001+05:30

1. Magento 404 error page
when I started looking outside I came to know that Magento has a built-in error page. Whenever a customer visits a non-existing page, he is automatically redirected to a built-in 404 error page. However, we can change the default error page to our own custom error page. It’s not a tough dance to dance. quick 5 steps to configure 404 error page.
Step 1. Magneto has a strong CMS section. We can set our own error page by using it. We can also set a custom error page by changing the no-route template. Log in to your Magento Admin Panel and point your browser to CMS > Pages.
Step 2: Now open the page named 404 not found 1
Step 3: You will see that the Page information menu is active. Check the status as to whether it’s enabled or not. If it’s enabled then the content on this page will be shown or else the error page will show the content of no-routee.phtml file from your template directory or as specified in your layout file.
Step 4: From the left navigation panel, click on content. The content will be shown in
the editor. Click on Show/Hide Editor button to disable the visual editor.
Step 5: Now replace the content from the editor with your own content
and we are done with 404 error page layout change.
2. Magento 503 error page
Add the following rule to the start of your Magento .htaccess

RewriteRule ^report/.* 503.html [L,R=503]

############################################
## rewrite errors to 503 error document
RewriteRule ^report/.* 503.html [L,R=503]

This will then redirect any requests for an error report page using a 503 response code (Service Unavailable) and display the 503.html page in place of the standard Magento page. Similarly we can create page that will custom error message for 500 error.
3. Magento 500 error page.

############################################
RewriteRule ^report/.* 500.html [L,R=503]

Share this nice post:

Query auto rotation images

2011-11-21T23:22:00.001+05:30

The jQuery Cycle Plugin is a slideshow plugin that supports huge options for customizing your slideshow. This plugin allows you to quickly and easily create a slideshow out of anything contained within a given div element.

Prev Next

CSS Style for previous and Next buttona long with configuration.Example 1: jQuery cycle plugin previous and Next links for slider. $('#slide1').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next', prev: '#prev' }); Example 2: jQuery cycle plugin auto rotation. hover to pause, click to see next image. $('#slide1').cycle({ fx: 'fade', speed: 300, timeout: 3000, next: '#s3', pause: 1 }); Example 3: jQuery cycle plugin – show numeric pagination.view plaincopy to clipboardprint? $('#slide1') .before('

') .cycle({ fx: 'turnDown', speed: 'fast', timeout: 0, pager: '#nav' });

CAPTCHA control for handling form SPAM

2011-11-20T16:52:00.001+05:30

captcha

Recently I used a free utility reCAPTCHA in my website contact form. The commonly accepted approach of handling form SPAM is by using a CAPTCHA control on your forms. reCAPTCHA helps prevent automated abuse of your site
Below are step-by-step instructions for integrating reCAPTCHA in your CI app.

Create a reCAPTCHA account
Download the reCAPTCHA PHP library
Use the library in your project

To change the theme and other options, simply create a dictionary called RecaptchaOptions in a script-tag:





Enter the two words below:

    

Choose captcha format:

Image
or Audio

Absolutely, the reCAPTCHA website has detailed instructions for how to alter the look and feel of the reCAPTCHA form control.
http://www.google.com/recaptcha/whyrecaptcha

jQueryexample

css3 box shadow

2011-11-20T16:50:00.001+05:30

box-shadow is part of CSS 3. This property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset.
There are so many online website where you can generate shadow effect.

#shadow
{

-webkit-box-shadow: 5px 5px 5px #888;

-moz-box-shadow: 5px 5px 5px #888;

box-shadow: 5px 5px 5px #888;

}

inset changes the shadow from an outer shadow (outset) to an inner shadow 
.shadow {
 -moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
  box-shadow:inset 0 0 10px #000000;

PSD to XHTML Best Practice

2011-11-20T16:48:00.001+05:30

While we are going to convert PSD file into a fully CSS based xhtml page we should use below techniques and best practices.

We should take a closer look at the elements and identify possible problem areas.
At this early stage you may need to make important design decisions so you must have a clear idea of how the design can be achieved from the very start. If you identify areas that are impossible to create on a living web page or would cause to many browser issues then its best to locate them now and notify the client before you begin.

Webpage Layout
After analyze your mockup Make webpage structure layout , Group content together, wrap each group with an rectangle, name each rectangle, comment each layer with comment.

PSD Group layers
Unnamed layers (Layer 1, Layer 1 copy, etc.) can be confusing and time consuming. Items that are logically connected should be grouped together. If your psd template is not proper group ask designer for grouping or just link each layers with groups.

Fixed, Fluid layout
The first question that needs to be asked is whether this is a fixed or liquid layout where each column can stretch.
We can group web-page layouts into three categories based on how their
width is set: ﬁ xed-width, liquid (or ﬂ uid), and elastic. for detail visit:http://www.flexiblewebbook.com/downloads/FlexibleWebDesign_sample_ch1.pdf

Browser support and accessibility
Confirm about target browser and audience before slicing your page. If client not targeting ie6 browser then you can free to use png image without any trick.However, if your target audience is broader or less computer savvy, then make sure to program for IE6. If website user also using ipad/iphone then use viewport for iPad sites.

Web safe fonts?
If in layout used fonts are not web safe font then clear client about the performance and browser related issue. Install font in your matchine before slicing your template.

File and Folder Structure:
Let’s create a proper folderand/file structure in root folder. When I set up a site for the first time my first job is to design how the pages are going to look then I usually construct the front page. This page should always be called index.htm or index.html. If your site is a small site, with only 5-10 pages, you may want to just have your web pages within your root folder without any subdirectories, but if your site is larger, and especially if you expect it to grow over time, you might want to consider having each page in it’s own directory.
1. images – containing all your images.
2. styles – containing your style sheets
3. pages – containing all your html pages
4. template – containing any templates
5. documents – containing any documents other than html pages such as Adobe Acrobat files, Word Files etc.

Site define: Create and configure a site in Dreamweaver. If you do not think about your site structure before designing, you most likely will have a big mess of files and folders that will become cumbersome to manage.
Benefit: Your links can be tracked and maintained easily.Steps:http://www.pserie.psu.edu/compcntr/guides/ConfigureDreamWeaver.pdf
http://www.adobe.com/designcenter/tutorials/drw8at_configure/
- Open Dreamweaver. Choose Site > New Site. The Site Definition dialog box appears.
- Local Root Folder – This is where all the files for the site are stored, the one which you created earlier. Browse for this folder and click on select.
- Enter a name for your site.
- Type in the location of this folder, or use the browse button to locate
- If this is checked, it can speed up your site management operations. You should have this checked.
  Define your Remote Site
  - Select Remote Info from the Category list in the Site Definition dialog.
  - Select FTP in the Access menu. enter all required fields
    - Your Domain:
    - Your Username:
    - Your Password:
    - Your site’s IP address:

Grab font sizes, font families and basic colors from the PSD and set up up CSS defaults for these including your favorite snippet.
Measure the layout width so that we can create a #container block for the content as the page needs to be centred so all content can be within the container. For standard 1024px monitor target we use 1002px max width. If you layout more than this width then clear your client for the same.
In the index.html file let’s type our basic layout with the main divs with proper comments.

Use Proper Image Formats and Optimize GIF, JPG, PNG files
If you use the wrong image format, your images will be distorted and unclear, and will also slow down the speed of loading a website. When choosing an image format, we basically have three popular formats to choose from: JPEG, GIF and PNG. Each format has its own strength and weaknesses:
- JPEG (JPEGsare the default choice for the web. JPEG can display millions of colors and because it has the smallest file size of all, it is the best choice for detailed images and photographs )
  - Excellent for rich coloured images
  - Decent file size compression to quality ratio
  - Doesn’t support animation
  - Doesn’t support transparency or alpha-blending
- GIF (GIFsare similar to PNGs. Using this format your limited to 256 colours, GIF is a lossless format, which means that no image quality is lost when the image is compressed. GIFs can be made transparent and can be animated as well.
  - Small file size
  - Supports transparent regions
  - Supports animation
  - Limited colours (supports up to 256 colours maximum)
  - Doesn’t support partial transparency or alpha-blending; making transparent regions look chipped and unsmooth
- PNG (PNGs are my preferred choice when it comes to background images and logos; especially when full or partial transparency is involved)
  - Can be in true or indexed colour format
  - Supports true transparency and alpha-blending
  - Cannot be animated
  - File size can be big
  - Cross-browser support is an iffy deal (especially when it comes to Internet Explorer)
PNG-8 and PNG-24 – 8-bit PNGs mean that the image is 8 bits per pixel, while 24-bit PNGs mean 24 bits per pixel. PNG-24 can handle a lot more color and is good for complex images with lots of color such as photographs (just like JPEG), while PNG-8 is more optimized for things with simple colors, such as logos and user interface elements like icons and buttons. PNG-24 natively supports alpha transparency, which is good for transparent backgrounds.
For details: http://sixrevisions.com/web_design/web-designers-guide-to-png-image-format/
There are other formats too – such as TIF,TGA, ICO, and others but none of these are useful on the Web since they are not viewable in Web browsers.
You can read more about these image formats on Wikipedia:
Start at the top and work down.
Working logically helps you break the job down into sections so that you can work on one thing at a time and plan the work accordingly.
Naming convention
I like to use logical names for the sections and although there is some debate about what to use for each element it does help if your naming convention allows for the fact that maybe your html will be arranged at a later date and that your element names still make sense. If for instance your left column is called #leftcol and the at a later date you switch it using CSS to be the right column then it could be very confusing. It’s better to use a more generic but functional name such as #sidebar1 for the left column and #sidebar2 for the right column.
Remember that IDs must be unique and can’t be used more than once per page.
CSS Reset and CSS Framework
Declare the Correct DocType
The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup.
Don’t use inline styles
Inline styles cause more maintenance headaches. Inline CSS should not be allowed in strict doctypes.
Add all CSS Files Within the Head Tag.
Putting stylesheets in the HEAD allows the page to render progressively
Place Scripts at the Bottom of Your Page
Set up some reasonable defaults for text, link colors and font styles heading, img border, clear property
Ensure All Tags are Closed
Tag Names Lowercase
Compress Your CSS and order the properties
Minify JavaScript and CSS
Don’t forget the “alt” tags
Save HTTP Requests by Combining Images
CSS Sprites are the preferred method for reducing the number of image requests.
Group External CSS Files
Group Selectors
Use Shorter Class and ID Names
Utilizing long class names can add additional bytes to a site, and slow it down in the process. Long names are great for allowing designers to understand them more clearly, but using shorter class and ID names can be more beneficial in the long run.
CSS Comments Should Be Removed
create grouped css blocks and define each group in top in a comments
Abbreviate Hexadecimal Colors ( color:#fff;)
Providing Fallback Fonts
Redundant Units For Zero Values (padding:0 0 5px 0;)
Avoid Mountain of Div Tags
Use Modular IE Fixes
Using Global Styles
Encoding Special Characters
Don’t use improperly nesting tags
Define accesskey when appropriate
Using a stylesheet for print allows you to hide elements you don’t want printed
Don’t use quotation marks around paths/URLs when setting a background image
Declare relative font sizes instead of absolute.
Avoid !important.
Clear floated containers
Avoid Extra Selectors
Use shortcuts while slicing it will save your time.
Photoshop shortcut:
http://morris-photographics.com/photoshop/shortcuts/downloads/PSCS3_Keyboard_Shortcuts_PC.pdf
If you do not use the web font for your design, please:
Substitute images for the fonts
Utilize them by using the Cufon technique
Utilize them by using the sIFR technique
Utilize them by using the @font-face technique
Test with different browsers
Validate Your Code

jQuery’s on() methods

2011-11-20T16:44:00.003+05:30

Currently we have three different event API pairs: bind/unbind, live/die, and delegate/undelegate. Now jQuery team have announced in v1.7 a new method for binding events called on. This method combines the functionality of live, bind, and delegate . It allowing you to specify the binding method based the arguments passed rather than by using different function names. bind() and delegate() methods still exist, but the team recommend you use on() and off() for all new projects using jQuery 1.7.
$(elements).on( events [, selector] [, data] , handler );

$('a').bind('click', myHandler);
$('a').on('click', myHandler);

$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);

$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');

$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);

$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');

$('a').live('click', fn);
$(document).on('click', 'a', fn);

$('a').die('click');
$(document).off('click', 'a');

jQuery Wow Slider

2011-11-20T16:44:00.001+05:30

Wow Slider is a free tool for creating awesome jQuery image sliders fully customizable with 9 slice efects. It has some unique effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) that we haven’t seen on any other JQuery sliders.
If you want to use WOW Slider on a school site, your non-commercial blog or non-profit organization website, just download WOW Slider and use it for free.

Features:
Support for preloading of images
Customizable width and height
Image ALT and TITLE options
Support for randomizing order
Can have multiple copies on same page
Support for html captions per image
Prev, Next Controls, Bullets Controls, Caption (html allowed) Controls
All controls are customizable via css
Option to enable or disable each control
Option to stop animation on mouse over
Advanced slices transition effects

jQuery card flip effect

2011-11-20T16:43:00.001+05:30

jQuery card flip effect
Image flipping becoming popular these days. Flip! A jQuery plugin that will flip easily your elements in four directions: left, right, top, and bottom. Flip! is compatible with most web browsers including Microsoft’s Internet Explorer versions 6 and above, Google Chrome, Mozilla Firefox, Opera, and Apple Safari.
The function selects the page element with the id of “flipped” and calls the function flip() which is part of the Flip! plugin.
$(“#flipbox”).flip({
direction:’tb’
})

IE7 Z-Index Issues

2011-11-20T16:42:00.001+05:30

IE7 has a problem rendering z-indexes unpredictable orders. I had an absolutely positioned div and under it I had a another absolutely positioned element.Element stacked according to source order thought z-index you give more to first element.
To resolve this issue use blow conditional code for ie7. This code will start with a z-index of 1000, and decrement the z-index for each DIV element of the page by 10, giving the first DIV a z-index of 1000, the second, 990, the third 980, and so on.
$(function() {
var zIndexNumber = 1000;
$(‘div’).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber -= 10;
});
});

css3 round corner box

2011-11-20T16:40:00.001+05:30

Below is the simple code to create round corner box. Let we have to make our header block round corner.

.header {
color:#fff;
background:#000;
width:35px;
height:60px;
text-align:center;
font-size:0.7em;
padding:3px 0 0 0;

opacity: 0.5;filter:alpha(opacity=50);zoom:1;

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:0px;

}

input box css

2011-11-20T16:39:00.001+05:30

Forms are an essential part of interaction on the Internet but they can look rather drab.modify the inputbox in my new module of css:

A simple input style property with css2:
CSS:
input .submit
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}

.button {
    border: none;
    background: url('buttnbg.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    border: none;
    background: url('buttnbg') no-repeat bottom left;
    padding: 2px 8px;
}

HTML:
‹ input type="submit" value="go!" class="submit" /›

CSS3 button style: It's a simple button we can create with transparent PNG gradient background, border, border-radius, box-shadow, and text-shadow.

    .buttoncss3{
    background: #222 url(buttonbg.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    position: relative;
    cursor: pointer;
    }

The CSS3 property included

moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);

We can also include gradient color with CSS3:

.button{
 color: #fef4e9;
 border: solid 1px #da7c0c;
 background: #f78d1d;
 background: -webkit-gradient(linear, left top, left bottom, 
from(#faa51a), to(#f47a20));
 background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
 filter:  progid:DXImageTransform.Microsoft.
gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:hover
 {
 background: #f47c20;
 background: -webkit-gradient(linear, left top, left bottom, 
from(#f88e11), to(#f06015));
 background: -moz-linear-gradient(top,  #f88e11,  #f06015);
 filter:  progid:DXImageTransform.Microsoft.
gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

CSS# Gradient: background: #0060df;

background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);

background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );

Example2:

.button2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 10px 5px 10px;
    border: solid 1px #CCC;
    background: #ba4742;
    text-shadow: 0px 1px 0px #000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 1px 3px #111;
    -moz-box-shadow: 3px 3px 1px #999;
    -webkit-box-shadow: 3px 3px 1px #999;
    cursor: pointer;
}
.button2:hover {
    background: #a33f3a;
}
Example3:
 
.button3 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 10px 5px 10px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #000;
    text-decoration: none;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    background: #0060df;
    background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );
    cursor: pointer;
}
.button3:hover {
    background: -moz-linear-gradient(90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
    background: -webkit-gradient(linear, left bottom, left top, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78e2ff', endColorstr='#3944a8', GradientType=0 );
}
Example4:
 
.button4 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #000;
    padding: 5px 10px 5px 10px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #FFF;
    text-decoration: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #ffcc66;
    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffbc47 51%, #ffc75d 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #ffbc47), color-stop(0.9, #ffc75d));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc66', endColorstr='#ffe6b6', GradientType=0 );
    cursor: pointer;
}
.button4:hover {
    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffe6b6 51%, #ffc75d 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #fff), color-stop(0.9, #ffc75d));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6b6', endColorstr='#ffe6b6', GradientType=0 );
}
 
 
 

Example5:

.button5 {

font-family: Verdana, Geneva, sans-serif;

font-size: 24px;

color: #FFF;

padding: 5px 50px 5px 50px;

border: 1px solid #999;

text-shadow: 0px 1px 1px #666;

text-decoration: none;

-moz-box-shadow: 0 1px 3px #111;

-webkit-box-shadow: 0 1px 3px #111;

box-shadow: 0 1px 3px #111;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

background: #64a724;

background: -moz-linear-gradient(top, #64a724 0%, #579727 50%, #58982a 51%, #498c25 100%);

background: -webkit-gradient(linear, left top, left bottom, from(#64a724), to(#498c25), color-stop(0.4, #579727), color-stop(0.5, #58982a), color-stop(.9, #498c25), color-stop(0.9, #498c25));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a724', endColorstr='#498c25', GradientType=0 );

cursor: pointer;

}

.button5:hover {

border: 1px solid #FFF;

}

Example6:

.button6 {

font-family: "Arial Black", Gadget, sans-serif;

font-size: 22px;

color: #443333;

padding: 5px 50px 5px 50px;

border: 1px solid #999;

text-shadow: 0px 1px 1px #CCC;

text-decoration: none;

-moz-box-shadow: 0 1px 3px #111;

-webkit-box-shadow: 0 1px 3px #111;

box-shadow: 0 1px 3px #111;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

background: #696969;

background: -moz-linear-gradient(top, #d1d1d1 10%, #7b7b7b 60%, #696969 80%, #696969 100%);

background: -webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#7b7b7b), color-stop(0.4, #d1d1d1), color-stop(0.8, #7b7b7b), color-stop(.9, #696969), color-stop(0.9, #696969));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#7b7b7b', GradientType=0 );

cursor: pointer;

}

.button6:hover {

color: #000;

}

Example7 input field style:

input{  
        padding: 5px;  
        font-size: 15px;  
        text-shadow: 0px 1px 0px #fff;  
        outline: none;  
        background: -webkit-gradient(linear, left top, left bottombottom,
 from(#bcbcbe), to(#ffffff));  
        background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);  
    }

input:focus {  
        -webkit-box-shadow: 0px 0px 5px #007eff;  
        -moz-box-shadow: 0px 0px 5px #007eff;  
        box-shadow: 0px 0px 5px #007eff;  
    }

How to Use above example in your page?

First, copy the .button style and paste css page (external on internal 
area-in header between style tag).

and in HTML element where you want the button to be 
(eg.  "submit" name="submit1" value="Submit" class="button" />). 
You can call CSS classes to any element such as link, p, span, div, 
input, button, etc.

 
Note: CSS3 button works  following browsers. 
Mozilla Firefox – 3.6.14 : Excellent
Google Chrome – 9.0 : Excellent
Safari – 5.0.3 : Excellent
Opera 11.01 : Good
Internet Explorer 8 : Poor
You can modify these examples to create unlimited text and box shadow, 
linear gradient and radius effects.

Text-overflow property - css3 ellipsis

2011-11-20T16:37:00.001+05:30

Some times when data comes dynamically it may fall outside the element’s rendering box. CSS3 provides a great convenience when it comes to truncating too-long text: the text-overflow property,this property allows the clipped content to be visually represented by the string “…” (called an “ellipsis”) in the non-clipped area. Most modern browsers already support the CSS3 text-overflow property, which will automatically calculate the right place to truncate text, and add the ellipsis (except in Firefox). It works for Internet Explorer, Safari, Chrome and Opera.

Syntax
text-overflow: clip|ellipsis|string;

Style:

-o-text-overflow: ellipsis is how to make it work in Opera. 
This works from at least Opera 9.0.

If you need to support firefox too then use jQuery.dotdotdot, plugin. It is a advanced cross-browser ellipsis for multiple lines content.

css3 - opera logo

2011-11-20T16:34:00.001+05:30

Below is a perfect example of this is how to use css3 gradient. I often looks opera logo. Even in photoshop or illustrator its difficult to create. but below is an example without any image designer made the logo with simple css3 gradient property.

Border Radius

-moz-border-radius: 220px/235px;
-webkit-border-radius: 220px 235px;
border-radius: 220px/235px;

Gradients

background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, 
    #800000 85%, #b80304);
background:   -o-linear-gradient(        #FE878A, #E71616    , #800000 80%, 
    #800000 85%, #b80304);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A),
    color-stop(50%, #E71616), color-stop(80%, #800000), 
    color-stop(85%, #800000), to(#b80304) );

Box Shadow

-webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
   -moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
        box-shadow: 0 100px 30px hsla(0,0%,0%,.2);

HTML:

CSS:

JQuery alternate row style

2011-11-17T12:04:00.003+05:30

If you have a table with lots of rows, it is really need to set different background color for alternating rows. If your table row are generating dynamically then its not possible through html. Use below code to add a different background color to every other row.

In CSS define a class even and odd.

jquery replace id of an element

2011-11-17T12:04:00.001+05:30

Below is a simple code to replace id selector from an element.

If you click on me, I will disappear.

jQuery cheat sheet

2011-11-17T12:02:00.001+05:30

Cheat Sheets are really helpful for new jquery learners to call up the things quickly. As a developer I take so much help from these cheat sheets. Below you can find some most popular and very useful jQuery cheat sheet collection on the Internet.

jQuery 1.5 Visual Cheat Sheet

jQuery Visual Cheat Sheet, the refined and updated version of the popular woork’s jQuery Cheat Sheet. The new edition includes all the reference you will ever need for jQuery

Article : http://woorkup.com/2011/02/19/jquery-1-5-visual-cheat-sheet/

jQuery 1.4.2 Visual Cheat Sheet

Download: http://woorkup.com/wp-content/uploads/2010/06/jQuery-Visual-Cheat-Sheet-1.4.2.pdf

jQuery 1.3 Cheatsheet

http://blog.acodingfool.com/cheatsheets/jquery-1-3-cheatsheet/

jQuery 1.3 cheat sheet wallpaper

Article : http://www.gmtaz.com/jquery-13-cheatsheet-wallpaper/

jQuery cheatsheet wallpaper

Download: http://cheatsheet.googlecode.com/svn/trunk/cheatsheet/src/jquery/jquery1.2-cheatsheet-1280-001.png

jQuery Selectors

jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips.

Article : http://refcardz.dzone.com/refcardz/jquery-selectors

jquery client browser width/height

2011-11-17T12:01:00.001+05:30

In webpages we need to format the images text differently according to the screen resolution of the user.
Below is code to detect browser width and height. You can write your code according the condition.

To get screen width or height use function:

var winHeight = $(window).height();
var winWidth = $(window).width();

$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
// statement
}
else  {
//statement
}
});

$(document).ready(function() {
$(window).resize(function() {
if ($(window).height() < 800) {
//statement
}
else {
//statement
}
});
});

jQuery .isNumeric() function

2011-11-17T12:00:00.003+05:30

jQuery .isNumeric() is new in jQuery 1.7. The $.isNumeric() method checks whether its argument represents a numeric value. If so, it returns true. and if input is not numeric then returns false. It is also useful as it also validate for decimal hex numbers and exponential strings.

$.isNumeric(16); // true

$.isNumeric(+10); // true

$.isNumeric(3.1415); // true

$.isNumeric(“8e5″); // true

$.isNumeric(NaN); // false

jQuery Image Resize in aspect ratio

2011-11-17T12:00:00.001+05:30

If you are looking for resize image as per its parent block and it must maintain aspect ratio?

jquery plugin “Aspect Ratio”. It fit image to parent container

e.g. suppose i have an

having ID as container. all the images

should be resized as per the width of the

and images should

maintain it’s aspect ration too.

Add the jquery library to your page.
Add the Dimensions plugin to the page – http://plugins.jquery.com/project/dimensions
Finally, Add the Aspect Ratio plugin to the page.

To manipulate all images on a page w/ the AspectRatio plugin, simply type…

$(‘img’).AspectRatio();

How to detect iPad, Iphone using jQuery/javascript

2011-11-12T20:50:00.001+05:30

Use below simple snippet of code to detect iPad.
<script type="text/javascript">
function chkiPad(){
return (navigator.platform.indexOf("iPad") != -1);
}
</script>
jQuery code for iphone / ipad / ipod detect:
<script type="text/javascript">
$(document).ready(function(){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
// write your code
}
});
</script>

What is jQuery selectors

2011-11-12T20:38:00.001+05:30

jQuery Selectors are one of the most important aspects to apply an effect on your page. jQuery makes it easy to select elements in a document by element name, attribute name or by content.

Selector	Description
*	It will select all the elements
#id	The element with id name myid will be selected
.class	The element with class name myclass will be selected
.class1.class2	It will select all the elements of class_first and class_second classes
element	All p elements will be selected
:first	The first li element will be selected
:last	The last li element will be selected
:even	All even tr elements will be selected
:odd	All odd tr elements will be selected
:eq(index)	The index starts at 0. The third element in a list will be selected.
:gt(no)	List elements with an index greater than 2 will be selected
:lt(no)	List elements with an index less than 2 will be selected
:header	All the header elements will be selected (ex. h1,h2,…)
sel1,sel2,sel3	All elements with matching selectors will be selected
:contains(text)	All elements which contains the text smartnetzone will be selected
:visible	All visible tables will be selected
:empty	All elements with no child elements will be selected
:hidden	All hidden p elements will be selected
:reset	All input elements with type=”reset” will be selected
:button	All input elements with type=”button” will be selected
:file	All input elements with type=”file” will be selected
:submit	All input elements with type=”submit” will be selected
:input	All input elements will be selected
:text	All input elements with type=”text” will be selected
:password	All input elements with type=”password” will be selected
:enabled	All enabled input elements will be selected
:disabled	All disabled input elements will be selected
:selected	All selected input elements will be selected
:radio	All input elements with type=”radio” will be selected
:checkbox	All input elements with type=”checkbox” will be selected
[attribute]	All elements with a href attribute will be selected
[attribute=value]	All elements with a href attribute value equal to “index.html” will be selected
[attribute!=value]	All elements with a href attribute value not equal to “index.html” will be selected
[attribute$=value]	All elements with a href attribute value ending with “.jpg” will be selected

jQuery Element Selectors
$(‘*’): selects all elements in the document
$(“div”) : selects all elements with a tag name of div in the document
$(“.myClass”) : selects all elements that have a class of myClass.
$(‘.myclass.otherclass’): selects all elements that have a class of myclass and otherclass
$(“#myId”) : selects the unique element with id=’myId’,
$(‘p#myId’): selects a single paragraph with an id of ‘myId.
Note: Each id value must be used only once within a document’
$(this) : selects Current HTML element
$(‘#container p’): selects all elements matched by
that are descendants of an element that has an id of container
$(“[href]“) select all elements with an href attribute.
$(‘li > ul’): selects all elements matched by

$(‘ul + p’): selects all elements by
that immediately follow a sibling element matched by

how to get outerwidth of div - jquery

2011-11-12T20:29:00.001+05:30

The outerWidth( [margin] ) method gets the outer width including padding and border for the first matched element.

.outerWidth( [includeMargin] )

includeMargin : A Boolean indicating whether to include the element’s margin in the calculation.

This method is not applicable to window and document objects; for these, use .width() instead.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('div').text('outerWidth: ' + $('div').outerWidth() );
});
</script>
<style type='text/css'>
div {width: 200px;height: 200px;padding: 10px;
border: 1px solid #ccc;background: #f0f0f0;}
</style>
</head>
<body>
<div></div>
</body>
</html>

How to show/hide elements using jQuery

2011-11-12T20:27:00.001+05:30

In this tutorial we will show you how to show and hide an element with jQuery .First we include the jQuery library, and in script part we add show hide function.We can set duration as parameter : slow, fast, or exact milliseconds.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".hiddenDiv").show(1000);
$(".myDiv2").hide("fast");
});
});
</script>
</head>
<body>
<button>Hide</button>
<div class="hiddenDiv" style="display:none;">Hidden div </div>
<div class="myDiv2">jQuery show() and hide() example</div>
</body>
</html>

why developer use jQuery .noConflict() method

2011-11-12T20:19:00.001+05:30

If we are referring any other library files (MooTools, prototype.js,YUI )
 along with jQuery you may get conflicts in the namespace  between the 
two libraries.

Note: you need to use is jQuery’s .noConflict() method like this 
jQuery.noConflict(); before you write any jQuery code.  jQuery will 
return $() to it’s previous owner .So we  need to use jQuery() instead 
of  $() function.

What is jQuery

2011-11-12T20:14:00.001+05:30

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It has lot of features for web designer and developer.

jQuery Features:

DOM element selections
Well documented
Easy to use
CSS selectors
easy-to-use Ajax
Nice event handlers
filtering your selection
did I mention chaining?
Small in size
Nice little built-in effects.
Extensibility through plug-ins
Cross-browser support

How to disabling right click using jquery

2011-11-12T20:12:00.001+05:30

This Code Snippet to disable the mouse right click function using jquery.In script we bind the context menu event with the document element.

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
   return false;
 });
});

creative logo design

2011-10-15T22:09:00.002+05:30

reative logo
creative logo design
logo design
creative logo design ideas
creative logo design portfolio
creative logos hand
awesome logos
logo design inspiration

round corner box with alpha

2008-11-15T11:43:00.001+05:30

.header {
color:#fff;
background:#000;
width:35px;
height:60px;
text-align:center;
font-size:0.7em;
padding:3px 0 0 0;

opacity: 0.5;filter:alpha(opacity=50);zoom:1;

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:0px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:0px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:0px;

}

use this css for round corner with .5 opacity.

Want to run iis and apache same machine

2008-11-13T13:43:00.003+05:30

To run both Apache and IIS web server simultaneously
Download PHP from http://www.php.net/downloads.php. I get the zip package because I think it is just as easy, and gives me control over setup and install. Once installed the apache sever will run automaticllay in tray. It should definately give errors that port 80 is already occupied.
This is because IIS is utilizing port 80. To overcome this problem shut down iis before installation of apache or leave it like it is. However, you have to decide whether you want to use port 80 for iis or apache.
To change apache's default port:

1)start ->control panel->Administrative tools->Services->stop APache2

2)Open the Apache config File C:\Apache2\conf\httpd.conf or go through
----------------------------
Start -> All Programs -> ApachePhpMysql(if u have installed ApachePhpMysql

other wise look for other path but the file name will remain same)->

Config -> Apache (notepad file)

look for Listen 127.0.0.1:80 .In my Computer its on line no. 10

change 80 to 8080(preffered) or some othe no.

save the file and close it.

3)start ->control panel->Administrative tools->Services->start APache2

4)open Web browser and type http://localhost:8080/

if the screen shows "Apache is working" (in bold letters), you r done

5)Next you can run asp.net through http://localhost/

So Now both of your servers can run together.

free Sothink SWF Decompile

2008-11-04T10:13:00.003+05:30

Sothink SWF Decompiler is an useful program to decompile, extract Shockwave Flash movies and convert your SWF to FLA. Sothink SWF Decompiler supports Flash CS3 (9.0) and AS 3.0 completely. It can decompile, display and extract all Flash movie elements in groups and select the alternative format, such as Shape, Morph Shape, Image, Sound, Font, Text, Sprite, Button, Frame and Action; the information window can show the properties of the selected elements in Flash in detail.

Sothink SWF Decompiler provides a user-friendly interface (Office 2007). A built-in player enables you to preview the movie and every element before exporting. A thumbnail view and navigation bar in the preview window enable you to pick element easily. And the interface layout can be customized to meet your needs.

Free Download:

key features

· Converts SWF to FLA completely and quickly.
· Decompiles Flash Movie (swf, exe) successfully.
· SWF in all versions can be decompiled
· User-friendly Explorer-like interface.
· Supplies SWF Catcher for Firefox and IE.

Mix-FX Flash Text Effects

2008-11-03T10:56:00.001+05:30

Mix-FX is a Flash TEXT EFFECT and flash BUTTON and BACKGROUND effect creator.With Mix-FX. This simple-to-use program lets you create absolutely stunning effects in just seconds.Change sizes and colors and you have millions of possibilities! Load the effect you just created into Flash, into your PowerPoint presentation, directly onto your website, into your video editing software or for professional broadcasting.Putting animated effects on your website has never been easier.You simply enter the text string, select the effect and text color. Click Update and the screen refreshes to show you the animation. Adding an animated background is equally easy -- simply select the background, color and size from pull-down menus.

Download :mix-fx.com

Anim-FX Flash banners builder

2008-11-01T17:20:00.001+05:30

Anim-FX is a theme based Flash text Animator.Create Flash intros, Flash banners, and text effects with Flash templates from Anim-FX for your web site - fast and easy. With Anim-FX you can create animated text effects - such as intros, splash screens and banners for your website- fast and easy. It is a very compact tool based on a wide range of animation templates. Benefits of Anim-FX. 1) Up to 5 lines of animated text. 2) Unlimited number of characters 3) 56 great templates 4) Background and text animations 5) User-friendly interface. 6) Easy to update 7) Sound effects.
• Up to 5 lines of animated text.
• Unlimited number of characters
• 72 great templates
• Background and text animations
• User-friendly interface.
• Easy to update
• Sound effects

Happy Diwali

2008-10-24T18:25:00.002+05:30

Custom CSS bullet

2008-10-24T17:42:00.003+05:30

ul {
list-style-image: url(arrow.gif);

}

this style simply for custom bullet, create arrow.gif

**************************

inline lists:

These examples of horizontal lists and add class="first" to the first LI

#navigation ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#navigation ul li {
margin-left: 0;
padding: 3px 15px;
border-left: 1px solid #000;
list-style: none;
display: inline;
}

#navigation ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}

‹div id="navigation">
‹ul>
‹li class="first">Item 1
‹li>Item 2
‹li>Item 3
‹li>Item 4
‹/ul>

css : Round Corners box

2008-10-23T12:44:00.002+05:30

Free online tool that generates CSS styles for rounded create anti-aliased corners that can be applied to any element of your page or blog.The best thing is it does it without using images or javascript.

for more visit: http://www.spiffycorners.com/

text box and dropdown box width setting

2008-10-21T16:03:00.002+05:30

use the below css to create same width text box and dropdown box:

head part past :

select {width:154px; width/**/:157/**/px; border:1px #135785; height:18px;}

input{ width:154px; border:1px #135785; height:18px;}

*****************************************

and in body part within the form tag L
‹input name="" type="text" ›

‹select name="select" class="search" id="select" ›

there is two width mentioned in css select to solve your browser problem:

Sothink SWF Catcher for IE

2008-10-20T16:40:00.003+05:30

Sothink SWF Catcher for IE is a free and useful extension to Internet Explorer that enables you to save multiple Flash based charts, presentations, e-cards, games and Flash movies at the same time. The small size allows it embedding in IE by adding a new button. With only few clicks you can capture Flash easily. Now supports Internet Explorer 7.0 and Windows Vista.

Features:

Very easy to use
Plug-in for Internet Explorer
Small size, fast launch
Save multiple Flash files at one time

Sothink SWF Catcher for IE supports Internet Explorer 5.0+. If you are still using an earlier version, please upgrade your IE first. Now supports Internet Explorer 7.0 and Windows Vista !

Font Fitting Room: font management tool

2008-10-20T16:26:00.003+05:30

Font Fitting Room is a preview and management tool for both installed and uninstalled fonts, with full character map and multilingual name property support. It lets you view, inventory and manage fonts.The three tabs placed on the left side of the program's window allow you to quickly access the system fonts, browse for those you want to preview before you decide which to install, and organize your favorite fonts into sets.

you can see the full font description (full font name, file, maximum number of glyphs, author, font type, face name, etc.), the kerning pair and the character map.

Font Fitting Room handles the most popular font types. True Type font(*.ttf, *.ttc), Open Type font(*.ttf, *.ttc,*.otf), PostScript Type 1 font(*.pfm,*.pfb), and Microsoft Windows font(*.fnt, *.fon).

input box css

2008-10-18T17:37:00.002+05:30

Forms are an essential part of interaction on the Internet but they can look rather drab.modify the inputbox in my new module of css:

‹style›

input

{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}

input .submit
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}

.inputbox {
width:200px;
font-family:verdana, arial, helvetica, sans-serif;
font-size:11px;
color:#dd580f;
border:1px solid #dd0fa5;
background:#d0e1e2;
}

‹/style›

*******************************

‹ input type="text" name="test1"/›

‹ input type="text" name="test1" class="inputbox" /›

‹ input type="submit" value="go!" class="submit" /›

Hindi Toolkit

2008-10-18T16:36:00.004+05:30

To write text in Devnagri (Hindi) you will need Unicode support in your Operating system and browser to view it. To overcome these probelm you may use Hindi Toolkit,

"An Input Method Editor (also known as a Input Method Environment) is a program or operating system component that allows computer users to enter complex characters and symbols (such as Japanese, Chinese, Tibetan and Korean characters, along with Indic characters), using a standard Western keyboard."

हिन्दी टुलकीट एक हिन्दी ime के लिए उपयोगी टुल हैं. इसकी विशेषता यह है कि इसे डाउनलोड करने पर विंडोज़ की सीडी की आवश्यकता नहीं होती ,इसमें आठ प्रकार के कीबोर्ड उपलब्ध हैं जिनमें फोनेटिक, रेमिंगटन तथा इनस्क्रिप्ट प्रमुख हैं। यह विंडोजएनटी वाले ऑपरेटिंग सिस्टमों यथा विंडोज २०००, एक्सपी, २००३ तथा विस्टा पर चलाया जा सकता है।

भाषा बदलने के लिए ALT+SHIFT कंबिनेशन अधिक सुविधाजनक रहता है,बस अब Wordpad, MS Word, Excel, Internet Explorer, Google Talk आदि कोई भी विंडोज ऐप्लीकेशन खोल कर कहीं भी हिन्दी लिखने के लिए तैयार हो जाइए।

developed bye Himanshu Singh: Download

Adobe Captivate

2008-10-18T16:19:00.003+05:30

Adobe Captivate is a great tool for developing eLearning content. Captivate is a nice tool that does what it is supposed to do, and stays out of your way while doing it. You don’t need to be a Flash to use the tool, nor do you need to hire outside help to create engaging and informative software simulations and tutorials. With the latest release of Captivate, Adobe has added quite a few new features, while still keeping the application user-friendly.

The opening screen provides a simple menu that allows you to get started recording your tutorial, or read through some simple and cleanly written documentation before beginning.

Rather than capture one long video file with embedded mouse movements, Captivate captures a series of screens, each containing one significant mouse click and movement.

Captivate stores the image background and mouse clicks and motion separately. However, one of the product’s strongest features is the range of additional content you can also automatically capture. This is shown in Figure 2. On the bottom of the Figure is a screen from Sorenson Squeeze, which was the application we captured in most trials. Here we’re showing how to select a file for encoding. While editing a slide, Captivate displays the captured screen on the bottom, topped by a timeline containing the components captured by Captivate or later added during editing.

2008-10-18T15:58:00.002+05:30

SnagIt is a screen capture software compatible with Firefox 2, IE 7, Microsoft Office 2007 programs and Windows Vista.

it will save you all kinds of valuable time by well done each capture and processing of the image easily that you will be done with your capture screen work very quickly.

capture a region of your screen

capture a window in a screen

capture an entire (scrolling) web page...WITH links kept intact! Yup, new feature here!

save a capture in about 28 different file formats

save to PDF format! Yes! Another new feature!

capture text from things like Windows Explorer...such as a list of all your files that you can drop into a Word doc to sort or email to someone!

record a VIDEO of your screen, such as the moves you made to mess up your computer!

capture all the images off a web page, in one click

get captures from DirectX game screens

create your own capture profiles with all your settings so you can get just the shot you need with one click

setup time shots to capture images of what's on your screen every few seconds, minutes or whatever interval you set

easily add numerous, very cool looking 3D annotation graphics to highlight your screen shots

add edge effects to images with a click

take quick shots of something you see on your screen and email the image to friends with a click

batch convert hundreds of images to set resolutions, new formats, add effects, resize or whatever you need...in one click, while not affecting the original images

capture documents to PDF format, that can even be annotated before you save the final PDF format

capture screen shots that are larger than your screen

quickly add your own watermark to hundreds of images so no one can swipe your photos without knowing where they came from

take a screen shot and add interactive hotspots! You guessed it, another new feature.

create a photo web page in a few seconds, with hundreds of images

UltraEdit-32

2008-10-18T15:47:00.002+05:30

UltraEdit is a HEX, HTML, PHP and Programmer's text editor. Syntax Highlighting/Coloring for many languages. Code folding, Brace Matching, HEX Editing, Style Builder, Column/Block editing, SFTP Support, SSH/Telnet Support, Spell checker, Unicode, Unix/Mac conversions (including UTF-8). Text formatting, alignment and centering. Print/print preview including Syntax Highlighting. Supports files sizes 4GB and larger.

features

Code Folding

Supports 64-bit file handling (standard) on 32-bit Windows platforms (Windows 2000 and later)

Unicode support

Disk based text editing and large file handling - supports files in excess of 4GB, minimum RAM used even for multi-megabyte files

Multiline find and replace dialogs for all searches (Find, Replace, Find in Files, Replace in Files)

100,000 word spell checker, with foreign languages support (American English, British English, Dutch, Finnish, French, German, Hungarian, Italian, Spanish and Swedish)

Syntax highlighting - configurable, pre-configured for C/C++, VB, HTML, Java, and Perl, with special options for FORTRAN and LaTex. Multiple wordfiles available for download

FTP client with multiple account settings and automatic logon and save (32-Bit only).

Includes support for SFTP and FTPS (Control only, Control and data, Implicit)
Ability to set a remote (server based) or local (Perl regex based) filter (provides filtering ability for SFTP)
Advanced proxy support
Advanced SSL certificate handling
Set local default directory for each FTP account

SSH/Telnet window

Project/workspace support

Environment Selector - Provides predefined or user-created editing “environments” that remember the state of all of UltraEdit’s dockable windows, toolbars and more for user convenience.

Integrated scripting language to automate tasks

Configurable keyboard mapping

Column/block mode editing

Hexadecimal editor allows editing of any binary file, shows binary and ASCII view

Named templates

HTML toolbar preconfigured for popular HTML functions

WebSearch Toolbar: highlight text and click a websearch toolbar button to search for highlighted term from within the editor

Google search
Yahoo search
Wikipedia
Dictionary.com
Thesaurus.com
Whois
Network Solutions Whois
PHP.net search
cplusplus.com search
MSDN online search

File encryption / decryption

Encrypt your sensitive source code files using your own key
Integrates with UltraSentry to (optionally) securely destroy original, unencrypted file
Decrypt files in UltraEdit only

more details

Launchy: Windows quick program launcher

2008-10-18T15:34:00.004+05:30

Launchy is a free quick program launcher for windows and linux utility designed to help you forget about your start menu, the icons on your desktop, and even your file manager.Launchy indexes the programs in your start menu and can launch your documents, project files, folders, and bookmarks with just a few keystrokes.

By defaultly, Launchy indexes .lnk files which actually link to the main program executable. You can add .exe and .bat files to directly run program bypassing the lnk route.

Launchy behaves just like the Google Desktop Search Quick Find bar which is activated by pressing Ctrl twice. But GDS finds files across your entire hard drive whereas Launchy limits the search to Start Menu folders or any other folder that you specify.

you can free download and get a free trial before you buy.

Download : launchy

html : marquee example

2008-10-18T09:57:00.008+05:30

these are various example of marquee your may use these in your web site.

css : rollover image or cell color change

2008-10-16T09:34:00.003+05:30

This is the simplest way to change the cell, paragraph color You may use this code in td, p, div, .. tag.

image rollover javascript is the simplest way to create rollover button.

using this you may create your design in better look.

css :Custom Horizontal Rules

2008-10-15T15:28:00.000+05:30

To create style a horizontal rule in CSS
use this tags for your web site.


***************************
hr {
  border: 0;
  width: 80%;
}
***************************
hr.line {color:#904239; text-align:center; background-color:#904239; border:0px; height:1px;}
***************************

hr {border: none 0; 
border-top: 1px dashed #000;/*the border*/
width: 50%;
height: 1px;
}
***************************
HR { size: 5px; width: 80%; length: 5px; height: 5px;
> border-style:padding: 0}
***************************


***********************