I'm trying to convert div element to canvas using html2canvas library inside angularjs controller, it throws no error in console but only gives an empty canvas, I included the html2canvas script in master page and the div element is inside a template page which is loaded using ng-view
the div element is
<div id="barcodeHtml" style="background-color: #82c6f8">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getCanvas()">get Canvas</a>
and the angular controller
$scope.getCanvas=function()
{
$scope.memberName=data.html.name;
$scope.memberSince=data.html.year;
$scope.imgSource=data.html.code;
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
what am I missing?
thank you in advance..
The issue is your div with id="barcodeHtml" does not have height so it is not able to append to the body.
Try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getConvas=function()
{
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
})
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="barcodeHtml" style="background-color: #82c6f8; height: 200px;">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getConvas()">get Convas</a>
</div>
</body>
</html>
There is an issue with your inline-styling.
I tried with removing float: left; from your upper div [from here : <div style="width: 40%;float: left; align-content: center">], then it worked.
See the working fiddle
Related
I am using bootstrap and angularjs, I want to show large image on. I clicked image but its not working. How do this? Any built-in library of bootstrap when I show large image.
<html>
<head>
<script type="text/javascript">
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>
</head>
<body>
<a href="#" class="pop">
<img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
</a>
<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
</body>
</html>
I am using Segment control in my App but I am unable to switch between the segments.
I am referring this link https://onsen.io/pattern-schedule.html
I have tried and also searched a lot but cant find any solution.
My Output :
My Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>js"></script>
</head>
<script>
ons.bootstrap();
</script>
<body>
<ons-navigator animation="slide" title="Navigator" var="menu">
<ons-page var ="variable">
<ons-toolbar>
<div class="left">
</div>
<div class="center">
Menu
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-
align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">
<div class="button-bar__item" ngclick="menu.setMainPage('indian.html')">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item" ngclick="menu.setMainPage('english.html')">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item" ngclick="menu.setMainPage('drinks.html')">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
</ons-page>
</ons-navigator>
<ons-template id="indian.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
<ons-template id="english.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
<ons-template id="drinks.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
Thanks in Advance.
Edit :
My requirements is that I want to open the templates i.e indian.html ,english.html and drinks.html within the same page on segment control click respectively like the splitview does
I am using Onsen 1
I am not using Sliding menu.
Update:I am now getting this Error...
04-11 04:58:06.471 14813-14851/com.hogo.onsenui E/AndroidProtocolHandler:
Unable to open asset URL: file:///android_asset/www/english.html
04-11 04:58:06.501 14813-14813/com.hogo.onsenui I/chromium:
[INFO:CONSOLE(108)] "Error: Page is not found: english.html
at
file:///android_asset/www/js/onsenui.js:13828:17
at
file:///android_asset/www/js/angular/angular.min.js:120:182
at n.$eval
(file:///android_asset/www/js/angular/angular.min.js:134:493)
at n.$digest
(file:///android_asset/www/js/angular/angular.min.js:132:9)
at n.$apply
(file:///android_asset/www/js/angular/angular.min.js:135:269)
at l
(file:///android_asset/www/js/angular/angular.min.js:87:152)
at F
(file:///android_asset/www/js/angular/angular.min.js:91:187)
at
XMLHttpRequest.e
(file:///android_asset/www/js/angular/angular.min.js:92:271)", source:
file:///android_asset/www/js/angular/angular.min.js (108)
Updated Code :
<body>
<ons-tabbar var="navi" position="top">
<ons-tab page="indian.html" active="true"></ons-tab>
<ons-tab page="english.html"></ons-tab>
<ons-tab page="drinks.html"></ons-tab>
</ons-tabbar>
<ons-toolbar>
<div class="left">
</div>
<div class="center">
Menu
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-
align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-page>
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px;
padding: 0px 5px;">
<div class="button-bar__item" ng-click="navi.setActiveTab(0)">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(1)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(2)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
</ons-page>
<ons-template id="indian.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
english Contents
</p>
</ons-page>
</ons-template>
<ons-template id="english.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
english Contents
</p>
</ons-page>
</ons-template>
<ons-template id="drinks.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
drinks Contents
</p>
</ons-page>
</ons-template>
</body>
I have hide the tabbar in my css page
There are several issues which may be preventing the program from working:
You are including angular twice
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular.min.js"></script>
It's probably not the cause of your problem, but it may cause other issues - only one of the two files is enough.
<script type="text/javascript" src="js/index.js"></script>js"></script>
This also shouldn't be a problem, but tags like this may cause issues - when you have extra closing tags it's fine, but if you had an extra open tag then the whole page could be blank.
The attributes should be ng-click, not ngclick.
If you want to use the ons-navigator then the methods you have available are pushPage, popPage, replacePage. The setMainPage method which you're using is a method of the ons-sliding-menu.
If you want to have data filtered then you should:
Add ng-controller="AppController" to the body or some other parent element.
Add ng-model="a" to the radio buttons (and i guess some values).
Add the items to the $scope in the controller.
Add ng-repeat="item in items | filter: { category: category }" or something similar
So something like:
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="indian" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="english">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="drinks">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
<ons-list ng-repeat="item in items | filter: { category: category }">
<ons-list-item>{{item.name}} ...</ons-list-item>
</ons-list>
And for javascript:
ons.bootstrap().controller('AppController', function ($scope) {
$scope.a = "indian";
$scope.items = [ // put your items here
name: 'item 1', category: 'indian',
name: 'item 2', category: 'indian',
name: 'item 3', category: 'english',
name: 'item 4', category: 'english',
name: 'item 5', category: 'drinks',
name: 'item 6', category: 'drinks'
]
});
Update: I thought you wanted filtering. I'll leave the previous answer if anyone else is interested in it. And now the answer to the updated question:
What you seem to want in that case is exactly the functionality of ons-tabbar - you have tabs and tab contents - exactly what you seem to want. So you just want to have different styles for the tabs.
However styling them in that way may not be trivial and moreover the styles may break if you try to update the version. So instead I'll provide 2 other solutions, which don't require advanced css tricks:
Use a tabbar, but just hide it and link the actions from your segment control:
<div class="button-bar">
<div class="button-bar__item" ng-click="navi.setActiveTab(0)">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
...
<div class="button-bar__item" ng-click="navi.setActiveTab(2)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
<ons-tabbar var="navi" position="top">
<ons-tab page="indian.html" active="true"></ons-tab>
<ons-tab page="english.html"></ons-tab>
<ons-tab page="drinks.html"></ons-tab>
</ons-tabbar>
CSS: #navi .tab-bar { display: none; }
Just use the navigator if you want to change the pages.
<ons-navigator page="indian.html" id="navi"></ons-navigator>
Add ng-click="navi.replacePage('pagename.html')" to the .button-bar__items
Add some distance on the top side of the navigator #navi { top: 40px; }
I am a newbie when it comes to frontend. I have been working on a little single page angularjs app and I came across an issue. On my page, I need two inline datepickers. I chose angular-ui-bootstrap datepickers. They render in an odd way veiling each other:
veiling datepickers
Here's part of my HTML code:
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Date range</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-5">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false"></uib-datepicker>
</div>
<div>
<label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
</div>
</div>
<div class="col-md-5 ">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false"></uib-datepicker>
</div>
<div>
<label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label> Additional Info</label>
</div>
Do you have any idea how to make them fit the panel normally without this veiling?
Before I put datepickers into panel div, the display issue was the same. They were tighten together and not fitting the grid column.
Each help will be appreciated
As <uib-datepicker> has a fixed size and cannot be resized according to grid width, you can customize the size of the small buttons (days).
See in the snippet below the .custom-size .btn-sm CSS class:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('MyCtrl', function($scope) {
});
.custom-size .btn-sm {
padding: 4px 8px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS UI Bootstrap</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="container-fluid">
<h2>AngularJS: UI Bootstrap datepicker</h2>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Date range</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false" class="custom-size"></uib-datepicker>
</div>
<div>
<label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
</div>
</div>
<div class="col-md-6">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false" class="custom-size"></uib-datepicker>
</div>
<div>
<label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label> Additional Info</label>
</div>
</div>
</div>
</body>
</html>
I'm making a website in angular material, which is working great except for the validation on form inputs.
When I type something into the input box, all of the error messages (required, minlength and maxlength) are show in the same place on top of each other.
Is this a bug in angular material or is there something I'm doing wrong?
This a simplified version of my problem just using the default StarterApp example, with the form input in the main page content. If you run it and type something in the text box, you should see the problem. Thank you for helping.
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<form name="userForm">
<md-input-container>
<label>Username</label>
<input name="username" ng-model="data.username" required md-maxlength="20" minlength="3">
<div ng-messages="userForm.username.$error" ng-show="userForm.username.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="md-maxlength">Your username can not be longer than 20 characters</div>
<div ng-message="minlength">Your username can not be shorter than 3 characters</div>
</div>
</md-input-container>
{{data.username}}
</form>
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<!-- custom stuff -->
<style>
.md-toolbar-tools h1 {
font-size: inherit;
font-weight: inherit;
margin: inherit;
}
</style>
<script>
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav',
function($scope, $mdSidenav) {
$scope.data = {
username: ""
};
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}
]);
</script>
</body>
</html>
The problem is with the angular-material.min.css file. Position in that file for md-input-container is absolute. Add your own css and set the position to relative instead of absolute. Added inline style to those divs so you could see
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<form name="userForm">
<md-input-container>
<label>Username</label>
<input name="username" ng-model="data.username" required md-maxlength="20" minlength="3">
<div style="position: relative" ng-messages="userForm.username.$error" ng-show="userForm.username.$dirty">
<div style="position: relative" ng-message="required">This field is required</div>
<div style="position: relative" ng-message="md-maxlength">Your username can not be longer than 20 characters</div>
<div style="position: relative" ng-message="minlength">Your username can not be shorter than 3 characters</div>
</div>
</md-input-container>
{{data.username}}
</form>
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<!-- custom stuff -->
<style>
.md-toolbar-tools h1 {
font-size: inherit;
font-weight: inherit;
margin: inherit;
};
.md-input-container-absolute {
position: relative;
}
</style>
<script>
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav',
function($scope, $mdSidenav) {
$scope.data = {
username: ""
};
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}
]);
</script>
</body>
</html>
I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});
I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.