jQuery – Custom Filters

Hello
Sometimes we may need to collect html elements with certain filter which jQuery doesn’t provide. At that time we can simple create custom filters in jQuery. I found such a nice blog – Creating Custom Filters in jQuery. Let’s look how to create custom filters in jQuery.

<script>
    $.expr[':'].placeholder = function(elem) {
        return $(elem).attr('placeholder') !== undefined;
    };
    
    $(document).ready(function() {
        console.log($(':placeholder').length);
    });
</script>


A filter is nothing but a function that accepts as an argument the current DOM element to process and needs to return true to keep it in the collection, and false to discard it.

“:” is a property of jQuery’s “expr” attribute. And it containing jQuery’s native filters and you can use it to add your own filter at runtime. Inside the function definition, we just have a single statement that checks if the current element has the placeholder attribute set, and if so, it returns true to keep the element.

For more on creating custom filters in jQuery please go to: http://aurelio.audero.it/blog/2013/09/05/how-to-create-custom-filters-in-jquery/

Advertisements

Start your HTML5 project in 15 seconds

Hello everyone

When I want to start new project, every time I need to download javascript/css framework files such as jquery, bootstrap. I need to put that files to proper js and css folder. Also, need to download icon image files and put them to appropriate image folder. But now I find nice solution for this and you can start your HTML5 project within 15 seconds by using – Initializr – such a nice tool to getting a head start with Front End Generators.

initializr is one of the first generators for generating a project based upon HTML5 Boilerplate. So if you are a fan of HTML5 Boilerplate then Initializr is a fantastic place to start as it allows you to fine tune to HTML5 Boilerplate to meet your needs. It generates for you a clean customizable template with just what you need to start!

Initially it gives you three pre-configuration options:

  • Classic H5BP
  • Responsive
  • Bootstrap

Initializr then allows you to select options in the following categories:

  • HTML/CSS Template – Any extra bonuses like Bootstrap or Mobile first responsive you want to add.
  • HTML5 Polyfills – Modernizr or HTML5Shiv
  • jQuery – Minified or Development
  • H5BP Optional – Allows you to select which parts of H5BP you want to use.

To generate your project you simply select the options you want and click download. That’s it!!!!

Tool for Restructuring HTML to be Responsive

Hi

As all of you knows that there are boom of responsive website and everyone looking to restructure their old website to be responsive and compatible to mobile, tablet as well as to desktop devices. I found such a nice lightweight library – intention.js. For Responsive Design, you might like to add intention.js to your collection.

intention.js – offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. With intention.js you can easily increase layout options and flexibility, reduce development time and lessen dependence on media-query-driven stylesheet overrides.