Use jquery in custom code

hi, i can’t seem to use jquery in custom code via theme panel.

i’m inserting this code:

$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}

$(".td_module_10").chunk(2).wrap('<div class="chunk-module"></div>');


this code will wrap every two .td_module_10 class to a div class chunk-module.
I just wanna create a wrap on modules so i can do some custom css for mobile optimization such as displaying 2 modules per row like this:

View post on imgur.com

if it doesnt have this wrap in module, it’s hard to control it’s responsiveness in relation to this issue:
https://forum.tagdiv.com/topic/how-to-change-responsive-size-of-module-in-mobile/

as a workaround, i imported a cdn jquery using this code:

View post on imgur.com

it works but it kinda looks messy with the “x” error in theme panel. can you suggest other implementation to use jquery in custom js via theme panel?

Thanks!

Hi

That happens because you’re using script tags in custom javascript field. Try to remove the tags as the theme already add it once: http://screencast.com/t/vL1SJXeM – http://screencast.com/t/mhzjSUNQZd7

Thanks!

hi, it doesn’t work.

Error:Uncaught TypeError: Cannot read property ‘fn’ of undefined

the jquery wasn’t called as it requires the <script> tags
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script&gt;

without <script> tag, it becomes a variable i think.

Hi

Try to include the jquery library in footer.php like here, it should work fine: http://screencast.com/t/vdwGtmSZ

Thanks!