I have read the below article/tutorial
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
I am trying to make this work from angularjs, below is the fiddler
http://fiddle.jshell.net/cZs5y/
Its working with following two issues.
Mouse click hand icon visible allover the page. ( I want it to be visible only on the button).
On Mobile devices, I am seeing little delay and flickering effect.
I am new to Angular, any ideas how to improve this.
Update: Issue 1 solved fiddler link.
Update 2: After adding "ngTouch" module there is no delay on mobile but flickering effect is still there.
Make .perspective.modalview and container cursor property to auto to remove unnecessary pointer from the screen. also add style="cursor:pointer" to button.
css:
.perspective.modalview {
cursor: auto;
}
.container{
cursor: auto;
}
Related
I'm trying to use gatsby-plugin-transition-link in my gatsby site, in order to implement a page transition. I managed to install the packages fine, and implement AniLink correctly. the transition is almost working perfectly in my sandbox, but I'm getting a funny bug.
I'm trying to implement a cover page transition, whereby a coloured div slides across the page, covering it completely. Continuing to slide across the page until out of view, a new active page is revealed behind it.
The problem is: the initial page remains for a split second, even as the cover slides out of view. It overlaps the newly active page for a split second before vanishing. Why is this happening, and how can I make sure that the previously active page hides itself before the new active page displays?
here is a link to my sandbox: https://codesandbox.io/embed/m7z386ll6x
click on 'Go to page 2 transition link' on the index page, to see the bug in action. Once you click on the link, the blue cover slides across the page. As the cover slides out of view, still see all the text content from the index page overlapping the new content of page 2, for a split second.
I had a same issue today and just found good solution to it. Since there is two divs during transition I just simply added an animation to hide unmounting div when its covered by an image.
Note that animation time should be same as duration + add some extra-delay in animation to avoid blinks
.tl-wrapper--unmount {
/*
Just make sure animation time is same that transition duration in <AniLink />
as well add some delay (e.g. 0.2s as in example) to avoid weird blinking at the end
*/
animation: 1s ease-out 0.2s normal fadeout;
}
#keyframes fadeout {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 0;
}
100% {
opacity: 0;
z-index: 0;
}
}
Demo
I am also having this issue but only when using AniLink with direction="left" or direction="right" direction="down" did not show this issue.
I am working on a chrome extension that would display an overlay over any tabs the user is working on. I need it to operate within the full viewport.
I'm using vanilla javascript and content script to inject a full viewport-size div (to the body since I want it to be used on any website) and then append my template to the div I created and injecting them with Angular. It works very well.
The Problem
However, this overlay is somewhat blocking since the div I create has to have a z-index of at least 0 to be seen. Let's imagine you perform a google search, you will be able to search since the google search bar has z-index > 0 but you won't be able able to click on the results ... The problem appears in pretty much any website.
Now I tried to play with z-index: I apply z-index = -1 so I won't see the main overlay div but the problem with that is that the content I append to it seems to inherit the z-index -1 no matter what so I never see my template!
I've followed quite some topics here but I didn't find an answer to my problem!
The Question at last ...!
How do I create a non-blocking chrome overlay ? :)
Remember: I need to be able to interact with the overlay at any given moment, not simply when I click on the icon related with the BrowserAction!
The trick is simply to add the css property
pointer-events: none;
to the main div and
pointer-events: auto;
to the template
Is it possible to make the whole card a link in Angular material or is there another directive intended for this use case?
You can just put a ng-click on the card and perform your operation.Further you can style the card with hover effects to get the feel of a link.Like this :
HTML:
<md-card ng-click="cardSelected()" class="cardAsLink">
....
</md-card>
JS:
$scope.cardSelected=function(){
console.log("card Clicked");
}
CSS:
.cardAsLink{
cursor: pointer;
}
.cardAsLink:hover{
border : 1px solid blue;
}
Yes you can put an anchor tag around the card. I think it is the better solution because you have the hole functionality of the anchor tag. In Ramblers answer clicking would work fine and if you use the the router the historie would also be korrect, but thinks like clicking with the mouse wheel to open a new tap would not work. The same goes for right mouse click thinks and the navigation preview on the bottom of the browser would also be missing.
I'm creating an AngularJS application which has a loader, but since angular is really fast (yay), the page jumps between the loadings (nay :/) - what happens, is when the loading screen comes up, the scrollbar gets hidden and when a new page loads, the scrollbar is put back, this creates a flickering in the menu(always visible) part on top of the page.
Same thing happens when I open a pop-up or smth. like that. I add overflow: hidden; to the body in DOM so the user can't scroll when a pop-up is opened, but again this hides the browser scrollbar and the page jumps.
Any ideas how to solve this UX problem?
Ok, found a rather simple solution
html {
height: 100.001%;
overflow-y: scroll;
}
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}