Square Cards with Jquery. Was working then broke with update. (Support?)

[noahhurst]

I had found this solution for displaying Cards as squares (or rectangles) on each page. It was very Uniform. On a couple pages I even modified the code so that it would be 2:3 boxes instead of 1:1.

Here is the JavaScript:

jQuery(document).ready(function($){
  $(window).on('load resize', function(){
    $('.x-card-outer .x-card-inner').each(function(index, element){
      var h = $(this).width();
      $(this).css({'height': h});
    });
  });
});

Then I would use the following CSS for the pictures:

div.Card1 .x-face-outer.front {
	background: url("/photodirectory/card1.jpg") no-repeat center !important;
}

div.Card2 .x-face-outer.front {
	background: url("/photodirectory/card2.jpg") no-repeat center !important;
}

div.Card3 .x-face-outer.front {
	background: url("/photodirectory/card3.jpg") no-repeat center !important;
}

div.Card4 .x-face-outer.front {
	background: url("/photodirectory/card4.jpg") no-repeat center !important;
}

div.Card1 .x-face-outer.front, 
div.Card2 .x-face-outer.front, 
div.Card3 .x-face-outer.front, 
div.Card4 .x-face-outer.front {
	background-size: 100% auto !important;
}

I updated XTHEME and they all broke. I tinkered with a bunch of stuff and the only way to fixe it was to add this code to the individual pages. Basically calling the ENTIRE JQUERY library (again?).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

When I add it to individual pages in a text element page loads great.
When I added it to the _header.php file the page loaded fine BUT it broke the cornerstone on page editor and would only let me edit in wireframe mode.

I really don’t want to call the JQUERY file unless I really have to add it.
I also don’t want to add it to the 40-50 pages that already exist across multiple sites (all using one child theme). Any help would be greatly appreciated.

Example of a broken page: http://syracusefca.org/about/
Example of a fixed page with in page JQUERY call: http://syracusefca.org/campus/ (The javascript size calculation is a little different but that isn’t impacting the “call” of jquery. I added the JQUERY link in the “team huddles” text element.

Thanks for any help anyone can provide. I’ve tried to provide as much documentation as I can.

[paul.r]

Hi,

You can try this JS Code instead.

jQuery(document).ready(function($){
$(window).on("resize", function () {
    $('.x-card-outer .x-card-inner').each(function(index, element){      
          var h = $(this).width();
          $(this).css('height',h);
    });
}).resize();

});

Hope that helps.

[noahhurst]

@paul.r

jQuery(document).ready(function($){
$(window).on(“resize”, function () {
$(’.x-card-outer .x-card-inner’).each(function(index, element){
var h = $(this).width();
$(this).css(‘height’,h);
});
}).resize();

});

First off – thank you so much for your time.

I put this Javascript in but it doesn’t seem to be working.

Example: http://syracusefca.org

Sorry to bother!

[paul.r]

Hi,

It seems to work when I add in the console.

https://www.screencast.com/t/TUffrqr7i

Can you provide us your wordpress admin login in Secure Note.

Thanks

[noahhurst]

Sure thing here you go!

[ruenel]

Hello There,

Thanks for providing the information. It seems that you are using an older version of X and Cornerstone. Please do update to the latest version.

X 5.1.1 and Cornerstone 2.0.6 are now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/).

Please let us know how it goes.

[noahhurst]

I updated but it didn’t seem to impact it.

[noahhurst]

I have created a test page with just the card elements.

http://syracusefca.org/test/

The css isn’t being changed for the heights. I’m not sure what’s going wrong.

[rad]

Hi there,

Your cornerstone is 2.0.6 which is only applicable for X 5.1.1, but your X theme is still 4.4.1. Please update your theme before we go further

Thanks!

[noahhurst]

I think there is an issue with the multi-site. I removed it’s license and it’s acting like it’s still licensed. I then tried to apply that license to a subsite but that didn’t really change anything.

I did this because it wasn’t giving me the option to automatic update. It says it’s running 4.4.1 and that there is a newer version but it’s not auto updating or giving me the option to auto update.

I will include the license in a secure note.

It seems like it’s doing automatic updates and maybe it is but then I tried to apply that license to this website and it didn’t change anything. I purged caches and other thing made no difference.

[rad]

Hi there,

I just revoked and validate it again with your provided license key and it works okay. About the update, please do it manually. In multi-site, update process is only available in Network admin (not the admin). In network admin, there is no active theme and we all know that updates are only available if the theme is active. So yes, please update it manually for now.

Then once done, we’ll tackle the main issue

Thanks!

[noahhurst]

Your support has been awesome. Thank you so much.

I manually uploaded the new theme.

http://syracusefca.org/test/

You guys are the best. Thank you so much. Sorry for all the hand holding.

[jade]

You’re most welcome.

[noahhurst]

It’s still not working, but I appreciate your help so far!

[rad]

Hi there,

Something is wrong whit your installation, the custom js section is missing. How did you add the script? I recommend the update since it was missing, not it still missing so I wondered how it’s added, this is how it appears in the source code

<script id="cornerstone-custom-page-js" type="text/javascript">;jQuery(document).ready(function(n){n(window).on('resize',function(){n('.x-card-outer .x-card-inner').each(function(e,r){var i=n(this).width();n(this).css('height',i)})}).resize()});</script>

Which indicates it’s added in the conerstone custom javascript, but it’s not there.

Thanks!

[noahhurst]

I added the script by: https://youtu.be/Bp8DEOaoU-I

http://syracusefca.org/test/

Try to fix installation:

I completely deleted the X Theme.
Reinstalled the X theme.
Rebuilt the child theme.
Reinstalled child theme.

It’s still not working with just X Theme or Child Theme.

I checked website code and its appearing on the page:

I’m fairly certain that the JQUERY library necessary to do this isn’t being loaded on the page. When I add this to the body of the page it seem to load:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

[lely]

Hi There,

No need to call jquery because the file is there. See this: https://screencast-o-matic.com/watch/cbjU6fIc2I. I still find it weird that JS part is still missing.
If you can access it, try to remove this part:

$(document).ready(function(){alert('Loaded!')});

That part is causing this error:

(index):244 Uncaught TypeError: $ is not a function
    at (index):244

[noahhurst]

@Lely

If you can access it, try to remove this part:
$(document).ready(function(){alert(‘Loaded!’)});

Done! Still broken .

Would this have anything to do with it?

[rad]

Hi there,

You should ignore those two, they are just part of debugging and only visible when the developer tool is open.

Would you mind providing the account you’re using? Because that temp account has no access to javascript section.

Thanks.

[noahhurst]

Sure thing! Will do a secure note.