Posts

Showing posts from November, 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 < 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.j

css best practice

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 k

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 wi

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 an

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; ?>

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($_inc

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 add

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;   }); });
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 rain h1 >    < p > < time  pubdate  datetime =”2010-10-09T14:28-08:00” > time >   p >    header >    < p > Current forecast is for bigtime rain. p >    < section >    < h1 > Comments h1 >    < article >    < footer >    < p > Posted by: Sam Budd p >    < p > < time  pubdate  datetime =”2010-10-10T19:10-08:00” >    time > p >    footer >    < p > We

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

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 t

Query auto rotation images

Image
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? $(&

CAPTCHA control for handling form SPAM

Image
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 <iframe src="http://api.recaptcha.net/noscript?k=INSERT_KEY_HERE"> &nbsp;height="300" width="500" frameborder="0"></iframe> <textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea> <input type="hidden" name="recaptcha_response_field" &

css3 box shadow

Image
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. Identify possible problem areas Group layers Fixed, Fluid layout Web safe fonts 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.

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&

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

Image
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

Image
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-