I have a question concerning scroll positions/behavior in AngularJS.
I have a fixed sidebar with div classes with text (three items no menu) and would like to achieve an opacity change on those classes based upon the current scroll position of the window.
For example, if I reach
<div class="example1">
My goal would be to have the opacity changed on the first item in the sidebar which for example would be called
<div class="sidebar1">
I've found plugins via github for this, but would like to achieve this purely with angular. Does anybody know how to approach this best to avoid messy code and a bloated application?
There's a module you can get via npm here: https://www.npmjs.com/package/ng-inview named ngInView. It will let you call an event whenever an item comes into view. This should get you going in the right direction.
Also on github at: https://github.com/iamssurya/angular-inview
Related
I am setting up protractor tests for my angularJs 1.14 app.
We have a video player that displays subtitles. Each subtitle is in a div. When the player is playing, our code sets the class of the current subtitle to "currentSubtitle" This way, we can highlight the subtitle. In addition, we have code that causes the current subtitles's div to be scrolled to. How can I create a test that tests if the subtitle scroll is working?
I think you can do 2 things, depending on how fast the automation and the page self is.
Have you tried validating which text is visible with element(by.css('. currentSubtitle').getText(). getText() will give you the visible text, see here
Use browser.driver.executeScript('//some JS code') to determine if it scrolled, take for example this post. Then you can calculate with JS if the subtitle scroll is working
Hope it helps finding your answer
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
I spent the last 5 hours trying to get this animation to work with no luck. I wanted to create a cool animation whenver the user click on a button, the idea is to display a list of ul elements in a flip animation, pretty much like what http://lab.hakim.se/scroll-effects/mobile.html is doing (if you selected flip from the gear icon and changed chrome device mode to a mobile device).
Im using ngAnimate along with Angular and Ionic, I created the snippet here http://play.ionic.io/app/4ae65754fc64 (try to click the Add to Cart button). I want to display each li item as if they are flip and cascading whenever they are displayed. For some reason all the animation classed are ignored.
Ok, I think I achieved what you were wanting to achieve. I provided you two demos below.
But first of all the ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-show based animations you have to use the ng-hide-add, ng-hide-remove CSS classes not the CSS classes described in the ngRepeat documentation.
The ionic demo (first link below) is basicly just a mockup of your code and is not perfect by any means.
The codepen demo is a bit more modified example and generic example. I used <ion-list> and <ion-item> instead of <ul> and <li>.
Hopefully this gets you in the right direction when implementing your final solution.
Ionic demo: http://play.ionic.io/app/3c0e90238fe8
Codepen demo (more generic): http://codepen.io/thepio/pen/KMPeZo
I'm currently developing a mobile web application with AngularJS, ngAnimate, Angular-Material and UI-Router. I'm following Google Material Design specifications for the UI/UX part.
I'd like to animate a state change 'the Angular way' and especially this 'Parent to child' animation
I've no idea on how to achieve this 'lift & expand' animation.
Thanks for your help !
You have to do it yourself, I guess.
Angular-material is not a magic wand that replicates the animation guidelines of Material Design. Material Design guidelines are simply guidelines, and are loose enough to be hacked — or strictly followed, in the case of Google's Android apps (in-house or not).
My feeling is the angular material team is already pushing like maniacs to bring this awesome tool to 1.0, and will take advantage of the new routing system in Angular 2 to provide some animations like the one you wish to attain out of the box.
But it's the bleeding edge of the bleeding edge, at least for the time being.
Good news seem to be that routes will have their own viewports and sibling viewports.
AngularJS somewhat starts to embrace Polymer's web components concept.
Scroll to "Show me the magic!" on this page, and check these demos. Polymer's ecosystem provides a lot of already-made components to build your app with. It's quite large, and makes you wonder why Polymer doesn't get the same momentum as AngularJS. But I digress...
Option 1
create a custom-made function that gets triggered on a list element being clicked/tapped, to place in your controller (or directive).
Once the user clicks/taps the list element, it triggers the function (console test).
The function should :
retrieve the id of the clicked/tapped item (pass it to the function)
animate : here you have several choices, but here's one : use a ui-router absolute named view (#view_name), and wrap it in a div container with overflow:hidden, that has inital dimensions corresponding to the dimensions of a list item.
Detect the x-y position of the list element that has been clicked (an example, assuming you use AngularJS with jQuery), and you pass it to the "item detail" route (see above), so the rectangle grows with origins corresponding exactly to where the UI is a the moment of the click/tap. The animation shown in the video seems pretty complex: the "item detail page" grows slower on the bottom and faster on the top, when the bottom item is clicked.
Why an absolute named view? Because it will allow, with z-indexing, for the list to stay underneath the "item detail" view, so when the user closes/leaves it, you can roll back your animation, and the rectangle will shrink back to exactly the dimensions and position of the list item. Finally, you transition the opacity:0 and leave the route.
Option 2
Here's a rough mockup of a technique stretching/scrolling an ion-item. It would require to detect the y position of the item, and use ionicScrollDelegate to scroll to it. Also, you would freeze the main scroll so the user get "stucked", until he closes the "detail view", which then releases the scroll.
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
if(!$scope.stretched){
$('ion-item').removeClass('stretched');
$ionicScrollDelegate.freezeAllScrolls(false);
}
else
{
$location.hash(itemID);
$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$('#'+itemID).addClass('stretched');
};
}
A very basic JSFiddle, which needs to be refined (clicked item should scroll to the middle of the screen, then expand).
Note that the JSFiddle only blocks the mousewheel scroll. If seems to block the first swipe, but then the ng-click releases it, so as it is it's far from perfect. You should not only block the list scrolling, but the up and down swipe events.
Also it initalizes badly, only works the second time. But the concept could be something like this.
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.