Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 24 2014

15:05

February 06 2014

15:58

How To Code a Hidden Author Bio Display using jQuery

Advertise here with BSA


I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.

So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:

hidden author bio display hover tutorial screenshot

Page Setup

First I know the effect will be created using jQuery so I’ll be downloading a local copy for this project. It’s all pretty simple except for the hovering triggers based on event delegation. But we can get into that later in the article.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Hidden Author Bio Display Demo - DesignM.ag</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

I’ve also created a new stylesheet named styles.css. This has all my typical page resets along with a number of extra styles to position the bio and top navbar. To keep things simpler I didn’t use a whole lot of extra text or links within this toolbar. But for your own website it’s entirely possible to move things around as necessary.

  <header id="topbar">
    <div id="logo"><h1>MySite Logo</h1></div>
    
    <div id="avatar-icon">
      <img src="img/avatar.jpg" alt="Author avatar photo" class="authoravi">
      <div id="author-bio-box">
        <img src="img/avatar.jpg" alt="author big photo" class="bigavi">
        <h2>Jake Rocheleau</h2>
        <p>Jake is a writer and designer found all over the Internet. He specializes in UI design, frontend development, branding, and content strategy.</p>
      </div>
    </div>
  </header>

This is really the most important HTML on the webpage. Directly after the opening body tag I’ve setup a new header element as the base container. The logo and the avatar have their own separate divs positioned within this container. Whenever a user hovers on top of the #avatar-icon image, we display the internal #author-bio-box.

CSS Design

You should take a look over my basic styles and CSS resets if you’re unfamiliar with page structure. At the top I’m referencing an external web font named Montserrat Alternates. Beneath the top navigation bar I’ve setup a wrapper div which contains filler Lorem Ipsum text. You can see how the bio display works even when scrolling down through a webpage.

#avatar-icon {
  position: relative;
  width: 100px;
  margin: 0 auto;
  text-align: center;
  padding-top: 6px;
  cursor: pointer;
}

#avatar-icon .authoravi {
  width: 55px;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* header top bar */
#topbar {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  min-width: 750px;
  height: 70px;
  padding: 0 45px;
  z-index: 9999;
  background-color: #6e7cc9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6e7cc9), to(#6a74af));
  background-image: -webkit-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -moz-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -ms-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -o-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: linear-gradient(top, #6e7cc9, #6a74af);
  border-bottom: 1px solid #53597c;
}

To keep this avatar centered in position I’m using margin: 0 auto on the fixed-width container. We also need a relative positioning so the interior author box can use absolute positioning. #avatar-icon becomes the new container for this absolute position, as opposed to the entire body element.

Using a fixed position on the #topbar header is key for the navigation to follow along with the user. I’m using large padding on the HTML body so everything on the page gets pushed down beneath this fixed bar. Using the CSS property top: 0 will force this bar to stay fixed at the top of the page, while the other content appears below.

/** bio box **/
#author-bio-box {
  display: none;
  position: absolute;
  cursor: default;
  width: 300px;
  top: 0;
  left: -100px;
  padding: 5px 15px 8px 15px;
  background: rgba(20,20,20,0.9);
  z-index: 99999;
  -webkit-border-radius: 0 0 7px 7px;
  -moz-border-radius: 0 0 7px 7px;
  border-radius: 0 0 7px 7px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
  -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
}

#author-bio-box .bigavi {
  width: 95px;
  height: 95px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#author-bio-box h2 {
  display: block;
  font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  text-align: center;
  color: #fff;
  cursor: text;
  font-variant: small-caps;
  letter-spacing: -0.03em;
}
#author-bio-box p {
  display: block;
  font-size: 1.5em;
  line-height: 1.35em;
  color: #fff;
  cursor: text;
}

Finally we get to the hidden author box and other internal elements. The #topbar div uses a z-index of 9,999 so that it appears on top of all other page content. Since we need this author bio to appear on top of the bar I’m using 99,999 z-index to setup the correct layout.

Width is fixed at 300px but since this bio is offset in the center, it won’t appear correct. We can’t use absolute positioning because the content itself will appear outside the boundary box. It’s smarter to use a negative left margin to reposition the author bio exactly where it should appear. Note this value should also be changed as you update the bio box width, so keep this in mind when adjusting for your own project(s).

jQuery Display Effects

Possibly the most confusing piece of my jQuery code is event delegation with the .on() method. By using the body element as my selector it works like an updated event handler to also bind events onto hidden or dynamically-appended elements. Check out this Stack Overflow post to get a better understanding.

$(function(){
  $('body').on('mouseenter', '#avatar-icon', function(e){ 
    $('#author-bio-box').css('display','block');
  });

  $('body').on('mouseleave', '#author-bio-box', function(e){
    $(this).css('display','none');
  });
});

Also worth noting are the mousenter and mouseleave event triggers. mouse over/out will trigger if the user re-hovers something other than the target element. So if we open the author bio and the user hovers the new avatar image or the bio paragraph, it would see we are hovering something new and close the whole box. Mouseleave will only trigger when leaving the entire container – much safer and provides exactly the effect we need.

So once the user hovers onto #avatar-icon we immediately display the author bio box. And once the mouse leaves those boundaries this box gets re-hidden from view. Truly a simple yet powerful script if you know how to use it.

hidden author bio display hover tutorial screenshot

Final Thoughts

I can admit that this solution probably wouldn’t work best on all websites. But if you’re designing a small author-based blog why not try it out? It is a really interesting concept which is perfect for any fixed-width title bar. Feel free to download a copy of my source code and let us know what you think in the post discussion area.


Advertise here with BSA

January 30 2014

07:30

Perfect Match: Adaptive Backgrounds for jQuery Colors Your Website Automagically


  

This plugin for jQuery is gas. Adaptive Backgrounds by Brian Gonzalez analyzes the colors of the images in your website, determines which ones are dominant and colors the background of the element containing the image accordingly. As Adaptive Backgrounds works with the nearest parent by default, you can have multiple different backgrounds on the same page. The effect is impressive.

January 10 2014

11:00

Wallpaper for jQuery Adds Image or Video Backgrounds to Any Website Easily


  

Such is life. Client X needs a landing page within the next 15 minutes. It’s a rather simple page with not a lot more than a full-screen background image. Now, how can I achieve that in the quickest and easiest way? Having evaluated a few alternatives I decide to go with Ben Plum’s newest jQuery plugin Wallpaper. This lets me do the job in less than ten minutes. Being able to change the image to a video background using the very same solution made my client smile with joy…

January 06 2014

11:00

Summernote: Powerful WYSIWYG-Editor for Bootstrap 3


  

Today I stumbled upon a fresh JavaScript, which I think you will like, too. This little tool helps you integrate a feature-rich WYSIWYG editor into your next Bootstrap project. And it is entirely free. Summernote – say hi – is under ambitious development and bound to reach version 1 in the course of the next few weeks. You need not wait, though, as Summernote is perfectly ready for prime time just yet.

December 30 2013

07:30

Codeblock.js: Edit and Run JavaScript Directly from Within Your Browser


  

Talking about introducing JavaScript frameworks, libraries or just step by step tutorials, it is always useful, if you are able to support all your words by a handful of fitting live examples. So, instead of just posting dead code snippets, would it not be far better, if you could embed JavaScript in a way that it can be edited and run by your readers, without forcing them to download examples and what not first? That’s what Codeblock.js offers…

November 25 2013

12:48

50 Fresh jQuery Plugins For Web Developers

Here we are presenting another new collection of some fresh jQuery plugins for you. We all know that plugins are the great time savers as they help us to perform certain actions in a more convenient and speedy manner, thus saving our time as well as energy. This is the reason why every designer and developer is interested in keeping a good collection of different types of plugins that are useful for them.

For now, we are focusing on jQuery plugins. This collection is specifically targeted at the web developers and web designers who want to create websites that are more interactive, attractive as well as accessible to the broadest assortment of browsers. With these plugins, you can make user experience which they come away from your site with more pleasurable and exciting. Let us have a look and enjoy! Feel free to share this post with others.

Vortex

( Demo | Download )

CLNDR.js

( Demo | Download )

Selectric

( Demo | Download )

FullPaged

( Demo | Download )

jQuery Mapael – Build dynamic vector maps

( Demo | Download )

Swatches

( Demo | Download )

Block Slide

( Demo | Download )

Toolbar.js

( Demo | Download )

jqTimeline

( Demo | Download )

jQuery Spellchecker

( Demo | Download )

ScrollUp

( Demo | Download )

Nod Frontend Validation

( Demo | Download )

Any List Scroller

( Demo | Download )

Tumbo 1.0 – Show Tumblr feeds on your website – Jquery plugin

( Demo | Download )

Responsive Text

( Demo | Download )

ImageFill-js

( Demo | Download )

Tipue Drop

( Demo | Download )

Resizable Columns

( Demo | Download )

BIGVIDEO.JS

( Demo | Download )

stickUp

( Demo | Download )

Tabslet

( Demo | Download )

Offreg

( Demo | Download )

jQuery Fullscreen Editor

( Demo | Download )

jVanilla Menu

( Demo | Download )

Snap.svg

( Demo | Download )

Moa Modal

( Demo | Download )

Succinct

( Demo | Download )

FailSafe

( Demo | Download )

onScreen

( Demo | Download )

Touche.js

( Demo | Download )

Offline.js

( Demo | Download )

Peeler.js

( Demo | Download )

Mobify.js

( Demo | Download )

At.js

( Demo | Download )

Scrolld.js

( Demo | Download )

Resumable.js

( Demo | Download )

WhatsNearby

( Demo | Download )

Isotope

( Demo | Download )

Minimalect

( Demo | Download )

EasyDropDown

( Demo | Download )

Selectize.js

( Demo | Download )

Nivo Lightbox

( Demo | Download )

jQuery CollagePlus

( Demo | Download )

FilmRoll

( Demo | Download )

Glide.js

( Demo | Download )

Excolo Slider

( Demo | Download )

CarouFredSel

( Demo | Download )

OWL Carousel

( Demo | Download )

Sticky-Kit

( Demo | Download )

FlowType.JS

( Demo | Download )

November 13 2013

11:00

Deal of the Week: jQuery Trickshots Teaches You 100 Advanced Techniques for Less than a Movie Ticket


  

The neat thing about programming is that there are always tons of different ways to accomplish the same result. Some are tougher, more complex, and take a lot longer to implement. Others, however, can make your life incredibly easier and save you a load of time… like JavaScript and the wonderful jQuery library. With the right knowledge, jQuery can perform some fantastic functions with very little programming needed.

November 04 2013

15:28

Building a Single-Page Dynamic Website using AnimateScroll.js

Advertise here with BSA


Sliding parallax websites incorporate animation with page sections to build a very unique experience. Over the past few years I have found a large number of parallax designs wrapped into a single webpage. Notably this parallax interface may be hard-coded from scratch, but there are lots of free open source plugins to do the job quicker.

In this tutorial I want to demonstrate how we can use AnimateScroll to build a sliding single-page website layout. I’ve kept inner page content to a minimum so we can see exactly how the CSS structure works with the animations. Keep in mind this definitely isn’t a tough concept to implement. But you should have an understanding of page hierarchy and CSS positioning or it gets confusing fast. Check out my live demo example to see exactly what we are making.

jquery animate scroll library single page tutorial preview screenshot

Live DemoDownload Source Code

Getting Started

The first step is to download a local copy of jQuery and grab a copy of the AnimateScroll.js codes from Github. You will only need to copy over a single file animatescroll.js which should be placed alongside your jQuery script.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Dynamic Scrolling with AnimateScroll.js - DesignM.ag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/animatescroll.js"></script>
</head>

The inner page structure is fitted to host a single fixed navigation bar at the top of the page. I have this wrapped inside an HTML5 <nav> using an internal unordered list. Considering the page is meant to display at 100% width I haven’t used any outer wrapper.

  <nav id="topnav" class="clearfix">
    <ul>
      <li><a href="body" id="homenavlink">Home</a></li>
      <li><a href="#about" id="aboutnavlink">About</a></li>
      <li><a href="#portfolio" id="portfolionavlink">Portfolio</a></li>
      <li><a href="#contact" id="contactnavlink">Contact</a></li>
    </ul>
  </nav><!-- @end #topnav -->
  
  <!-- BG http://architecture.desktopnexus.com/wallpaper/1581572/ -->
  <section id="pagetop" class="contentpg">
    <h2>First Section</h2>
      
  </section><!-- @end #pagetop -->
  
  <!-- BG http://nature.desktopnexus.com/wallpaper/1581411/ -->
  <section id="about" class="contentpg">
    <h2>About Someone</h2>
  </section><!-- @end #about -->
  
  <!-- BG http://architecture.desktopnexus.com/wallpaper/1582636/ -->
  <section id="portfolio" class="contentpg">
    <h2>Portfolio Work</h2>
  </section><!-- @end #portfolio -->
  
  <!-- BG http://abstract.desktopnexus.com/wallpaper/1583541/ -->
  <section id="contact" class="contentpg">
   <h2>Contact Some People</h2>
  </section><!-- @end #contact -->

Depending on how you want your content to appear it may be worthwhile to create a wrapper class. This wrapper can be placed inside each content section for centering the text, or keeping it at some fixed width value.

Each of my sections is covered with a fullscreen background image. Since there is very little content they are only maxed out to a certain height. But with natural CSS3 background images we can expect the design to scale for any monitor resolution. Let’s delve into the stylesheet and really see how this all comes together.

Page Designs

Inside my styles.css file is everything necessary for the layout to render properly along with the AnimateScroll.js plugin. First you’ll notice one small import statement to include a Google web font used for custom heading text. This is followed by a long list of CSS resets to update the default page document structure.

It gets interesting once we break into the core page design. #topnav is fixed to the top of the page at a height of 55px. The links behave as parallax sliders moving around to sections within the webpage itself. You can build this navigation anywhere in your layout – but keeping it at the top makes more sense in a fixed position.

/** page structure **/
#topnav {
  display: block;
  position: fixed;
  top: 0;
  height: 55px;
  width: 100%;
  background: #779ec0;
  border-bottom: 2px solid #628aad;
}
#topnav ul  { padding-left: 80px; }

#topnav ul li { 
  display: block;
  width: auto;
}

#topnav ul li a {
  display: block;
  float: left;
  line-height: 55px;
  margin-right: 10px;
  padding: 0 15px;
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  text-decoration: none;
}
#topnav ul li a:hover {
  background: #62819d;
}

Each of the internal section elements has their own ID to designate unique background images. But they also use the class .contentpg for strict duplicated rules. Notably I’ve written some internal padding along with a maximum height of 550 pixels. Each content section may be longer or shorter depending on how much you need to write. Feel free to edit this value so that it works best on your project(s).

/** page sections **/
.contentpg {
  display: block;
  min-height: 550px;
  padding: 55px 80px;
}

#pagetop {
  background-image: url('../img/bg1.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#about {
  background-image: url('../img/bg2.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg2.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg2.jpg',sizingMethod='scale')";
}

#portfolio {
  background-image: url('../img/bg3.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg3.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg3.jpg',sizingMethod='scale')";
}

#contact {
  background-image: url('../img/bg4.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg4.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg4.jpg',sizingMethod='scale')";
}

The codes handling fitted background images are from the popular CSS-Tricks article covering perfect CSS-based fullscreen backgrounds. CSS3 is not supported in many older browsers and so this trick is great for modern websites. But if you are concerned about legacy support I would highly recommend using another jQuery plugin such as Backstretch.

Initialize AnimateScroll.js

With the page structure in place and the CSS designed nicely it is time to apply the animation. There are 3 options you can go over in the documentation but it’s all very straightforward. The easing option controls the animation style, padding gives extra space from the top of an element, and scrollSpeed adjusts how fast or slow the animation happens.

$(function(){
  $('#topnav ul li a').on('click', function(e){
    e.preventDefault();
    var scrolldiv = $(this).attr('href');
    
    $(scrolldiv).animatescroll({padding:50});
  });
});

This small block of code should be placed inside a script tag just before closing the document body. If you wish to write other scripts then it could be instead written into an external JS file. The selector is targeting any link within the top navigation section.

Once the user clicks on a link we can stop the href value from loading into the address bar with event.preventDefault(). However we do need this href value because it will designate which content section we are scrolling into. I saved this into a new variable scrolldiv which is then turned into a selector for the .animatescroll() method.

Notice the single option I am using is just related to padding. Since the top navbar is always fixed on the screen we need to relieve some extra room. This option works for all the lower content areas, but the very top home section needs additional CSS padding from the body. Now the navigation bar will never get in the way of any content on the page.

jquery animate scroll library single page tutorial preview screenshot

Live DemoDownload Source Code

Closing

I know this is a fairly basic demonstration but I made it this way to behave almost like a template. Anyone who is willing to build their own single-page website layout could use this tutorial as a starting point. There are also many alternative parallax plugins which you could try looking into. If you want to see how my example works feel free to download a copy of the project source code and play around to see what you can build.


Advertise here with BSA

September 25 2013

06:30

Flat, Mobile, Responsive: Fresh JavaScripts and jQuery Plugins Made in September 2013


  

jQuery plugins and JavaScript tools are collectibles you can’t get enough of. Just like WordPress themes, fonts, icons, basically any resource for designers and developers, they are available in masses. To separate the wheat from the chaff is harder than simply finding them. Regarding JavaScript tools keeping up with development is especially important. If you choose to integrate a third-party tool you should not decide to go for any medieval creations but make sure to get something recent and modern. We have curated some of the best and most recent tools. THey are all free and they are all fresh…

September 12 2013

12:44

8 jQuery Plugins Worth Checking Out

Advertise here with BSA


jQuery plugins certainly exist to make our life easier, and it’s always great to discover new ones that make it easy to add cool functionality to our projects. So for today, we have some fresh jQuery plugins to share with you. From progress bar animations to flat shadows, and HTML restructure in a responsive way, there are several interesting plugins for you to try. Enjoy.

Flat-Shadow

A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements.

8 jQuery Plugins Worth Checking Out

NProgress

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

8 jQuery Plugins Worth Checking Out

FlowType

Web typography at its finest: font-size and line-height based on element width.

8 jQuery Plugins Worth Checking Out

Device.js

Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).

8 jQuery Plugins Worth Checking Out

Intention.js

Intention.js offers a light-weight and clear way to dynamically restructure HTML in a responsive manner.

8 jQuery Plugins Worth Checking Out

Perimeter.js

Perimeter.js creates an invisible perimeter around a target element and monitors mouse breaches.

8 jQuery Plugins Worth Checking Out

favico.js

Make a use of your favicon with badges, images or videos.

8 jQuery Plugins Worth Checking Out

Animo.js

A powerful little tool for managing CSS animations.

8 jQuery Plugins Worth Checking Out

Tags: Tools jquery

September 10 2013

14:15

40 Fresh jQuery Plugins To Make Your Website User Friendly

Lots of jQuery plugins are available in the internet market. Some give you outstanding results and reduce your work load with their awesome functionality while some give you only tension and increase your work load. And as you see every year so many latest and new jQuery plugins are released. All these jQuery plugins offer different functionalities and therefore, it is difficult for the users to choose which jQuery plugin is suitable for his work or which one is not.

You do not have to worry anymore, in this assortment we are showcasing 40 new and outstanding jQuery plugins for you. Check this out and get to pick one that suits you and feel free to download. All these jQuery plugins are useful and fresh. Please give us your feedback about this superb collection of jQuery plugins because your feedback is very precious and important for us.

Flexisel – Responsive Carousel Plugin

( Demo | Download )

Resize your browser window to see how you the plugin can adjust to the window width. Flexisel will adapt responsively as the screen width gets smaller…

Swipebox – A Touchable jQuery Lightbox

( Demo | Download )

Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.

Sidr – Creating Facebook-Like Side Menus

( Demo | Download )

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive.

Unslider – A ‘Super-Tiny’ jQuery Slider

( Demo | Download )

The jQuery slider that just slides. No fancy effects or unnecessary markup, and it’s less than 3kb.

jQuery Nested – Create Multi-Column, Dynamic Grid Layouts

( Demo | Download )

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts.

jResponsive – Super-Smooth Transition Layouts

( Demo | Download )

JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by “packing” them in tightly. One of the very famous website that using this type of layout is Pulse.

MultiDialog

( Demo | Download )

MultiDialog utilizes jQuery UI Dialog Widget for a full featured Modalbox / Lightbox application.

FlexNav – Flexible, Device Agnostic Navigation

( Demo | Download )

A jQuery Plugin for Responsive Menus.

Flaunt.js – Responsive Navs with Nested Click-To-Reveal

( Demo | Download )

Flaunt.js is a jQuery script that allows you to create a responsive, nested navigation out the box. Flaunt was built to overcome responsive design challenges which faced a huge percentage of websites. This challenge was to show nested navigation items on click-demand, without the event taking you through to the page you’ve pressed…

SlideToucher – Touch Enabled jQuery Plugin for Content Swiping

( Demo | Download )

SlideToucher, touch enabled jQuery plugin for content swiping. Supports vertical and horizontal swipes.

LiquidSlider – A Responsive jQuery Content Slider

( Demo | Download )

A Responsive jQuery Content Slider.

Dropdown.dot.js – Flexible Dropdowns Based on dot.js Templates

( Demo | Download )

A JQuery Plugin for super-flexible Dropdowns based on dot.js Templates.

Typeahead.js – A Fully-Featured Autocomplete Library

( Demo | Download )

A fast and fully-featured autocomplete library.

iCheck – Customize Checkboxes & Radio Buttons

( Demo | Download )

iCheck plugin works with checkboxes and radio buttons like a constructor.

Chardin.js – Simple Overlay Instructions for Apps

( Demo | Download )

Simple overlay instructions for your apps.

jQuery Alpha Image Plugin

( Demo | Download )

This plugin can change selected colours to transparent on your image and give result as image or imagedata. This plugin works on IE9+, Chrome, Firefox, Safari. I didn’t try in opera.

ScrollUp

( Demo | Download )

A Lightweight Plugin for Creating a Customisable “Scroll-to-Top”.

Adding Alarms to the Digital Clock

( Demo | Download )

Adding Alarms to the Digital Clock.

Ractive.js

( Demo | Download )

Ractive.js is different. It solves some of the biggest headaches in web development – data binding, efficient DOM updates, event handling – and does so with almost no learning curve.

Firechat

( Demo | Download )

Firechat is an open-source, real-time chat widget built on Firebase. It offers fully secure multi-user, multi-room chat with flexible authentication, moderator features, user presence and search, private messaging, chat invitations, and more.

Albumize

( Demo | Download )

Albumize is a jQuery plugin that lets you manage collection of images in the web page as albums. With albumize, you can browse albums, add cover image to albums and switch between albums.

PowerTip – A jQuery Hover Tooltip Plugin

( Demo | Download )

PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.

jQuery Pin – Pin Any Element Within a Container

( Demo | Download )

Query.Pin is here to help! Pin any element to the top of a container. Easily disable it for smaller screen-sizes where there’s no room for that kind of shenanigans.

Perfect-Scrollbar – A jQuery Scrollbar Plugin

( Demo | Download )

Tiny but perfect jQuery scrollbar plugin.

Complexify

( Demo | Download )

Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

Pickadate.js

( Demo | Download )

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Cool Kitten

( Demo | Download )

It is a collection of HTML/CSS and JavaScript files to be used for web designers and developers.

Google Map

( Demo | Download )

A jQuery Plugin allows you to easely manipulate the Google Map API. You are now able to create maps, add some markers et create routes.

qTip2 – Pretty powerful tooltips

( Demo | Download )

The second generation of the advanced qTip plugin for the ever popular jQuery framework.

Magnific Popup

( Demo | Download )

Fast, light, mobile-friendly and responsive lightbox and modal dialog plugin. Open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), photo gallery. In/out animation effects are added with CSS3 transitions.

AutoHideInput

( Demo | Download )

AutoHideInput is a simple jQuery plugin that hides and shows the information entered by the user.

Progression.js

( Demo | Download )

A jQuery plugin that gives users real time hints & progress updates as they complete forms.

Thumbnail Grid with Expanding Preview

( Demo | Download )

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

App Showcase with Grid Overlay

( Demo | Download )

A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.

jQuery TourBus

( Demo | Download )

A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

Pop Easy

( Demo | Download )

A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

Smint : Sticky Menu with Smooth Scroll

( Demo | Download )

SMINT is a simple plugin for lovers of one page websites.

FlipClock

( Demo | Download )

Least.js

( Demo | Download )

Random & Responsive jQuery, Html5 & Css3 Gallery with Lazyload.

Making Chart

( Demo | Download )

Make Pretty Charts For Your App with jQuery and xCharts.

August 22 2013

13:58

How To Make a Custom HTML5 Select Menu with Selectize.js

Advertise here with BSA


Detailed and customized input fields have been a great focus of modern web development. The jQuery library along with similar open source projects have provided a framework to build with. It has lead to numerous advances within the field of user interface design. Especially for customizing the typical “default” components in form elements.

In this tutorial I want to introduce the Selectize plugin for jQuery. It allows developers to greatly alter the presentation of input fields related to select menus and tag-formatted text fields. This can provide a tremendous benefit on projects where you need a cleaner, updated interface. It is a fairly straightforward process and shouldn’t take more than 60 minutes to create. Take a peek at my live demo to see what we are making.

jquery selectize custom select menus html5 demo

Live DemoDownload Source Code

Getting Started

First we need to download a copy of Selectize and keep the local CSS/JS files stored in the same location. You can download this archive from the Selectize.js Github repo which also includes a few sample demos. All we need is selectize.min.js and selectize.css. Copy these files into a new folder /js and /css, respectively.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Customized Input Select Menus - Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/style.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/selectize.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/selectize.min.js"></script>
</head>

You should notice I downloaded a local copy of jQuery to store in the same /js folder. Also I created another stylesheet named style.css which helps to structure the website layout. Overall there are only 4 resource files and jQuery is the only dependency we need.

Now Selectize.js offers a multitude of various setups to choose from. The default configuration requires no parameters at all. But this plugin is heavily documented with all of the parameter options you could include, and what they do. I want to get us started with two basic elements inside a sample HTML form – but remember this link when you need to go back and customize some functionality.

Inner Body Content

The form elements are pretty standard and I am using jQuery e.preventDefault() to stop the form submission. Each .formrow class is used to split up the content into horizontal sections. We only need to apply selectize() onto the select menu and the tags menu.

  <form id="testform" method="post" action="#">
    <div class="formrow">
      <label for="name">Name:</label>
      <input type="text" id="name" class="basictxt" placeholder="Your name...">
    </div>
    
    <div class="formrow">
      <label for="email">Email:</label>
      <input type="text" id="email" class="basictxt" placeholder="Your email...">
    </div>
    
    <div class="formrow">
      <label for="subject">Subject:</label>
      <select id="subject">
        <option value="1">General Inquiry</option>
        <option value="2">Advertising</option>
        <option value="3">Press</option>
        <option value="5">Account Problems</option>
        <option value="4">Content Submission</option>
      </select>
    </div>
    
    <div class="formrow">
      <label for="tags">Tags:</label>
      <input type="text" id="tags" value="website,graphics,question">
    </div>
    
    <div class="formrow">
      <label for="message">Message:</label>
      <textarea class="basictxtarea" id="message"></textarea>
      <input type="submit" class="large button" value="Send Message">
    </div>
  </form>

After this initial starting block you’ll notice that I have included both the dropdown and the text-based tags input. Selectize handles this interface beautifully and it is worth the effort to get things setup if you need this functionality in your script. The ID #subject and #tags will be used for targeting the element itself.

Internal option values from the select menu can be determined using simple jQuery. This means you can pass the same values into your form through Ajax or regular user submission. But even using the tag field we can still get return values naturally after the form is submitted. My example here provides the default value=”website,graphics,question” which can be updated as the user appends more tags onto the list.

CSS Styling

The default Selectize styles are very important and should always be included within the page header. These will create the tag styles and other various input select features. If you wish to customize them, check each item’s scope within the CSS file and overwrite the properties in your own stylesheet.

/* form styles */
.basictxt {
  display: block;
  padding: 7px 8px;
  width: 550px;
  color: #555;
  font-size: 1.5em;
  border: 1px solid #ccc;
  font-family: Helvetica, Arial, sans-serif;
}

.basictxtarea {
  display: block;
  padding: 8px 10px;
  width: 600px;
  height: 115px;
  color: #555;
  font-size: 1.6em;
  border: 1px solid #ccc;
  margin-bottom: 14px;
  font-family: Helvetica, Arial, sans-serif;
}

.selectize-control { width: 60%; }

Many of these properties are not useful aside from resetting basic HTML forms. The .selectize-control class is applied onto every element running this jQuery function. Normally the input fields are using display: inline and the width can appear too short for the inner text. I am using 60% because it fits nicely into the layout, however you should customize this value to whatever suits your design.

.button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.button {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 20px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -ms-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  background-clip: padding-box; /* Fix bleeding */
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.button:hover {
  background-color: #eee;
  color: #555;
}

.button:active {
  background: #e9e9e9;
  position: relative;
  top: 1px;
  text-shadow: none;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}

.button[disabled], .button[disabled]:hover, .button[disabled]:active {
  border-color: #eaeaea;
  background: #fafafa;
  cursor: default;
  position: static;
  color: #999;
  /* Usually, !important should be avoided but here it's really needed :)  */
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.button.large {
  padding: 12px 30px;
  text-transform: uppercase;
}

.button.large:active {
  top: 2px;
}

If you wish to duplicate the submit button style I copied over the important properties above. This original interface scheme comes from a design on Codepen with many other CSS3 effects. The button design is fantastic and it should blend nicely with any layout. Other styles are just common CSS resets and so we should move on to the final JS syntax.

Selectize.js with jQuery

As usual we need to create a script tag at the bottom of the page, before the closing </body> tag. This will contain the JS code to prevent form submission, as well as the selectize functions. If you need the form to work properly then remove this $(‘#testform’).submit() function entirely.

$(function() {
  $('#testform').submit(function(e){
    e.preventDefault();
  });
  
  $('#subject').selectize({create: true});
  $('#tags').selectize({    
    delimiter: ',',
    persist: true,
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });
});

The first method is targeting the select dropdown menu. It runs selectize({create: true}) which passes the create parameter. When true, this allows users to actually type in their own value for the select menu. It is very unique and may be helpful in some specific instances.

Looking over at the tags function I am passing quite a few more options. When creating a new tag we need to call a function which can return these values to be added back to the input field. Since this is a text field it will behave differently than a select menu. The delimiter string is what separates all these tags when passed into the form as one long value. Also persist will force all user-added values to stay in the menu as a potential choice until the page is refreshed.

There are so many other parameters you can include which provide a heck of a lot more functionality. Many of these options are also callbacks, which means you can trigger a new function once a certain event has happened(like the user clicks an option). And if you really want to get technical look through their plugin documentation for creating your own extended effects.

jquery selectize custom select menus html5 demo

Live DemoDownload Source Code

Final Thoughts

Referencing jQuery plugins for your website design can be a huge time saver. I have been thoroughly impressed with many newer plugins that have been released over 2012 and 2013. There is never a shortage of new ideas when developers are willing to build these on top of existing open source platforms. I do hope this tutorial will prove useful in future web projects. Additionally feel free to download a copy of my source codes for easy-access to the sample project.


Advertise here with BSA

August 20 2013

14:11

The Use of jQuery in Tutorials

A question came up in a semi-recent ShopTalk episode about the use of jQuery in tutorials.

Lately I've begun to realize how muddled the line between jQuery and JavaScript has become when learning about the language. It's hard to find a solid tutorial that doesn't include jQuery instead of JavaScript. What's your opinion on the overuse of the library?

The question was from Nick Hehr who wrote about it as well. You can listen to our answer there with this time-jump link.

If you've been reading this site for very long, you know we're a bit guilty of that. I'm not sure there has ever been a tutorial posted here that just used "vanilla" JavaScript (i.e. JavaScript by itself, no framework) rather than jQuery. Or if we have, they are few and far between. Is that a bad thing? I'm not so sure it is. But it is certainly worth discussing.

A little bit later I published an article that covered how to swap out text after an event. I covered five ways to do it. jQuery was used in two of them, vanilla JavaScript another, and CSS for the other two. Including jQuery, even amongst other options, ignited some "that's just overkill" style discussion:

So here's how I feel about it.

I Write What I Do

This blog is a reflection of things that I learn. I use jQuery a bunch. So when I translate things into a tutorial, I do it how I would do it.

I have only worked on a handful of sites that didn't use jQuery in the last many years, and those that didn't used some other library or just didn't need JavaScript at all.

jQuery is JavaScript

Literally. Using jQuery is still literally writing and working with JavaScript directly. jQuery just makes it easier and lowers the bar to entry. I know loads of good JavaScript developers who started with jQuery. Just like there are loads of good guitar players who started as a Dave Matthews Band Cover Band Cover Band.

Tutorials are Concepts

The goal of a tutorial is to teach an idea and do it fairly succinctly.

Let's say you wanted to select a button with a certain class name and change some text when it is clicked. To avoid any dependancies, maybe you do document.querySelectorAll(".my-button"). But that will return an array so you need to use [0] at the end of it to target the element and attach the event. Or should we just use querySelector instead which selects the first? Or should we run a loop or map over the array to bind to all of them? Or should we have used getElementByClassName? What about browser support? Should we talk about polyfills for that? Or should we just add an ID and use getElementById since that's likely a best practice?

Or, we could just do $(".my-button") and get on with the tutorial. All of that stuff is interesting and worthy of discussion, but not in every single tutorial every single time. jQuery allows the concepts in tutorials to shine without getting bogged down in detail.

The Future

Right now I feel like jQuery is still a pretty important part of the front end stack, well worth learning, and still appropriate to use in tutorials.

But things will change on the web. How JavaScript is presented in tutorials will change as well. Probably. We'll change with it. Probably. I've seen comments floating around the last few months like "I feel like if I'm using jQuery I did it wrong." which I've never heard before and may be harbingers of change. The newschool approaches of Ember/Angular also loom.


The Use of jQuery in Tutorials is a post from CSS-Tricks

August 15 2013

17:09

Showcase Of Fresh And Free jQuery Plugins And Tutorials

Plugins and tutorials are great designing resources for the designers. With the help of tutorials, designers can learn and practice new technique of using their designing tool and plugins are meant to simplify their designing work. In the recent times, jQuery has become simply miraculous seeing that with jQuery you can discover plugins to achieve almost anything you want. Among all the JavaScript frameworks, jQuery is the most prominent and well-known that goes together with loads of amazing features. On top of that jQuery is very easy to use.

Here, we are listing some fresh as well as free jQuery plugins and useful tutorials. We hope that you will like this collection and enjoy this collection.

App Showcase with Grid Overlay

( Demo | Download )

A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.

Thumbnail Grid with Expanding Preview

( Demo | Download )

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Mini Help System with jQuery

( Demo | Download )

In this tutorial, we are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application. The widget content is going to be searchable in real time, and all matching terms will be highlighted.

jQuery Animated Bar Plugin: jqBar

( Demo | Download )

This is a simple jQuery plugin for creating animated vertical and horizontal bars. The plugin is called jqBar. jqBar can be used in variety of situations where you want to present data with some visual effects. It helps you crate beautiful bar charts to represent skill set or can be used as a progress bar. Plugin is very light weight and can be completely customized.

Charts For Your App with jQuery and xCharts

( Demo | Download )

Make Pretty Charts For Your App with jQuery and xCharts.

iOS-Style Content Slider using jQuery

( Demo | Download )

In this tutorial I want to focus on one useful plugins called iosSlider. This is an open source project with numerous options for customizing your own media slideshow. This includes typical animations and effects for when the user clicks or hover over slideshow items.

Create a Sticky Navigation Header Using jQuery Waypoints

( Demo | Download )

In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off.

Interactive Infographic with SVG and CSS Animation

( Demo | Download )

Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.

PUtting CSS Clip to Work: Expanding Overlay Effect

( Demo | Download )

A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.

Slider Pagination Concept

( Demo | Download )

An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.

Make a Google Powered Shopping Search Website

( Demo | Download )

In this tutorial, we will be making a simple product search engine. Using jQuery and PHP, we will tap into Google’s Shopping Search API and return a list of items available for purchase, along with prices, photos and other useful information.

How to Create a Simple Multi Item Slider

( Demo | Download )

A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.

Responsive & Tough Friendly Audio Player

( Demo | Download )

A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.

Calendario: A Flexible Calendar Plugin

( Demo | Download )

A jQuery calendar plugin for creating flexible calendars.

Simple Effects for Drop Down Lists

( Demo | Download )

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

How to Make a Tumblr-powered News Ticker

( Demo | Download )

In this tutorial, we are going to use it as the foundation of a news publishing system. We are going to develop a simple widget which cycles through the most recent posts on a Tumblr blog, and presents them as news items to your users. Adding news will be done by creating new blog posts in your Tumblr dashboard.

Create Attractive Coming Soon Template with CSS 3D and Javascript

( Demo | Download )

We are going to make an attractive coming soon html template with CSS3, CSS 3D transform and jQuery. Let’s go a little wild with CSS3 even though some old browsers won’t support it. However, for CSS 3D transform part, we will make it degrades gracefully. Instead of the awesome 3D flipping effect, we will be substituted with just a simple hide and show effect.

jQuery Responsive Horizontal Accordion Image Slider: Raccordion

( Demo | Download )

This is a multi purpose responsive accordion image slider plugin raccordion. Its a horizontal image slider that adjusts according to the size of the browser width. raccordion slider adds variety and style.

3D Flipping Circle with CSS3 and jQuery

( Demo | Download )

In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

How to Make a Mac OSX-like Animated Folder with CSS3

( Demo | Download )

In this short tutorial, we are going to make a OSX-like folder with CSS3, by utilizing 3D transforms, gradients and box shadows. In addition, we are going to use jQuery UI and its drag and drop interactions to build a pretty interactive demo.

Create a Beautiful Password Strength Meter

( Demo | Download )

In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin.

TiltShift.js

( Demo | Download )

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

Vertical Showcase Slider with jQuery and CSS Transition

( Demo | Download )

A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We’ll be using jQuery, CSS Transitions and media queries to make the layout adaptive.

Custom Drop Down List Styling

( Demo | Download )

A tutorial on how to create some custom drop-down lists. We’ll show you five examples with different looking drop-down menus and lists for various purposes.

Creative Web Typography Styles

( Demo | Download )

Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js.

Live Album Previews with CSS3 and jQuery

( Demo | Download )

Here we are going to make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it.

Slicebox Revised

( Demo | Download )

Slicebox, the jQuery 3D image slider plugin, has been updated. We’ve done some major improvements and added new features.

Fullscreen Video Slideshow with Bigvideo.jg

( Demo | Download )

A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video.

Fullscreen Pageflip Layout

( Demo | Download )

A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.

Responsive CSS Timelinge with 3D Effect

( Demo | Download )

A tutorial about how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.

Creative CSS Loading Animations

( Demo | Download )

In this tutorial we’ll show you how to make some creative css-only loading animations also known as activity indicators.

Basic Ready to Use CSS Styles

( Demo | Download )

This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements.

Hexaflip: A Flexible 3D Cube Plugin

( Demo | Download )

HexaFlip is a JavaScript UI plugin that let’s you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins.

Animated CSS3 Photo Stack

( Demo | Download )

In this tutorial, we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.

Make a Web App with Instagram-like Filters

( Demo | Download )

In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it.

Dropbox File Uploader With Twitter Bootstrap

( Demo | Download )

Here we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.

How to grab Dribbble feed with jQuery and CSS3

( Demo | Download )

As a web developer, third party API integration is something you will have to face. Especially with the current trend, we have facebook, twitter, flickr etc. Today, we are going to look at dribbble’s API. Dribbble is a place to show off your design, it’s based on invitation basis, therefore, most designs are of high quality.

Photo Booth Strips with Lightbox

( Demo | Download )

A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly.

How to Build a ToDo Application with Web SQL and jQuery

( Demo | Download )

This tutorial will take you through the step by step development of building a ToDo App entirely powered by Web SQL. You will learn about getting started with Web SQL, understanding transactions, following best practices and how to write re-usable functions.

August 06 2013

14:09

How To Build a Range Slider Input with jQuery UI

Advertise here with BSA


Looking at the HTML5 range input element you can see a number of advancements. Forms are able to take in restricted information from users sliding between number segments. But unfortunately these HTML5 inputs are only supported in modern browsers. So although there are a few limitations we can try to work around them.

I want to demonstrate how to build a more customized version of the range slider using jQuery UI. The slider widget is a part of the jQuery UI core library so it comes prepackaged with the script. This makes it really easy to play with because the documentation has been well-sourced and easy to consume. Check out the live copy of my sample demo to see what we are creating.

jquery ui sliders inputs form

Live DemoDownload Source Code

Getting Started

To build our main document there are a number of resources we need to include. The only one I am keeping within the demo folder is styles.css which creates the basic page layout. To get support for the slider widgets we need a copy of the jQuery library, the jQuery UI library, and the jQuery UI CSS all hosted by Google. You may obviously download a local copy if you would rather host these on your own website.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Range Slider with jQuery UI - Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Acme">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>

The actual JavaScript call to generate a slider is very simple. I will be creating two sliders within the main body section. The first only uses a single slider control, while the second will use two sliders in a range setting. All of the values can be obtained through jQuery callbacks and even setup into a hidden HTML input field to process within a backend form.

Inner Page HTML

First we need to create a container for the original slider, along with the number counter. Here is what the top of my body HTML content looks like:

  <div id="defaultval">
	Slider Value: <span id="currentval">500</span>
  </div>
  
  <div id="defaultslide"></div>
  
  <br>

#defaultslider is a container which will hold the sliding input element. This means you can directly manipulate the width and height of the object to fit into any portion of your layout. Additionally you can overwrite the default jQuery UI stylesheet effects to customize this to your own liking. jQuery UI Themeroller is an excellent web application which can aid in this process.

  <h2>Ranged Slider</h2>
  <div id="rangedval">
	Range Value: <span id="rangeval">90 - 290</span>
  </div>
  
  <div id="rangeslider"></div>

The latter portion of our page includes a very similar batch of HTML. The value container now uses an ID #rangeval and it has a value of two numbers separated by a dash. JavaScript string manipulation also makes it easy to turn this into an array, or break the numbers down into two distinct input fields.

Custom CSS Effects

My document itself does not have very much CSS which is worth looking into. There are some more unique properties and resets added into the document, but nothing exceptional to help with range sliders. There have been a lot of questions related to theming jQuery UI sliders. Throughout Google you can find a lot of helpful resources.

One great example to share is customizing the internal slider scrollbar color which can be accomplished with rudimentary CSS. It always relates to targeting internal classes within the jQuery UI CSS library. The basic code looks something like this:

div.ui-slider-range.ui-widget-header {
    background: #0000ff;
}

If you want to see more customized examples then I would recommend Codepen. Developers use this as a testing ground for new ideas and there are some unbelievable examples. Possibly my absolute favorite is this UI volume slider which makes use of custom CSS and background images to duplicate the interface of an audio sliding bar.

img

To offer just one more CSS design I would recommend jQuery UI Slider Pips which is a free open source project on Github. You can view a live demo to see how all the various slider inputs look and feel on the page. It is a lot more difficult to customize an HTML5 slider, and so with a little effort you can make a beautiful jQuery UI slider which also adapts gracefully in many web browsers.

Adding the jQuery Code

Finally our last step is to run the .slider() function attached onto each main div element. There are only two on the page but they both require slight adjustments to the default parameter settings. These codes are found at the bottom of my HTML file wrapped inside <script></script> tags. Here is the entire code block:

$(function(){
  $('#defaultslide').slider({ 
    max: 1000,
    min: 0,
    value: 500,
    slide: function(e,ui) {
      $('#currentval').html(ui.value);
    }
  });
  
  $('#rangeslider').slider({
    range: true,
    min: 0,
    max: 1000,
    values: [ 90, 290 ],
    slide: function( event, ui ) {
      $('#rangeval').html(ui.values[0]+" - "+ui.values[1]);
    }
  });
});

The max and min value parameters are easy to figure out. Also the default value will be where the slider places the scrubber button right after the page loads. Notice these values match the current number values found in my HTML. Within the slide parameter we are calling a function which will auto-update every time the user performs a new slide.

These functions will re-update the inner HTML contents inside each counter to represent the new slider value. But if you need these to be passed into a form you could make alternative functions which update an input value using the jQuery .attr() method.

jquery ui sliders inputs form

Live DemoDownload Source Code

Closing

Although my example is fairly basic it does introduce how you can build forms around these slider elements. jQuery is a supported library with many older legacy browsers, and it does provide excellent support in many ways HTML5 hasn’t quite nailed down. Feel free to download a copy of my source code and see if you can implement these sliders into your own projects. Also if you have thoughts or questions you can share with us in the discussion area below.


Advertise here with BSA

July 28 2013

09:00

Tabulous.js: Organize Random Content in Tabs with jQuery


  

Aaron Lumsden from West-Yorkshire simply loves jQuery. It’s been merely a few days ago, that we introduced our readers to progression.js, a plugin that gives users real time hints and progress updates as they complete forms. Today I ran across another useful plugin by the same programmer. Tabulous.js helps you organize any content in containers with tabbed navigation and nice animated effects to hide and show the enclosed elements.

July 22 2013

06:30

July 21 2013

09:00

Progression.js: jQuery Plugin Takes the Pain out of Inescapable Web Forms


  

From the UK, West Yorkshire county, city of Leeds stems a fresh jQuery plugin, that promises to help visitors fill out web forms by assisting them and providing progress updates. This is the more helpful the longer a form gets – and we all know, web forms can get reeaaallly looong. Two data attributes, added to the form fields, care for keeping track of where the visitor is and what he is supposed to do there.

July 08 2013

03:59

Top jQuery Slider Plugins for Frontend Web Developers

Advertise here with BSA


Common JavaScript techniques include Ajax content, dynamic forms, and modal windows. The content slider/slideshow interface has always been around but has gained a tremendous audience over the past few years. And with the continuing growth of jQuery it is safe to assume that more developers will be creating projects with an open source license.

In this collection I want to present 30 of the most interesting jQuery slider plugins. Each one should work properly with the most current version of jQuery and they also provide their own documentation. It is a great way to introduce yourself into the system and start building websites with some more dynamic effects.

iView

iview sliding plugin slideshow jquery

Commonly the jQuery iView plugin helps to put together iframe content within a slider. This standard interface allows developers to create animated captions so the entire slideshow interface behaves dynamically. And you can embed lots of other content aside from iframes, like YouTube videos or background images. You can see these features in this live demo.

Adaptor

jquery box slider adaptor open source

Adaptor is another plugin created as a jQuery content slider. This user interface is much sleeker than other common plugins, yet I have noticed the file sizes are a bit larger as well. It comes with a number of default animations which are much more powerful than CSS3 alternatives. You can download the source off Github or check out a live demo from the plugin homepage.

Galleria

jquery plugin galleria github sliding slideshow

The Galleria plugin is definitely one of the best image slideshow galleries. It comes with a very easy-to-use interface that anyone should understand. It is also completely free to download and comes with its very own documentation page. This may take a bit of time getting adjusted to all of the settings. But Galleria will captivate your visitors because it is easy to use and so simple to understand.

Slider.js

sliderjs open source jquery plugin

I have personally used Slider.js in a couple situations and never had a problem with it. This plugin is very basic when first added into a webpage. You should attempt to update a few sections in the CSS where you may control the colors and UI elements. Currently the plugin has been undergoing upgrades for v2 which should be released sometime during 2013.

SlidesJS

slidesjs open source jquery plugin slideshow

SlidesJS is a completely different project in comparison to Slider.js. This also runs on jQuery but SlidesJS is much more refined to be placed within responsive layouts. You can fill up images which take over the entire width of the screen and it will look great. Check out the files in SlidesJS Github repo to learn more.

Evo Slider

Evo Slider tabbed accordion slideshow

Breaking away from the image sliding content we have Evo Slider. This is built for housing HTML content, which may be images, but it could be anything you like. Every one of the slides will fold into each other like a horizontal accordion. Check out the list of examples to see how this could be implemented into your projects.

bxSlider

bxslider jquery responsive plugin slideshow

bxSlider has gotten a lot of solid publicity in recent months. It just happens to be one of the simplest, cleanest, and easiest plugins to use on any website. Features include a responsive layout and the ability to touch/swipe on a mobile device. There is an older deprecated version floating around the web but you can find the most up-to-date released in this Github repo.

Unslider

Unslider jquery open source plugin background images

Unslider behaves more as a fullscreen interface block than a typical image slideshow. jQuery is used as the backend plus you have the option of customizing many parameters like the animation speed or delay between slides. It even supports keyboard navigation for moving next/previous without a mouse! It is a newer project but definitely worth the leap. Check out the plugin homepage to learn more.

Tiny Carousel

tiny carousel jquery open source plugin

Tiny Carousel is a more lightweight alternative for typical HTML sliding content. The carousel means once you reach the end of the content list, it will automatically restart from the beginning and slide through again. You can even set the orientation to slide horizontal or vertical on the page. This is a plugin worth looking into if you need the carousel-type functionality.

Basic Slider

basic slider jquery open source plugin

With a name like Basic Slider you can probably formulate an opinion of this plugin. This has been created with a mindset of being simple and lightweight. You will find all the essential functionality and nothing more – this leaves room for customization of the skin design via CSS styles. There are more details on the plugin repo or you can see alternative code examples on the plugin homepage.

Skitter Slider

skitter slider jquery plugin open source preview

Using this plugin you will find some really big oversized UI elements! Skitter is a jQuery slideshow plugin with content sliding for image galleries. It also has captions which display through animation after switching between slides. I really like the interface, but designers may find the controls are somewhat clunky.

Liquid Slider

liquid slider responsive jquery plugin

Looking at the homepage for Liquid Slider you can tell it was developed with some grace by Kevin Batdorf. This plugin is meant to be very simple and responsive when needed. It will use CSS3 transitions when possible but also falls back onto jQuery for older browsers. Even the plugin documentation is fantastic and certainly worth a quick peek.

ResponsiveSlides.js

responsive slides js jquery plugin slideshow

ResponsiveSlides.js is another plugin doing exactly what you might expect! You can build a responsive slideshow panel switching between photos and other content. It is really easy to install and you have the option of turning off all standard user interface controls. This means users will have to sit and watch the slideshow rather than jumping ahead. But from customizing options you can include controls and image captions, as in this demo on the main website.

SlideDeck

slidedeck jquery plugin sliding panels

SlideDeck is one of my personal favorites as it is a very professional jQuery plugin for developers. There have been a few iterations released leading up to the current version, which supports any type of media from images to videos and HTML content. Granted this one does cost some money but working on certain projects this may be worth the investment.

RSlider

fullscreen jquery slideshow image plugin

RSlider is a beautiful fullscreen image slider using jQuery. I have not introduced any other fullscreen plugins and this is certainly one worth noting. It is totally free to download and may be used in any website project with fullscreen background images. The controls are also easy to customize, and you can read more on their official blog post.

Coin Slider

coin slider plugin jquery open source

The Coin Slider plugin is really unique with its library of various jQuery animation effects. The transitions between each slide are seamless and beautiful. This is even supported in older browsers going back to Internet Explorer 6! A great choice for compatibility with any website.

PlusSlider

Plus Slider jquery slideshow plugin

Looking at the PlusSlider it is definitely a more basic version of any image slideshow. You can quickly implement either images or HTML into the content and attach this to an unordered list on the page. The design almost reminds me of SlideShare with the similar navigation arrows and panel icons at the bottom.

AnythingSlider

csstricks jquery slider js plugin

Another fairly basic example is the AnythingSlider released by CSS Tricks. This content slider is managed as a very bare-bones starting kit to get something up and running on your website. The documentation on Github is easy to go through and provides an excellent starting point for new developers.

wmuSlider

wmuslider plugin open source jquery preview

For a darker and more unique interface please check out wmuSlider. It was created by Brice Lechatellier and you can see a live demo on his website. The arrow keys are translucent and only appear on the slideshow when hovering. Additionally the files themselves are very small but there are not so many alternative parameter methods for customization.

Choco Slider

choco slider open source jquery plugin

One really good beginner’s plugin for content sliding is Choco Slider. This very tasty jQuery plugin is easy to customize and easy to install. But it also comes with very bare features in comparison to other choices. Developers who want to get their hands dirty may try this out as a simpler solution for a simpler website layout.

Superslides

superslides open source jquery plugin slideshow

Superslides is another beautiful fullscreen jQuery-based image slideshow plugin. You merely input the image files that you need and the design will fit them naturally into the full page background. Additionally there are navigation arrows and small circular icons for transitioning between slides. The source code is very easy to work with and you can find more examples in the Github repository.

jQuery Carousel

jquery carousel slider plugin open source

To jump back into carousels we have this jQuery Carousel plugin released by Thomas Jaggi. It is responsive and works to fit any type of content into the slides, plus the whole slideshow will restart from the beginning after hitting the last one. The interface itself is swipe-enabled which is good news for tablet & smartphone users.

touchSlider

touch slider jquery plugin webdev preview

Looking at the demos for TouchSlider it does use a very specific interface design. This may not fit well into all your sites and so it is notable that this plugin may not be for everyone. But it does include a nice core functionality and the design is always customizable. Check out the plugin Github repository to learn a bit more.

Responsive Carousel

filament group open source responsive carousel

Filament Group released a great plugin for responsive content carousels. This is free to download off Github and customize into your own projects. Currently it is still in development and the full documentation has not been completed either. But you may want to check out what has already been done and see if this plugin might fill a void in your project work.

rcarousel

rcarousel open source jquery slideshow plugin

Here we have yet another great carousel plugin named rcarousel. It is a continuous content slider built for housing much more than just images. You can add other types of HTML/CSS content into each slide and they will display properly. Also the animation effects are simple yet effective to achieve the typical carousel interface.

Flux Slider

fluxslider jquery plugin open source numbers

I have known about Flux Slider for a while and only recently got the chance to use it. This is simply an amazing plugin which allows for a great number of custom jQuery transition effects. You may select between 3D or 2D animations, and these can be dispersed intermittently and used within various transitions on the page.

iOSSlider

iosslider touch slideshow plugin jquery

iOS Slider is a really unique project built to work specifically on touch devices. The whole plugin can be implemented very quickly if you know how to setup the default parameters. It is also one of my favorites because you can manipulate both images and text within the sliding box. It works great on tablets and smartphones to fit nicely into a responsive layout.

Lean Slider

lean slider jquery open source slideshow panels

Taking a peek at Lean Slider this is still one of my favorite new releases. This is a typical content slider which can house images, HTML content, videos, and other forms of embedded media. It also behaves like a carousel where you can move forwards or backwards in any direction continuously. The plugin homepage offers a lot of documentation and you can learn more by scanning notes on the plugin Github repo.

Craftyslide

craftyslide open source jquery demo preview slideshow

The Craftyslide plugin is a free open source project for tiny slideshows. The files are only 2KB and it has been created from the ground-up to remove all the excessive frills you can find in other plugins. This is meant as a starting template which looks good on its own, but may also be customized for nearly any website. Craftyslide may also be found on Github with related documentation and support questions.

Blueberry

blueberry jquery plugin slideshow open source preview

Last on the list we have Blueberry which is actually one of the better fluid slider plugins. This will adapt to any layout size and the image captions are beautiful. It does require a bit of extra HTML markup added into the page. But if you don’t mind the effort Blueberry can deliver one amazing jQuery-based slideshow performance.

Final Thoughts

Although there are many other alternatives to choose from, jQuery is easily the best-supported open source JavaScript library. So many free plugins have already been released and developers are putting out new ideas every month. I hope this collection may offer ideas for webmasters who have been looking to implement a slider interface. Additionally if you know about other jQuery plugins which we missed please share with us in the post discussion area.


Advertise here with BSA

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl