jQuery Accordion with Carousel – Accarousel

Before a week one my friend had requested me to suggest any jQuery plug-in that is carousel with accordion effect inside. I tried to find one suitable plugin – but couldn’t make it. That made to write my own custom plugin that consist both carousel and accordion effect. Another one requirement was to flyout the most closed sibling elements to outside and hide rest of all when accordion expands.

Accordion

So here I come with a solution and made it a plugin so that it might be useful for all of us. I love to code for re-use.

Demo

Usage:

Here is the how you can you can use this plug-in to work on your side:

HTML Markup

<div id="accarousel">
   <ul>
	<li>
              <a class="stand">Initial visible contents</a>
              <div class="detail-panel">Contents for accordion when exapands</div>
        </li>
   </ul>
</div>

You can add as many <li> as you want and any kinds of contents inside ‘.stand’ and ‘.detail-panel’. Pagination will occur according to your choice to group how many items should be visible on stage. Now you need to initialize the plugin. Before that you must include he plugin source in your html page. Include our plugin file after you added the main jQuery library.

Carousel

Scripts

<script type="text/javascript" src="jquery.cjAccarousel.min.js"></script>

Now add the following script on the page, better you put this script at end of the page:

    $(document).ready(function() {
        $('#accarousel').cjAccarousel(); //#accarousel is your selector ID, see the html mark up above.
    });

Further more you have more options to customize to fit your requirement and ease of work. Till the date, you can set your own values for following options:

    $(document).ready(function() {
        $('#accarousel').cjAccarousel(
          {
              stand		: '.stand',        /* Visible stands element selector (class basically) */
              panel		: '.detail-panel', /* Expandable element selector (class basically)   */
              pagerClass	: 'pager',         /* Pager CSS Class */
              x			: '.detail-panel', /* Panel Collapse handler */
              groupOf		: 5,               /* Number of stands for visible group*/
              scrollSpeed	: 1000,            /* Carousel Speed */
              ease		: 'swing',         /* Use jQuery Easing Plug in for more easing effects */
              flyOutGap	        : 3,               /* Gap between expanded and other two flyouts */
              nextPrev	        : true             /* set false to disable Next/Prev Nav */

          }
	);
    });

You can add our basic styling CSS to get started and after all you can edit/modify it according to your need. That’s it.  If you’re happy to get a copy of my scripts, get it here:

Download

I will be working more on it, adding more features and effects. I would appreciated if you guys can give me valuable feedback on it. Also if you encounter any problem, let me know in the comments below.

7 Ways to Code Faster HTML CSS

7 Ways to Code Faster HTML and CSS

Are you a fast coder? Yes? If then how fast you can code? Being a fast typist isn’t about coding faster. Faster coding is about getting more things done with less effort. Here comes the role of productivity tools.

Listed below are some very useful productivity tools – for Frong End Developers. The tools below will help you code must faster and saves a lot of time. After all we are not a typist :), so why don’t we use these tools:

HTML

1.) ZEN CODING

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

Best learn resource: http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

2.) Halm

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications.

Best learn resource: http://haml-lang.com/tutorial.html

3.) Sparkup

You can write HTML in a CSS-like syntax, and have Sparkup handle the expansion to full HTML code. It is meant to help you write long HTML blocks in your text editor by letting you type less characters than needed.

Best learn resource: http://thechangelog.com/post/1421721495/sparkup-a-parser-for-a-condensed-html-format

CSS

4.) LESS

The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Best learn resource: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/

5.) SASS

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.

Best learn resource: http://net.tutsplus.com/tutorials/other/mastering-sass-lesson-1/

6.) Prefixr

CSS Prefixr is a CSS pre-processor tool, that generates the cross browser css from given codes. Forget about writing multiple browser prefixes and start using Prefixr.

7.) SpriteCow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

All of the above tools are my daily usage tools. Once you get the rid of using these tools – you will thank me for listing.

10 Excellent CSS Frameworks for Responsive Web Design

Responsive Web Design

The year is 2012, shame on me – everyone knows that. The year is for Responsive Web Design – yeah now I said good thing.  There are plethora of books which can be so useful for getting started, yet when it comes to develop a project – CSS Frameworks strikes in mind. CSS frameworks are great for rapid development.

So here I have listed some of the best Responsive CSS Frameworks you can choose to get started on your next responsive projects.

1. Golden Grid System

Golden Grid Responsive CSS Framework

2. 1140 grid

1140 CSS Grid Responsive CSS Framework

3. Columnal

Columnal Responsive CSS Framework

4. Less Framework

LESS Responsive CSS Framework

5. Zurb Foundation

Zurb Foundation Responsive CSS Framework

6. inuit.css

INUITCSS Responsive CSS Framework

7. 320 and Up

320 and up Responsive CSS Framework

8. flurid

FLURID Responsive CSS Framework

9. The Semantic Grid System

The Semantic Grid Responsive CSS Framework

10. FluidGrids

Fluid Grid Responsive CSS Framework

Hope you enjoyed the list 🙂