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>
Related
I have a list of messages, when the user scroll to the top of the list, the app loads more messages. This part is working fine.
But the scroll position is kept unchanged, it's not scrolling to the previously shown element, the scroll position is always on top (so we could load more messages again).
This behavior happens only when user has scrolled to the very top. If we load more message but user has scroll down even a very little bit, it keeps the same position.
Is there a css solution ?
Or should I programmatically scroll down user to the previous message ?
Or should I programmatically scroll down a very little bit juste before adding messages to the list ?
function addElement(id) {
const $element = $($('#TemplateItem').html().replace('{id}', id));
$('.list').prepend($element);
}
var loadCount = 0;
function loadMore() {
loadCount++;
for(let i=0; i < 5; i++) {
addElement(loadCount + '-' + (i+1));
}
}
$('button').click(() => {
loadMore();
});
loadMore();
.list {
width: 50%;
height: 20rem;
background: yellow;
overflow-y: auto;
}
.item {
background: lime;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button class="btn btn-primary mt-3" type="button">
Load more
</button>
<div class="list mt-3 p-2"></div>
<template id="TemplateItem">
<div class="item mt-1 p-2">I am fantastic item #{id} !</div>
</template>
</div>
Refering to this answer, I have created my own solution.
Once the nodes has been added, update the scroll top of the container to the last node that existed before adding the new nodes.
Working example.
function addElement(id) {
const $element = $($('#TemplateItem').html().replace('{id}', id));
$element[0].id = `list-node-${id}`;
$('.list').prepend($element);
}
var loadCount = 0;
var incrementer = 5;
function loadMore() {
loadCount++;
for (let i = 0; i < incrementer; i++) {
addElement(loadCount + '-' + (i + 1));
}
if (loadCount > 1) {
initialNode = $(`#list-node-${loadCount - 1}-${incrementer}`);
$('#wrapper').animate({
scrollTop: initialNode.offset().top - $('#wrapper').offset().top + $('#wrapper').scrollTop()
}, 1000);
}
}
$('button').click(() => {
loadMore();
});
loadMore();
.list {
width: 50%;
height: 20rem;
background: yellow;
overflow-y: auto;
}
.item {
background: lime;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button class="btn btn-primary mt-3" type="button">
Load more
</button>
<div class="list mt-3 p-2" id="wrapper"></div>
<template id="TemplateItem">
<div class="item mt-1 p-2">I am fantastic item #{id} !</div>
</template>
</div>
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>
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'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/