i'm developing an Angularjs application and i'd like to make it multiplatform so to do that i'm trying to use Bootsrap, i found a template i'd like to follow (https://blackrockdigital.github.io/startbootstrap-business-frontpage/#) the problem is that i want to transform the navbar when the screen size is smaller.
but i don't know what i'm missing, because it does correctly the transformation to a button but then, the button is not clickable so the options 'inicio', 'servicios' and 'contacto' are unreachable.
Any help would be awesome, here you have the css and html files:
HTML
<!DOCTYPE html>
<html ng-app="home">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HOME</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.js"></script>
<link href="/web/resources/css/business-frontpage.css" rel="stylesheet" />
<script src="/web/resources/js/home/home-service.js"></script>
<script src="/web/resources/js/home/home-controller.js"></script>
<script src="/web/resources/js/home/home-app.js"></script>
<script src="/web/resources/lib/translate/angular-translate.js"></script>
<script src="/web/resources/js/generic/urlLanguageStorage.js"></script>
<script src="/web/resources/lib/translate/angular-translate-loader-url.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a ui-sref="home" translate>navegacion.inicio</a>
</li>
<li>
<a ui-sref="servicios" translate>navegacion.servicios</a>
</li>
<li>
<a ui-sref="contacto" translate>navegacion.contacto</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Image Background Page Header -->
<!-- Note: The background image is set within the business-casual.css file. -->
<header class="business-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1><a class="tagline" ui-sref="home" translate>titulo.alergenos</a></h1>
</div>
</div>
</div>
</header>
<div class="container">
<div ui-view></div>
</div>
<div class="container">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
</body>
</html>
CSS
/*
* Start Bootstrap - Business Frontpage (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
.business-header {
height: 400px;
background: url('http://placehold.it/1920x400') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
/* Customize the text color and shadow color and to optimize text legibility. */
.tagline {
text-shadow: 0 0 10px #000;
color: #fff;
}
.img-center {
margin: 0 auto;
}
footer {
margin: 50px 0;
}
EDIT
I created a Jsfidlle https://jsfiddle.net/txominsirera/v8ups1hc/
Both jQuery and Bootstrap.js should be included with jQuery placed before Bootstrap.js.
Note: The version of jQuery that can be used will vary depending on the version of Bootstrap being used (or vice versa).
Bootstrap Version 4
JS Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins. Place the following <script>s near the end of your pages,
right before the closing </body> tag, to enable them. jQuery must come
first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
For Release v4.0.0-beta.2 package.json
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.12.7"
},
Bootstrap Version 3
jQuery required
Please note that all JavaScript plugins require jQuery
to be included, as shown in the starter template. Consult our
bower.json to see which versions of jQuery are supported.
For Release v3.3.7 Changelog & bower.json
"dependencies": {
"jquery": "1.9.1 - 3"
}
For v3.3.6 bower.json
"dependencies": {
"jquery": ">= 1.9.1 - 2"
}
For v3.3.0 - v3.3.5 bower.json
"dependencies": {
"jquery": ">= 1.9.1"
}
This does not account for the release of jQuery v3.0
For v3.0.0rc1 - v3.2.0 bower.json
"dependencies": {
"jquery": ">= 1.9.0"
}
This does not account for the release of jQuery v3.0
Related
I have gone through many answers, but nothing worked for me. I have a simple .html file and ionic content just does not scroll.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/platformOverrides.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/lodash.min.js"></script>
<script src="js/app.js"></script>
<script src="js/appController.js"></script>
</head>
<body ng-app="app" ng-controller="appController">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-view>
<ion-content scroll="true">
<div class="scroll">
<a ng-repeat="item in items" class="item" href="#">
<h2>{{item.name}}</h2>
</a>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
Above, $scope.items is being fetched from some webservice. Everything renders fine but it just does not scroll.
I am using Visual studio 'Ionic Blank Template' if that matters. I have configured Cordova correctly and rest all solutions just work fine.
Remove the class="scroll" from the div container, scroll="true" from ion-content and add overflow-scroll="true" . The required classes will be added by ionic on the elements. You don't need to add that explicitly
<ion-view>
<ion-content overflow-scroll="true">
<div class="list">
<a ng-repeat="item in items" class="item" href="#">
<h2>{{item.name}}</h2>
</a>
</div>
</ion-content>
</ion-view>
Update: The codepen showing the scrollable list in chrome simulator: http://codepen.io/addi90/full/RaOegM/
In ionic v1.3.3 or later, scroll on is not working. this can be solved by placing overflow-scroll="false" in or defining as
<ion-content overflow-scroll="false">
OR
<ion-scroll scrollX="true" scrollY="true" style="margin:17rem; position:fixed; display:inline; top:0; right:0; bottom:0; left:0; white-space: nowrap;">
will help.
Sandy to hide the scrollbar try to add ::-webkit-scrollbar {display:none;} to your css file. It worked for me.
According to the official provided examples:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Full Width, Header, Menu, Footer</title>
<link rel="stylesheet" href="../bower_components/angular-material/angular-material.css">
</head>
<body layout="column" layout-fill>
<header>Header</header>
<div flex layout="row" layout-phone="column">
<aside flex-sm="33" flex-md="20">
Menu <br>[flex-sm="33"][flex-md="20"]
</aside>
<main flex>Main [flex]</main>
</div>
<footer>Footer</footer>
</body>
</html>
just use css as angular-material.css,but display wrong!
Make sure you are using the latest version as the docs only show the latest versions docs. So right now your probably seeing the docs for 0.6.0rc1 which has several beaking changes/renamings from 0.5.1 refer to the changelog for fixes.
If you want a full width header with a side menu and a footer here is the correct markup for 0.6.0rc1
<div layout="column" layout-fill>
<div layout="row">
<span>Your header</span>
</div>
<div layout="row" flex>
<div layout="column" flex="33">
Sidebar
</div>
<div flex="66">
Main content
</div>
</div>
<div layout="row">
The footer!
</div>
</div>
This is just a basic layout you would probably replace the header with md-tollbar and the sidemenu with md-sidenav. But this should help you along.
Also if you want to use 0.5.1 still just replace row with horizontal and column with vertical
Morning Folks,
I've been using angularjs for the last few months, and now want to start branching out into the ui router frame so I can start building more fluid and functional apps.
Could anyone point me in the right direction of some good tutorials. I've looked on google for some but alas most of them are some what confusing.
If there was a step by step basic guide out there it would be great.
Here is my html:
<DOCTYPE! html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--<link rel="stylesheet" href="\css\custom.css">-->
</head>
<body ng-app="testApp">
<section class="row">
<section class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<section class="container">
<section class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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><!--End on the menu button-->
<a class="navbar-brand" ui-sref="#">Test APP</a>
</section><!--End of Nav Header-->
<section class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">FX News</a></li>
<li><a ui-sref="contact">Test News</a></li>
<li><a ui-sref="about">Contact Us</a></li>
<li><a ui-sref="contact">Meet Test</a></li>
<li><a ui-sref="about">Logout</a></li>
</ul>
</section><!--End of the nav-collapse menu-->
</section><!--End of the container section-->
</section><!--End of the navMenu section-->
</section><!--End of the Nav row-->
<section class="row" style="padding-top:2em;"><!--Main content area for the app-->
<section class="col-xs-12">
<section ui-view></section>
</section>
</section><!--End of the main content are of the app-->
</body>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script><!--jquery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script><!--bootstrap js-->
<script src="http://code.angularjs.org/1.2.13/angular.js" type="text/javascript"></script><!--angular js-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js" type="text/javascript"></script><!--UI Route-->
<script src="js/app.js" type="text/javascript"></script><!--Custom js for the app-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js" type="text/javascript"></script><!--angular animation-->
</html>
This is the app.js:
// app.js
var testApp = angular.module('testApp', ['ui.test']);
testApp.config(function($stateProvider, $urltestProvider) {
$urltestProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});
And this is my partial-home.html:
<section class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
</section>
Thanks in advance,
Noob Angular guy.
Pluralsight has some good tutorials for angularJs.
I learnt it from here-
PluralSight
I think so the 4th module has Routing video tutorials.
this article from scotch.io is what I had used as starting point for me.
the best way to learn is start trying it out... so the below code should get you started :
// app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
// we'll get to this in a bit
});
});
I'm using Angular Snap module but I can't make it only use a section of my page. For example I want yo leave header and footer intact when "snaping".
The follow example code describe my issue http://plnkr.co/edit/qOilojtXpCcBm99ynuzQ?p=preview
Code
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="angular-snap.css" type="text/css" />
<script src="snap.js" type="text/javascript" charset="utf-8"></script>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js" data-semver="1.2.4"></script>
<script src="angular-snap.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<!-- Header Image should here -->
<header>
<h1>Header</h1>
</header>
<!-- Menu Bar goes here -->
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li>item 1
</li>
<li class="active"><a class="test" href="#">This is the one</a>
<ul class="submenu">
<li>Submenu item 1
</li>
<li>Submenu item 2
</li>
</ul>
</li>
<li>menu item 3
</li>
<li>menu item 4
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
<!-- Both Snap-drawer and Snap-content should go below the Menu bar -->
<snap-drawer>
<button snap-toggle>Another Toggle Button</button>
</snap-drawer>
<snap-content snap-options="{tapToClose:false}">
<button snap-toggle>Toggle</button>
</snap-content>
</body>
</html>
Thanks
Plugin creator gives me answer for this on https://github.com/jtrussell/angular-snap.js/issues/75
I copy answer here for Archive purpose:
It's doable, here's an example with a fixed footer from a previous
thread, Snap still applies to the whole page we're just showing
content over it:
http://plnkr.co/edit/Vdz0AZ3tnlfErERmjcrY?p=preview
You can change it to a fixed header by updating the nav element like
so:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background:red">
<div class="container">
Bottom container stuff!
</div>
</nav>
Just fair warning there are some issues with using fixed position
elements, just something to keep in mind.
The snap-content directive should expand to fill it's container, so
you may also be able to get something working by wrapping that element
in a non-static positioned element. Here's a rough demo.
None of the carousel plugins I use are working properly. Usually I need to resize my browser before everything is displayed properly. This is not practical because mine is a mobile app.
I have nailed down the problem to positioning. The transition between pages requires the positioning to be Absolute (see #page > div). However, the carousel requires the Relative positioning.
I tried adding an extra <div></div> around the carousel and positioning that to be relative, but it isn't doing the trick. Anyone know how to fix this...
Transition.css:
#page {
position: relative;
}
#page > div {
display:none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#page > div.current {
display: block;
}
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="css/transition.css?v=1">
<link rel="stylesheet" href="css/elastislide.css?v=1">
</head>
<body>
<div id="page">
<div id="pageLogin" class="pageLogin current">
<span>Sign in</span>
</div>
<div id="pageSearch" class="pageSearch">
<!-- Elastislide Carousel -->
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel">
<ul>
<li><img src="images/small/1.jpg" alt="image01" /></li>
<li><img src="images/small/2.jpg" alt="image02" /></li>
<li><img src="images/small/3.jpg" alt="image03" /></li>
<li><img src="images/small/4.jpg" alt="image04" /></li>
<li><img src="images/small/5.jpg" alt="image05" /></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel -->
</div> <!--! end #pageSearch-->
</div><!--end #Page-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
</body>
</html>
I found the answer to the problem. Its actually the display:none and display:block, that was applied to the pages.
The display block caused the carousel's images to display block style instead of side by side.
Instead of display:none, I use visibility:hidden, height: 0, overflow: hidden. Then I just reverse it when the page displays.
I also had and solved this problem.
I used some jQuery to apply the css once the document was loaded.
For example:
jQuery(document).ready(function($){
$('.more-wrapper').css({"display": "block", "position": "absolute", "left": "50%", "z-index": "100", "bottom": "40px", "-webkit-transform": "translate(-50%,0)", "-ms-transform": "translate(-50%,0)", "-o-transform": "translate(-50%,0)", "transform": "translate(-50%,0)"});
});