On the click of a button i want the page to scroll a particular div bottom.
The 1st time i click, the page is going to the very top and the initial url http://localhost:8000 becomes http://localhost:8000/#/bottom(why is it not going to the div i mentioned).
The 2nd time i click the button, the url becomes
http://localhost:8000/#/bottom#bottom and it goes to the div bottom(which is what i want).
How do i deal with this ?
code snippet
$location.hash('bottom');
$anchorScroll();
Thanks in advance
Do ask for more explanation if required . . .
I don't know if you still need help, but have you checked this question?
Anyway, I also use one button to do a anchor scroll:
<button ng-click="app.gotoAnchor('destination')">GO!</button>
(...)
<div id="destination" style="height:1px;"></div>
And I just used a combination of AngularJS documentation examples and the SO question I mentioned before, to make this function:
function gotoAnchor(anchor){
if ($location.hash() !== newHash) {
// set the $location.hash to `newHash` and
// $anchorScroll will automatically scroll to it
$timeout(function() {
$location.hash(anchor);
});
} else {
// call $anchorScroll() explicitly,
// since $location.hash hasn't changed
$anchorScroll();
}
}
Being the $timeout call the one that made this work better.
Hope this helps.
BOTTOM
<div style="height:700px"> this is boby </div>
JOIN NOW!
Related
I'm very close to finishing up my page, and I ran into this odd bug.
When I use ng-include, the pages load fine, but they resume scrolling from the previous position, so they don't start at the top with every click.
I resorted to using anchor scroll, but it doesn't work properly. I have to click the link again, for it to load the contents, and if I click the same link again, it offsets the page to some weird position.
This is my code in the controller:
$scope.toPage = function (index, id) {
$scope.missiveIndex = index;
$scope.contentsDown();
$location.hash(id);
};
and this is the HTML part:
<article id="{{articles.ids}}" class="stories-anim" ng-repeat="articles in stories" ng-hide="!isMissiveSlideIndex($index)" ng-include="articles.content" [autoscroll]>
</article>
the id is passed in via ng-click="ng-click="toPage($index, button.ids);"
is there a way to put the location.hash in the [onload] expression and autoscroll that way?
thanks
Probably the anchor scroll didn't work because the content of the page was not fully loaded when it was called.
You can solve that by using a timeout.
$timeout(function() {
$anchorScroll();
},500);
I have a collapsible sidebar navigation, and any time users click a link on it, I have the sidebar hide automatically. I achieve this in the run method by using the following code:
app.run(function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function () {
$rootScope.closeNavigation();
})
});
Where app is my Angularjs module.
The problem is that it gets a little unintuitive to use, when you click a link in the navigation for the page you're already on, and then nothing happens. What I would like is to have the sidebar close anyway, so that the users still get focus on the content, even if it's the same content.
But Angularjs doesn't execute the $routeChangeSucess event, if there is no route change happening. So what can I use instead?
You simply need to use ng-show = isPanelVisible and ng-click = closePanel() on the html sidepanel tag (e.g. a <div>).
Then, define $scope.closePanel() in the controller associated to the actual view. For instance
$scope.closePanel = function() {
$scope.isPanelVisible = false;
}
See an example here. Code is here. Note that it doesn't use ng-show, but the behaviour is the same.
On my web page, I have an array of
<div ng-repeat='img in imgList'>
<div class='img_container' ng-mouseover="show(img)" ng-mouseleave="hide(img)">
<div>one thumbnail</div>
<div class='overlay_edit' ng-show='img.isShowEdit'></div>
</div>
</div>
// from controller
$scope.hide = function hide(img){
img.isShowEdit = false;
}
$scope.show = function show(img){
if(img.metas != undefined && img.metas.length > 0){
// a few lines of codes to use img.metas to
// format the edit div block, omitted for simplicity
// but it does involve calling a REST service call
// to retrieve all meta properties.
img.isShowEdit = true;
}
}
The overlay edit div shows when mouse enters the container div and hides when mouse leaves the container div.
The problem I have is that I see lots of ghost overlays when mouse moves too quickly across many containers.
What would be the best way to tackle this problem?
Edited to add additional info and correct errors.
The problem is that the show() takes some time to complete. If ng-mouseleave trigger takes place before show() completes, ng-mouseleave's trigger has no net effect. When I moved the "img.isShowEdit = true;" to the beginning of show() body it solved the ghost issues. Thanks to Narek for pointing out the show() function as the possible source of issue.
This question already has answers here:
Changing route doesn't scroll to top in the new page
(18 answers)
Closed 8 years ago.
For example:
A user scrolls down on view A;
Then the user clicks on a link, which takes the user to view B;
The view is changes,
but the user's vertical location remains lthe same, and must scroll manually to the top of the screen.
Is it an angular bug?
I wrote a small workaround that uses jquery to scroll to the top; but I don't find the correct event to bind it to.
edit after seeing the comment:
How and WHEN do i pull myself to the top? i'm using jquery but the $viewContentLoaded event is too soon (the method runs, but the page doesn't scroll at that time)
The solution is to add autoscroll="true" to your ngView element:
<div class="ng-view" autoscroll="true"></div>
https://docs.angularjs.org/api/ngRoute/directive/ngView
Angular doesn't automatically scroll to the top when loading a new view, it just keeps the current scroll position.
Here is the workaround I use:
myApp.run(function($rootScope, $window) {
$rootScope.$on('$routeChangeSuccess', function () {
var interval = setInterval(function(){
if (document.readyState == 'complete') {
$window.scrollTo(0, 0);
clearInterval(interval);
}
}, 200);
});
});
Put it in your bootstrap (usually called app.js).
It's a pure javascript solution (it's always better not to use jQuery if it's easy).
Explanation: The script checks every 200ms if the new DOM is fully loaded and then scrolls to the top and stops checking. I tried without this 200ms loop and it sometimes failed to scroll because the page was just not completely displayed.
It seems that you understand why the problem is happening based on #jarrodek's comment.
As for a solution, you could either follow #TongShen's solution of wrapping your function in a $timeout or you can put the function call within the partial that you're loading.
<!-- New partial-->
<div ng-init="scrollToTop()">
</div>
If you view change is fired after a click event, you could also put the function call on that element. Just comes down to timing though. Just depends on how things are set up.
I am trying to make a modal for login/register forms and wanted to make something that is reusable, I came across this blog post that goes through making a directive. I used that as well as angular-ui-bootstrap docs to make my modal. It does work, but the first time I click the button to pop the modal, it doesn't work. I can see the scope getting created using Batarang, but nothing pops. Subsequent clicks do work, and if I have 2 buttons, no matter which one I press first, it doesn't work, and after that either one works.
I made up a plnkr to show this. I am using templates etc so I added those. You can see that pressing "Register" or "Login" will not pop up the modal, but if you click again, the modals pop. You can also see the scope getting created on the first press with Batarang.
Thanks in advance for the help!
Edit:
I found some more information that might be helpful. The first time I click the link, the scope.closeFormModal gets called.
Try add:
scope.$watch(
function () {
return scope.formModal;
},
function (newData, oldData) {
if (newData === oldData) {
return;
}
if (newData) {
$compile($element.contents())(scope);
}
});
to link function that was returned from $compile function.