MixItUp blends beautifully with your existing HTML and CSS, making it a great choice for responsive layouts. The library is compatible with inline-flow, percentages, media queries, flexbox and more.

Beginning of work
Most often, MixItUp is applied to container or target elements, which can be a portfolio of projects, a list of blog posts, a selection of products, or any kind of user interface where filtering and / or sorting would be useful.

Assembling the container
By default, MixItUp will ask the container for a target that matches the .mix selector.

<div class="container">
    <div class="mix category-a" data-order="1"></div>
    <div class="mix category-b" data-order="2"></div>
    <div class="mix category-b category-c" data-order="3"></div>
    <div class="mix category-a category-d" data-order="4"></div>
</div>

Targets can be filtered using any valid selector such as .category-a and sorted using optional custom data attributes such as data-order.

Control

One way of filtering and sorting happens when the controls are clicked. You can use any clickable element as a control, but is recommended for convenience. Filter controls are requested based on the presence of a data filter attribute whose value must be all, none, or a valid selector string such as .Category.

<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".category-a">Category A</button>
<button type="button" data-filter=".category-b">Category B</button>
<button type="button" data-filter=".category-c">Category C</button>

Sort control

Sort controls are requested based on the presence of the data-sort attribute, whose value takes the form of a sort string consisting of the name of the attribute to sort, followed by an optional colon-separated sort order, for example, ‘order’, ‘order: asc’, ‘order : desc ‘.

<button type="button" data-sort="order:asc">Ascending</button>
<button type="button" data-sort="order:descending">Descending</button>
<button type="button" data-sort="random">Random</button>

The values ​​default and random are also valid, with default referring to the original order of the target elements in the DOM at the time the mixer is instantiated.

Styling a container

While MixItUp can be added on top of any existing CSS layout, it is recommended that you use flexbox-based styles for floats and legacy grid frames when working with grid designs for a number of reasons.

Download MixItUp

First, download the MixItUp JavaScript library using the preferred method for your project. The easiest way to load MixItUp into your project is to include it through the </script> tag before the closing </body> tag on your page. You can download the script on the official website. In the folder you will find examples of using the MixItUp library with different settings.

   ...
        <script src="/path/to/mixitup.min.js"></script>
    </body>
</html>

With this method, the MixItUp library function will be available through the global variable mixitup.

Import module

If you are building a JavaScript modular project using Webpack, Browserify, or RequireJS, MixItUp can be installed using a package manager of your choice (e.g. npm, jspm, yarn) and then imported into any of your project’s modules.

npm install mixitup --save

// ES2015
import mixitup from 'mixitup';

// CommonJS
var mixitup = require('mixitup');

// AMD
require(['mixitup'], function(mixitup) {
});

Creating a mixer

With the mixitup () library function available, you can now create a mixer in your container to enable the MixItUp function. Call the library function, passing in a selector string or a reference to a container element as the first parameter, and a newly created mixer instance will be returned.

Creating a mixer using a selector string:

var mixer = mixitup('.container');

Creating a mixer with a link to an item:

var mixer = mixitup(containerEl);

Your mixer is now ready to interact through the controls (see above) or API (see the mixer API methods in the documentation). Click the control or call an API method to verify that everything is working correctly.

Configuration

If you want to customize the functionality of your mixer, an optional configuration object can be passed as the second parameter to the mixitup function. If no configuration object is passed, the default settings will be used.

Passing a config object:

var mixer = mixitup(containerEl, {
    selectors: {
        target: '.blog-item'
    },
    animation: {
        duration: 300
    }
});

API usage

If you want to interact with your mixer through its API, the mixer reference returned by the library function can be used to call API methods.

API method call:

var mixer = mixitup(containerEl);
mixer.filter('.category-a');

You can also use the new MixItUp dataset API. The dataset is intended for use in API-based JavaScript applications and can be used in place of DOM-based methods like .filter (), .sort (), .insert (), etc. When used, insertion, deletion, sorting and pagination can be achieved solely through changes to your data model, without the need to interact with or directly query the DOM.

The post Filtering and sorting in JS using the MixItUp library appeared first on IAMCP-US.

JQuery makes the web developer’s life easier. The library provides many built-in functions with which you can easily and quickly perform various tasks with less code.

Important features of jQuery

DOM selection: jQuery provides selectors to retrieve a DOM element based on various criteria such as tag name, id, css class name, attribute name, value, nth child in the hierarchy, etc.

DOM manipulation: You can manipulate DOM elements using various built-in jQuery functions. For example, adding or removing elements, changing HTML content, CSS class, etc.

Special Effects: You can apply special effects to DOM elements, such as showing or hiding elements, fading in or out, sliding effect, animations, and more.

Events: The jQuery library includes functions that are equivalent to DOM events such as press, dblclick, mouseenter, mouse release, blur, keyup, keydown, etc. These features automatically resolve browser issues.

Ajax: jQuery also includes easy-to-use AJAX functions to load data from servers without reloading the entire page.

Cross-browser support: The jQuery library handles cross-browser issues automatically, so the user doesn’t need to worry about it. jQuery supports IE 6.0+, FF 2.0+, Safari 3.0+, Chrome, and Opera 9.0+.

JQuery benefits

Easy to Learn: jQuery is easy to learn because it supports the same JavaScript style coding.

Write less, do more: jQuery provides a rich set of features that improve developer productivity by writing less readable code.

Excellent API documentation: jQuery provides excellent online API documentation.

Cross-browser support: jQuery provides excellent cross-browser support without writing additional code.

Unobtrusive: jQuery is unobtrusive, which allows you to separate concerns by separating HTML and jQuery code.

JQuery Versions

There are currently three versions of jQuery: 1.x, 2.x, and 3.x. The only difference in the second version is that it no longer supports old browsers, such as Internet Explorer below version 8. This made it possible to reduce the size of the library file and speed up its work. The third version received even more acceleration, new methods and fixes.

JQuery is also used in a compressed (.min) and non-compressed version. You can use the uncompressed version of the library during development. In a compressed version, the code is minimized and it is almost impossible to make any changes to it. Therefore, the compressed version is used already on the working project for more optimal work, since the library in this version takes up much less space and is processed faster.

JQuery connection

There are 2 ways to connect jQuery to your project: local and using CDN. With the local method, the library is connected as a regular .js file that is located on your server. When connecting from a CDN, the library connects from a remote server, for example, from a Google CDN. Let’s take a closer look at each method.

Connecting jQuery locally

1. Download the jQuery library js file from the official page. Just right-click on the download link and select “Save Link As” from the pop-up menu.

2. Then save the download file in your site directory. For example, I just save it in the js folder of my project along with the rest of the js scripts.
3. Now you need to include the previously downloaded library file in your page. Place the following code between the and tags:

<script type="text/javascript" src="jquery-3.5.0.min.js"></script>

You should end up with something like this:

<!doctype html>
<html>
<head>
    <title>jQuery</title>
    <script src="jquery-3.5.0.min.js"></script>
</head>
<body>
    <h1>Conaction jQuery</h1>
</body>
</html>

Connecting jQuery with CDN

Connecting jQuery hosted on a CDN is similar to a local one, except that the library file will not be on your server, but on a remote one. Aside from this detail, you simply add jQuery to your page like any other external JavaScript file.

One big benefit of using Google hosted jQuery: Many users have already downloaded jQuery from the Google CDN when visiting another website. As a result, it will be loaded from the cache when you visit your site, which leads to faster loading. In addition, Google CDN will make sure that after a user requests a file from him, it is sent from the server closest to them, which also leads to faster downloads.

The most popular CDNs are Google CDN and jQuery CDN. We will consider connecting from Google CDN, but connecting from other servers is the same and you can choose any option you like.

The post JQuery connection appeared first on IAMCP-US.