Horizontally Tile Div Tags with Bootstrap and Maximize Click
I am using angular JS and Bootstrap to display some dynamic data, currently I have 3 div tiling. However, I need the tiles to be larger than 3, I need them to be smaller, however I can't figure out which bottle exactly if I use a smaller column size it just puts one or two per row. I need at least 7 lines. Also my function to make them maximize on click doesn't work and I don't know why ..
This is what im working now, except for installing ngclick. I am getting an error.
<html>
<head>
<title>Relic</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<link href="css/cover.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>
<script>
$(document).ready(function() {
$('.hide_div').hide();
$('.show_button').click(function(){
/**
* when show button is clicked we call the show plugin
* which scales the box to default size
* You can try other effects from here: http://jqueryui.com/effect/
*/
$(".hide_div").show("scale", 500);
});
$('.show_button').click(function(){
//same thing happens except in this case we hide the element
$(".hide_div").hide("scale", 500);
});
});
</script>
</head>
<body ng-app="userProfile" ng-controller="ProfileController as post" >
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid" id="content">
<div class="row" >
<ul ng-repeat="post in post.userPost" class="col-md-1" id="post">
<li ng-click='tab = {{post.message}}' class='show_button'>{{post.title}}{{post.message}}</li>
</ul>
</div>
</div>
</div>
</div>
<div id='fullscreen' class='hide_div'>{{tab}}
<div class='show_button'>test</div></div>
</body>
</html>
this is the error im getting
Error: [$parse:syntax] Syntax Error: Token 'post.message' is unexpected, expecting [:] at column 9 of the expression [tab = {{post.message}}] starting at [post.message}}].
http://errors.angularjs.org/1.3.0-beta.17/$parse/syntax?p0=post.message&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=9&p3=tab%20%3D%20%7B%7Bpost.message%7D%7D&p4=post.message%7D%7D
at file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:78:12
at Parser.throwError (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10739:11)
at Parser.consume (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10773:12)
at Parser.object (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:11075:14)
at Parser.primary (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10707:22)
at Parser.unary (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10958:19)
at Parser.multiplicative (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10941:21)
at Parser.additive (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10932:21)
at Parser.relational (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10923:21)
at Parser.equality (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10914:21) <li ng-click="tab = {{post.message}}" class="show_button">
source to share
An id
must be unique, so what you want to use inside any loop or repetition is class
, therefore, class="post"
and $('.post').click(..)
.
Either that, or you might have a big mess of indexed type ids id="post{{$index}}"
id="fullscreen{{$index}}"
, but that doesn't sound like fun.
It would also be more useful to use ng-click in this case.
Here is the Plunker
source to share