<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- The above 3 lined is used to make the webpage responsive -->
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Ristorante Con Fusion</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="header">
Ristorante Con Fusion
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-control="navbar"> navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Menu</li>
<li>Contents</li>
</ul>
</div>
</nav>
<header class="jumbotron row-header">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row ">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best
cuisines, and create a unique fusion experience. Our lipsmacking
creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-4">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content ">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs12 col-sm-9 col-sm-pull-3">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes,
Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
<p>More »</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3">
<p style="padding:20px;"></p>
<h3 align="center">This Month's Promotions</h3>
</div>
<div class="col-xs-12 col-sm-9">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of
five different salads, six enticing appetizers, six main entrees and
five choicest desserts. Free flowing bubbly and soft drinks. All for
just $19.99 per person </p>
<p>More »</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide
International experience having worked closely with whos-who in the
culinary world, he specializes in creating mouthwatering Indo-Italian
fusion experiences. </p>
<p>More »</p>
</div>
</div>
</div>
<footer class="row-footer">
<div class="container">
<div class="row ">
<div class="col-xm-6 col-xs-offset-1 col-sm-3 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div>
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div>
<div style="padding: 40px 10px;">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jquery (necessery for bootstrap javascript plugin) -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body></html>
Can anyone tell me how Bootstrap recognize that span button code is for mobile or for desktop how program recognize that the nav bar only visible when it viewport is for desktop and run button code when viewport is for mobile .what the logic behind?
Please tell me how bootstrap recognize code to be run on desktop and for mobile .what is the logic behind recognition of code in bootstrap for mobile viewport and for desktop. This is my course project for Bootstrap but i am confused in logic how bootstrap recognized code even though i did't mention in code.
CSS3 Media Queries are how CSS in general (and Bootstrap in particular) display differently on different media/screen sizes. For example, the following lines in bootstrap.css
#media (min-width: 576px) {
.container {
width: 540px;
max-width: 100%;
}
}
say that on a screen size at least 576 pixels wide (Bootstrap's "small" device breakpoint), the .container style will have a width of 540 pixels.
Related
for some reason bootstrap isnt making my website (https://dylantn.github.io/Dusic/) automatically mobile compatible because i checked this website on my phone and it is just a zoomed out version of the desktop version
some one pls help
im frustrated
and need help
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="ind.css">
<title>Dusic-The Free Music Player Worldwide.</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only"><font face="arial"></font>Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<font face="arial"><span class="navimg"><img src="dusic4.gif" width="80" length="80" alt=""></span></font>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><font face="arial">About</font></li>
<li><font face="arial">Contact</font></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><font face="arial">Sign Up</font></li>
<li><font face="arial">Login</font></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1><b><img src="dusic4.gif" width="250" length="250"></b></h1>
<h3><b>The Best Collection of Music That Ain't Worldwide...... MAN</b></h3>
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>What is the purpose of Dusic?</h1>
<p>Our Society already has many music players, but i thought we need another one to clutter your life, plus it is Free!!</p>
<br><h3>IT IS FREE!! THAT IS THE ONLY COOL FEATURE ABOUT THIS THAT SEPERATES THIS FROM EVERYTHING ELSE<br>YIPEEEEE!</h3>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Try to add the following tag <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no" charset="utf-8"> to you head section.
You can find more info about it here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am using bootstrap's popover, but I don't want the popover overflow it's wrapper, any ideas?
Demo on Plunker
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script data-require="bootstrap.js#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css#*" />
<script src="controller.js"></script>
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false">
</datepicker>
</script>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="popover.css">
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<p>BAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababb</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row" ng-repeat="item in weaponItems">
<div class="col-xs-12">
<div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="auto right">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think I don't make my question clear, see the attached imagethe red line surrounded area is the card-panel area, and the green line surrounded is the popover. Here, I don't want the popover beyond the panel area.
Declare word-wrap on the overflowing element.
.card-body p{
word-wrap: break-word;
}
I am recently trying Angular UI Layout (https://github.com/angular-ui/ui-layout) which is pretty straightforward to use. However, I found the UI layout always overlaps with navbar of Bootstrap.
YOu can take a look at it here: http://plnkr.co/edit/r5veawwbgz98bZjLdr1B
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>UI.Layout Issue</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><i class="glyphicon glyphicon-envelope"></i><span>Website</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div ui-layout style="position:relative; height:500px">
<div ui-layout-container style="border-style: solid;"><h1>top</h1></div>
<div ui-layout-container>
<div ui-layout="{flow : 'column'}" >
<div ui-layout-container style="border-style: solid;" ><h1>left</h1></div>
<div ui-layout-container style="border-style: solid;" ><h1>right</h1></div>
</div>
</div>
<div ui-layout-container style="border-style: solid;"><h1>bottom</h1></div>
</div>
<!-- Le javascript -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="application/javascript" src="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.min.js"></script>
<script>
angular.module('x', ['ui.layout']);
</script>
</body>
</html>
A further investigation shows it is caused by the absolute positioning of UI layout. If I add a sytle:
<div ui-layout style="position:relative; height:500px">.
UI layout will not overlap with navbar anymore.
However, another issue arises, if the screen size changes, I have to manually change the height property of style.
So I am wondering whether there is any easy way to handle this.
Thanks
Derek
maybe it's too late, but i have the same problem and this is my solution :
simply add a fake div with size and max-size with value of your navbar's height to your ui-layout and make your navbar fix on top !
<nav class="navbar navbar-default navbar-fixed-top">
<div ui-layout>
<div ui-layout-container size="40px" max-size="40px" style="border-style: solid;">
<h1>fake</h1></div>
<div ui-layout-container style="border-style: solid;">
<h1>top</h1></div>
<div ui-layout-container>
<div ui-layout="{flow : 'column'}">
<div ui-layout-container style="border-style: solid;">
<h1>left</h1></div>
<div ui-layout-container style="border-style: solid;">
<h1>right</h1></div>
</div>
</div>
<div ui-layout-container style="border-style: solid;">
<h1>bottom</h1></div>
this is your plunker updated
You may wrap your UI-Layout to container with styles to prevent overlap:
.wrap {
position: absolute;
top: 50px;
left:0;
bottom:0;
right:0;
}
http://plnkr.co/edit/nRW2qbiwadyO1ICdgbQq
My app is running Cordova with AngularJS routing. I need the InAppBrowser plugin to view pdfs. However, since ngroute calls an html on a route change InAppBrowser is called.
I only need it to run on button click not everytime.
-- edit --
When I have the Cordova InAppBrowser plugin installed I get a white screen and a message regarding a white list issue regarding my inital route "index.html":
$routeProvider
.when('/', { //load home at start
controller: 'HomeController as homeSlides',
templateUrl: 'content/home.html',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
var dl = document.getElementById('door-left');
var dr = document.getElementById('door-right');
dl.classList.remove('open');
dr.classList.remove('open');
return delay.promise;
}
}
})
If I uninstall the plugin the issue is resolved.
-- edit --
This is the error I'm getting:
HTML1300: Navigation occurred.
[object Object]
APPHOST9623: The app couldn’t resolve ms-appx://25052ninjadrew.nanosales/www/[object Object] because of this error: RESOURCE_NOT_FOUND.
APPHOST9613: The app couldn’t navigate to ms-appx://25052ninjadrew.nanosales/www/[object Object] because of this error: 80004005.
new transaction is waiting for open operation
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".
[object Object] (1,1)
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
index.html
-- edit --
For client reasons I can't show too much of my html but...
<!DOCTYPE html>
<html ng-app="nanoApp" class="test">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<script src="js/winstore-jscompat.js"></script>
<script src="js/min/iscroll-min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/ngroute.min.js"></script>
<script src="js/angular-sanitize.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/database.js"></script>
<script src="js/angular-script.js"></script>
</head>
<body class="{{bodyclass}}">
<div id="door-left" style="background-image:url('img/trans-left.png');" class="loading door-left" ></div>
<div id="door-right"style="background-image:url('img/trans-right.png');" class="loading door-right" ></div>
<div id="nav">
<ul>
<li><span id="menu-cls" class="ion-close-round"></span></li>
<li><div class="ion-grid"></div>Home</li>
<li><div class="ion-grid"></div>Products</li>
<li><div class="ion-grid"></div>Installations</li>
<li><div class="ion-grid"></div>Videos</li>
<li><div class="ion-grid"></div>Favorites</li>
<li><div class="ion-grid"></div>Marketing Materials</li>
</ul>
</div>
<div id="head">
<div id="left-head">
<div id="menu-btn"></div>
<img src="img/header-left-x2.png" />
<div class="filler"></div>
</div>
<div id="middle-head">
<a style="display:block;" href="#/"><div id="logo"></div></a>
</div>
<div id="right-head">
<img src="img/header-right-x2.png" />
</div>
<div class="swipe-indicator"><span class="ion-chevron-left three"></span><span class="ion-chevron-left two"></span><span class="ion-chevron-left one"></span> Swipe <span class="ion-chevron-right one"></span><span class="ion-chevron-right two"></span><span class="ion-chevron-right three"></span></div>
</div>
<div id="content" class="scroller" ng-view>
</div>
<div id="footer">
<ul id="footer-btns">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="filler"></div>
<img src="img/bottom-bar-x2.png" class="bottom-bar" />
</div>
<!-- gallery popup -->
<div id="gallery-container" ng-show="openGallery">
<div class="ion-close-round close-gallery" ng-click="closeGallery()"></div>
<div id="left-arrow" class="arrow" ng-click="prevSlide()" ng-show="galleryCount > 1"></div>
<div id="slide-container">
<div id="slides">
<div class="slide" ng-repeat="slide in gallery" ng-switch on="galleryType" video-setup>
<!-- image template-->
<img ng-src="{{slide.file}}" ng-switch-when="image" />
<!-- video template-->
<video class="video" style="width:845px;height:635px;" controls autoplay ng-switch-when="video">
<source ng-src="{{slide.file}}" type='video/mp4' />
</video>
</div>
</div>
</div>
<div id="slide-marker-container" ng-show="galleryCount > 1">
<ul id="slide-markers">
<li ng-repeat="marker in galleryMarkers(galleryCount) track by $index" marker-setup>
<div ng-click="scrollToSlide({{$index}})"></div>
</li>
</ul>
</div>
<div id="right-arrow" class="arrow" ng-click="nextSlide()" ng-show="galleryCount > 1"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/stellar.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
home.html:
<div id="home" set-iscroll home-setup class="container paralax">
<a href="#/productslist/0" class="section">
<div style="background-image:url('img/home/slim-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/slim-title.png');" class="element layer1" data-stellar-ratio="1.3"></div>
<div id="slim-holt-top" class="indicator"><div style="background-image:url('img/home/slim-holt-top.png');" class="element title" data-stellar-ratio="1.3"></div></div>
<div id="slim-lv-top" class="indicator"><div style="background-image:url('img/home/slim-lv-top.png');" class="element layer2" data-stellar-ratio="1.7" data-stellar-ratio="2"></div></div>
<div id="slim-mel-top" class="indicator"><div style="background-image:url('img/home/slim-mel-top.png');" class="element layer3" data-stellar-ratio="1.3"></div></div>
<div id="slim-avyve-top" class="indicator"><div style="background-image:url('img/home/slim-avyve-top.png');" class="element layer4" data-stellar-ratio="1.2"></div></div>
</a>
<a href="#/productslist/1" class="section">
<div style="background-image:url('img/home/curve-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/curve-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="curve-aig-top" class="indicator"><div style="background-image:url('img/home/curve-aig-top.png');" class="element layer1" data-stellar-ratio="1.7"></div></div>
<div id="curve-illy-top" class="indicator"><div style="background-image:url('img/home/curve-illy-top.png');" class="element layer2" data-stellar-ratio="1.5" data-stellar-ratio="2"></div></div>
<div id="curve-minn-top" class="indicator"><div style="background-image:url('img/home/curve-minn-top.png');" class="element layer3" data-stellar-ratio="1.2"></div></div>
</a>
<a href="#/productslist/2" class="section">
<div style="background-image:url('img/home/clear-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/clear-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="clear-top" class="indicator"><div style="background-image:url('img/home/clear-top.png');" class="element layer1" data-stellar-ratio="1.5"></div></div>
</a>
<a href="#/productslist/3" class="section">
<div style="background-image:url('img/home/wrap-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/wrap-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="wrap-eaton-top" class="indicator"><div style="background-image:url('img/home/wrap-eaton-top.png');" class="element layer2" data-stellar-ratio="1.2"></div></div>
<div id="wrap-gte-top" class="indicator"><div style="background-image:url('img/home/wrap-gte-top.png');" class="element layer3" data-stellar-ratio="1.5"></div></div>
</a>
<a href="#/productslist/4" class="section">
<div style="background-image:url('img/home/slimengage-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/slimengage-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="slimengage-screen" class="indicator"><div style="background-image:url('img/home/slimengage-screen.png');" class="element layer1" data-stellar-ratio="1.1"></div></div>
<div id="slimengage-blueppl" class="indicator"><div style="background-image:url('img/home/slimengage-blueppl.png');" class="element layer2" data-stellar-ratio="1"></div></div>
<div id="slimengage-colorppl" class="indicator"><div style="background-image:url('img/home/slimengage-colorppl.png');" class="element layer3" data-stellar-ratio="1.5"></div></div>
</a>
</div>
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.