Archive | Plugin RSS for this section

Angular Auto Form Validation Summary

One of the more mundane things in Angular is creating validation messages. If you come from .Net you’ll probably be screaming as your views have always just pumped out the validation based on Data Annotations from your class models/view models.

Well we’re one in the same because I hate writing the same thing over and over again. This is a quick directive I built to iterate over a collection and build out those little guys for me. It has a the ability to show a summary or display errors below the associated control. There are a few other options that affect behavior as to when the messages trigger or show.

See the Github page for installation and use instructions.

angular-validation-summary

Build AngularJs on Windows

Clone Repository

First clone the git repository for AngularJs. If you don’t already have git or are unfamiliar with git you can download and install Git for Windows. This is likely the best option for you if you are relatively new to git. You’ll be able to click the “Clone in Windows” button on the right of the AngularJs repository.

Install Development Dependencies

If you don’t already have the NPM package manager installer on your machine you’ll need to install it. Probably the easiest way for you is to install NodeJs. This will install the package manager which is very handy, for much more than this task. Choose the option for your platform here.

Once you have NPM installed you can now finish setting up the dev utilities that you’ll need. AngularJs among many other frameworks and apps build via Grunt. You’ll also need Bower. To install both along with a few other dependencies just run the following from the directory you’ve cloned Angular to:

npm install

Once you have run npm install you’ll need to install the grunt-cli and bower but we’ll need this installed globally. To do so add the -g flag as such:

npm install grunt-cli -g
npm install bower -g

The Missing Environment Setup

There are a few other things that you might get stuck on when trying to build AngularJs via Windows. You’ll need the Java Runtime Environment package installed. This is used quite often and you may already have it installed. If not go here grab it and run the installer for your platform.

Once you have java installed you’ll need to add some Environment Variables to make the build happy. In order to do this click your start button for right click “Computer” from Explorer and choose properties. Next choose “Advanced System Settings” on the left of the window. The advanced tab will open and you’ll see the “Environment Variables” button on the bottom of the dialog window.

You should now be in the Environment Variables dialog on the top you’ll see user variables and the bottom system variables. We’ll need to modify both.

Add Java to Path

Double click on the line that says “PATH” or highlight and then select edit. Go to the end of the line and add a semi-colon. After the semi-colon add the path to your java runtime environment. Probably something like C:\Program Files (x86)\Java\jre7\bin if you are on a 64bit machine. Add that to the end of the line and then select OK.

JRE Variable Path to Bin

Setup Java Virtual Machine

In the System Variables you’ll need to click “New” and add a new key value pair. For the variable name use _JAVA_OPTIONS and for the value use -Xmx512m. This will setup the basic options you’ll need for the virtual machine. Say OK and close out of the dialog boxes.

Java VM Options

NOTE: Be sure to close out of any command prompt windows you might have had open. If you started to run the build process before completing the above it won’t work so after installing make sure you’ve closed out of your command windows and then re-launch.

Running the Build

To actually package up the library is a snap you need only run the grunt command which will call the pre-configured Gruntfile.js for you and package it all up into the “build” folder in your repository directory. The command is below:

grunt package

Now What

Get involved and contributed to this awesome project. How do you do that? You can find it all => here.

Zepto.js Rakefile

This is a Rakefile to substitute the default in the Zepto.js mobile framework.

Note the extension on the download file is .doc. This is because WordPress limits the file types that can uploaded. Be sure to rename it with no extension.

Download Rakefile Here

Zepto.js Home Page

Zepto Source on GitHub

Jquery Tagit Extended

Took a few moments today and extended a popular plugin a bit. Use at your own risk as I haven’t tested this to the fullest however it seems to be fine. The modifications were minor as well.

About the Extension

Throughout the source you’ll notice the comments [MODIFICATION] that indicate where the source as been extended. You’ll also notice [END MODIFICATION] to let you know where the original authors source begins again. If you’d like to checkout the original author’s site please do so here. You can obtain my source with the below added features and extensions by DOWNLOAD. Note this is just the .js file and does not include the entire source with stylesheets. Please download this from the author’s site.

Features Added

    minTags – This will make sure no less than the number indicated can be removed. Default is 0.
    maxTags – No more than this many tags can be added. Default is 0 which is unlimited.
    requiredTags – This is an array of strings that must exist and cannot be removed if present. Perhaps a user group or something where there must be a default. Default is null.
    restrictToAvailable – Default is false. If enabled. Only tags in the “availableTags” object can be added.
    onTagRemoveFailed – When a tag cannot be removed due to one of the above constraints this callback is fired. Default null.
    onTagCreateFailed – This is called when a tag cannot be created due to a constraint. Default is null. Use this to give feedback to user if you will.

How to Use

I would encourage you to visit the author’s site for full details and instructions but this will get you going. The below assumes you have referenced the “jquery-tagit-mod.js” file in the header of your page and that you have referenced its companion css stylesheet as well.

$(document).ready(function () {
$('#mytags').tagit({
availableTags: ['tag1', 'tag2', 'tag3'],
onTagRemoveFailed: function (event, tag) { console.log(tag.children('span.tagit-label').text() + ' cannot be removed.'); }
});
});

JQuery Horizontal Bar Chart Plugin

This is a very simple bar chart plugin using unordered lists and divs. You can populated the data either statically using data-dash attributes for the

  • items or you can add it inline in the data: option of the plugin. If you use the data-dash attributes the plugin assumes that it takes priority and overrides the data: option of the plugin. The plugin allows you to easily change css styles for the auto generated
  • ,
    and elements it creates. This is a very simple plugin with a handful of options. If you are looking for something really comprehensive this probably isn’t it. The purpose of this plugin is to quickly make a simple bar graph that shows a percentage based on some calculation. Essentially the value you supply for the bar is calculated against the size of the bar (either specified or auto generated based on element width). Obviously this could be extended quite a bit and rather easily so have at it. The reason I created this plugin is that the majority of the chart type plugins out there are far more complicated than I needed for this simple task. Hence the focus was to keep it as simple as possible while providing a handful of anticipated options for reuse in projects. The plugin does provide the ability to callback.

    Download: DOWNLOAD

    Below is an example of what it might look like.
    Quickbar Example

    First add some css. Again you can change the css style names to your liking in the plugin.


    .quickbar { padding: 0px; margin: 0px; list-style: none; } /* this is the actual ul */
    .quickbar li { padding: 5px 0px 5px 0px;}
    .quickbar-container { background-color: #F3F3F3; display: block; line-height: 20px; overflow: hidden; border: 1px solid #EAEAEA;
    border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; } /* this is the wrapper around the bar. */
    .quickbar-bar { background-color: #2E3192; width: 0px;} /* this is the bar itself you could use an image here if you wanted */
    .quickbar-title { padding: 3px; } /* this is the element above, left or below the bar.*/
    .quickbar-label { padding-left: 6px; float: left; position: relative; font-size: .9em; } /* this is the label that goes to the right or inside the bar */

    For the HTML markup you have two options the first couldn’t get any easier.

      The second utilizes data-dash attributes. If you are familiar with unobtrusive javascript these will make perfect sense. Hence if you rendered your markup and grabbed data from your database or something you can just add the attributes directly as opposed to supplying them in javascript. Just makes it handy.In this example you have to create the

    • elements. The title is what is displayed again on top, to the left or below the bar itself. The value is the integer value that will be used to calculate against the with of the element to properly show the percentage of use. The label is what shows inside the bar or to the right to further describe what the bar value means. For ex: 75% free. The width is a specified with. Yes you can have each
    • be a different width which is handy is some situations. The width can also be 0. You would need to create each li with:

      data-quickbar-title=”title”
      data-quickbar-value=”value”
      data-quickbar-label=”label”
      data-quickbar-width=”200″

      For the Javascrpt. Reference the plugin as you normal would for any plugin in your header tag.

      Wire up the plugin to your element.

      $(document).ready(function () {
      var chartData = [ { title: ‘your_title’, value: ‘your_value’, label: ‘your_label’, width: 200}, { title: ‘your_title2’, value: ‘your_value2’, label: ‘your_label2’, width: 200} ]
      $(‘.quickbar’).quickbar({
      styles: { container: ‘quickbar-container’, bar: ‘quickbar-bar’, title: ‘quickbar-title’, label: ‘quickbar-label’ },
      title: { visible: true, width: 50, position: ‘left’ }, // position options are ‘top’, ‘left’, ‘bottom’. Defaults: true, 50, ‘left’.
      label: { visible: true, width: 50, position: ‘right’ }, // position options are ‘inner’ or ‘right’. Defaults: true, 50, ‘right’.
      refresh: { btn: ‘.quickbar-refresh’, method: ”}, // this is only need to call a function to repopulate and reinit the plugin with new data.
      data: chartData, // this can be static, empty (if using data-dash attribute) or a function.
      animate: true, // can be true or false. Default: true.
      });
      });

      You could also use the built in destroy or reinit methods.

      $(‘.quickbar’).quickbar(‘destroy’); // destroys the plugin and removes any auto generated elements. (manual data-dash elements will NOT be removed).
      $(‘.quickbar’).quickbar(‘reinit’); // destroys and reinitializes the plugin.

      You could populate the data using an ajax call.

      function buildChart(){
      $.post(‘/your_path/method’, { variable: ‘variable’, variable2: ‘variable2’ },
      function (result){
      // creates a new quickbar.
      var opt = {
      title: { width: 100, position: ‘top’ },
      data: $.parseJSON(result)
      }
      var callback = function () { // some function. };
      $(‘.quickbar’).quickbar(opt, callback);
      }

      }

    • jCarouselLite Extended, Carousel Slider with Paging, NFL.com Style

      If you’ve done some Googling you’ve come across jCarousel Lite and jCarousel by now. Both are excellent solutions as they stand. jCarousel in particular is a full featured JQuery carousel/slider plugin that makes slick presentations of unordered lists a snap. The “Lite” version is just that. A much smaller footprint for a lack of a better term is the main difference. Base functionality is very similar. I extended the “Lite” version as for most implementations it was perfect but there are just a couple key things I wanted that it didn’t have. So I extended it to include these features:

      • Pause the slide when hovered.
      • Add paging that was simple and customizable via css.
      • At the end of the last slide go to the first slide.
        To me those key additions make this already solid plugin even better. In the download below you’ll find two files. The extended uncompressed source and the minified counterpart. This was based on the original source of jCarouselLite v1.0.1  as of 8/1/2011.

      DOWNLOAD

      What you’ll end up with.

      image

      I won’t go into the full CSS styling. You can find this here in the documentation by the author. The below CSS is all you’ll need to add the pager feature. Please note that I chose this method rather than using images for ease of use. If you want to use images simply add your image as a background to the LI and position it centered for both x/y using CSS. It works just fine and makes the plugin nice and light weight as we aren’t managing images for the different states. As long as your image is properly positioned and correctly sized according to the size of your LI it will have a similar effect as if the image tags were right inside the LI.

      NOTE: The Html for the pager is dynamically built within the plugin for simplicity. You could certainly extend this for your needs quite easily if desired. The structure of the dynamic elements are very basic and simplistic. In fact you could easily wire up some custom JQuery using .appendTo() if you wanted to add some sort of element to the li’s.

      Dynamic Pager Html

      <div class="pager">
          <ul>
          <li class=”0”></li>
          <li class=”1”></li>
          <li class=”2”></li>
          <li class=”3”></li>
          </ul>
      </div>

      CSS Styles for above NFL.com carousel look.

      The pager styling:

      .pager
      {    
          position: absolute;
          height: 24px;
          right: 15px;
          bottom: 30px;    
      }
      
      .pager ul
      {    
          list-style-type: none;
          margin: 0px; 
          padding: 0px;  
      }
      
      .pager li
      {
          border: 1px solid #333333;
          line-height: 15px;
          height: 15px;
          width: 15px;
          display: inline-block;
          background-color: #F7F7F7;
          margin: 2px 4px 2px 4px;
          vertical-align: middle; 
          float: right; /* float:right; required for IE because it sucks and can't handle inline-block*/ 
          
          /* CSS 3 Styles */
          opacity: .50;
          filter: “alpha(opacity=50)”;
          -moz-border-right: 3px;
          -webkit-border-radius: 3px;
          -khtml-border-radius: 3px;
          border-radius: 3px;
      }
      
      .pager li:hover
      {
          background-color: #C41313;
          cursor: pointer;
          
          /* CSS 3 Styles */
          opacity:100;
          filter:alpha(opacity=100);
          filter: “alpha(opacity=100)”;
      }
      
      .pager li.selected
      {
          /* CSS 3 Styles */
         background-color: #C41313;
         opacity:100;
         filter:alpha(opacity=100);
         filter: “alpha(opacity=100)”;
      }

      The Overlay style that sits under the pager and contains the description text for the given slide:

      .carousel-overlay
      {
          position: relative;
          bottom: 95px;
          width: 725px;
          height: 75px;    
          background-image: url('Images/Backgrounds/carousel_bkgrnd.png');
          background-repeat: no-repeat;
      }
      
      .carousel-overlay div
      {
        padding: 3px 24px 3px 24px;
        width: 450px;
      }
      
      .carousel-overlay-caption
      {
          font-weight: 600;
          font-size: 1.1em;
          color: #F2F2F2;
      }
      
      .carousel-overlay-description
      {    
          color: #F2F2F2;
      }

      Again I didn’t enclose the Html or the styling for the carousel itself. If you need this please follow the detailed documentation at the author’s site here. If you would like to use the overlay image in the demo you can DOWNLOAD it along with the source plugin.

      Wiring Up Your Carousel

      Wiring up the carousel is extensively covered by the author so I’m only going to hit on the extended options which are very simple.

      <script type="text/javascript">
          $('.carousel').jCarouselLite({
              visible: 1,
              auto: 8000,
              speed: 1200,
              circular: false, // Set circular to false to use onEndFirst.
              onEndFirst: true, // Navigates to first slide on end.
              showPager: true, // Boolean to show or hide the pager.
              pauseOnHover: true, // Pauses the carousel when hovered over
              pager: 'pager', // The class to use for the pager.
              scroll: 1
          });
      </script>

      Wrapping Up

      Please note as normal you will need to add reference in your header to JQuery itself and the extended jCarousellite plugin as normal. I know you are aware of this but for those that are new and in the interest of being complete it should be mentioned.

      To reiterate the ‘”pager” was intentionally created using only CSS and the basic dynamic html for structure. This was because your pager could literally look like anything and may need to be placed in many locations. If you want to place the pager outside of the main carousel element use neg. values for top, bottom, right, left. By using CSS only rather than embedding images it becomes much more tolerant of your unique design.

      This was tested in Opera, Chrome, FireFox, IE 9 and IE 8. I have not tested on any other browsers.

      JQuery Hylite Plugin

      Wrote a little plugin this am to highlight rows of a table or unordered list. This has a little twist to it in that it has a couple of neat little features. Often we need to iterate over rows of data, maybe pullout a guid or index of the row and so on. This is a common task in just about every web application. So I quickly threw this one together. Obviously no guarantees and I’m sure it can be improved upon…feel free to do so.

      What can HyLite do?

      • – highlight a table or list row on hover.
      • – can set a row as selected and then toggle off when clicked again.
      • – when row is selected it can either simply change to the selected class or do a mild animation.
      • – can also animate use JQuery UI. simply pass in your effect and options or use the default pulsate effect.
      • – on hover or click a callback function can report back the index of the row, the guid if you specify the guid element to lookup, the total number of rows and the rows selected on clear.
      • – has two modes select and navigate. select will do just that, navigate will redirect to the url passed.
      • – query string params are supported too. you can pass in an array of key/values and they will be concatenated to the url. if you pass the key guid in the query string params it will if you’ve set the option find the guid element specified and use it, otherwise if it can’t find it, it will use the value you’ve passed.

      Download
      jquery-hylite-1.1.js

      jquery-hylite-1.1.min.js

       

      Instruction
      Nothing different here. Install the one of the above downloaded files in your script directory and then add a reference to the top of your page, master page, mvc shared layout etc. CSS styling is really straight forward. For what ever element you are iterating over just add three states in CSS. Your default, hover and selected states. You can also changes those class names to whatever you want, those are just the defaults so for example your CSS may look something like this:

      CSS

      .mylist
      {
          /* default style*/
      }
      
      mylist.hover
      
      {
          /* hover style*/
      }
      
      mylist.selected
      
      {
          /* selected style*/
      }

      HTML

      Your html is equally simplistic. Say you have an unordered list or table it would be something like the below:

      <ul class=”mylist”>
          <li>My first row of data<span class=”myguid”>100</span></li>
          <li>My second row of data<span class=”myguid”>101</span></li>
      </ul>

      PLUGIN

      *** obviously the below would be wrapped in pageLoad or $(document).ready()***

      – basic usage

      $(.mylist li).hylite();

      – animate using JQuery UI

      animation is only used when in select mode.

      $(.mylist li).hylite({
          uiAnimate: { enabled: true, effect: ‘pulsate’, opt: { times: 1 }, speed: 500 }
      });

      – turn animation off

      $(.mylist li).hylite({
          animate: false
      });

      – changing default selected and hover styles

      $(.mylist li).hylite({
          hoverStyle: ‘some-hover-style’,
          selectedStyle: ‘some-selected-style’
      });

      – navigate to new page after click

      onclick navigate to new page example url: ‘/mypage.html?key1=value&key2=value’

      $(.mylist li).hylite({
          mode: ‘navigate’,
          navParams: { url: ‘/mypage.html’, qsParams: { key1: ‘value’, key2: ‘value’ }
      });

      – using a unique identifier

      $(.mylist li).hylite({
          guidElement: ‘.myGuid’,
          }, myCallbackFunction
      );
      
      function myCallbackFunction (element, data){
          // using the above you could update an input for example anytime there is
          // a mouseover or click event. I like JSON that way it is always in that format no matter what I’m doing.
          // possible options when calling back from main init method are:
          // obj.index (index hovered or selected), obj.rows (total count), obj.guid (the guidElemement )
          // possible options when calling back from clear method (see below)
          // obj.rows, obj.selected (counts the rows that were selected that you’ve cleared)
          // these properties passed back could in part be accessed from the JQuery object that also gets
          // passed back in the init method. meaning element above represents $(this)
      
          var obj = $.parseJSON(data);
          alert(obj.index);
      }

      – clearing selected rows when in select mode

      $(.mylist li).hylite( ‘clear’, myClearCallback);
      
      function myClearCallback(data){
          var obj = $.parseJSON(data);
          alert(‘There were ‘ + obj.selected + ‘ rows cleared.’
      )