Sunday, November 27, 2011

jquery cycle plugin

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
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.     $('.slideshow').cycle({  
  4.       fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...  
  5.     });  
  6. });  
  7. script>  
  8. <div class="slideshow">  
  9.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" height="200" width="200">  
  10.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" height="200" width="200">  
  11.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" height="200" width="200">  
  12.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" height="200" width="200">  
  13.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" height="200" width="200">  
  14.     div> 

css best practice

  1. Avoid using inline styles in page.
  2. Declare your most generic items first, then the not-so-generic and so on.
  3. Organize the Stylesheet with a Top-down Structure
  4. If you don’t have to reference specific object, it is strongly recommended to use class instead of id selectors
  5. 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
  6. CSS Shorthand makes development much easier and keeps your CSS clean, short & accessible.
  7. Use Multiple Classes
  8. Avoid Extra Selectors
  9. Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements
  10. 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.
  11. 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.
  12. 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.
  13. Global Reset ensures almost an identical presentation of a site across all the browsers. There are many different resets from simple to complex ones.
  14. CSS frameworks good for rapidly speed up our development time and creating clean grid structure. Some popular frameworks are:
  15. 960 CSS Framework, Blueprint CSS Framework, YAML, Yahoo YUI Grids CSS etc.
  16. Using a CSS Frameworks is not always recommended but a CSS Reset is all you need.
  17. Always use em instead of pt, px, cm
  18. Optimize your css with CSS Compressors
  19. 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.
    -------------------------
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. 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.

Saturday, November 26, 2011

jquery detect os (Operating system)

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

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

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:
  1. Download the magento-check file to your computer and unzip it.
  2. Upload the extracted magento-check.php file to the Magento directory on your server
  3. In your browser navigate to this page: (  e.g. domain/magento-check.php )

magento country flag

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

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

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
  1. <reference name="right">  
  2.     <block type="cms/block" name="promo_block" as="promo_block">  
  3.        <action method="setBlockId"><block_id>promo_blockblock_id>action>  
  4.     block>  
  5. reference>  
Share this nice post:

jQuery contains() example

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

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

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;
  });
});

Monday, November 21, 2011

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:
  1.   . accesskey  
  2. . class  
  3. . contenteditable  
  4. . contextmenu  
  5. . dir  
  6. . draggable  
  7. . hidden  
  8. . id  
  9. . lang  
  10. . spellcheck  
  11. . style  
  12. . tabindex  
  13. . title  

  1.    
  2. >  
  3. <html>  
  4. <body>  
  5. <article>  
  6. <header>  
  7. <h1>It’s going to rainh1>  
  8. <p><time pubdate datetime=”2010-10-09T14:28-08:00”>time> p>  
  9. header>  
  10. <p>Current forecast is for bigtime rain.p>  
  11. <section>  
  12. <h1>Commentsh1>  
  13. <article>  
  14. <footer>  
  15. <p>Posted by: Sam Buddp>  
  16. <p><time pubdate datetime=”2010-10-10T19:10-08:00”>  
  17. time>p>  
  18. footer>  
  19. <p>We need the rain.p>  
  20. article>  
  21. section>  
  22. article>  
  23. body>  
  24. html>  
2. 
<article>
<aside>
<bdi>
<command>
<details>
<summary>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<meter>
<nav>
<progress>
<ruby>
<rt>
<rp>
<section>
<time>
<wbr>
New Media Elements:
<audio>
<video>
<source>
<embed>
<track>

WYSIWYG Text and HTML Editor

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

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

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

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

  1. ############################################  
  2. ## rewrite errors to 503 error document  
  3.     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.

  1. ############################################  
  2.   RewriteRule ^report/.* 500.html [L,R=503]  
Share this nice post:

Query auto rotation images

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.
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('

Sunday, November 20, 2011

CAPTCHA control for handling form SPAM

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:


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

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

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: fi xed-width, liquid (or fl 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

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

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


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

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

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

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 
  1. moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  2. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  3. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  4. 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.
  1. Mozilla Firefox – 3.6.14 : Excellent
  2. Google Chrome – 9.0 : Excellent
  3. Safari – 5.0.3 : Excellent
  4. Opera 11.01 : Good
  5. Internet Explorer 8 : Poor
You can modify these examples to create unlimited text and box shadow, 
linear gradient and radius effects.