I'm looking to scroll up a page when I have a div selected, so the goal is to drag a div and move the page up. The scoll down works strangely.
Is there a problem with angular or html that would be listed?
(I don't want to use Jquery)
<div class="panel panel-default">
<div class="panel-body">
<p class="h4">Commandes</p>
<div class="row">
<div class="col-md-12 col-xs-12 text-right" draggable="true">
<button type="button" (click)="addCommande()" class="btn btn-labeled btn-purple m-l-4">
<span class="btn-label"><i class="fa fa-plus"></i></span><span class="hidden-xs">Ajouter une commande</span>
</button>
</div>
</div>...
editadding solutions based on our discussion in the comments section
im still not sure if I got your end goal, but I hope I did
[first solution] add `scrollPositionRestoration: 'enabled'` to `app-routing.module.ts` 's `RouterModule`:
RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
[second solution] try implementing this logic]
export class ScrollToTopComponent implements OnInit {
windowScrolled: boolean;
constructor(#Inject(DOCUMENT) private document: Document) {}
#HostListener("window:scroll", [])
onWindowScroll() {
if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
this.windowScrolled = true;
}
else if (this.windowScrolled && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) {
this.windowScrolled = false;
}
}
scrollToTop() {
(function smoothscroll() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo(0, currentScroll - (currentScroll / 8));
}
})();
}
ngOnInit() {}
[third solution]
If all fails, then create some empty HTML element (eg: div) at the top (or desired scroll to location) with id="top":
<div id="top"></div>
And in component:
ngAfterViewInit() {
// Hack: Scrolls to top of Page after page view initialized
let top = document.getElementById('top');
if (top !== null) {
top.scrollIntoView();
top = null;
}
}
I dont have much to work with regarding how you built your code, but I hope this might solve it (it will make draggable items scroll your screen) :)
var stop = true;
document.quertSelector(".draggable").on("drag", function (e) {
stop = true;
if (e.originalEvent.clientY < 150) {
stop = false;
scroll(-1)
}
if (e.originalEvent.clientY > ($(window).height() - 150)) {
stop = false;
scroll(1)
}
});
document.querySelector(".draggable").on("dragend", function (e) {
stop = true;
});
var scroll = function (step) {
var scrollY = window.pageYOffset;
window.pageYOffset(scrollY + step);
if (!stop) {
setTimeout(function () { scroll(step) }, 20);
}
}
Related
I am trying to show/hide my drag and drop when a document comes to the screen. I used AngularJS and it worked. However, it does not work in all modules. Although I same always the same code but from other modules :
working code :
<div ngf-drop ngf-select ng-model="files" ngf-multiple="true" ngf-allow-dir="true" ng-show="dropIsVisible === true">
<div class="drop-area-full-page">
<div class="drop-area-full-page__graphic"></div>
<div class="drop-area-full-page__info" id="drop-area-full-page__info" ng-bind-html="dropText"></div>
</div>
</div>
And in AngularJS:
$window.addEventListener("dragenter", function (e) {
if (isFile(e)) {
lastTarget = e.target;
$scope.dropIsVisible = true;
name = getName($scope, getParent());
$scope.dropText =
"<b> Dokument ablegen zu </b>" + "<b>" + name+ "</b>";
}
});
$window.addEventListener("dragleave", function (e) {
e.preventDefault();
if (e.target === document || e.target === lastTarget) {
$scope.dropIsVisible = false;
}
});
$window.addEventListener("dragover", function (e) {
e.preventDefault();
$scope.dropIsVisible = true;
});
function getParent() {
return {
entityName: $stateParams.entity,
id: $scope.parentId
};
}
$window.addEventListener("drop", function (e) {
e.preventDefault();
$scope.dropIsVisible = true;
var qs = e.dataTransfer.files[0].name;
var parent = getParent();
DokumentUploadMixin.Prepare(qs, e.dataTransfer.files[0], $scope, parent, projection, qs);
//$window.location.href = routeUtils.getCreateDokumentUrl("Dokument", getParent(), projection, qs);
});
};
And the code that is not working:
<div ngf-drop ngf-select ng-model="files" ngf-multiple="true" ngf-allow-dir="true" ng-show="dropIsVisible === true">
<div class="drop-area-full-page">
<div class="drop-area-full-page__graphic"></div>
<div class="drop-area-full-page__info" id="drop-area-full-page__info" ng-bind-html="dropText"></div>
</div>
</div>
Which is the same ....
Are there any tips that I should do for making it work in all modules?
the answer was that i showld apply the scope to event listener cause i added custom event listeners, which are not tracked by Angularjs. In order to make it work applying inside addEventListener callback with $scope.$apply to tell angular update the model.
$window.addEventListener("dragenter", function (e) {
$scope.$apply(function() {
if (isFile(e)) {
lastTarget = e.target;
$scope.dropIsVisible = true;
name = getName($scope, getParent());
$scope.dropText =
"<b> Dokument ablegen zu </b>" + "<b>" + name+ "</b>";
}
});
});
$window.addEventListener("dragleave", function (e) {
$scope.$apply(function() {
e.preventDefault();
if (e.target === document || e.target === lastTarget) {
$scope.dropIsVisible = false;
}
});
});
$window.addEventListener("dragover", function (e) {
$scope.$apply(function() {
e.preventDefault();
$scope.dropIsVisible = true;
});
});
I have a site with top nav menu:
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>Cakes</li>
<li>Candy</li>
<li>Marshmellow</li>
<li>Honey</li>
</ul>
</nav>
And all my sections are:
<div id="Cakes" class="page">
<div class="container">
This is sweet
</div>
</div>
How can I use the mouse wheel to jump directly to the next or previous section?
Currently the mouse wheel will scroll the page like normal. But I want it to jump to every section with one wheel rotation without scrolling all the entire page.
Without plugins, all we need to do is to capture the mousewheel using mousewheel event -on Firefox we use DOMMouseScroll instead- and depending on the value of the event's originalEvent.wheelDelta -again in Firefox it is originalEvent.detail, thanks Firefox- if this value is positive then the user is scrolling upward, if it's negative then the direction is down.
JS Fiddle 1
jQuery (1) :
//initialize
var winHeight = $(window).height(),
pages = $('.page'),
navLinks = $('#menu-nav a'),
currentPage = 0;
$('html, body').animate({ scrollTop: 0}, 0);
// listen to the mousewheel scroll
$(window).on('mousewheel DOMMouseScroll', function(e){
//by default set the direction to DOWN
var direction = 'down',
$th = $(this),
// depending on the currentPage value we determine the page offset
currentPageOffset = currentPage * winHeight;
// if the value of these properties of the even is positive then the direction is UP
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
direction = 'up';
}
// if the direction is DOWN and the currentPage increasing won't exceed
// the number of PAGES divs, then we scroll downward and increase the value
// of currentPage for further calculations.
if(direction == 'down' && currentPage <= pages.length - 2){
$th.scrollTop(currentPageOffset + winHeight);
currentPage++;
} else if(direction == 'up' && currentPage >= 0) {
// else scroll up and decrease the value of currentPage IF the direction
// is UP and we're not on the very first slide
$th.scrollTop(currentPageOffset - winHeight);
currentPage--;
}
});
// as final step we need to update the value of currenPage upon the clicking of the
// navbar links to insure having correct value of currentPage
navLinks.each(function(index){
$(this).on('click', function(){
navLinks.parent().removeClass('current');
$(this).parent().addClass('current');
currentPage = index;
});
});
(1) UPDATE
If you don't want to use jQuery, below is pure javascript code doing the same as above, this won't work in IE8 and below though:
JS Fiddle 2
Pure Javascript:
//initialize
var winHeight = window.innerHeight,
pages = document.getElementsByClassName('page'),
navLinks = document.querySelectorAll('#menu-nav a'),
currentPage = 0;
window.addEventListener('mousewheel', function(e) {
scrollPages(e.wheelDelta);
});
window.addEventListener('DOMMouseScroll', function(e) {
scrollPages(-1 * e.detail);
});
function scrollPages(delta) {
var direction = (delta > 0) ? 'up' : 'down',
currentPageOffset = currentPage * winHeight;
if (direction == 'down' && currentPage <= pages.length - 2) {
window.scrollTo(0, currentPageOffset + winHeight);
currentPage++;
} else if (direction == 'up' && currentPage > 0) {
window.scrollTo(0, currentPageOffset - winHeight);
currentPage--;
}
}
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', updateNav(i));
}
function updateNav(i) {
return function() {
for (var j = 0; j < navLinks.length; j++) {
navLinks[j].parentNode.classList.remove('current');
}
navLinks[i].parentNode.classList.add('current');
currentPage = i;
}
}
You'll need to get a plug-in to add the mousewheel event.
Maybe try this one this.
it's got pretty good examples.
I'm working on a code, where in i have icons under an < a > tag. Originally, I had a dropdown so showing a div on that was easy since a dropdown has a value but how do i code the same thing under an < a > tag?
HTML
<div ng-controller="appCtrl">
<div>
X
Y
Z
</div>
<div ng-if="showX">X --> div</div>
<div ng-if="showY">Y --> div</div>
<div ng-if="showZ">Z --> div</div>
</div>
Controller:
var appModule = angular.module('appModule', []);
appModule.controller('appCtrl', function($scope) {
$scope.assignVal = function(val) {
if (val === 'X') {
$scope.showX = true;
$scope.showY = false;
$scope.showZ = false;
} else if (val === 'Y') {
$scope.showX = false;
$scope.showY = true;
$scope.showZ = false;
} else if (val === 'Z'){
$scope.showX = false;
$scope.showY = false;
$scope.showZ = true;
}
}
});
If you want to assign a value to a variable when <a> is clicked, use ng-click, not ng-model.
X
<div ng-if="showX">X</div>
I have 3 different charts inside 3 different div tags that appear and hide when specified. However, two of the charts randomly resize and i know why.
How do i fix this?
I have wordpress and using visualizer plugin for my charts. have the code in the header.php file and in the text portion of the page specific code.
Code below:
Header.php snippet -
<script>
var divs = ["Daily", "Weekly", "Monthly"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
HTML page snippet -
<div class="inner_div">
<div id="Daily">[visualizer id="431"]</div>
<div id="Weekly" style="display: none;">[visualizer id="430"]</div>
<div id="Monthly" style="display: none;">[visualizer id="429"]</div>
</div>
<div class="main_div">
<div class="buttons">
Daily | Weekly | Monthly
</div>
A quick fix is to include call visualizer.render(); at the end of your toggleVisibility function:
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
visualizer.render();
}
The problem is caused by invalid calculation of available area for divs that aren't visible at the time. Calling this method forces a re-calulcation of the svgs and ensures the right size.
I have the following code which works to create the div on click, but I would like the div to slide down slowly and not appear immediately:
function hideshow(which) {
if (!document.getElementById) return
if (which.style.display == "none") which.style.display = "block"
else which.style.display = "none"
I've found some code that appears to do what I'm after, but I'm having difficulty integrating it into my existing code (above):
$(document).ready(function() {
$("#button").toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('show');
}).click(function(){
$("#hidden_content").slideToggle("slow");
});
I've stuck it on js fiddle if that helps (with supporting css):
http://jsfiddle.net/dRpWv/479/ and
http://jsfiddle.net/dRpWv/447/
Use jquery property "slideDown"
My Codepen
function hideshow() {
var i = 1;
if (document.getElementById('effet').style.display == "none") {
$('#effet').slideDown("normal");
document.getElementById('effet').style.display = "block";
i = 2;
} else {
if (i == 1) {
$('#effet').slideUp("normal", function () {
document.getElementById('effet').style.display = "none";
});
}
}
}