9bit Studios » jQuery plugins https://9bitstudios.com Web Design, Themes, & Applications Fri, 15 Aug 2014 13:49:47 +0000 en-US hourly 1 https://wordpress.org/?v=3.9.2 jQuery Isotope Tutorial https://9bitstudios.com/2013/04/jquery-isotope-tutorial/ https://9bitstudios.com/2013/04/jquery-isotope-tutorial/#comments Fri, 26 Apr 2013 15:40:35 +0000 https://9bitstudios.com/?p=831 I love jQuery Isotope from Metafizzy. As a longtime fan of the Springfield Isotopes, who wouldn’t love an isotopes jQuery plugin? I’ve enjoyed it so much that I bought the developer license so I could use it for my own commercial applications and themes. It’s an outstanding plugin and a lot of the popular templates and themes on sites like Theme Forest use it to create things like filterable portfolios or display content in other dynamic ways.

The Isotope homepage is awesomely flashy and shows some slick implementations on how you can use the plugin. However, because there is a lot going on there on the page, I think there’s the potential that it might be a bit challenging for users who are new to jQuery to find the simplest way to use it in the code examples. There is a lot of styling and code to sift through. Perhaps, it comes down to a matter of personal preference, but I’m more of a fan of the “Start really simple and plain and then build up from there” approach. So I thought I’d show a really simple, very vanilla example of jQuery Isotope so that you can get it up and running in your own applications as soon as possible. You can add more complexity and styling from there if you so desire. The demo of what we’ll be creating and the corresponding download are below…

View Demo Download Files

We’ll be creating a filterable portfolio-style implementation using jQuery Isotope.

So let’s start by downloading jQuery Istotope from GitHub. From there we can grab the .js file and include it in our project like so…

<!DOCTYPE html>
<html>
<head>
<title>jQuery Isotope</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.isotope.js" type="text/javascript"></script> 
</head>
<body>

<script type="text/javascript">


</script>
</body>
</html>

Next we are going to want to add the following JavaScript to our page in-between the <script> tags in the markup…

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});

We’re attaching the jQuery to the $(window).load event so that Isotope can calculate widths correctly based on the image sizes. Basically, we have 2 “sections” of jQuery here. The first section is necessary for us to initialize Isotope on our page and define the container that’s in it. Then we have what will be our filter for categories and we have our click event tied to $(‘.portfolioFilter a’).

Create a folder called “css” and add a style.css file. Add the following CSS to it…

body {
    font-family: Arial;
}

.portfolioFilter a { 
    margin-right: 10px; 
    color:#666;
    text-decoration:none;
}

.portfolioFilter a.current { 
    font-weight:bold;
}

img {
    margin:5px;
}

.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

Here we are using CSS3 transitions to make the filter effect.

Lastly of course we would not want to forget our markup. Add the following code after the opening <body> tag in the markup…

<div class="portfolioFilter">

    <a href="#" data-filter="*" class="current">All Categories</a>
    <a href="#" data-filter=".people">People</a>
    <a href="#" data-filter=".places">Places</a>
    <a href="#" data-filter=".food">Food</a>
    <a href="#" data-filter=".objects">Objects</a>

</div>

<div class="portfolioContainer">

    <div class="objects">
        <img src="images/watch.jpg" alt="image">
    </div>

    <div class="people places">
        <img src="images/surf.jpg" alt="image">
    </div>	

    <div class="food">
        <img src="images/burger.jpg" alt="image">
    </div>
	
    <div class="people places">
        <img src="images/subway.jpg" alt="image">
    </div>

    <div class="places objects">
        <img src="images/trees.jpg" alt="image">
    </div>

    <div class="people food objects">
        <img src="images/coffee.jpg" alt="image">
    </div>

    <div class="food objects">
        <img src="images/wine.jpg" alt="image">
    </div>	
	
    <div class="food">
        <img src="images/salad.jpg" alt="image">
    </div>	

</div>

The important pieces (as you can see) are in the data-filter attribute in the filter and in the classes of the container. Notice how the classes in the container match the data-filter attribute in the filter. These values need to match exactly and this is, in essence, how you categorize the objects using Isotope. If you want to put objects into a particular category, you simply need to add the classes that you want and separate them by spaces. Some objects can have one category, some have multiple categories.

Now, this might seem like an ugly unstyled package right now, but this gives you all of the basics to build off of from here. You can now add the elements to it that you need to make it fit with both your front-end framework and your theme styles. You’ll probably also want to update your category names and use your own image, but this should be a good starting point.

]]> https://9bitstudios.com/2013/04/jquery-isotope-tutorial/feed/ 97 jQuery: What’s the Difference Between $(this), $this, and this? https://9bitstudios.com/2013/03/jquery-whats-the-difference-between-this-this-and-this/ https://9bitstudios.com/2013/03/jquery-whats-the-difference-between-this-this-and-this/#comments Mon, 04 Mar 2013 21:16:21 +0000 https://9bitstudios.com/?p=790 When doing jQuery development and looking at the code in other people’s jQuery functions and plugins you’ll eventually see that different developers will use different syntaxes in different places. This is probably most apparent in the use of the term “this”. Sometimes you will see this. Other times you will see $(this) and still other times you will see $this. What is the difference between all of these and when should you use each one?

The this pointer in JavaScript refers to the current object that we are running our code inside. In JavaScript everything is an object, so the scope of this is always changing.

Let’s say we had a page like one that is shown below…

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>

<div id="one" class="myClass">One</div>
<div id="two" class="myClass">Two</div>
<div id="three" class="myClass">Three</div>
<div id="four" class="otherClass">Four</div>

<script type="text/javascript">

</script>

</body>
</html>

Now in the <script> section let’s add some jQuery to loop through all of the elements with the “myClass” class (all the <div>’s on the page. As many know, to do this we use the jQuery each method. Inside of each we can use the pointer “this” to refer to the current DOM element in set of elements we are on.

$(document).ready(function() {
    $('.myClass').each(function(){
       // do something with this here
    });

});

Let’s use the native JavaScript function getAttribute() to get the id attribute of each element. 

$(document).ready(function() {
    $('.myClass').each(function(){
       console.log(this.getAttribute('id'));
    });

});

If we look in our console, we can see that the text one, two, three appears (the id attributes of each DOM element that has “myClass”). So everything works as expected.

But as you know jQuery also has a method for getting an attribute: the attr() method. So let’s try it with that.

$(document).ready(function() {
    $('.myClass').each(function(){
       console.log(this.attr('id'));
    });

});

However if we look in our console we get an error.

Uncaught TypeError: Object # has no method ‘attr’.

Why is that? We know we are referencing the correct DOM element. Well, it’s because we haven’t wrapped this (the current DOM element) in jQuery so that we can call jQuery methods on it. That’s really the big distinction between $(this) and this. They both refer to the same object. However, if you want to use any jQuery on the object, it must be wrapped in a jQuery object as $(this) like so.

$(document).ready(function() {
    $('.myClass').each(function(){
       console.log($(this).attr('id'));
    });

});

The reverse is also true. Because the $() is a jQuery wrapper, you cannot call native JavaScript on it. So $(this).getArribute(‘id’) also wouldn’t work.

So that’s the big thing to remember. If you want to call a jQuery method on your object, wrap it it $(). If you want to use a native JavaScript method, don’t wrap it in $(). Just use plain ol’ this

What about $this?

$this is a little different because it’s actually just a variable that uses the $. It has no inherent relation to jQuery. It would be no different than JavaScript variables named $corn or $carrots. You just was easily say var $this = “My pet cat is named Mittens.”; It’s just a variable with the dollar sign in it. JavaScript allows characters like this in variable names. The reason that you see use of $this inside of jQuery plugins is that often times developers in the global scope inside of their plugin will say something like:

var $this = $(this);

That way they can always have a reference to the object on which the plugin was called. The scope of “this” will change in any methods used inside the plugin so it’s always good to have a global variable (that is, global inside the plugin scope) which you can refer to the object on which the plugin was called. But the important thing to remember is that $this has no inherent relation to jQuery. It’s just a variable like any other.

Personally however, I never really liked naming the DOM element object using that convention. I always used var object = $(this); as can be seen in some jQuery plugins I have written. I figured with all the this’s running around inside of all of these objects, no need to throw another one in there if not absolutely necessary. But it’s really just a matter of personal preference there :)

Hopefully this has cleared up some of the weirdness in uses of different this syntaxes.

]]> https://9bitstudios.com/2013/03/jquery-whats-the-difference-between-this-this-and-this/feed/ 3