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/
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>
I need to open/close a div container that will always appear at the top left corner no matter where I am on a page that has page scrolling. Position fixed would be acceptable in a desktop environment but in a mobile environment I need the user to be able to pull up or move down the div container so they can get to other input fields. If I use position absolute the div container could appear out of view if you are scrolled down at the bottom of the page.
Example problem using fixed... The mobile device popup keyboard will cover the lower input field. If you change position to absolute then you can see the out of view issue. https://jsfiddle.net/r71vb73u/15/
#workarea {
width: 160px;
padding: 5px;
height: 400px;
position: fixed;
background: #cccccc;
}
.input1 {
height: 90%;
}
.input2 {
height: 10%;
}
.blah {
float: left;
}
.buttons {
float: right;
}
.filler {
clear: both;
height: 800px;
}
function workarea(action) {
if (action == 'open') {
document.getElementById('workarea').style.display = '';
} else {
document.getElementById('workarea').style.display = 'none';
}
}
<body>
<div id="workarea">
<div class="input1">
<input type="text" value="hello">
</div>
<div class="input2">
<input type="text" value="world">
</div>
</div>
<div class="blah">blah blah ...</div>
<div class="buttons">
<input type="button" value="Open" onMouseDown="workarea('open');">
<input type="button" value="Close" onMouseDown="workarea('close');">
</div>
<div class="filler"></div>
<div class="blah">blah blah ...</div>
<div class="buttons">
<input type="button" value="Open" onMouseDown="workarea('open');">
<input type="button" value="Close" onMouseDown="workarea('close');">
</div>
</body>
Okay this wasn't my final answer but when u mention in mobile environment i got blank. But first i let u see my first answer. I will keep update until u say this is a correct answer. Check the DEMO
#workarea {
width: 160px;
padding: 5px;
position: fixed;
background: #cccccc;
left:0;
top:0;
bottom:0;
}
DEMO
Looks like I can add the following to the javascript action open:
document.getElementById('workarea').style.top = document.body.scrollTop + 10 + 'px';
This places the workarea at current top using position absolute.
https://jsfiddle.net/r71vb73u/28/
I'm trying to make a div draggable. The div contains an img and some text that serves as a label for the image. The problem is that when I start the drag by clicking on the img, the img gets dragged, and not the parent div. How do I fix that?
<div className="container-selected" id={id} draggable="true" onDragStart={this.dragStart} onDragEnd={this.drop} onClick={this.click}>
<img src={imgSrc} />
<span className="item-id">Some text</span>
</div>
Here's the CSS:
.container-selected {
padding: 10px;
position: relative;
z-index: 0;
img {
width: 3em;
z-index: -1;
}
.item-id {
position: absolute;
left: 0;
top: 53px;
width: 100%;
text-align: center;
}
}
This is many years later, but I ran into the same problem, and finally figured it out.
An image is draggable by default, so when you drag an image in a div, the image gets dragged. All you have to do is the make the image non-draggable by:
<img draggable="false" src={status} />
Now when you drag the div, the div and its contained image are dragged together.
You can use HTML5's drag and drop like this: https://jsfiddle.net/bv5fLrth/23/
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drag1" draggable="true" ondragstart="drag(event)">
<img id="drag1" src="http://lorempixel.com/400/200/" />
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
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
};
}
}());