This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 4 years ago.
I have tried to keep the footer below some content with various methods, but it seems that the solutions don't behave as expected with AngularJS's dynamic content.
When the page is mostly blank, I want the footer to be at the bottom of the page
When the page expands (or just big in general), I want the footer to be pushed below the content (not sticky to the page itself)
The same logic should follow when I redirect the page
Here is a small demo that I made to illustrate my attempt. I tried using position: absolute; for my footer, but I don't know how to change that (or use alternatives) once the content expands.
Plunker
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.
state("main", {
url: "/",
templateUrl: "main.html",
controller: "mainCtrl"
}).
state("small", {
url: "/other/small",
templateUrl: "other_small.html",
controller: "smallCtrl"
}).
state("big", {
url: "/other/big",
templateUrl: "other_big.html",
controller: "bigCtrl"
})
$urlRouterProvider.otherwise('/');
});
app.controller('mainCtrl', function($scope) {
$scope.small_text = "aaa";
$scope.big_text = new Array(100).fill("AAA");
});
app.controller('smallCtrl', function($scope) {
$scope.small_text = "aaa";
});
app.controller('bigCtrl', function($scope) {
$scope.big_text = new Array(100).fill("AAA");
});
body {
height: 100%;
margin: 0;
}
footer {
background-color: #999999;
color: #F1F1F1;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
}
.main-view {
background-color: #F1F1F1;
}
<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"></script>
<body>
<div>
<header>
<h4>Responsive header</h4>
<a ui-sref="main">Main page</a>
<a ui-sref="small">Small page</a>
<a ui-sref="big">Big page</a>
<hr>
</header>
<div class="main-view" ui-view></div>
<footer class="footer">
<h4>
<span>demo website</span> 2018 ©
</h4>
</footer>
</div>
<!-- Assume: separate files -->
<script type="text/ng-template" id="main.html">
{{::small_text}}
<div>
<button ng-click="show_big_text=!show_big_text">
{{show_big_text ? 'Hide' : 'Show'}} big text
</button>
<div ng-show="show_big_text" ng-repeat="text in ::big_text track by $index">
{{text}}
</div>
</div>
</script>
<script type="text/ng-template" id="other_small.html">
{{::small_text}}
</script>
<script type="text/ng-template" id="other_big.html">
<div ng-repeat="text in ::big_text track by $index">
{{text}}
</div>
</script>
</body>
</html>
There is no need to use position: absolute. Just give a margin-top and place the footer at the end of your DOM.
Then the footer will automatically start wherever your body content ends
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.
state("main", {
url: "/",
templateUrl: "main.html",
controller: "mainCtrl"
}).
state("small", {
url: "/other/small",
templateUrl: "other_small.html",
controller: "smallCtrl"
}).
state("big", {
url: "/other/big",
templateUrl: "other_big.html",
controller: "bigCtrl"
})
$urlRouterProvider.otherwise('/');
});
app.controller('mainCtrl', function($scope) {
$scope.small_text = "aaa";
$scope.big_text = new Array(100).fill("AAA");
});
app.controller('smallCtrl', function($scope) {
$scope.small_text = "aaa";
});
app.controller('bigCtrl', function($scope) {
$scope.big_text = new Array(100).fill("AAA");
});
body {
height: 100%;
margin: 0;
}
footer {
background-color: #999999;
color: #F1F1F1;
text-align: center;
}
.footer {
margin-top: 20px;
width: 100%;
}
.main-view {
background-color: #F1F1F1;
}
<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"></script>
<body>
<div>
<header>
<h4>Responsive header</h4>
<a ui-sref="main">Main page</a>
<a ui-sref="small">Small page</a>
<a ui-sref="big">Big page</a>
<hr>
</header>
<div class="main-view" ui-view></div>
<footer class="footer">
<h4>
<span>demo website</span> 2018 ©
</h4>
</footer>
</div>
<!-- Assume: separate files -->
<script type="text/ng-template" id="main.html">
{{::small_text}}
<div>
<button ng-click="show_big_text=!show_big_text">
{{show_big_text ? 'Hide' : 'Show'}} big text
</button>
<div ng-show="show_big_text" ng-repeat="text in ::big_text track by $index">
{{text}}
</div>
</div>
</script>
<script type="text/ng-template" id="other_small.html">
{{::small_text}}
</script>
<script type="text/ng-template" id="other_big.html">
<div ng-repeat="text in ::big_text track by $index">
{{text}}
</div>
</script>
</body>
</html>
You can try something like this:
<div style="min-height: 100vh;position: relative;padding-bottom: 123px">
... // content
<div style="position: absolute; bottom: 0; height: 123px">
</div>
</div>
Related
I have a working preloader that shows a lottie animation when the page is loaded. But I want it to show up only one per session. So that it doesn't show up every time someone opens or loads the page.
Current code:
<style>
.hidden {
display: none;
}
.visuallyhidden {
opacity: 0;
}
</style>
<div id="preloader" class="preloader-container">
<div class="animation">
<div class="player">
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
<lottie-player src="https://lottie.host/9fd6c66b-4984-4b99-a7d6-b44856d4c4de/1ZusfoGYH2.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
</div>
<a id="skip">Skip</a>
</div>
</div>
<script>
let box = document.querySelector("#preloader"),
btn = document.querySelector("#skip");
function fadeOut() {
box.classList.add("visuallyhidden");
box.addEventListener(
"transitionend",
function (e) {
box.classList.add("hidden");
},
{
capture: false,
once: true,
passive: false
}
);
}
btn.addEventListener("click", fadeOut, false);
setTimeout(fadeOut, 6000);
</script>
By default <b-modal> shows on top of the page. When attribute centered is added to the tag. It is centered.
However, I would like to show the modal with a certain amount of gap under the top of the page.
The Modal is shown when the home page is opened.
AppModal.vue
<template>
<b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close>
//...
</b-modal>
</template>
<script>
export default {
data () {
return {
mymodal: ['mymodal']
}
},
methods: {
hideModal () {
this.$refs.thisModalRef.hide()
},
showModal () {
this.$refs.thisModalRef.show()
}
}
}
</script>
<style scoped>
.mymodal > div {
position: absolute;
top: 300px;
right: 100px;
background-color: yellow;
}
</style>
AppHome.vue
<template>
<div>
// omitted
<AppModal ref="modalRef"></AppModal>
</div>
</template>
<script>
import AppModal from './AppModal'
export default {
components: {
AppModal
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
showModal: function () {
this.$refs.modalRef.showModal()
}
},
mounted () {
this.showModal()
}
}
</script>
<style scoped>
// ommitted
</style>
html source related to modal
<div id="__BVID__16___BV_modal_outer_">
<div id="__BVID__16" role="dialog" class="modal fade show d-block mymodal" style="padding-right: 15px;">
<div class="modal-dialog modal-lg">
<div tabindex="-1" role="document" aria-describedby="__BVID__16___BV_modal_body_" class="modal-content">
<!---->
<div id="__BVID__16___BV_modal_body_" class="modal-body">
// ommitted
</div>
<!---->
</div>
</div>
</div>
<div id="__BVID__16___BV_modal_backdrop_" class="modal-backdrop fade show"></div>
</div>
As you can see, mymodal class is correctly applied. But the div .modal-dialog does not have the css properties I give it.
the real css properties found in dev tools
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
I tried adding a custom class to <b-modal> and style it. Nothing worked.
Please help.
If you want to put the modal into the specific position, below is my solutuon:
add specific class to <b-modal> by its props=modal-class
then add your styles into myclass > div
You can look into the github (line#:176), Bootstrap-vue will place one div.modal-content(including header/body/foot) into one div with class="modal-dialog" which is the direct child of root.
That is why above solution use the css selector = .myclass > div.
If you look into the dom tree: the structure of one bootstrap-vue modal will be:
one root div (myclass will be added into here) -> one div with modal-dialog -> one div with modal-content -> header/body/footer
Below is one sample: (I put different background-color for modal-dialog, modal-content.)
app = new Vue({ //not vue, it is Vue
el: "#app",
data: {
myclass: ['myclass']
},
methods: {
showModal: function(){
this.$refs.myModalRef.show()
}
}
})
.myclass > div {
position:absolute !important;
top: -10px !important;
left: -10px !important;
background-color:yellow !important;
}
.myclass > .modal-dialog > .modal-content {
background-color:red !important;
}
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button #click="showModal">
Open Modal
</b-button>
<b-modal ref="myModalRef" :modal-class="myclass" size="lg">
<h2>Test</h2>
</b-modal>
</div>
I use
<b-modal
body-class="modalcart"
ref="addToCart"
id="addToCarModal"
hide-footer
hide-header
>
<b-container class="text-center modal-product-content">
<img class="modal-image" src="~/assets/images/add-to-cart.png" alt=""/>
and:
<style lang="scss" scoped>
/deep/ .modalcart {
font-family: 'poppins-bold';
/deep/ .modal-product-content {
padding: 3rem;
margin: 0 auto !important;
/deep/ .modal-image {
height: 150px;
margin-bottom: 2rem;
}
}
...
}
</style>
and work! thanks
Keep in mind that not work without body-class and /deep/
I use node-sass, vue 3, vue-loader 15
Maybe you could try with something like margin-top: 100px.
I think it's because the #media breakpoint of Bootstrap. Then, in <style> you just override it.
#media (min-width: 576px) {
.modal-dialog {
margin: .5rem auto;
}
}
I am new to AngularJS and I am working on creating fadein animation. I added all the required js files in my my header and element.ng-enter and element.ng-enter-ng-enter.active classes in css file as per documents from AngularJS. When I browse the URL, I dont get fadein effects. Here is my JSFiddle link.
HTML code:
<div ng-app="Dashboard">
<div id="dashboard" ng-controller="dashboardCtrl">
<div class="app-nav">
<button onclick="location.href = '/';">Dashboard</button>
</div>
<br>
<div class="app-nav">
<button onclick="location.href = 'Applications';">Healthchecks</button>
</div>
<br>
<div class="app-nav">
<button>Contact US</button>
</div>
<br>
</div>
</div>
JS Script:
angular.module('Dashboard', ['ngAnimate'])
.controller('dashboardCtrl', function ($scope) {
});
CSS:
#dashboard {
margin-top: 50px;
}
.app-nav {
max-width: 350px;
min-height: 75px !important;
margin: 0 auto;
}
.app-nav button:hover {
background-color: #154995;
}
.app-nav button {
min-width: 350px;
min-height: 75px;
}
button.ng-enter {
transition: 3s linear all;
opacity: 0;
}
button.ng-enter.ng-enter-active {
opacity: 2;
}
Do not mix pure javascript in your html file with angular. You should replace onclick with ng-click because then angular can inject correct class to div and show you animation
index.html
<div ng-app="Dashboard">
<div id="dashboard" ng-controller="dashboardCtrl">
<div class="app-nav">
<button ng-click="functionOne()">Dashboard</button>
</div>
<br>
<div class="app-nav">
<button ng-click="functionTwo()">Healthchecks</button>
</div>
<br>
<div class="app-nav">
<button>Contact US</button>
</div>
<br>
</div>
</div>
controller.js
(function () {
'use strict';
angular
.module('Dashboard')
.controller('dashboardCtrl', dashboardCtrl);
dashboardCtrl.$inject = ['$scope', 'ngAnimate'];
function dashboardCtrl($scope, ngAnimate) {
$scope.functionOne = function () {
// your action
};
$scope.functionTwo = function () {
// your action
};
}
}());
I am using CKEditor 4.5 in classic mode (Iframe) with sharedspace plugin.
ckeditor4 automatically create a div (#cke_mytextarea1) just below each textarea and inside that div, a iframe is created too.
The css for this div is also created automatically.
How do i append a css class to div, using ckeditor API?
I try use contentsCss configuration http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
but the css is applied on iframe and not div
Example:
From this code:
<form id="myform" method="post">
<textarea id="mytextarea1" data-ckenable="true"></textarea>
<textarea id="mytextarea2" data-ckenable="true"></textarea>
<textarea id="mytextarea3" data-ckenable="true"></textarea>
</form>
and after i start ckeditor instances, result in this generated code:
<form id="myform" method="post">
<textarea id="mytextarea1" data-ckenable="true" style="visibility: hidden; display: none;"></textarea>
<!-- i need append css class to this ("#cke_mytextarea1") div using ckeditor API -->
<div id="cke_mytextarea1" class="cke_1 cke cke_reset cke_chrome cke_editor_mytextarea1 cke_ltr cke_browser_webkit"
dir="ltr" lang="pt-br" role="application" aria-labelledby="cke_mytextarea1_arialbl"><span
id="cke_mytextarea1_arialbl" class="cke_voice_label">Editor de Rich Text, mytextarea1</span>
<div class="cke_inner cke_reset" role="presentation">
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span
id="cke_101" class="cke_voice_label">Pressione ALT+0 para ajuda</span>
<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Editor de Rich Text, mytextarea1"
aria-describedby="cke_101" tabindex="0" allowtransparency="true"
style="width: 100%; height: 100%;"></iframe>
</div>
</div>
</div>
<!-- ... -->
</form>
Full sample code preview here: http://jsfiddle.net/luzfcb/ymoc2r1w/2/
Same code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-loading-bar.css"
rel="stylesheet">
<style>
.body {
background: rgb(204, 204, 204);
}
.maindiv {
/*
the content is hidden by default,
and will be shown only after
completed page load and
finalized ckeditor startup
*/
display: none;
}
.content-section {
margin-bottom: 100px;
}
article {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
padding: 30px;
font-size: 11pt;
line-height: 22pt;
}
article form {
height: 100%;
}
#media print {
body, article[size="A4"] {
margin: 0;
box-shadow: 0;
background: transparent;
}
.cke_pagebreak {
display: block;
page-break-before: always;
}
.content-section {
margin-bottom: 0;
padding-top: 0;
}
.no-print {
display: none;
}
}
</style>
</head>
<body class="body">
<div class="maindiv">
<div id="top-bar" class="navbar-fixed-top no-print">
<div id="top-ck-toolbar">
<!-- ckeditor top toolbar is rendered here -->
</div>
</div>
<div id="content-section" class="content-section">
<article>
<form id="myform" method="post">
<textarea id="mytextarea1" data-ckenable="true"></textarea>
<textarea id="mytextarea2" data-ckenable="true"></textarea>
<textarea id="mytextarea3" data-ckenable="true"></textarea>
</form>
</article>
</div>
<div id="bottom-bar" class="navbar-fixed-bottom no-print">
<div id="bottom-ck-toolbar">
<!-- ckeditor bottom toolbar is rendered here -->
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.2/full-all/ckeditor.js"></script>
<script>
//get the id's of elements that contains "data-ckenable" attribute
function get_ckenable_element_ids() {
return $("[data-ckenable]").map(function () {
return this.id;
}).get();
}
var ckenable_element_ids_list = get_ckenable_element_ids();
var ckeditor_config = {
extraPlugins: [
"sharedspace",
].join(),
sharedSpaces: {
top: "top-ck-toolbar",
bottom: "bottom-ck-toolbar"
}
};
//start ckeditor
ckenable_element_ids_list.map(function (id_element) {
CKEDITOR.replace(id_element, ckeditor_config);
});
function fix_content_padding() {
var top_menu = $('#top-ck-toolbar');
var content_div = $('#content-section');
var current_top_menu_height = parseInt(top_menu.css('height').replace(/[^-\d\.]/g, ''));
var new_padding_value_to_content = "".concat(current_top_menu_height + 130).concat("px");
content_div.css('padding-top', new_padding_value_to_content);
console.log("fixxxx: ", new_padding_value_to_content);
}
window.addEventListener('resize.fix_content_padding', fix_content_padding, false);
var paceOptions = {
"ajax": false,
"restartOnRequestAfter": false,
"document": false
};
window.paceOptions = paceOptions;
Pace.on('hide', function () {
$(".maindiv").fadeIn("fast");
fix_content_padding();
});
</script>
</body>
</html>
Are you using it with Django or directly as JS component?
Because I use CKEditor with Django (django-ckeditor==4.5.1) and it's working very well.
Ping me if your case is using Django and I could give more details how it's working so far.
I'm trying to create a scrolling effect where when the onclick event is triggered, I want that div1 to scroll to dev2. It should initially go slowly and then fast!.
Here's a website using this effect: http://community.saucony.com/kinvara3/
How do I do this?
$.fn.animateScrollDivs = function(sourceDiv, destinationDiv) {
var source = '#' + sourceDiv;
var destination = '#' + destinationDiv;
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1200, 'easeInExpo');
};
function animateDiv(sourceDiv, destinationDiv) {
$.fn.animateScrollDivs(sourceDiv, destinationDiv);
}
div {
height: 650px;
width: 1000px;
}
button {
background-color: #FE2EF7;
}
.downButton {
margin-top: 500px;
margin-bottom: 40px;
margin-right: 200px;
margin-left: 200px;
}
.upButton {
margin-top: 60px;
margin-bottom: 500px;
margin-right: 200px;
margin-left: 200px;
}
<body>
<div id="div1" style="background-color:red;">
<button class="downButton" onclick="animateDiv('div1','div2');">Go Down</button>
</div>
<div id="div2" style="background-color:yellow;">
<button class="upButton" onclick="animateDiv('div2','div1');">Go Up</button>
<button class="downButton" onclick="animateDiv('div2','div3');">Go Down</button>
</div>
<div id="div3" style="background-color:grey;">
<button class="upButton" onclick="animateDiv('div3','div2');">Go Up</button>
<button class="downButton" onclick="animateDiv('div3','div4');">Go Down</button>
</div>
<div id="div4" style="background-color:#2E9AFE;">
<button class="upButton" onclick="animateDiv( 'div4', 'div1');">GoToTop</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js "></script>
Will this do?? Please adjust the position of button(s) as per your requirement.
I've used jQuery mmin (1.11) and jQuery UI (1.11).
Make use of ScrollTop with offset().top to scroll it to DIV nodes.
HTML
Do add a "active" class on DIV item which you want to show at first on page load. For me, it's the first DIV item.
<button class="giu">Animate To Next available List Item</button>
<div class="product active" id="product1">1</div>
<div class="product" id="product2">2</div>
<div class="product" id="product3">3</div>
<div class="product" id="product4">4</div>
JavaScript
$('.giu').click(function(event) {
event.preventDefault();
var n = $(window).height();
$('div.active').removeClass('active').next('div').addClass('active');
$('body').animate({
scrollTop: $(".product.active").offset().top
}, 500);
});
Fiddle - http://jsfiddle.net/ideaovation/fhg1g974/3/