Creative Art

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

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 Ti...

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

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

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

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

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

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 o...

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

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

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

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

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

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

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

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 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" &...

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

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 togeth...

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

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

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

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