Link to home
Start Free TrialLog in
Avatar of epifanio67
epifanio67

asked on

reference errors with Masonry javascript grid layout lib. Any ideas why?

Hello experts,

Please reference code below:

<html>
<head>
<title>Test: blocks with dynamic heights</title>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- http://masonry.desandro.com/ -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>
<script>
var container = $('#galleryContainer');
//initialize
$container.masonry({
columnWidth: 200,
itemSelector: '.item'
});
</script>
<style>
.imgContainer{ float:left; padding: 5px; }
.footer{ clear:both; }
</style>
</head>
<body>
<!-- PAGE 1 begins -->
	<div data-role="page" id="gallery" data-theme="a">			
		<!-- CONTENT -->
		<div data-role="main">
			<div id='galleryContainer'>
				<div class='imgContainer'>
				<div><a href='#'><img src="#" style="background-color:blue;width:300px;height:300px"></a></div>
				</div>
				<div class='imgContainer'>
				<div><a href='#'><img src="#" style="background-color:yellow;width:300px;height:600px"></a></div>
				</div>
				<div class='imgContainer'>
				<div><a href='#'><img src="#" style="background-color:red;width:300px;height:600px"></a></div>
				</div>
			</div>
		</div>
		
		<!-- FOOTER -->
		<div data-role="footer" class="footer">
			<div >footer</div>
		</div>	
	</div>
<!-- PAGE 1 ENDS -->	
</body>

Open in new window


I do see the container defined above, I am not sure why I am getting this error:
ReferenceError: $ is not defined
var container = $('#galleryContainer');

Also, I am seeing the error below:
TypeError: a is undefined
...s,document,function(a,b,c){!function(a){a.mobile={}}(a),function(a,b){function d.

any ideas why I am getting these errors?

Thank you for your help...

Regards,
ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of epifanio67
epifanio67

ASKER

Thank you Rainer....