jQuery is very popular now a days with web develpors, and it is really amazing to see what one can create using jQuery. Its community backed and powered up in such a way that nothing is impossible and everything is easy to achieve. Moreover, it has got a huge number of free plugins to play with that can improve the quality your web development work, but also make it easier to do at the same time. Today we have a great round-up for your with jQuery plugins. We tried to list out the 40 Great jQuery plugins for serious web developers. Hope you’ll enjoy it, and feel free to leave a comment with any that we may have left out!

Jquery Cycle Plugin

Avia Slider

Creating a Fancy menu using css3 and jquery

Animated text and Menu with Jquery

Beautiful background image navigation with Jquery

Full Screen background & slideshow Jquery Plugin

jquery Plugin From Akward Group

Face Book Like Auto Suggestion

Animated 404 Page

Colorful Sliders

Creating a sliding Image puzzle

Image slider in Single Unordered List

Surprised 2.0 Plugin

Randomizer app

Retina Effect

Photobooth App

Shutter Effect

Mc drop down Jquery Plugin

Zoomy

A fresh Bottom Slide out menu with Jquery

Thumbnails Navigation Gallery

Slides

Photo-shoot Effect

light box Gallery

Making our own Twitter timeline

Jquery toast message Plugin

Vertical Ticker Jquery plugin

Craftmap

Scroller

Css 3D Image gallery

Filters

Fancy Quote with Ajax, Css, and Jquery

A Stylish Navigation Menu

Flip Plugin

Making a Mosiac Slide show

Horizontal Bar Graph

Activity Indicator

Dream CSS

Billboard Effect

Peel Effect In Jquery

There are currently two acts in US Congress that have potential to gravely affect our liberty and ability to express ourselves openly on the internet. The internet is a way to convey information, search for information, and to express our views. However, in an attempt to prevent piracy and plagiarism from occurring on the internet, Congress wants to give the Department of Justice the power to close any website that they suspect of piracy. Here at Admix Web, we believe that all content should and must be original, or you must give recognition to the owner of the idea. In act, we have ourselves been victims and piracy when other blogs and websites have tried to pass our content off as their content. However, we do not believe that these two acts are the way to end piracy on the internet. These two acts only serve to suppress our liberties and two wrongs never make a right.

Moreover, we believe that the first amendment protects our freedom of speech, and that the right to express ourselves without undue infringement from the government is one of the liberties that make this country great! If you would like to read more about these two acts, please visit Google SOPA and PIPA and you can sign a Petition against these two acts as well. Lets show Congress we oppose these acts, and hope they find an alternate way of stopping piracy on the web.

Today we have a great jQuery tutorial to share with all of you! This is our first jQuery tutorial on Admix Web, and we know you all will find it very useful! In this tutorial, we want to create a photo box where the photos on the photo box change every five seconds. In order to accomplish this task, we need to design a plug-in with jQuery for this purpose. Below is the tutorial explaining How to Create a PhotoFrame Plugin with jQuery. Enjoy!

jQuery offers this architecture to design plug-ins:

 
(function ($) {
    $.fn.urPhotoFrame = function () {
        // Do your awesome plugin stuff here
    };
})(jQuery);

So, we must create some methods and main function for this plug-in. Some of methods that we need are as follows:
Init : for initialize urPhotoFrame plug-in.
Action: for change photo in the urPhotoFrame.
The architecture to add methods to our plug-Ins:

 
(function ($) {
    var methods = {
        init: function (options) {
            // Statements
        },
        action: function () {
            // Statements
        }
    };
 
    $.fn.urPhotoFrame = function (method) {
        if (methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if (typeof method === 'object' || !method)
            return methods.init.apply(this, arguments);
 
    };
})(jQuery);

We want to use this plug-in in several places in our page. So when we define this plug-in, we must define a timers array that must be used for different urPhotoFrames to change photos after 5 seconds.
So before define methods, we must define timers array, as follow:

 
(function ($) {
            var timers = new Array();
            var methods = {
                myContainer: null,
                init: function () {
                     //Statements
                },
                action: function (Container) {
			//Statements
                }
            };
    $.fn.urPagerScroll = function (method) {
        methods["myContainer"] = jQuery(this);
        if (methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if (typeof method === 'object' || !method)
            return methods.init.apply(this, arguments);
    }
})(jQuery);

One of the new notice in this part is in line 13:

 
methods["myContainer"] = jQuery(this);

In this instruction, we set myContainer object to detect which urPhotoFrame is selected and our method execute on selected urPhotoFrame. Because we want use these methods in the following structure:

 
$(“#MyContainerID”).urPagerScroll(‘Your_Method’);

In this part, we start writing init method:

 
init: function () {
    jQuery(methods.myContainer).children().each(function (index) {
    jQuery(this).hide();
    if (index == 0)
        jQuery(this).show();
    });
    var x = (jQuery)(methods.myContainer);
    timers[methods.myContainer.attr("id")] = setInterval(function () { methods.action(x) }, 5000);
},

In this code, first we must hide all images in our selected photo frame except first element in our frame with index=0.
In this code, we use associated array to save intervals and we save them with photo frame ID. Moreover, we set the intervals with 5000 millisecond for do action method. So we need create action method. For this propose, we need to detect which container in our page will do the action method so action method has a parameter that sets with photo frame container jQuery object.
For find out how to create action method see the following code:

 
action: function (Container) {
                    ElementNo = Container.children().length;
                    curentShowIndex = 0;
                    Container.children().each(function (index) {
                        if (jQuery(this).is(":visible")) {
                            curentShowIndex = index
                        }
                    });
                    if (ElementNo > 1) {
                        jQuery(Container.children()[curentShowIndex]).fadeOut(600);
                        if (ElementNo - 1 != curentShowIndex) {
                            jQuery(Container.children()[curentShowIndex + 1]).fadeIn(600);
                        }
                        else {
                            jQuery(Container.children()[0]).show();
                        }
                    }
                }

In the first line, we get a number of elements in our selected photo frame. Next, we set “currentShowIndex” variable with (0) value next we check which element in our selected container is visible. When we find which element is visible, we save its index in currentShowIndex. Next, we check how many elements are in our selected photo frame. If we have more than one element in our photo frame container, we must fadeout current element add fade in next element, and we must switch next element with next index that you must do currentShowIndex+1 to get next element index for showing. We must notice that if currentShowIndex is latest element in our selected photo frame, we must switch to the first element in our selected photo frame. So if we have more than one element in our selected photo frame, we must check this statement:

 
(ElementNo - 1 != currentShowIndex)

So if ElementNo-1 is equal with currentShowInde, we must show the first element in our selected photo frame.
So our photo frame container code is like following:

 
(function ($) {
    var timers = new Array();
    var methods = {
        myContainer: null,
        init: function () {
            (jQuery)(methods.myContainer).children().each(function (index) {
                jQuery(this).hide();
                if (index == 0)
                    jQuery(this).show();
            });
            var x = (jQuery)(methods.myContainer);
            timers[methods.myContainer.attr("id")] = setInterval(function () { methods.action(x) }, 5000);
        },
        action: function (Container) {
            ElementNo = Container.children().length;
            currentShowIndex = 0;
            Container.children().each(function (index) {
                if (jQuery(this).is(":visible")) {
                    currentShowIndex = index
                }
            });
            if (ElementNo > 1) {
                jQuery(Container.children()[currentShowIndex]).fadeOut(600);
                if (ElementNo - 1 != currentShowIndex) {
                    jQuery(Container.children()[currentShowIndex + 1]).fadeIn(600);
                }
                else {
                    jQuery(Container.children()[0]).show();
                }
            }
        }
    };
 
    $.fn.urPhotoFrame = function (method) {
        methods["myContainer"] = jQuery(this);
        if (methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if (typeof method === 'object' || !method)
            return methods.init.apply(this, arguments);
    }
})(jQuery);

And usage of this plug-in in our pages like following code:

CSS

#PhotoFrameContainer {
	width:525px;
	overflow:hidden;
	padding:0px;
	position:relative;
	height:300px
}
#PhotoFrameContainer > div {
	width:525px;
	height:300px;
	padding:0px;
	margin-right:0px;
	margin-top:0px;
	margin-left:0px;
	position:absolute;
	top:0px;
	left:0px
}

HTML

 
<div id="PhotoFrameContainer">
       <div><img src="img/img1.jpg" /></div>
      <div><img src="img/img2.jpg" /></div>
      <div><img src="img/img3.jpg" /></div>
</div>

And use this script:

 
$(document).ready(function () {
    $("#PhotoFrameContainer").urPhotoFrame();
});

Conclusion

In conclusion, you can change this plug-in to better a version and add some method like GoNext,Stop,Start,Remove,Add , … and also you can use complex HTML code for element instead of Images. I hope you enjoyed the tutorial and found it useful in your work. Please feel free to leave any comments below. With best regards – Mehrzad Tejareh

The most popular buzz in web designing and development is that of HTML5 and CSS3. Or if I say that they are shaping the future of web then I am sure there are many people out there who will agree with me. Their promise of new features and functionality is enticing to developers and end users alike.

CSS: Cascading Style Sheets is used to describe the presentation semantics of a document written in a markup language. It has transformed the way web page used to get designed. CSS not only helps you make really good and attractive web pages but also forms. Using CSS, you do not need to design everything from the scratch. CSS is the most vital part of modern standard of web design. As already mentioned it makes your web page striking and will definitely get you more traffic than ever before.

Where as HTML5: Hyper text mark up language has opened new horizons for developers and designers. It has left Flash miles behind. It has revolutionized the way web designers used to design. HTML5 has all those capabilities of designing which were things of fantasy in past. HTML5 is being supported by all those websites who are working to increase their standards. The induction of features like rounded corners and multi columns have made HTML5 a lot better.
As 2011 just ended and 2012 has started everybody ahs started to look at the new trends of web designing and development. However, in this article we have discussed how HTML5 and CSS3 are shaping the future of web designing.

CSS3 FEATURES

Box shadow (css3): Box shadow is an extremely handy property of CSS3. Using this property you need not to use several images and diversions (depending upon the complexity of your design). The box shadow property of CSS3 itself allows you to use shadow and also provides multiple options to control its appearance. All the latest versions of browsers such as Safari, Chrome, Firefox etc support this property.

Border Radius (CSS3): The most popular design elements in web design are the use of rounded corners on layout elements. This again requires numerous images depending on the complexity of the graphics. By using Border Radius property, you can easily create rounded corners using only CSS and a single element without the need for any images. Its Color Chooser controlled templates also helps provide us even more design possibilities.

Transition: creating animation and transition is the most exciting feature of CSS3. Using this transition property you can create simple animation which was not possible prior without JavaScript, resulting in slower performance is used frequently.

HTML5 FEATURES

Sophisticated Way of Visualizing Data: To visualize or properly demonstrate large data or information on your website in the most creative or understand able way you need to use HTML5. Thus by using HTML5 graphing or charting solutions you can easily visualize your data properly.

HTML5 based frameworks: HTML5 helps you build a framework which actually works. Frameworks help us make our work easier. It gives solid foundation in building or focusing your web designing project. It also saves you from repetitive work.
Unquoted HTML5 text: HTML5 is not XHTML; here you need not to wrap attributes in quotation which you do not want to. Using HTML5 you do not have to close your elements.

Common CSS3 and HTML5 FEATURE

Create stylish forms: Html5 and CSS3 help you make really good and attractive forms. Prior to these (Html5 and CSS3) the forms found on the web were very boring and were not able to attract a lot of visitors. Attractive or user-friendly forms can divert a lot of attention to itself. As a result a huge traffic is diverted to your website. While designing a good form on HTML5 and CSS3, following 4 points should be kept in mind: Semantic, Accessibility, Functionality, and Design.

If the above mentioned 4 points are kept in consideration while designing a HTML5 and CSS3 based form then we assure you that it will attract a lot of visitors.

Conclusion

These HTML5 and CSS3 are web techniques that guarantee a successful future of web designing and development. That is, if we say that HTML5 and CSS3 are future pioneers of web designing then I think it is not wrong… further you decide by commenting below!

We just finished another giveaway here on Admix Web! This one was made possible by Gopromos! Thanks so much for making this giveaway possible! The winners were selected using random.org! Again,we are giving away 50 promotional keychains, worth over $100, absolutely free, to one (1) lucky reader! These flashlight keychains would be get to advertise your business, organization, or personal use. I know you would get great use out of them, so enter the contest now!

The winner is:

Winner: Yessie Rodriguez

Thanks everyone for participating in this Giveaway!!!. Don´t forget to suscribe to our RSS Feed to know when the next one will be!! We will start doing a couple giveaways every month! Also, remember to check out Amsterdam Printing!

Here at Admix Web, we love to give away great free stuff to our readers! So, Good news readers! Admix Web and Gopromos are joining forces to give away 50 Personalized Keychains. We are teaming up with Gopromos, the promotional items website, and we are giving away 50 promotional keychains, worth over $100, absolutely free, to one (1) lucky reader! These flashlight keychains would be get to advertise your business, organization, or personal use. I know you would get great use out of them, so enter the contest now!

TO ENTER:

Here’s how to enter our Personalized Keychains Giveaway: In the comments form below, tell us how you will use your personalized keychains for your business, organization, or personal use. We will choose the Giveaway winner by random using random.org. Be sure to post your email address so that we can contact you if you’re the winner.

Comments must be posted by December 28, 2011 at 5:00 p.m. CST! If you’re the winner, we’ll notify you via email (U.S. residents only are eligible for the Giveaway due to legal restrictions). Good luck to all!

ABOUT ITEM:

Flashlight Key Tags are Excellent Marketing Gadgets!
Promotional flashlight key tag brightens your path
Fully-functional LED flashlight in your choice of color
Professional design with silver accents
Durable key ring keeps keys secure
Laser-engraved flashlight barrel imprint

Product Details:
Key Tag Color: Burgundy, Forest Green, Graphite or Blue
Imprint Color: Laser-Engraved in Silver
Imprint Options: Up to 5 Lines (20 Characters per Line) or Up to 3 Lines and a Logo
Imprint Area: 1 1/4″w x 1/4″h
Logo Charge: $40.00
Set-up Charge: $19.95
Customer Rating: Brightwell Keychain is rated 5.0/5.0 based on 1 reviews

Accordion menus are very popular since Web 2.0 appeared with new widgets in order to enhance the usability of the sites. The Accordion widget is used to display one page out of multiple sections at a time. It is very useful when the content is very large, but there is a small space to present it. A very good example of an Accordion it is the one provided by jQueryUI, where you can get a good understanding if you are not familiar with the creation of one. In this case, we are going to use some CSS3 properties that are not implemented in all the browsers yet and only are supported by Safari and Chrome. So, this is just an experiment, and should be treated like that. I do not expect anyone to add this to the current projects. However, it is good to start considering some great transitions effects created by CSS3 in near the future.

HTML Structure

The HTML code is very simple. It is just a div element that is wrapping all the sections of the accordion. Each section is created by an article which contains a title and the content.

<div id="accordion">
   <article>
      <h2>Section 1</h2>
      <img src="img/img1.jpg" alt="" width="100" height="88" /> 
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
         totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </p>
   </article>
   <article>
      <h2>Section 2</h2>
      <img src="img/img2.jpg" alt="" width="100" height="75" /> 
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
         Aenean commodo ligula eget dolor. Aenean massa. Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
         accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
         architecto beatae vitae dicta sunt explicabo.
      </p>
   </article>
   <article>
      <h2>Section 3</h2>
      <img src="img/img3.jpg" alt="" width="100" height="67" /> 
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
         eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </p>
   </article>
   <article>
      <h2>Section 4</h2>
      <img src="img/img4.jpg" alt="" width="100" height="75" /> 
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
         totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </p>
   </article>
</div>

CSS Structure

 
 #accordion {
      margin: 100px;
   }
   #accordion article {
      -webkit-transform: perspective(900px) rotateY(60deg);
      -webkit-transition: all 0.7s ease-in-out;
      background: #fff;
      border: 1px solid #f3f3f3;
      box-shadow: 0px 5px 15px gray;
      float: left;
      height: 420px;
      margin-left: -180px;
      padding: 20px;
      width: 220px;
   }
   #accordion article:first-child {
      margin-left: 0px;
   }
   #accordion article img {
      float: left;
      padding: 0 10px 5px 0;
   }
   #accordion article:hover {
      -webkit-transform: perspective(0) rotateY(-10deg);
      margin: 0 140px 0 -60px;
   }

First, give the accordion element a margin of 100px, just to position it good enough in order to provide space for the animations. Then, utilize the transform property to create a perspective of 900px and rotateY of about 60 degrees. In addition, there is a left margin of -180px in order to make them look close to each other. Using the :first-child pseudo class, the first section of the accordion is positioned with a left margin of 0px because -180 pixels are not necessary and also, it would make it appear out of the accordion.

By adding a transition of 0.7 second, it creates a very nice effect at opening the section of the accordion. I add “all” as shortcut for the transform property and as I am using just the prefix value, prefixed values are not recognized by the browsers in this case.

The last part of the animation is at the moment the user positions the cursor over one of the section of the accordion. This is targeted in CSS with the :hover pseudo class, and it will change the perspective to 0 and the rotate to -10 degrees. Also, it will have a margin necessary to show all the content and separation of other sections.

We just finished another giveaway here on Admix Web! This one was made possible by Custom Bags HQ! Thanks so much for making this giveaway possible! The winner of this great goveaway was selected using random.org!

The Prize: One (1) Winner will get $100 store credit to Custom Bags HQ.

The winner is:

Winner: Mark Jenkins

Thanks everyone for participating in this Giveaway!!!. Don´t forget to suscribe to our RSS Feed to know when the next one will be!! We will start doing a couple giveaways every month! Also, remember to check out Custom Bags HQ!

Custom Bags HQ aims to be every designer’s favorite custom bag printing service. They sell both custom plastic bags and reusable bags, with a simple online ordering system. Just pick a bag style, upload your artwork and they’ll send you a free online proof. If you’re a designer, chances are you have clients that need custom bags. Fortunately, Custom Bags HQ is obsessed with catering to the design community. That is why we want to give one contest winner $100 in store credit (enough to get a totally free order).

The Prize: One (1) Winner will get $100 store credit to Custom Bags HQ.

To Enter: Leave a comment with your email on this post.

BONES ROUND!!! If this post receives at least 50 tweets, Custom Bags HQ will give away another $100.00 in store credit to another lucky winner!!! TWEET AWAY

Contest ends: Thursday, November 17th at 11:59 CST. One (1) lucky winner will be chosen at random. Winner will be announced on Friday, November 18th! MUST BE A US RESIDENT! GOOD LUCK!!!

Wireframing is a very useful tool when creating web pages, and when done correctly, it can save a web designer so much time and energy! Below are more than 20 tool and resources for creating better wireframes, to help fellow web designers in the wireframing process. I hope you find the list useful, and please feel free to add your own if you know of any. Enjoy!

960.gs Templates for Inkscape

A collection of 960 templates for Inkscape.

Android Patterns

A set of interaction patterns that can help you design Android apps. An interaction pattern is a short hand summary of a design solution that has proven to work more than once. Please be inspired: use them as a guide, not as a law.

Free Photoshop browser templates

You need a clean browser screenshot for a design presentation? Look no further: our free photoshop browser templates for your professional screendesign come in 1024×768 pixels and 800×600 pixels size , all kinds of different browser flavours and with a few extras on top.

Wireframe Symbols

A Collection of Wireframe elements created by Johnny Bilotta.

iPad Sketch Elements AI

Collection of common iPad elements in a sketch – like style allows us to easily and quickly mock up flows of custom wireframe screens.

Illustrator template for iPhone design

A template with UI elements for the Iphone.

Dragnet website wireframews kit for Adobe Fireworks

Dragnet website wireframes kit v0.91 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completly free to download and use. The kit contains common web design elements such as scrollbars, buttons, menus, alerts etc. Most of them supports the 9-slice scaling feature that is build into Fireworks for a better resizing of the objects.

Sqetch, an Illustrator Wireframe Toolkit

Sqetch is a little Illustrator-toolkit consisting of several templates and elements: Browser, iPad upright, iPad landscape, Smartphone, GUI-Elements, and Form-Elements.

Sketching the iPhone

A pretty comprehensive set of iPhone assets that you may need. This includes several different keyboards, buttons, toolbars, dock icons, and so much more. It’s enough to get you started, but not so much that you feel limited in what you can do.

Sketchy Illustrator wireframes

Collection of wireframes for Adobe Illustrator designed by Matthew Rea.

Free Sketching & Wireframing Kit

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Android GUI PSD

This Photoshop template makes it easy to mockup pixel-accurate Android app designs.

Best Practice UX Forms

UX form design practices, providing three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more.

Free Wireframe Toolbar Icons for GUI designers.

These icons can be used for wireframes and software mockups creation, websites and software applications toolbars and menus including Android, Windows Mobile, Palm, iPhone and iPad apps. You’ll find a set of 8 cursors and 296 icons in black and white color versions. The icons include pagination arrows, ratings and voting controls, social interaction symbols file system and text editor actions.

Sketching the iPad

Using an Omnigraffle iPad stencil to develop mock-ups faster.

Yahoo Stencil Kit

Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics: Ad Units, Calendars, Carousels, Charts and Tables, UI Controls, Form Elements, Grids, Menus and Buttons, Mobile – General, Mobile – iPhone, Navigation and Pagination, OS Elements, Placeholder Text, Screen Resolutions Tabs, Windows, and Containers.

Web Wireframe Kit

A simple way to plan the layout and a cost-effective, time-saving tool for web designers.

Wireframe Shapes

This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

Simple UI Elements

Simple UI Elements is a clean, well organized PSD file containing common user interface elements for web and app designs.

Keynote Wireframe Templates V1.2

Wireframe quickly and cheaply using Apple Keynote, then add hyperlinks to make the interface clickable. These vector user interface elements are designed in Apple Keynote, and are fully editable and customizable without needing additional tools.

Wireframe Magnets (DIY Kit)

DIY magnet template is based on the Konigi wireframe stencils and includes 3 sheets of elements that might be useful in whiteboard prototyping.

Massive Web UI & Button Set

Massive Web UI and button set that was designed by our very own Jon Phillips. From text boxes, to buttons, to drop-down menus, this set should have something useful for everyone.

User Interface Design Framework

GUI library – Hundreds vector elements for interface design

FUEL Free Web UI Wireframe Kit

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.