Console error on pages with col2-left-layout

Question

I am making my mobile site and our navigation is a bar at the top which when you click expands and shows the categories. However on any pages with the layout class col2-left-layout the navigation doesn't expand, i have checked the console and it say there is an error in my script.js saying Uncaught TypeError: undefined is not a function

and it is referring to this line

if ($('.col-left').length) $('.col-left').masonry({itemSelector : '.block', isResizable:true, isAnimated:true});

I dont understand why this is happening on only pages with certain layouts, could anyone shed some light on the situation please?

Is there a way of changing the page layout depending on the screen size, for example if viewing on a mobile device the layout changes from col2_left_layout to col1_layout??

Answer 1

The most likely problem is that masonry is the jQuery plugin and on this page $ is prototype rather than jQuery at the point the code is called. Try changing it to..

if (jQuery('.col-left').length) jQuery('.col-left').masonry({itemSelector : '.block', isResizable:true, isAnimated:true});