No matter what I do, I still can't get my static navbar to stick itself to the bottom of the page. The following code has gotten it to do so in mobile view. However, that's it. When you view the page normally, the footer is near the middle of the page.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<meta charset="utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "container">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li><a href = "#" >1</a></li>
<li><a href = "#" >2</a></li>
<li><a href = "#" >3</a></li>
</ul>
</div>
</div>
</div>
<div class = "container">
<div class = "jumbotron text-center">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum</p>
<a class ="btn btn-default">Lorem ipsum</a>
<a class = "btn btn-info">Lorem ipsum</a>
</div>
</div>
<div class = "container">
<div class = "row">
<div class = "col-md-3">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum</p>
Lorem ipsum
</div>
<div class = "col-md-3">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum</p>
Lorem ipsum
</div>
<div class = "col-md-3">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum</p>
Lorem ipsum
</div>
<div class = "col-md-3">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum</p>
Lorem ipsum
</div>
</div>
</div>
<div class = "navbar navbar-default navbar-static-bottom">
<div class = "container">
<p class = "navbar-text pull-daft">FOOTIE</p>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
CSS:
.body {
margin-bottom:80px;
}
body {
padding-top: 76px;
}
#media screen and (max-width: 768px) {
body {
padding-top: 71px;
}
}
.navbar-default {
background-color: #bdffae;
border-color: #bdffae;
height: 28px;
}
.navbar-static-bottom {
border-radius: 0;
z-index: 1000;
border-width: 0 0 1px;
padding-right: 0;
padding-left: 0;
margin: 20px 0 0; /* NOTE */
}
Increasing the margin from 20px does cause the the footer to move down, however, after 95px or so, it "maxes out" in that exceeding 95px, results in a scroll bar to appear. Not to mention, at 95px there still is a slight gap between the footer and the bottom of the page, which is irritating. What's also worth noting when increasing the margin, is that if content is added or taken away from the page, everything gets screwed up, so if anything, I need a long-term solution which will permanently glue the footer to the bottom of the page without having it fixed in the browser.
Someone please help. Thanks in advance.
Wrap your page in a custom wrapper (Yikes!! To Bootstrap?!? Yes, don't worry, it works and everything stays responsive), set the body and html to 100% height (WHAT!!? Trust me), add a custom class to your footer, and then bounce some inside content around just a little.
Here's an example with some of your html: http://www.bootply.com/iphqanCGV9
And here is the gist of it:
CSS:
html,
body {
height:100%;
}
.custom-wrapper {
min-height:100%;
position:relative;
}
.pad-container{
padding-top:80px; /* HEIGHT OF THE HEADER + BREATHING ROOM */
padding-bottom:80px; /* HEIGHT OF THE FOOTER + BREATHING ROOM */
}
.static-footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:60px;
background:#ccc;
}
HTML:
<div class="custom-wrapper"> <!-- CUSTOM WRAPPER -->
<div class = "navbar navbar-inverse navbar-fixed-top">
...
<div class="container pad-container"><!-- ROOM TO BREATHE -->
<div class = "jumbotron text-center">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum</p>
...
<div class="footer static-footer"> <!-- HI THERE -->
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</div><!-- END CUSTOM WRAPPER -->
Adapted from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Related
i have a tabs directive
app.directive('tabStructure', function () {
return {
restrict: 'E',
templateUrl: function (tElement, tAttrs) {
return tAttrs.templateUrl;
}
};
});
and in ui i have written a tab structure which calls different page
<div id="Admin" class="tab-pane {{toolbars.tabs.NewPage1}}">
<div class="tab-content">
<tab-structure template-url="/page/NewPage1"></tab-structure>
</div>
</div>
<div id="Admin" class="tab-pane {{toolbars.tabs.NewPage2}}">
<div class="ibox-content" style="padding: 10px 5px 0px 5px !important;border: 1px solid #E8ECEF;">
<tab-structure template-url="/page/NewPage2"></tab-structure>
</div>
</div>
<div id="Admin" class="tab-pane {{toolbars.tabs.NewPage3}}">
<div class="ibox-content" style="padding: 10px 5px 0px 5px !important;border: 1px solid #E8ECEF;">
<tab-structure template-url="/page/NewPage3"></tab-structure>
</div>
</div>
But the problem is that all the page which is inside the tab loads when the main page loads i want the pages to only load when i click the tab
how to do that
Set up a variable to handle the selected tab and use ng-if to load a tab. Multiple ways to do this of course. Here is one way.
// in controller
$scope.selectedTab = null;
// in view
// set up ngIf and ngClick for each tab respectively
<div class="tab-content" ng-click=“selectedTab = ‘tab1’”>
<tab-structure ng-if=“selectedTab === ‘tab1’” template-url="/page/NewPage1"></tab-structure>
</div>
I have a jsfiddle here - https://jsfiddle.net/r6Lff67n/
There is no Angular here but just an example of the structure.
I have an outer div with a max-height inside of which there is content that could scroll if the content is bigger than the surrounding div.
My question is is there a simple way in Angular to add a class if the scroll bars are used so I can style it different if it will scroll
<div class="scroll-outer">
<div class="scroll-inner">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
Finding whether a DOM object has scrollbar or not can be easily done by comparing scrollHeight with clientHeight of an element.
So, I pulled up a directive that can compare these heights and add a class to the element with which it is bound to. Something like:
var myApp = angular.module('myApp', []);
myApp.directive("testDirective", function() {
return {
link: function(scope, elem, attrs) {
if (elem[0].clientHeight < elem[0].scrollHeight) {
// scrollbar available
// adding a custom class with sample CSS
elem[0].classList += " mytest"
}
}
}
})
Also, custom class name(s) can be externalized using directive's attrs.
Here's the working runnable code snippet and updated fiddle.
Notice that one of the two lists of blocks has mytest class's CSS (border) based on whether it has scrollbar or not. You can add your custom CSS there (in mytest class)
var myApp = angular.module('myApp', []);
myApp.directive("testDirective", function() {
return {
link: function(scope, elem, attrs) {
if (elem[0].clientHeight < elem[0].scrollHeight) {
// scrollbar available
// adding a custom class with sample CSS
elem[0].classList += " mytest"
}
}
}
})
.block {
background: red;
height: 50px;
margin-bottom: 2px;
}
.scroll-outer {
overflow-y: auto;
max-height: 200px;
width: 250px;
display: inline-block
}
.mytest {
border: 3px solid black /* change this as you wish */
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div class="scroll-outer" test-directive>
<div class="scroll-inner">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="scroll-outer" test-directive>
<div class="scroll-inner">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</body>
I need to add and remove a class to an element on mouseover. The method below adds and removes classes from all elements with classname .blogOverlay and .newOverlay.
I need it to add/remove the class ONLY on the element that is being hovered over.
JS:
$scope.showReadMore = function(){
$('.blogOverlay').addClass("hidden");
$('.newOverlay').removeClass('hidden');
}
$scope.hideReadmore = function(){
$('.blogOverlay').removeClass("hidden");
$('.newOverlay').addClass('hidden');
}
HTML:
<div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" >
<a ng-click="goToPostDetail(post, $index)" >
<img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt="" />
<div class="blogOverlay" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()">
<h2>{{ post.fields.title }}</h2>
</div>
<div class="newOverlay hidden" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()">
<h2>{{ post.fields.title }}</h2>
<h3>{{post.fields.date}}</h3>
<a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a>
</div>
</a>
</div>
There is no need to use jquery. Just use ng-class and add a condition to show or hide that class to your post. Se snipped how content is shown or hidden with the hidden class according to property post.readMore in the controller
angular.module('myapp', [])
.controller('foo', function($scope) {
$scope.post = {
readMore: true,
fields: {
title: 'The post title',
date: new Date()
}
}
$scope.showReadMore = function(post) {
post.readMore = true;
}
$scope.hideReadmore = function(post) {
post.readMore = false;
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body ng-app="myapp">
<div ng-controller="foo">
<div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" style="max-width: 400px">
<a ng-click="goToPostDetail(post, $index)">
<img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt="" />
<div class="blogOverlay" ng-class="{'hidden' : !post.readMore}" ng-mouseover="showReadMore(post)" ng-mouseleave="hideReadmore(post)">
<h2>{{ post.fields.title }}</h2>
</div>
<div class="newOverlay" ng-class="{'hidden' : post.readMore}" ng-mouseleave="showReadMore(post)" ng-mouseover="hideReadmore(post)">
<h2>{{ post.fields.title }}</h2>
<h3>{{post.fields.date}}</h3>
<a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a>
</div>
</a>
</div>
</div>
</body>
</html>
give class name something like class="blogOverlay_{{$index}}" and then pass $index to JavaScript like showReadMore($index)
This way Your class names are unique and they will change for only index you want to change
You need not complicate much Check out the below css and live plunker
.blue{
background-color:blue;
}
.red{
background-color:red;
}
.blue:hover
{
background-color:yellow;
visibility:hidden
}
PLUNKER DEMO
Update 1 : Hides and shows
I'm new to this please bear with me
I'm trying to achieve div toggle and button class added when button clicked (active), i looked every where i been trying to do this for over 6 hours now :(.
here is my NAV div
<div id="sidebar-wrapper-button" ng-controller="Main">
<ul class="nav nav-pills">
<li ng-click="isInfo = !isInfo" ng-class="{'active':isInfo}"></li>
<li ng-click="isSetting = !isSetting" ng-class="{'active':isSetting}"></li>
</ul>
</div>
Content Div
<div ng-class="{'ng-show':isSetting,'ng-hide':!isSetting,'ng-hide':isInfo,}">
<h1>Setting</h1>
</div>
<div ng-class="{'ng-show':isInfo,'ng-hide':!isInfo,'ng-hide':isSetting}">
<h1>Info</h1>
</div>
app.js
//toggle Setting
app.controller('Main', function($scope) {
$scope.isSetting = false;
});
//toggle Info
app.controller('Main', function($scope) {
$scope.isInfo = false;
});
Thank you.
If I understood your request right, here's what I would do:
var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
$scope.tabActive = null; // here insert 1, 2 or null depending on what the initial selection should be
});
li a{text-decoration: none;}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div ng-controller="Main">
<ul class="nav nav-pills">
<li ng-click="tabActive = 1" ng-class="{'active':tabActive == 1}">
</li>
<li ng-click="tabActive = 2" ng-class="{'active':tabActive == 2}">
</li>
</ul>
<div ng-show="tabActive == 1">
<h1>Info</h1>
</div>
<div ng-show="tabActive == 2">
<h1>Setting</h1>
</div>
</div>
</div>
Simpler way is to use angular expression {{}} to output appropriate string:
<h1>{{isSetting ? 'Setting' : 'Info'}}</h1>
Requires less markup and less class change logic code and ultimately less scope watches
I am new to both MVC and AngularJS.
I am having a layout page and in layout page partial view which is having dropdown and render body.
On selection change of any value content will change of view in render body.
I am using MVC #Html.DropDownList Since my data List is in session.
Now I want to change view data on change of dropdown values I am doing it with Angular.
Below is my code of partial view.
#Html.DropDownList("LoanAccountTypeModels", new SelectList(((MyModel.UserDetailsModel)Session["UD"]).LoanAccountTypeModels), new { style = "height: 30px; width:250px;", ng_change = "UpdateChildViews()", ng_init="LoanAccountTypeModel = options[0]" , ng_model = "LoanAccountTypeModel" })
my _Layout page is
<!DOCTYPE html>
<html lang="en">
<head>
<script src="~/Scripts/angular.js"></script>
#Styles.Render("~/Content/css")
#Styles.Render("~/css/_Layout")
#Scripts.Render("~/js/jquery.js")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/js/_Layout.js")
</head>
<body ng-app="ClientPortalGlobalNGApp">
<div id="wrapper" ng-controller="ClientPortalGlobalNGController">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div> <a class="navbar-brand" href="index.html"><img src="../assets/img/axis_bank_logo.png" style="width:65%;"> </a></div>
</div>
#Html.Partial("_HeaderPartial")
</nav>
<h3>{{HomePageModel.TotalSanctionedAmt}}</h3>
#RenderBody();
</div>
</body>
and my _layout.js page is
function ClientPortalGlobalNGController($scope, $http) {
$scope.UpdateChildViews = function (ddlAccountType) {
if ($scope.CurrentSelected == "Home") {
$scope.HomePageModel = { TotalSanctionedAmt: "10", CustomerDetail: { PrimaryHolderName: "X" } };
}
}
}
var app = angular.module("ClientPortalGlobalNGApp", []);
app.controller("ClientPortalGlobalNGController", ClientPortalGlobalNGController);
I have tried $scope.form = { type: $scope.typeOptions[0].value }; in controller then it is selecting default but it is giving TypeError: Cannot read property '0' of undefined and then angular code is not working and rendering as {{HomePageModel.TotalSanctionedAmt}} in final HTML instead of blank value.
Please suggest. I have been wandering on Stack overflow for 2 days. but no help.
Also please suggest me the best way to do it.