There is basically no limit on what you can do.

The gist of it is, all you have to do is match the column names in SharePoint – to the field in the List. That also means you can arrange the fields, labels, messaging, colors – just about anything you want.

Again, it’s all HTML.

View in GitHub

This is a jQuery plugin, so it needs jQuery. The optional Bootstrap CSS can also be added (not required) – to get you a jump ahead on responsive and styles. The output will be something like below:

The best way to get up and running is by downloading the files editing the HTML. That’s all. The types of fields (IN THE HTML) that are supported are:

• text
• select (drop down lists)
• checkbox – (multiple values)
• radio buttons – (single value)
• textarea (multi line text)
• file (upload an attachment)

There is built-in input validation, loading image, “thank you” and “error” messaging. Again, you customize these fields by simply updating HTML.

How does the Form link with the SharePoint List?

The HTML part of the form connects with the list via “attributes”. To be exact, “data-list-name” refers to the List name, and each field will have a “name” attribute which refers to the column in your said SharePoint list.

<div data-list-name="sp-forms-form2" ... >

The above shows that we’re connecting to “sp-forms-form2” list. This DIV is not exactly a “Form” – but a wrapper for all of the fields, messaging and buttons that we need. So this DIV is very important.

<input name="Title" ... />

The above field shows that we’re connecting to the column “Title” in the “sp-forms-form2” list.
Easy enough? Let’s continue.

Do not use any type – it will not insert.

Again, use only “Single line of text” for all fields except a “textarea” – which is “Multiple lines of text”.  *All values from the form will be inserted as plain text. Checkbox (multiple values) will be separated by a semicolon, but still as text.

How to add validation?

For each field, you can a set of validation rules. For now, we only have “required”, “date”, “email” and “phone”. Simply add the rules to the input/textarea/select as an attribute called “data-rules“. And if you need to use more than one, simply separate it with a pipe “|”.

<input data-rules="required|email" ...

The output will look behave like below:

Are you still with me? Awesome.

How to add a Drop Down List?

A drop down list is simply a “select” tag in HTML. It’s basically a select tag, with “options” inside it. The “options” are the drop down values. It looks something like below:

<select name="countries">
   <option value="">--</option>
   <option value="USA">USA</option>
   ...
   ...
   ...
</select>

Simply add more options to the “select” tag to build your drop down list.

How about a textarea, checkbox and radio buttons? 

Those are all in the demo HTML: It is fully documented and you should be able to figure it out easily. Note that you will need to open this in an HTML editor such as Notepad++ or VSCode. Don’t do regular notepad. Just don’t.

How about People pickers? Date Pickers?

The plugin itself doesn’t have it. But its just HTML + JavaScript. Simply add them on document ready. That’s the beauty of this plugin. You’re free to do anything you want because you’re dealing with the code.

How to get the label “inside” the text input?

This one is a little tricky. I find it easier to use the “placeholder” attribute, than to use a “label”. So do something like below:

<input placeholder="Label here..." >

Anything else that you want to do with the labels and fields should be doable. For example, making the fonts bigger, making the widths of the fields wider – adding plugins, it’s completely up to you.

What happens when I click “Submit”

Clicking submit will add the record into the list that you’ve added inside the list that you’ve specified in the “data-list-name” wrapper that we have.

Let’s say you have everything in place, a new record will go inside your list once you click “Submit“:

Can I view the submitted record?

By default, as soon as the form submits – it goes to the newly added record. This means that the url will change to a:

http://yoursite.com/yourpage.aspx?form1=25

This will be the “permanent” url for the record. If you want to go back to a black form – simply remove the “?form1=xxx” from the address bar.

In the default “Thank you” message there is a link to create another record:

Clicking this link will reload the page – with the form fields ready to go.

Can I customize the “Thank You” message?

Yes definitely. Again, go to the HTML and you will see the thank you messaging wrapped in it’s own DIV:

<div class="success-message" style="display:none;">
   Thank you for your submission. Click Here ...
</div>

Where does the attachment go?

The input field of type “file” and MUST be named “attachment” will add the file as an “attachment” to the list item:

The code for this field looks like below. Again, refer to the HTML and it should have this field already setup for you.

<input type="file" name="attachment">

Important: You don’t need to create a column named “attachment” in the list. SharePoint allows an attachment to be tied up to each list item. This is a pretty cool feature.

How do I install the plugin?

Let’s begin by grabbing the files from Github. Unzip the package, and upload to a document library in your SharePoint site. It will look something like below:

On the Document Libary settings, click “Open in Explorer”.

This will now open, as if it was a directory in your local drive. Let’s open the “sp-forms.html” with a text editor such as Notepad++.

Edit the paths of the sp-forms.css and sp-forms.js to the directory that you added them to.

Then create a page in SharePoint, add a Content Editor Webpart:

In the settings for that wepart, add the path to the HTML file in the document library.

If it can’t find the list, you will see an error message like below:

That means that you should create the list, along with the columns that is described in the beginning of this tutorial.

The post Create Custom HTML Forms for SharePoint with this jQuery Plugin appeared first on Michael Soriano.

For instance, you’ve probably run into this problem at one point.
Notice our “results” array is empty after we run our function:

function getData (){
   $.get('/page.php',function(data){
       console.log(data) //filled!
       return data;
   });
}
var results = getData();
console.log(results); //empty!

The issue here is our getData() method continues to run even before our AJAX call finishes. So naturally, our results will log empty. One thing we DON’T want to do is to continue our logic inside the $.get() utility!

Enter Promises

jQuery have promises implemented with their AJAX methods. In a nutshell, they are utilities that allow us to work with events that have completed or put them in queues or chain them – all of that good stuff.  In our case, we need a “promise“. This allows us to interact with our AJAX requests – well outside our $.get() utility. So we can continue with our logic as designed.

So let’s solve our issue with .done() – which is a method that comes with $.get():

function getData (){
   return $.get('/page.php');
}
getData().done(function(data){
  console.log(results); //filled!
});

As you can see, we can use our function getData() – anywhere in our code as we’ve intended it to be. Note that there is also .fail(), .always()  – which are the other methods for our $.get() promise object. .fail() for – when our call fails, .always() occurs every time it runs. The syntax is very self-explanatory.
Now we can also do this:

getData().fail(function(error){
  console.log(error); //some error handling
}).always(function(){
  //something that happens every time...
});

Which may serve as a global error handler for our getData() function.

You can also do both!

function getData (){
   var ajax = $.get('/page.php',function(data){
     //do something with data here
   });
   return ajax;
}
getData().done(function(data){
  //do something else with data here
});

So our method getData() – will always run our success function inside $.get(), while we use .done() – everywhere else in our code.

Multiple AJAX calls

What about multiple (different) AJAX calls? Something like below:

function getData1 (){
   return $.get('/page1.php');
}
function getData2 (){
   return $.get('/page2.php');
}
function getData3 (){
   return $.get('/page3.php');
}
getData1().done(function(data){
  //do something here
});
getData2().done(function(data){
  //do something here
});
getData3().done(function(data){
  //do something here
});

This is fine, but it looks rather clumsy don’t you think. There is a method called .when() – which deals with stuff like this.

Instead of writing multiple .done(), we can elegantly compile them into a single block. We still get access to the same objects – as if we’re dealing with each AJAX call individually.

function getData1 (){
   return $.get('/page1.php');
}
function getData2 (){
   return $.get('/page2.php');
}
function getData3 (){
   return $.get('/page3.php');
}
$.when(getData1(),getData2(),getData3()).done(function(r1,r2,r3){
   console.log(r1) //[data, status, xhrObj]
   console.log(r2) //[data, status, xhrObj]
   console.log(r3) //[data, status, xhrObj]
})

Note that each response returns an array. So for example you want to access the data of the first response, you do a r1[0] and so forth.

Multiple Dynamic AJAX calls

Now this one is tricky. It has been asked in StackOverflow – which has an answer I would have not guessed. First thing is to get our requests in an array format. So this will be the dynamic part and it’s up to you how you want to design that. Now, $.when is smart enough to process the calls – if you pass them in single or an array.

var requests = [ //this will be the dynamic part
  $.get('page1.php'),
  $.get('page2.php'),
  $.get('page3.php')
]
$.when.apply($,requests).done(function(){
  console.log(arguments); //array of responses [0][data, status, xhrObj],[1][data, status, xhrObj]...
})

But note that we use .apply after $.when This is so we can have access to a special variable called “arguments”. The arguments hold the responses from our array of calls, in a multi-dimensional array format.

As you can see, our promise is still in-tact and does it’s thing for dynamic AJAX calls.

$.Deferred()

As the method implies, $.Deferred() is to put in on hold, until you’re ready to interact with it. $.Deferred() is useful when we have actions such as multiple AJAX calls and we want to continue interacting with them at a later time.

Building on our example, let’s wrap our $.when() inside a function so we can call it later. Let’s use the .resolve() function of $.Deferred to illustrate:

function getData1 (){
   return $.get('/page1.php');
}
function getData2 (){
   return $.get('/page2.php');
}
function getData3 (){
   return $.get('/page3.php');
}
function defCalls(){
   var def = $.Deferred();
   $.when(getData1(),getData2(),getData3()).done(function(){
     setTimeout(function(){
       def.resolve();
     },2000)
   })
   return def.promise();
}
defCalls();//returns the promise object

You see that we are delaying our .resolve by 2 seconds using setTimeout(). You will see our def.promise() will take 2 seconds to return.

Also, now we have an accessible defCalls() promise object that we can use at a later time:

defCalls().done(function(){
  //do something here
})

You can also pass parameters to .resolve() – for later use in our defCalls() promise object. For example, the responses that came back from our call:

function defCalls(){
   var def = $.Deferred();
   $.when(getData1(),getData2(),getData3()).done(function(r1,r2,r3){
     def.resolve(r1,r2,r3);
   })
   return def.promise();
}
defCalls().done(function(d1,d2,d3){
   //now we have access to data...
})

What about multiple dynamic calls? We already learned about .apply(). We simply do the same thing so we can pass “arguments”:

function defCalls(){
   var def = $.Deferred();
   var requests = [
     getData1(),
     getData2()
   ]
   $.when.apply($,requests).done(function(){
     def.resolve(arguments);
   })
   return def.promise();
}
defCalls().done(function(arr){
   //now we have access to array of data
   console.log(arr);
})

Lastly, let’s just say we want to create an action for failed events, we use the .reject() method for that:

function defCalls(){
   var def = $.Deferred();
   $.when(getData1(),getData2(),getData3()).fail(function(){
     def.reject();
   })
   return def.promise();
}
defCalls().fail(function(){
   //do something here
})

As you can see, there many benefits in using promises and deferred objects – especially in asynchronous programming with jQuery’s AJAX. Not only that it will make your code easier to read. But it also makes it easier to debug, well factored and organized – the way jQuery intended it to be.

I would like to read comments on how you’re using these objects in your own code. Please leave them below.

The post Working with jQuery’s AJAX, Promises and Deferred objects appeared first on Michael Soriano.

How to use:

Just like a regular jQuery plugin, you need to have jQuery included in page to use. Then simply call inside a .ready() with your selectors and options included. An example is shown below:

$(document).ready(function(){
   $('.table1').stackedRows();
})

Options

You can pass several options when calling the plugin. Check the table below for an explanation of how the options work.

The options are quite explanatory. The demo page also shows some of the options described above.

The post Better handling for your HTML tables in Responsive view with this jQuery Plugin appeared first on Michael Soriano.

Note that this plugin will require the following files:

• jquery.min.js
• jquery.SPServices-2014.02.min.js
• bootstrap.min.css

In this post, I will show you how to use a Javascript plugin that I’ve written to basically recreate the markup of these SP lists so it works with Bootstrap / Mobile. It also has extra functionality like paging, filters, expand/collapse and other options. By the time we’re done, your list will look real good in desktop, tablet and mobile view:
View in Github

How to use the Plugin:

Note that I’ve only tested this with SharePoint 2013. You may need administrator rights to your website, as well as you should know how to work with custom lists and document libraries and such.
After you have downloaded the files, open the “sp-bootstrap-list-viewer.html” in you text editor. This is where you will add the plugin information.
You have to change the CHANGE-TO-YOUR-PATH in the JavaScript and CSS inclusion – to your downloaded path.
Then, you add 2 things: the list name, the “Answer” column. The rest of the options are optional such as the “filterBy” and “rowLimit”. The table below will show you want the rest of the options do.

Once you have edited the html file, upload it to a location in your SharePoint site, typically a document library. You will need to copy the location of the file.

Let’s go ahead and add a CEWP into your SharePoint page. in the “Content Link” input, add the location of the html file you’ve just uploaded.

Click “OK” and if everything is configured correctly, you should see the plugin do its thing:

The table below contains the options for the plugin and an explanation of what they’re for:

One thing to remember. If you plan to use the plugin multiple times in a page, you need to change the “instance” value to a random number prefixed with alphanumeric characters. You also need to make this the “Object” name of your html (where it says var spBL233565656 = new spBootstrapList …). This will make the instances of your plugin unique in every page and will not clash with each other.

Under the hood:

For those of you who want to know more about how the plugin works, I will show you some of it’s main functionality. Note that this was originally built for a FAQ list for SharePoint, hence the FAQ names such as “Question” and “Answer”. Though the plugin will work with any kind of SP list.

Requirements

We will need some help with Mark Anderson’s SPServices – a jQuery plugin that basically does the web service calls for us. This allows us to work with the lists’ data and convert it to our desired markup. Of course we will need Bootstrap – which will take care of the responsive and overall styles, as well as jQuery for DOM manipulation.
Notice the required scripts and styles. You can link to them externally or download them to a document library in SharePoint. Our constructor spBootstrapList() calls our Javascript class, passing along our required arguments. Again, the variable name “spBL233565656” and the value for “instance” has to be identical. This is for using it multiple of these in a single page.
So going into the Javascript plugin: sp-bootstrap-list-viewer.js, you will see that on first load there’s a public method that gets called to set things up “init()”. This makes the initial call to the plugin “SPServices”. As I’ve mentioned, the plugin does the AJAX call to the SharePoint web service. It uses SOAP as its protocol so the request / response will be in XML format. Our init() method also checks for valid fields:

var init = function(){
var ajax = methods.callSPServices(_settings.rowLimit, true);
$(ajax.responseXML).SPFilterNode("z:row").each(function(e) {
    var errors = Array();
    if(typeof $(this).attr('ows_' + _settings.question) == 'undefined'){
        errors.push("Invalid field name for Question: " + _settings.question);
    }
    if(typeof $(this).attr('ows_' + _settings.answer) == 'undefined'){
        errors.push("Invalid field name for Answer: " + _settings.answer);
    }
    if(_settings.filterBy !== '') {
        if(typeof $(this).attr('ows_' + _settings.filterBy) == 'undefined'){
            errors.push("Invalid field name for FilterBy: " + _settings.filterBy);
        }
    }
    _errors = errors;
    methods.parseResponse($(this));
});

Then we parse our response and we fill our internal object “_faqs”: Notice the SharePoint internal list names that start with “ows_” – these are how it comes out of the SOAP response. We parse it to our own object with more meaningful keys and it’s values:

parseResponse : function(resp){
    var record = {};
    record.question = resp.attr('ows_' + _settings.question);
    record.answer = resp.attr('ows_' + _settings.answer);
    record.created = resp.attr('ows_' + 'Created');
    if(_settings.filterBy !== ''){
        record.filterBy = resp.attr('ows_' + _settings.filterBy);
    }
    _faqs.push(record);
},

By the way, in order for us to make public methods from within our plugin is that we assign it to the “this” keyword. This way it becomes accessible from the outside. Here is an example of all the public methods of our plugin:

this.paginate = paginate;
this.filter = filter;
this.showHideFilters = showHideFilters;
this.clearFilter = clearFilter;
this.showHideAnswer = showHideAnswer;

Continuing with our process, note that we need the “_faq” array to be filled for our next method to fire. This method is called methods.buildFaqs(), So we built another object called “methods” and inside this is a series of functions. This will be our “internal” methods.
If you look at the buildFaqs() method, the code looks like below:

buildFaqs : function(){
  var output = '';
  for(var i=0; i<_faqs.length; i++){
    var hr = (i != (_faqs.length-1)) ? '

[code above has been truncated – due to syntax highlighting error]
So you see, we have our SharePoint list data in our array, and we build the HTML from it.

Pagination

Our pagination logic is quite interesting. We use the Bootstrap pagination HTML, and for each page, we need to do a AJAX call in order to get the next page ID. This is how SharePoint determines where to offset the record when a query is made by using “ListItemCollectionPositionNext” as a parameter.

var buildPagination = function(){
  if(_errors.length > 0) {
      $('#'+ _settings.instance+' .spBLPagerContainer').html('');
      console.log('Exiting buildPagination()');
      return false;
  }
  methods.getTotal(); //inside here we build filters
  if(parseInt(_totalRecords) > parseInt(_settings.rowLimit)) { //yes paginate
      var pages = Math.ceil(_totalRecords / _settings.rowLimit);
      var positions = Array('');
      for (var i=0; i < (pages - 1); i++) { //builds the values required 'ListItemCollectionPositionNext'
          var pos = '';
          if(i == 0){ //skips first to not pass pos
              positions.push(methods.getNextPos(pos));
          }else{
              var offset = i;
              positions.push(methods.getNextPos(positions[offset]));
          }
      }
  // console.log(positions);
  methods.buildPagination(positions);
  }else{ // no need to paginate
      $('#'+ _settings.instance+' .spBLPagerContainer').html('');
  }
}

We then proceed to build the actual markup with our internal method: methods.buildPagination():

buildPagination : function(items){
  if(_firstLoad == false){
      $('#'+ _settings.instance+' .spBLPagerContainer').html(pager);
  }
  _positions = items;
  var pager = '

 
[code above has been truncated – due to syntax highlighting error]
Each button has an inline “onclick” that calls our public “paginate()” method. Each of them also has the attribute “data-position” which holds the offset “ID” that we talked about:

var paginate = function(clicked){
  if($(clicked).parents('li').hasClass('active') || $(clicked).parents('li').hasClass('disabled')){
      return false;
  }
  $('#'+ _settings.instance+' .pagination li').removeClass('active');
  var pos = $(clicked).attr('data-position') != '' ? $(clicked).attr('data-position') : '';
  if($(clicked).hasClass('NextButton')){
      $('#'+ _settings.instance+' a[data-position="'+pos+'"]').not('.NextButton').parents('li').addClass('active');
  }else if($(clicked).hasClass('PrevBtn')){
      $('#'+ _settings.instance+' a[data-position="'+pos+'"]').not('.PrevBtn').parents('li').addClass('active');
  }else{
      $(clicked).parents('li').addClass('active');
  }
  methods.updateNextPrevBtns(pos);
  methods.clearFaqs();
  var options = {
      CAMLViewFields: methods.fieldsToRead(true),
      CAMLQuery: methods.query(),
      CAMLRowLimit : _settings.rowLimit,
      CAMLQueryOptions: ""
  }
  var ajax = $().SPServices(methods.mergeSPCommon(options));
  $(ajax.responseXML).SPFilterNode("z:row").each(function(e) {
      methods.parseResponse($(this));
  });
  methods.buildFaqs();
}

You noticed too from the code above that we use SPServices on each click. That’s because we are only grabbing a predefined set of records – which is the limit that we pass into our plugin.

Filters

So the plugin supports filtering. This means that you can choose a field from your list and make that a “filter” column.
First, assuming you’ve selected a valid field, we have to build it. Take a look at the code below:

getFilterByValues : function(resp){
  var filterList = Array();
  var filterListUnique = Array();
  $(resp.responseXML).SPFilterNode("z:row").each(function(e) {
      var filterValue = $(this).attr('ows_' + _settings.filterBy);
          if(typeof filterValue !== 'undefined'){ //only add to array if theres a value
              filterList.push(filterValue);
          }
  });
  $.each(filterList,function(i,el){ //get rid of duplicates
      if($.inArray(el, filterListUnique) === -1){
          filterListUnique.push(el);
      }
  });
  _filterByListUnique = filterListUnique;
  _filterByList = filterList;
}

The above simply grabs the data. And since there are duplicate entries – we will have to make them unique and fill up our “_filterByListUnique” array. This is next:

buildFilters : function(){
  var count = 0;
  var out = '';
  out +=

[code above has been truncated – due to syntax highlighting error]
The above builds out the checkboxes we need for our filtering capabilities. Now when each item is clicked, it triggers our filter() method:

var filter = function(clicked){
  _firstLoad = false;
  _filterByValues = [];
  $('#'+ _settings.instance+'-filtersArray :checkbox:checked').each(function(e){
      _filterByValues.push($(this).val());
  })
  methods.filter();
}

Which actually calls our internal methods.filter() method:

filter : function(){
  $('#'+ _settings.instance+'-filtersArray input').attr('disabled', 'disabled');
  $('#'+ _settings.instance+' .clearFilter').attr('disabled', 'disabled');
  methods.clearFaqs();
  var ajax = methods.callSPServices(_settings.rowLimit, true);
  $(ajax.responseXML).SPFilterNode("z:row").each(function(e) {
      methods.parseResponse($(this));
  });
  setTimeout(function(){
      methods.buildFaqs();
      buildPagination();
      $('#'+ _settings.instance+'-filtersArray input').removeAttr('disabled');
      $('#'+ _settings.instance+' .clearFilter').removeAttr('disabled');
  },10);
  if(_filterByValues.length > 0){
      $('#'+ _settings.instance + ' .clearFilter').show();
  }else{
      $('#'+ _settings.instance + ' .clearFilter').hide();
  }
}

A lot going on here. You see that we make a new AJAX call through SPServices, passing our filter value. We parse the response, rebuild our items through “methods.buildFaqs()” and rebuild our pagination through buildPagination().
There’s much more logic in the plugin such as the creating the CAML queries – but I decided not to go through them. If you’re well versed with .NET and SharePoint – you will be able to decipher these easy.

Console Debugging

Once you have the code in place – save and refresh your page. If by any reason some of the options are passed incorrectly, error handling is added and will be displayed in the HTML. You also need to turn on the console for more messages of what’s going on. I’ve added a couple of helpers that will get you information about your list such as getAllColumns(). This will display all of the fields that belong to the list you’re working with. Simply use the instance name + getAllColumns().

Conclusion

As you can see, we can make SharePoint internal lists work responsively. We may have to redo the markup entirely – but there are web services in place to grab the data. Thanks to open source code such as SPServices, jQuery and Bootstrap – our task becomes somewhat easier.
Feel free to comment below.

The post How to make a SharePoint List work with Bootstrap – using SPServices and jQuery appeared first on Michael Soriano.

Combining both techniques

What we’re trying to achieve is have the security of server side validation, the elegance of displaying the errors inline, as well as have a fall back behavior. So even when users turn off Javascript – you will see the same error messages. Oh and of course, we will also have the good user experience of the page not refreshing when there’s errors.

Keep in mind that you will need a bit of programming know how – especially in PHP and Javascript. Ready to get started? Let’s begin.

The Markup

We start with a regular form. The submit action would be a processing page where our server side logic will take place. You can also have the processing page the same as the page where the form is. But I like to keep files separate. Copy the code below into your HTML:

  First Name
  
  Email
  
  

Nothing fancy here. Just a regular form and a couple of fields. Remember to make your field names unique – for this is what we’ll use to validate our form.

The Processing Page

So when our form submits, it passes the $_POST array to this page. If you’re new to validating forms, the code below simply goes through the array and checks it against our rules for each field. Note that in our case – I’m simply checking if first name and email is empty. Of course in the real world, you will have to check for valid email and such.

session_start();
if(isset($_POST)){
  	if (empty($_POST['first_name'])) {
		$_SESSION['errors'][‘first_name'] = ‘First name is missing’;
        	}
	if (empty($_POST[‘email’])) {
		$_SESSION['errors'][‘email'] = ‘email is missing’;
        	}
        if(count($_SESSION['errors']) > 0){
	    //This is for ajax requests:
            if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
                echo json_encode($_SESSION['errors']);
                exit;
             }
	    //This is when Javascript is turned off:
           echo “
”;
           foreach($_SESSION['errors'] as $key => $value){
	      echo “
” . $value . “
”;
           }
           echo “
”;exit;
    }else{
	//form validation successful - process data here!!!!
   }
}

The key to the code above is the check for an Ajax request. Notice the json_encode() method. This is when it’s an Ajax request and we simply echo our error array in JSON format. We will need this to format our inline messages later. The rest of the code is simply handled as if it’s regular server side processing.
Again, notice the part where if it’s NOT an Ajax request – we simply echo out a list of our validation errors. You would probably want to style this better, or even echo it out in the same page as the form. But for the sake of our tutorial, I want to make it short and concise.

Our Javascript

I prefer to write jQuery, so the code below will only work if jQuery is included. The code below is to be added to our form page:

var data = {};
$(document).ready(function() {
  $('input[type="submit"]').on('click', function() {
      resetErrors();
      var url = 'process.php';
      $.each($('form input, form select'), function(i, v) {
          if (v.type !== 'submit') {
              data[v.name] = v.value;
          }
      }); //end each
      $.ajax({
          dataType: 'json',
          type: 'POST',
          url: url,
          data: data,
          success: function(resp) {
              if (resp === true) {
                  	//successful validation
                      $('form').submit();
                  	return false;
              } else {
                  $.each(resp, function(i, v) {
	        console.log(i + " => " + v); // view in console for error messages
                      var msg = ''+v+'';
                      $('input[name="' + i + '"], select[name="' + i + '"]').addClass('inputTxtError').after(msg);
                  });
                  var keys = Object.keys(resp);
                  $('input[name="'+keys[0]+'"]').focus();
              }
              return false;
          },
          error: function() {
              console.log('there was a problem checking the fields');
          }
      });
      return false;
  });
});
function resetErrors() {
    $('form input, form select').removeClass('inputTxtError');
    $('label.error').remove();
}

Plenty of things going on above. Of course everything is wrapped inside our document.ready() handler, then we put a .click() for our submit button. So every time we click the submit button, we go through each field in the form and create a data object. This object contains the field names and their respective values (you can also use jQuery’s .serialize() for this purpose).
We make an Ajax call to our processing page – where it does the validation in our PHP code previously. Now, remember our server side will echo a JSON object with our field names and error messages? We simply handle this by adding an error class and adding a “label” with the message through jQuery’s .after() function.

Of course, if there’s no errors – the form does a hard .submit() – to the same processing page and handled accordingly.

Our CSS

Of course, we have add our styling so our field will look like our screenshots above. Simply add this code inside style tags.

.error {
   color: #ff0000;
   font-size: 12px;
   margin-top: 5px;
   margin-bottom: 0;
}
.inputTxtError {
   border: 1px solid #ff0000;
   color: #0e0e0e;
}

Again, the styles are real basic and you probably want to do better in your own forms.

Conclusion

So there you have it. We’ve combined best of both worlds: server side and client side validation in one solution (thanks to Ajax). Our code has clear separation and very manageable. If a field validation rule has to change – we only need to change it in one place: the server code. Also, our users will benefit from our friendly form – and the way it gracefully tells them when they’ve missed a field and such.
Let me know your thoughts and if you think this solution is a good fit for your projects.

The post How to do Ajax form validation with inline error messages – without using a plugin appeared first on Michael Soriano.

Setting up the plugin:

The code below sets up our plugin code. Basically it allows us to use the function name “ageCheck” and pass in an object (options) as parameters we can use inside our plugin.

(function ($){
    $.ageCheck = function(options) {
      //our code goes here...
     };
})(jQuery);

We then worry about what options we will allow our users to have. I suspect the minimum age will vary, they may want to have a “redirect” url, the “title” of the popup would be nice and the copy should be changeable as well.

var settings = $.extend({
    minAge : 21,
    redirectTo : '',
    title : 'Age Verification',
    copy : 'This Website requires you to be [21] years or older to enter. Please enter your Date of Birth in the fields below in order to continue:'
}, options);

The settings variable is using .extend() – which merges our options and our internal object together – allowing it to be accessible throughout our plugin code.

The Heart of our plugin

Plenty of times when writing code – I find myself re-factoring code so it’s easier to digest. The main logic of the program I put in an internal variable called “_this”. This is not accessible anywhere but inside the plugin code itself. It contains all of the variables and methods we need for our plugin to work.
The code below is our main object:

var _this = {
    month : '',
    day : '',
    year : '',
    age : '',
    errors : Array(),
    setValues : function(){
        var month = $('.month').val();
        var day = $('.day').val()
        _this.month = month;
        _this.day = day.replace(/^0+/, ''); //remove leading zero
        _this.year = $('.year').val();
    },
    validate : function(){
        _this.errors = [];
        if (/^([0-9]|[12]d|3[0-1])$/.test(_this.day) === false) {
            _this.errors.push('Day is invalid or empty');
        };
        if (/^(19|20)d{2}$/.test(_this.year) === false) {
            _this.errors.push('Year is invalid or empty');
        };
        _this.clearErrors();
        _this.displayErrors();
        return _this.errors.length < 1;
    },
    clearErrors : function(){
        $('.errors').html('');
    },
    displayErrors : function(){
        var html = '
';
        for (var i = 0; i < _this.errors.length; i++) {
            html += '
x' + _this.errors[i] + '
';
        }
        html += '
';
        setTimeout(function(){$('.errors').html(html)},200);
    },
    reCenter : function (b){
        b.css("top", Math.max(0, (($(window).height() - (b.outerHeight() + 150)) / 2) +
                                    $(window).scrollTop()) + "px");
        b.css("left", Math.max(0, (($(window).width() - b.outerWidth()) / 2) +
                                    $(window).scrollLeft()) + "px");
    },
    buildHtml : function(){
        var copy = settings.copy;
        var months = ['January',
                      'February',
                      'March',
                      'April',
                      'May',
                      'June',
                      'July',
                      'August',
                      'September',
                      'October',
                      'November',
                      'December'];
        var html = '';
        html += '
';
        html += '
';
        html += '
' + settings.title + '
';
        html += '
' + copy.replace('[21]','';
        html += settings.minAge+''); + '
';
        html += '
';
        html += '
';
        for(var i=0;i'+months[i]+''
        }
        html += '';
        html += '';
        html += '';
        html += 'Submit
';
        $('body').append(html);
        $('.ac-overlay').animate({
            opacity: 0.8
        }, 500, function() {
            _this.reCenter($('.ac-container'));
            $('.ac-container').css({opacity: 1})
        });
        $(".ac-container .day, .ac-container .year").focus(function(){
           $(this).removeAttr('placeholder');
        });
    },
    setAge : function(){
        _this.age = '';
        var birthday = new Date(_this.year, _this.month, _this.day);
        var ageDifMs = Date.now() - birthday.getTime();
        var ageDate = new Date(ageDifMs); // miliseconds from epoch
        _this.age = Math.abs(ageDate.getUTCFullYear() - 1970);
    },
    setSessionStorage  : function(key, val){
        try {
            sessionStorage.setItem(key,val);
            return true;
        } catch (e) {
            return false;
        }
    },
    handleSuccess : function(){
        var successMsg = '
Success!
';
        successMsg += '
You are now being redirected back to the application...
';
        $('.ac-container').html(successMsg);
        setTimeout(function(){
            $('.ac-container').animate({'top':'-350px'},200, function(){
                 $('.ac-overlay').animate({'opacity':'0'},500, function(){
                    if (settings.redirectTo != '') {
                        window.location.replace(settings.redirectTo);
                    }else{
                        $('.ac-overlay, .ac-container').remove();
                    }
                 });
            });
        },2000);
    }
}; //end _this

Our object contains everything form validation, re-centering the display, clearing errors, error and success handling and finally building the html. You can easily tell which part is which – by the names I have given the methods. This makes it easy for any programmer to come in and maintain the code.
Now that we have our settings and the main logic – it’s time to execute our code.

Chunks of Events

So first, let’s check if there’s a flag that user is old enough. If you look in our main object, we’re setting a flag if user passes our age check. We called it “ageVerified” and set it to “true”. If they are, we don’t even show the box – we just let them in the site.

if(sessionStorage.getItem("ageVerified") == "true"){
    return false;
}
_this.buildHtml();

If the flag isn’t there, we continue with our popup using our buildHtml() method.
Then the action begins when the click on our button. Below simply ties our methods to a “if, else” wrappers such as below:

$('.ac-container button').on('click', function(){
    _this.setValues();
    if (_this.validate() === true) {
        _this.setAge();
        if(_this.age >= settings.minAge){
            if(!_this.setSessionStorage("ageVerified", "true")){
                console.log('sessionStorage not supported by your browser');
            };
            _this.handleSuccess();
        }else{
            _this.errors.push('You are not old enough');
            _this.displayErrors();
        }
    }
});

So to explain, when a user click on our button – we set the values that are coming from the drop down and input fields in our form. It checks if they’re valid inputs – it they are – it sets the age we use in our plugin. Now there’s only 2 possible scenarios we set – if user is old enough or not. We handle both scenarios with letting them through or showing error messages.

Some Styles

Our plugin has to look nice. On top of that, we also don’t want it to clash with other styles of the site. We prefix all of our styles with the “ac-” to namespace our plugin classes.
The CSS for our box is right below:

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
.ac-overlay{
    box-sizing: border-box;
    height:100%;
    width:100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99998;
    opacity:0;
	cursor: wait;
}
.ac-container {
    box-sizing: border-box;
    font-family: 'Bree Serif', serif;
    width: 360px;
    position: fixed;
    padding: 20px 20px 30px 20px;
    background: #fff;
    z-index: 99999;
    opacity:0;
    text-align:center;
    border-radius: 4px;
    box-shadow:0px 0px 5px #000;
    font-weight:normal;
}
.ac-container h2 {
    box-sizing: border-box;
    margin:0 0 14px 0;
    font-size:26px;
    border-bottom:1px dashed #ccc;
    padding-bottom:11px;
}
.ac-container h3 {
    box-sizing: border-box;
    color:#649D09;
    margin-bottom:5px;
    margin-top:15px;
    font-size:26px;
}
.ac-container p {
    box-sizing: border-box;
    margin:0 0 20px 0;
    font-size: 14px;
    color:#959595;
    line-height: 20px;
}
.ac-container p strong {
    color:#FF1F1F;
}
.ac-container select,
.ac-container input {
    box-sizing: border-box;
    color:#555;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    margin-right:5px;
    border:1px solid #ccc;
}
.ac-container input.day{
    box-sizing: border-box;
    width:45px;
    height:28px;
}
.ac-container input.year{
    box-sizing: border-box;
    width:70px;
    height: 28px;
}
.ac-container select {
    box-sizing: border-box;
    height:28px;
    padding-left:4px;
}
.ac-container button {
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 10px 4px 10px;
    font-size: 12px;
    line-height: 1.5;
    width: 84px;
    background:#8EB908;
    color:#fff;
    text-shadow:1px 1px 0 #84A51D;
}
.ac-container button:hover{
    box-sizing: border-box;
    background:#82A711;
}
.ac-container .errors  {
    box-sizing: border-box;
    margin:0 0 20px 0;
    font-size: 12px;
    line-height: 18px;
    color:#FF1F1F;
}
.ac-container .errors ul,
.ac-container .errors li{
    box-sizing: border-box;
    padding:0 0 3px 0;
    margin:0 0 0 0;
    list-style:none;
}
.ac-container .errors li span {
    box-sizing: border-box;
    font-size:9px;
    background:#ebebeb;
    border:1px solid #ccc;
    width: 14px;
    height:14px;
    border-radius:7px;
    display:inline-block;
    color:#FF1F1F;
    font-weight: bold;
    text-align: center;
    margin-right:5px;
    line-height: 13px;
    position:relative;
    top:-2px;
    text-shadow: 1px 1px 0 #fff;
    font-family:arial;
}
.ac-container .fields {
    box-sizing: border-box;
    clear:both;
    margin:10px 0 10px 0;
}
@media (max-width: 500px) {
    .ac-container {
        box-sizing: border-box;
        width:auto;
        margin-right:20px;
        margin-left:1px;
    }
    .ac-container select,
    .ac-container input.day,
    .ac-container input.year{
        box-sizing: border-box;
        display:block;
        margin-bottom:10px;
        margin-right:0;
        width:100%;
    }
    .ac-container button {
        box-sizing: border-box;
        display: block;
        width: 100%;
    }
}

This will make our box nice and friendly. Note that I’m using Google Fonts to style it. This may not be your taste – so it’s completely optional.
Finally, let’s use the darn thing.

How to Use:

First thing you is to add the jQuery library to your page. Then download the plugin files and simply link to the .js and .css file.
Next, you initialize the plugin by calling $.ageCheck() and pass in the options if necessary. See the section “Options” below for a description of the available options and default values. You can do this inside a document ready handler.

$(document).ready(function(){
   $.ageCheck();
});

Note that if you want your whole site to be restricted, you would want this prompt to appear in any of the pages your visitor hits. So the code above will be suitable in a template used throughout the site. In your header or footer is a good spot.

Options:

You pass options in an object literal fashion. For example, if you want to redirect the user to the login page of your site on success, you would add the option like so:

$(document).ready(function(){
   $.ageCheck({
     "redirectTo" : "http://example.com/login"
   });
});

As we’ve gone through our settings above, its good to formally list the options available. Below is a nice table that does that:

Conclusion

Note that AgeCheck.js is a Javascript solution for verifying date of birth. Users can easily turn off Javascript in their browsers – to easily bypass the plugin. You may want a server side solution so the processing is done regardless of Javascript being on or off.
For more information about how to create jQuery plugins, consult their documentation.
Let me know your thoughts below:

The post Let’s create a jQuery Plugin that checks user’s age when visiting your site. appeared first on Michael Soriano.

In our previous tutorial, we learned how to create a photo gallery with Bootstrap. Our gallery looks nice and pretty, regardless of screen size. When an image is clicked, a modal box appears with a larger version of the image. If you haven’t done so, you might want to “Explore Bootstrap’s Grid System” first before getting your hands dirty.
View Demo
View in Github
Now we’re going to add some control buttons right below the large image, so you can navigate through the gallery right in the modal window. Take a look at what we’re building in the image below.

I know that there are plenty of plugins that do this sort of thing. But I like doing things from scratch just to learn how things work. Ready to get started – let’s begin.

Add HTML inside the “Click” Event

We’re going to have to add our markup via Javascript. This is because the contents of our modal box doesn’t really exist yet when the page loads. In our last tutorial, we’re already have a click event where we’re building our large image. We simply need to append to this code. See below (in between where it says “Start of new code” and “End of new code”).

$('li img').on('click',function(){
  var src = $(this).attr('src');
  var img = '';
  //Start of new code
  var index = $(this).parent('li').index();
  var html = '';
  html += img;
  html += '
';
  html += 'next »';
  html += '« prev';
  html += '
';
  //End of new code
  $('#myModal').modal();
  $('#myModal').on('shown.bs.modal', function(){
      $('#myModal .modal-body').html(html);
  })
  $('#myModal').on('hidden.bs.modal', function(){
      $('#myModal .modal-body').html('');
  });
 });

Explanation: – this click event is inside the small image that was clicked. We just need to know which index it is from the list of images we have. We can achieve this by using jQuery’s .index() method. So we wrote:

var index = $(this).parent('li').index();

Meaning, we want the image that was clicked, traversing to it’s parent (list item) and grabbing it’s index. Then assigning it to a variable “index”. Note that our index is array based – so the first element is a zero.
Next, we create the actual markup that we’re adding right in the modal box. You see we start with our image, then our div containing our next and previous links. You see how we consume the variable “index” that we created previously:

html += 'next »';
html += '« prev';

Notice that our “Next” button has a “+2” for it’s “href” attribute. That’s because we want a number that is ahead of the current image that is showing, plus another because we started with zero – remember? Try out the new code by clicking on an image. As soon as our modal window pops up, you see our new previous and next buttons in place. But don’t click them yet – we haven’t written that part.

Create the logic when the buttons are clicked

Now let’s take care of what happens when our buttons are clicked. Let’s think about what we need to achieve for a minute. First, we need to change the image “src” attribute of our large image to the next (or previous) image in the list. We already have our index so that shouldn’t be too hard. We also need to increment (or decrement) our index each time we click. Oh, we also have to hide the next button – once we get to the last image. The same behavior needs to happen to the previous button when we hit the first image. Add the code below right outside our document ready handler:

 $(document).on('click', 'a.controls', function(){
   //this is where we add our logic
   return false;
});

This just sets up our click handler for both previous and next buttons. Note that we have “.control” as a class to both links – so we only have to code once. Notice that we’re also binding the click event of our link to a parent element (in this case the document). This binding technique is used because our link is not present yet even when document is ready (reason why we wrote it outside of the .ready()).
Replace the current image
Now let’s add this code inside our click handler:

var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');
$('.modal-body img').attr('src', src);

Explanation: – first, we set up a variable called “index” (not the same as the index that we created previously as this is local to the anonymous function it’s in). This variable contains the number that is in the “href” of the link clicked. Variable “src” goes back to our un-ordered list, grabs the “nth-child” with the index as the number, grabs the image inside it and takes the “src” attribute.
Finally, it assigns the “src” value and replaces the current image with it. Increment or Decrement the Link Counters At the same time, whenever our links are clicked, we’d want to change it’s “href” value. Add the code below:

var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
    $(this).attr('href', newPrevIndex);
    $('a.next').attr('href', newNextIndex);
}else{
    $(this).attr('href', newNextIndex);
    $('a.previous').attr('href', newPrevIndex);
}

Explanation: – Again, we create 2 new variables: “newPrevIndex” – which as a less than one value of the current index, and “newNextIndex” which has plus two. We then create an “if else” block. We check if the link clicked by checking it’s class, then we change both buttons “href” attributes accordingly.
Hide links when last or first image is reached
Now we need to hide the “next” link when we reach the last image in the list and hide the “previous” when the first image is reached. We also need to re-show them when we go the opposite direction. Add the code below:

var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
    $('a.next').hide();
}else{
    $('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
    $('a.previous').hide();
}else{
    $('a.previous').show()
}

Explanation: – this part is pretty simple. It simply takes the total number of list items in our gallery (var total), and makes that the basis of our comparisons. You will see the first “if” block checking if the total is the same as the new index. If it is, simply hide the “next” button, if not – show the link again. The next “if” block checks if our previous index is “0” (which is our first item), then hides and shows our “previous” link.
What about if the last item IS clicked? Okay, the above code handles when the links are clicked – but what if the last OR the first item is clicked so the modal window has the first or last item. This will still have BOTH buttons in view right? In this case, we simply need to “trigger” the same click handler we just wrote above. We do this by adding the code below – right when we create the html in our modal window:

$('#myModal').on('shown.bs.modal', function(){
    $('#myModal .modal-body').html(html);
    //this will hide or show the right links:
    $('a.controls').trigger('click');
})

Some CSS

Finally, adding some styles to our links so it looks better. Note that I didn’t really spend a lot of time styling the links because this is pretty much open to your liking. Instead, I just wrote a couple of lines to make the links presentable:

.controls{
    width:50px;
    display:block;
    font-size:11px;
    padding-top:8px;
    font-weight:bold;
}
.next {
    float:right;
    text-align:right;
}

Conclusion

So now let’s see what we have: 1) a fully responsive photo gallery (Bootstrap powered), 2) a modal pop up when a thumbnail is clicked and 3) control buttons that navigate through the images once clicked. And we wrote all of this without a plugin! How cool is that! If you haven’t seen the demo, feel free to check it out here.

The post Let’s Add Next and Previous Buttons to our Bootstrap Photo Gallery appeared first on Michael Soriano.

The Problem

Most navigation menus is marked up with list items that are floated left. While this is good with desktop resolutions, it doesn’t work well when the view port is for small screens.

As I’ve mentioned above, we’ll get our way around this problem by hiding the original menu and showing a new one. This can all be achieved by CSS and a little jQuery. Take a look at the existing markup for the menu.
code taken out – due to problems with my plugin

Create the Media Query

Let’s add a media query in our CSS for max width of 796 pixels. We then hide the list items by setting a “display none” inside the query.

@media (max-width: 796px) {
 .navigation.responsive ul li {
   display:none;
}

Now try re-sizing your browser to less than 796 pixels and see that the contents of our menu disappears.

Add the Trigger and Empty Div into the Markup

We’re going to need a new anchor tag into our existing menu, also known as the “trigger”. We can simply add a last list item to our navigation menu – but set it to “display:none”. I’ve created a class in our CSS called “hidden”, to simply use that with our trigger.
Then add an empty DIV outside of our current navigation. I’ve named our new DIV “mini-navigation”. I also added the “hidden” class to this DIV, so both our trigger and mini-nav won’t be visible by default. Our markup should now look like below:
code taken out – due to problems with my plugin

Note the last list item and our empty DIV above.

Show the Trigger in our Media Query

Inside our media query, add these lines to our CSS:

.navigation.responsive ul li.hidden {
  display:block;
}
.navigation.responsive ul li.hidden:hover {
  border-radius:4px 0 0 4px;
}
.navigation.responsive ul li.hidden a{
  background:url('menu.png')no-repeat 0 -5px;
  padding-left:24px;
}

Note that the key code in the above is the “display:block”. This will make our trigger be visible. The rest of the code simply styles our trigger so it will look like below:

Add the Javascript

Now that we have our trigger, we need Javascript to handle what happens when it is clicked. First, make sure you’re hooked up with jQuery in your page.
Then let’s add the following code in a set of script tags. I’ll explain what it does after the source.

$(document).ready(function(){
	var trigger = $(".trigger a");
	var menu = $(".mini-navigation");
	trigger.on('click', function(){
		var html = $(".navigation.responsive").html();
		menu.html(html).toggle(0, function(){
		  if($(this).is(":visible")){
			trigger.html('Hide Menu');
				}else{
					trigger.html('Show Menu');
				}
			$('.mini-navigation li.trigger').remove();
			});
		});
		$(window).resize(function(){
			menu.hide();
			trigger.html('Show Menu');
		});
	})

Let me explain the code above. First we open the document.ready() function. We then set two variables: trigger(our trigger link) and menu(our hidden div). We bind the click event by using doing trigger.on(). Everything inside the .on() anonymous function is the heart of the code.
We create another variable called “hmtl” – which is the contents of our existing navigation. We then add it to our hidden div by doing: menu.html(html). So our hidden div (mini-navigation) now has our list items from the original menu.
We then chain the .toggle() function right after the .html(). This will show or hide our hidden div. We add an if else statement as a callback inside the .toggle(), just to change the label of our trigger from “Show Menu” to “Hide Menu”.
We also remove the last list item (which is the duplicate trigger).
Finally, we have window.resize() function – which simply resets our menu back to hidden and the label to “Show Menu” – which are the default states.

Style the Mini Navigation

This is of course, open to your customization. But what I’ve done is simply make our new menu a list item, with some bottom borders, appropriate padding and hover states.

.mini-navigation {
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:0 0 0 0;
	margin-left:5px;
	margin-right:5px;
	border-radius:0 0 8px 8px;
}
.mini-navigation ul {
	padding:0 0 0 0;
	margin:0 0 0 0;
}
.mini-navigation ul li {
	margin:0 0 0 0;
	padding:10px 18px 12px 23px;
	list-style:none;
	border-bottom:1px solid #ebebeb;
}
.mini-navigation ul li:hover {
	background:#f6f6f6;
}
.mini-navigation ul li a {
	text-decoration:none;
	font-size:12px;
	color:#1e7759;
}
.mini-navigation ul li a:hover {
	text-decoration:underline;
}
.mini-navigation ul li:last-child{
	border-bottom:none;
	padding-bottom:15px;
}
.mini-navigation ul li:last-child:hover {
	border-radius:0 0 8px 8px;
}

Our mini navigation should look like below:

Note that typically, the navigation is right above the rest of your content. When our menu appears – it simply pushes the rest of the content downwards. And when the new page loads – our menu returns to hidden by default.

Conclusion

And I believe that should do it. That’s as simple as it gets. Our very own responsive navigation menu system. Please leave your comments below.

The post Build a Simple Responsive Navigation Menu from scratch with jQuery and CSS appeared first on Michael Soriano.

So it’s that time again to roll up our sleeves and do some old fashioned front end a’ coding. This tutorial is for an Image Rotator. What is it you ask? An Image Rotator is particularly useful for galleries, articles, or portfolios. You can use it just about anywhere you want to cycle through content. First, take a look at the demo to see what we’re building:
View Demo
But there’s hundreds of plugins out there that do this same thing? True – but there’s nothing like writing one for yourself. See, the problem with using a plugin – is that you’re quite limited to the options that they allow you to pass. By writing one for yourself – you know exactly what’s going on and you have total control of what goes on. Ready to get started?

The Markup

The challenge is: we want a clean markup as possible. This makes it easy for search engines to crawl through our content. Start with the code below:

 

• • Smelling the air

 

• • Some Crazy Colors

 

• • Awesome Hairdo

 

• • Color Cans Bruh

 

• • Grafitti All Over

 
 

 

 

 

 

 

 
You see, all we have is a mother div. Inside is an unordered list followed by images with enclosed divs around them. This is enough to get our Rotator cooking.

Add Some Javascript

We’re going to use the jQuery Library for our Rotator because of it’s ease of use, and browser compatibility. Make sure in your HTML, you link to the library.
Then open up another script tag, and place the code below:

$(document).ready(function(){
 $('.container').each(function(e){
  if(e == 0){
   $(this).addClass('current');
  }
  $(this).attr('id', 'handle' + e);
})

This loops through all of our “container” divs and adds an “id” attribute to them. The Ids are called “handle” along with “e” – which is the index (a number for each of them). It also adds a class “current” to the first one it finds.

Next, add the code below inside the document ready clause.

$('.tabs li').each(function(e){
	if(e == 0){
		$(this).addClass('current');
	}
	$(this).wrapInner('');
	$(this).append('');
	$(this).children('a').attr('href', '#handle' + e);
	y = $('#handle' + e + ' img').attr('src');
	$(this).find('img').attr('src', y);
	t = $(this).children('a').text();
	$('#handle' + e).append('

‘ + t + ‘

‘); })
Line by line – the code above loops through each of our list items (li tags). It adds the class “current” to the first one it finds. Then wraps the text inside around an anchor tag with class “title”. It then appends another anchor tag with an image inside of them. It finds all of the anchor tags and adds attribute “href” – with a link to “#handle” plus “e” (Remember the ids we assigned to the containers a while ago?).
You see the variable “y” – it’s actually grabbing the large image’s src attribute and storing it in a temporary variable, then assigns it to the small image that we’ve dynamically created above. Finally, variable “t” is grabbing the list item’s text – and assigns it to an H2 tag for the large images. Take a look at your mark up now:

Some Events

We have our clean markup, we’ve dynamically altered it with Javascript and now we’re creating some events. We want the images to automatically rotate, as well as switch once the small images are clicked. Let’s do that first.
Add the lines of code below:

$('.tabs li a').click(function(){
	c = $(this).attr('href');
	if($(c).hasClass('current')){
		return false;
	}else{
		showImage($(c), 20);
		$('.tabs li').removeClass('current');
		$(this).parent().addClass('current');
		return false;
	}
})

The above code adds some events once we click any of the anchor tags inside our li tags. It first checks that if the container we’re clicking for has a “current” class – we immediately exit (by calling return false). If it doesn’t, we run a function called “showImage” (which we haven’t built yet). It also removes ANY “current” class on ALL li tags, then adds “current” ONLY to it’s parent.

The showImage() Function

We create functions so we can reuse it anywhere in our code. The showImage() function simply changes the z-index property and opacity of the image container.

function showImage(img, duration){
	$('.container').removeClass('current').css({
			"opacity" : 0.0,
			"zIndex" : 2
			});
	img.animate({opacity:1.0}, duration, function(){
		$(this).addClass('current').css({zIndex:1});
	});
}

Place the above code outside of the document.ready clause (but inside our script tags). You notice that showImage() accepts two parameters – the image and duration. In our previous click event – we pass “c” – which was the “href” value of whichever anchor tag we clicked. We also pass “20” – which means 20 milliseconds.

The rotateImages() Function

Now we want to automatically cycle through the large and small images. We create two functions for this – rotateImages() and runRotateImages(). The main one – rotateImages() does all of the work:

function runRotateImages(){
  function rotateImages(){
    var curPhoto = $("div.current");
    var nxtPhoto = curPhoto.next();
    var curTab = $(".tabs li.current");
    var nxtTab = curTab.next();
    if (nxtPhoto.length == 0) {
      nxtPhoto = $('#featured div:first');
      nxtTab = $('.tabs li:first-child');
    }
    curTab.removeClass('current');
    nxtTab.addClass('current');
    showImage(nxtPhoto, 300);
  }
	theRotator = setInterval(rotateImages(), 4000);
}

It first looks for the list items, and container with the “current” class in them. Note that this could be the first – or anyone of them once we click. Then it checks if there’s no div after it by checking length “(nxtPhoto.length == 0)”, and goes back to the first list item and div if there’s none.
Again, it removes “current” class and adds it to the next. Finally, we run the “showImage()” function and pass “nxtPhoto” and 300 milliseconds. As you might have guessed, runRotateImages() simply runs rotateImages(). But it is wrapped in setInterval() and assigned to a variable “theRotator”. This will allow us to pause and proceed with our animation at any given time.
Let’s add the call to our two functions inside the document.ready clause:

runRotateImages();
var theRotator;
  $("#featured").hover(
	function(){
          clearTimeout(theRotator);
	},
	function(){
	  runRotateImages();
	}
  )

The above runs our main animation, then we create a pause on hover() on top of our main div by using “clearTimeout()”. It proceeds to our main function on hover out.
We can’t preview any of our code as of yet – we can’t really see improvements at this stage. Let’s beautify our work with some styles. That’s coming up next.

Some CSS Magic

Here we are, the final part of our exercise. If you’ve stuck with me all this time – you guys are true web devs. So I’m not going to explain what the style does – you can figure that out for yourself. Wrap the code below in a set of style tags:

#featured{
	width:518px;
	padding: 18px 120px 10px 21px;
	background:  #ebebeb !important;
	position:relative;
	border:1px solid #ccc;
	height:434px;
	background:#fff;
	margin-bottom:35px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
#featured ul.tabs{
	position:absolute;
	top:18px;
	left:538px;
	padding:0;
	margin:0;
}
#featured ul.tabs li{
	font-size:10px;
	color:#666;
	line-height:10px;
	height:75px;
	color:#333;
	overflow:hidden;
	width:96px;
	background:#fff;
	margin-bottom:11px;
	position:relative;
}
#featured ul.tabs li a.title{
	position:absolute;
	z-index:5;
	color:#fff;
	font-family:arial;
	bottom:7px;
	width:96px;
	text-align:center;
	text-shadow:1px -1px 0 #000;
	text-decoration:none;
}
#featured ul.tabs li img {
	width:96px;
	height:75px;
	opacity:0.5;
	z-index:3;
}
#featured ul.tabs li.current img, #featured ul.tabs li img:hover {
	opacity:1.0;
}
#featured div.container img {
	height: 420px;
    width: 500px;
	position:absolute;
}
#featured div.container {position:relative; z-index:0;}
#featured div.container.previous {z-index:1;}
#featured div.container.current {z-index:2;}
#featured h2{
	font-size:40px;
	font-family:Arial;
	color:#fff;
	padding:5px 5px 5px 12px; margin:0;
	overflow:hidden;
	line-height:65px;
	text-transform:uppercase;
	height:50px; overflow:hidden;
	position:absolute;
	top:350px;
	text-shadow:1px -1px 0 #000;
	text-align:center;
	letter-spacing:-1px;
	width:475px;
}

Simply put, the CSS arranges all of the big images into an absolute position – so they’re all stacked up on top of each other. The list items are also positon – but to the right of the large images. Additional styles are added to the current list items: less opacity on the inactive ones. This gives a nice touch to our animation. The rest are styles related to the demo file.

Conclusion

There are no download files for this tutorial – you can simply go to the demo and view it’s source and copy it. My intentions are for you to actually follow the above tutorial and do it yourself. Also check out these Image Rotators that are have different approaches code-wise, but the final output is somewhat similar.

• Parallax Slider with jQuery
• Create your own jQuery Image Slider
• Create Featured Content Slider Using jQuery UI

The post How to Create a jQuery Image Rotator from Scratch appeared first on Michael Soriano.

Set up the HTML:

First and foremost – we need the markup. We need this so we know what we are styling and manipulating. We are going to use semantic and valid HTML. In addition, we will keep it as clean as possible – with no unnecessary DIVs and classes in our code:

As you can see, our markup is pretty self-explanatory. The UL items will be our tabs, while the DIVs below it are the containers. Save your file and view it in the browser:

Add Some Sweet Styles:

I usually like to style the HTML right after. This way – I can write the script exactly how to behave. Moreover, we can decide if what classes to add via Javascript.

The Tabs

Let’s convert our unordered list into tabs:

Save your file and view it in the browser:

Beautiful right? Things are coming along. We also want to add a style for the “inactive” state of the tabs. This will be how the tabs will look when they’re not in focus. Add the code below to your stylesheet:

Notice that I also added a separate style for :hover. To see how these styles look, you have to manually add class “inactive” to the anchor tags in our tabs, and refresh your browser:

The Containers

The containers styles really depend on you. I just added some general rules such as width and appropriate paddings:

Now we have a solid look and we can continue with the scripting. Be sure to add some dummy content to your containers before we go on.

The jQuery

This part may have the shortest code, but will do a lot of work. Lets include the jQuery library into our page and start our document ready event. Append this code into your HTML:

Now we need a way make our tabs inactive and hide the containers. Add the lines of code inside our document ready block:

The code above adds the class “inactive” to all our our tabs – except the first one using the “:not(:first)” filter. The second line hides all of our container divs – except the first one, again using the said filter.
Refresh your browser and you shall see the effects:

Now let’s add a click handler to our tabs along with the events. Add the lines of code also inside document ready:

A lot of things are happening here – first – we’ve established a click handler to our tabs. We also created a variable “t” that represents the value of the “href” attribute for whichever anchor tag that was clicked. For instance, if the first tab was clicked, then “t” will be “#tab1”. Then we add class “inactive” to all of the tabs, while removing “inactive” to whichever one was clicked. Then, we hide all of the containers while fading in the one that is “t”, i.e. #tab1 or #tab2 and so on. Return false just prevents the anchor links from their default behavior.
Refresh your browser and try it out. So our tabs are in full action. There is one problem though: when you click the current tab – it still attempts to hide all the containers and show the current one – we don’t want this to happen. Let’s add a conditional block to our code:

Wrapping our events inside this if block prevents this unwanted behavior.

Conclusion

And there you have it. Wasn’t that easy? Super Easy? The best thing about this code is it doesn’t use any images. All of the gradients and shadows are CSS3. Also, it is backwards compatible for users without Javascript. It won’t work as tabs – but it will show the full content, and the tabs will still lead them to the right area when clicked.

The post How to Create Super Easy jQuery Tab Containers appeared first on Michael Soriano.