Tag Archive | JQuery

Smart Table for AngularJs Extended

What is Smart Table

Smart table is module and set of directives to assist in sorting and paging a table/grid of data. I liked it as it doesn’t try to do too much and is simplistic to extend. No offense to some of the other grids but many I found tried to do too much and that usually spells disaster. Why? Well, there’s always something you need that due to the design you have difficulty doing. Smart Table handles the basic functions and leaves it at that.

So here is an extended version that adds a couple nice features that make it have more of the Datatables Bootstrap feel. This is optimized for Bootstrap 3 but with little work you should be able to adapt it to your styling needs.

The zip contains the illustrator file used to create the sort icons, the compiled .css file, the Smart Table debug source and a less file for those that are importing Bootstrap and compiling .less. if you don’t know what LESS is don’t use that file.

You’ll also notice is the source file you’ll see /* START MODIFICATION */ anywhere the source has been modified. Hope it helps Email in source if you have ques.

Disclaimer: Just started playing with Smart Table literally today so if you can improve upon the code please do so and comment/email. Perhaps the author can take a look as this was a very quick fix for my needs.

Screenshot

Smart Table

Smart Table

Download

Download the files here from Google Drive

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

KnockoutJs and Ifragistics JQuery IgGrid

The Problem

Ran into a problem with the extensions shipped from Infragistics for use with the IgGrid and KnockoutJs. JQuery kept breaking complaining about “object not a function”.

After doing some digging and messing around I realized there was a problem with the shipped extension. I noticed a demo on Infragistics site that referred to a CDN version. So I grabbed it and it worked just fine. No more “object not a function” errors in my console using Google Chrome. So if anyone else runs into this issue just grab the download below and overwrite the shipped file and all should be well.

Knockout and the support from Infragistics is relatively new so I’m sure there will be updates in the meantime this works. as of the date of this article. If you are checking this a month or two from now they’ve probably resolved the problem.

Download Update

infragistics.ui.grid.knockout-extensions.js

Jquery Live Image Crop

Live Image Cropping

I’m sure by now you’ve seen similar tools. Nonetheless I wanted to post this demo for those that haven’t. This demo leverages Jcrop. I won’t get into the details here as their documentation is self explanatory. What I will do is cover what you can do with it after you crop the image. That is where some of the real magic shows up. Cropping itself is rather simplistic. Demo Here

Crop demo screenshot

Live JCrop Demo

Init JCrop


function initJcrop()//{{{
{
// where target is the target image.
$('#target').Jcrop({
onRelease: releaseCheck, // checks for release
onChange: getCoords, // gets the coords and updates the inputs.
onSelect: getCoords // same as above just a different callback.
}, function () {

jcrop_api = this;
jcrop_api.animateTo([259, 81, 469, 304]); // create the corp box at these coords (x, y, x2, y2)

// Set the default checkboxes
$('#resizeable').attr('checked', 'checked'); // whether or not you can resize crop.
$('#aspect').attr('checked', false); // should it be forced to a specific ratio.

});
};

Force Aspect Ratio example trigger using JQuery on checkbox

This is just one example but setting up these options are all very similar


$('#aspect').change(function (e) {
jcrop_api.setOptions(this.checked ?
{ aspectRatio: 4 / 3} : { aspectRatio: 0 });
jcrop_api.focus();
});

Saving the Crop

Here were are making a simple post passing a Json representation of the coords, then await response from server.


$.post(postPath, jData, function (result) {
if (result.saved) {
// here I'm check if in the json result if "saved" is true.
// if yes DO SOMETHING...
} else {
// if not show an error of some sort.
}
});

In the demo after the crop is saved, I simply update the path to the image, the newly cropped image that is.
You’ll notice a “view crop” button that shows it. This is all just for example. Normally when the dialog opens that you’ll see
you might have an input for new filename or perhaps save location or other criteria you want saved to your database. In
fact you don’t need the dialog at all but since this is a static representation/demo I needed somewhere to display the result
and didn’t want to leave the page.

Saving to File System

Unfortunately this is beyond the scope of this article. Mainly because I have no idea what platform you’re one so its pretty tough to give an example. What I can tell you is
that its actually rather trivial for the most part. For example in C# you might do something like this:


var img = Image.FromFile(imgPath, true); // get the image you were working on from file, you could also do this from stream.
Image newImg = new Bitmap(img); // now we have a new image to work with.

var netImage = NetImage.Crop(newImg, w, h, x, y); // here we are taking the coords from JCrop passed in our Json and cropping the image.
// note the above is a custom class that crops images in various ways.
// above result from our custom class is a System.Drawing.Image. we can now save it or do what we wish.

If you’re using say NodeJs(which is amazing stuff btw) or Rails you can investigate Node-Canvas or perhaps ImageMagick.

Conclusion

It really is rather simplistic to crop images. It really is up to you and your design how you want to go about it. What options or restrictions you want. Perhaps you’re wanting to keep each image cropped to a specific ratio or size. Live for profile photos that should only be say 100 x 100. All very easily obtainable.

This is not meant to be a complete start to finish tut. It is meant to point you in the right direction. You can also expand the source on the demo. As always you can send comments and questions and I’ll help if able. You can also hire us for your next project!

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.