Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

jQuery doesn't seem to be working with isotope, fitvid.js or toggleClass

Previously I was developing on localhost and I had isotope and ftivid.js working just fine but now that I've uploaded to my web host and trying to get everything set up and working I can't figure out why I'm getting an UncaughtType Error: Undefined is not a function. I'm seeing that in Chrome's console. It seems to be disabling jquery or something. I'm using fitvid.js to make my video embeds fluid and responsive. And I'm using isotope to sort out all the items here: http://test.lt11.com/work/ Right now there are only two items so I'm not even sure if that's broken but I haven't changed a thing when I was on localhost and it was working perfectly. The fitvid.js is used here: http://test.lt11.com/five-ten-the-ice-caves/ And I can't figure out why the embedded videos are not re-sizing to the full width and height of the container. Furthermore, previously on localhost I had it set up so that initially the video was hidden with the parent div opacity set to 0. Then using the jQuery toggleClass function the class of the parent div would change so that the opacity was then set to 1 on a click event. This was all working before on localhost (it's so frustrating!) but can't figure out what's wrong now.

This is the code in my header.php (this is a wordpress site) for Isotope, fitvid and the toggleClass function:

    <script>

$(document).ready(function() {

    var $container = $('#isotope-list').imagesLoaded( function() { //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.isotope-item', 
          layoutMode : 'masonry'
         }); 
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

$(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#fitvid").fitVids();
  });

$(document).ready(function(){
  $("#play").click(function(){
    $("#post_video").toggleClass("post_video_visible");
    $("#play").toggleClass("hidden");
  });
});

</script>
User Gravatar

bigchokeslam

Posted Jun 3 2014 11:12 UTC

$50


  • Assigned To avladev
  • Solved
  • jquery
    php
    isotope
  • 6072 Views

16 Replies


Also using bootstrap.

User Gravatar

bigchokeslam

Posted Jun 3 2014 11:15 UTC

Note that you are loading jQuery 2.1.1 and 1.11 and I think this what causes the problems..

User Gravatar

guyisra

Posted Jun 3 2014 11:29 UTC

First try to use only one version of jQuery:

http://code.jquery.com/jquery-2.1.1.min.js This one is used may be in your theme

http://test.lt11.com/wp-includes/js/jquery/jquery.js?ver=1.11.0 This one is included by wordpress itself. (May be it's required by some plugin)

Try removing your version and check if everything is OK.

User Gravatar

avladev

Posted Jun 3 2014 11:30 UTC

The error which is causing this is "This error message is generated when the web server is trying to access a file that does not exist or has been configured incorrectly".

And it's apointing to this file: wp-content/themes/LT11DotCom/includes/resources/bootstrap/css/bootstrap.css.map. Verify if the file exists and if it has the correct access permissions.

User Gravatar

brunodevel

Posted Jun 3 2014 11:30 UTC

Try to use another isotope js. File you use (http://test.lt11.com/wp-content/themes/LT11DotCom/includes/js/isotope.pkgd.min.js) doesn't have function 'imagesLoaded'.

I inserted isotop and fitVids from cdnjs.com, and your page works as expected (video fits container).

And, as mentioned before, do not insert jquery twice.

User Gravatar

gridsane

Posted Jun 3 2014 11:41 UTC

Now since you've removed your version of jQuery. You have to know that wordpress version of jQuery runs in compatibility mode so you cannot use $ variable.

You can make a workaround in your first script like:

$ = jQuery;
$(document).ready( function(){
......
});
User Gravatar

avladev

Posted Jun 3 2014 11:53 UTC

Try deregistering jquery in your themes functions.php file:

// Drop this in functions.php or your theme
if( !is_admin()){
    wp_deregister_script('jquery');
}

You can merge this with the jquery register you may already have in your theme functions.php something similar to this:

// Drop this in functions.php or your theme
if( !is_admin()){
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
    wp_enqueue_script('jquery');
}

And due to WP jQuery naming you should update your jquery init method as follows:

( function( $ ) {

Instead of

$(function(){

Or utilize jQuery No Conflict to set-up a new jQuery object:

var $q = jQuery.noConflict();
$q(function(){         

Or just use jQuery instead of $ throughout

jQuery(function(){
User Gravatar

nightbook2333

Posted Jun 3 2014 11:54 UTC

Ok so I have removed my version of jQuery, I'm loading isotope and fitvid in my functions.php from the CDN gridsane referenced and I'm trying the workaround avladev suggested but I'm not getting anything to work right. What am I missing?

User Gravatar

bigchokeslam

Posted Jun 3 2014 12:05 UTC

Now. You are missing element with id="isotope-list" for which .imagesLoaded method will be execute.

Sorry. Isotope is not loaded properly but you also missing the 'isotope-list' container.

User Gravatar

avladev

Posted Jun 3 2014 12:20 UTC

Thanks for the help but that doesn't make any sense to me, avladev. I do have the element with the id="isotope-list" here: http://test.lt11.com/work/

User Gravatar

bigchokeslam

Posted Jun 3 2014 12:34 UTC

The fitvid.js doesn't seem to be working either.

User Gravatar

bigchokeslam

Posted Jun 3 2014 12:39 UTC

fitvid does not work fine because of the JS error raised by isotope which exits from the script at this point.

Please create an container with id='isotope-list' this is the cause of the error. It seems that isotope is working fine, just create your HTML as it's needed. I can't help you here because I don't know what info this container holds.

User Gravatar

avladev

Posted Jun 3 2014 12:47 UTC

Solution

This didn't solve your task? Get your own custom solution.

Wow I'm confused. Are you saying I need an element with id="isotope-list" on every page regardless of whether or not I use isotope functionality on that page? If that is the case, then I really don't understand what is going on then. I added the id="isotope-list" to an element here: http://test.lt11.com/five-ten-the-ice-caves/

But I don't need that functionality on that page. Just the fitvid functionality.

Here is the page with the isotope functionality: http://test.lt11.com/work/

This "Work" page doesn't register any errors in Chrome's console.

I added the id="isotope-list" to an element the same way I did on the work page to single.php for the http://test.lt11.com/five-ten-the-ice-caves/ post but fitvid is not working and I'm still getting the error.

Would the solution possibly be to only load the isotope script on the "Work" page? If so, how would I dod that? Do tags need to be within the header? I don't think they do...?

User Gravatar

bigchokeslam

Posted Jun 3 2014 13:00 UTC

Somewhat answered my own question. :) I just moved the isotope jquery code in my header below the fitvid code and it got the videos working properly.

User Gravatar

bigchokeslam

Posted Jun 3 2014 13:07 UTC

Please, test this code instead:

var $container = $('#isotope-list').imagesLoaded( function() { $(this).isotope({ itemSelector : '.isotope-item', layoutMode : 'masonry' }); });

Let me know what happens.

User Gravatar

brunodevel

Posted Jun 3 2014 13:09 UTC

The best way to run this code is to use some third-party WP plugin which allows you to add JS for each page individually. If you wanna stick with your code in the template you can check which post/page is loaded like:

$(document).ready(function(){
    if( !$('body.postid-51').length ){
        // exit from this function on pages with id != 51
        return;
    }
    // run your code on this page
});

Something like this but you have to manually change page ids, so I prefer to use plugin instead as described above.

User Gravatar

avladev

Posted Jun 3 2014 13:19 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions