Archive for HTML

Awesome Color Picker by EYECON

// August 11th, 2009 // No Comments » // CSS, HTML, Jquery


Awesome Color Picker  by EYECON

Awesome Color Picker by “eyecon” which similar like Photoshop Color picker, We can change the color using the pointer or we can write the RGB code or Hex code.

They did have different types of color pickers which we could integrate in our views.

Let’s check it out once.

Features

  • Flat mode – as element in page
  • Powerful controls for color selection
  • Easy to customize the look by changing some images
  • Fits into the viewport

Code

Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.

<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="js/colorpicker.js"></script>

Invocation code

All you have to do is to select the elements in a jQuery way and call the plugin.

 $('input').ColorPicker(options);

Options

A hash of parameters. All parameters are optional.

Set color

If you want to set a new color.

$('input').ColorPickerSetColor(color);

The ‘color’ argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).

View Demo Download

More About 960 Grid System

// August 7th, 2009 // No Comments » // CSS, HTML, Web Development


more about 960 grid system More About 960 Grid System
After seeing some CSS frameworks pop up over the past couple years, I thought it fitting to address the increasingly popular trend. In my opinion, I see CSS frameworks as a way to learn how other designers and developers work with layout, markup, and style to produce websites rapidly, semantically, and with great flexibility.

Without further ado, the official Wikipedia definition of a CSS framework:

Description from Nathan Smith: The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Why we need to use the 960 Grid System.

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

>> Know more about 960 Grid System
>> Download Templates

10 most useful Firefox Add-ons for Web Developers

// August 6th, 2009 // 1 Comment » // Add-ons, Browsers, CSS, FireBug, HTML, JavaScript, Web Designing, Web Development, XHTML


Addons for FireFox 10 most useful Firefox Add ons for Web Developers
Most of web developers they will choose first browser as a Firefox, because Firefox is best browser compare with all browsers.

Since Firefox become crazy because of add-ons of Firefox, I promise you that without add-ons no developer will work.

How Ever I have came up with some useful Firefox plugins, which will help you stay focused, simplify your daily work flow, and give a boost to your efficiency.

let’s check it out and let me know your suggestions or comments.

firebug 10 most useful Firefox Add ons for Web Developers

Firebug

It is one of the most commonly used and essential Firefox plugins for every web designer. It allows you to examine and analyze that your HTML, CSS, Script, DOM and Net are working properly or not. It also helps in editing, debugging, and monitoring CSS, HTML, and JavaScript live in any web page.

ColorZilla 10 most useful Firefox Add ons for Web Developers

Colorzilla

This plugin is similar to color dropper used in Fireworks and Photoshop. Using Colorzilla, you can use any color you want, adjust it and paste it into any other program. It saves time and is useful for checking hex values, investigating DOM elements and a built in color palette. You can also zoom the size of the page to measure distance of two different points on the page.

 10 most useful Firefox Add ons for Web Developers

Fireshot

This extension of Firefox helps you take screen shots of web pages. You have an option to choose the entire web page or a specific part to capture. It can be modified by adding text or graphics and can be uploaded to the server or saved to disk (PNG, GIF, JPEG, BMP), printed, copied to clipboard, e-mailed and sent to the client or used as a portfolio.

greasemonkey 10 most useful Firefox Add ons for Web Developers

Greasemonkey

It is considered to be the most essential Firefox extensions and allows you to add scripts that alter the web pages you browse through. It lets you apply custom Javascripts to pages within your browser; you can check out the directory of Greasemonkey scripts at Userscripts.org.

 10 most useful Firefox Add ons for Web Developers

MeasureIt

Using this plugin you can measure various portions of a page with an in line, adjustable ruler. It allows you to verify width, height and alignment of different elements on the page.

JSview 10 most useful Firefox Add ons for Web Developers

JS View

Generally, all the browsers provide “View source” option for internal files but to view the external files you need to view the page source and then copy the file path. Now using JS view, you can easily open a file with just a click of a mouse. You can get this from the context menu, from the toolbar, from the view menu, or from the status bar.

imagebot 10 most useful Firefox Add ons for Web Developers

ImageBot

You can upload your images to a free image hosting service (ImageShack or Photobucket). It allows you to classify, filter and make image galleries etc.

greasemonkey

Font Finder

It is helpful in checking the font properties of the selected text. It can show details regarding the selected text color, font, spacing and other creative additions.

windowresizer 10 most useful Firefox Add ons for Web Developers

Window Resizer

This plugin is useful for testing different screen sizes of web pages. It helps you see how your page looks like in standard resolution sizes. It supports the 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200resolutions.

fireftp 10 most useful Firefox Add ons for Web Developers

Fire FTP

It provides easy and intuitive access to FTP servers. Along with uploading your files quickly, you can also try its advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more.

Now next time you browse through Firefox, don’t forget to install these easy to use plug-ins, which are really helpful in making your job much easier than before.