Using this article I made an overlay div fade in/out on mouse click with ng-hide/ng-show. It works fine except one small thing - when page is loading and not all Angular is loaded yet, the overlay flickers for a moment then fades out when Angular loads respective variables that are in charge for overlay visibility.
The div looks like this in Jade:
.overlay(ng-show="overlayStatus=='on'", ng-init="overlayStatus='off'", ng-animate="'fade'")
Now to remove that flickering, and make the overlay hidden on load without Angular evaluations, I add style="display:none;" to this div and it seems to fix the issue. Though I am not sure if it's a proper way to do this.
Please advise.
You need to use ng-cloak directive
Related
Hi I am doing an assignment that recquires me to only use html and css only no javascript. Usually, with javascript this is hella easy to do but html and css only is a bit annoying. In my first page I have a link to my second but when I press the link from the first page to go onto the second page. The animation I made does not work at all and the secondary text only shows up.
I will provide photos and code to show what I mean. I dont understand what I am doing incorrectly to cause this but it is annoying.
firstpage
second page
from the first page going onto the second via clicking 'start' the second text only shows up but I need the whole thing to show up. Heres the animation part I want to show up as well. animation_part
second page html:
html
second page css
css-part1
css-part2
I am not sure if this will further show my predicament but heres the code for the first html and css pages:
For some reason it is not allowing me to post the code here so I have done my best to showcase to go around the error
GITHUB: https://github.com/TheGraeDev/ADV201
It might be possible that your required character went to the back of main background. Try changes in css to bring your panda to front. Hope it helps!
Okay Incase anyone else comes across the same issue. Change position to relative and instead of using percentage value for Top in css using px. it fixed the problem
I have an online form, that i would like to do through stacking modal windows (it just makes sense that way). upon opening both modal windows and then closing the top most one however the scroll bar comes back up from the content bellow the modal window.
here is an example:
http://www.bootply.com/FGNRPwSRgH
Just look on the right side of the screen when closing the second window.
Is there anything I can do about this? I am new to Bootstrap and I am hoping to be able to fix this through CSS and bootstrap only, however javascript isn't out of the question.
When you open your first modal, The body tag of the iframe is getting a class of "modal-open" which is disabling the scrolling, that remains when you open the second modal. When you close that second modal, the "modal-open" class is being removed, which is why the scrolling is coming back. This is probably due to the way you're nesting these modals. It just wants to remove that class from body, not knowing that you still have one open. You will most likely need to add some sort of check step with javascript to determine if you still have a modal with a display property of block when closing each one, and if so make sure that modal-open class is still set on the body. I would look for a callback function on the close of those modals that you can listen for.
http://www.bootply.com/8K2wKO0c7I
$('body').append(
$('<script />',{src:'//rawgit.com/sbreiler/bootstrap-multi-modals/master/bootstrap-multi-modals.js'})
);
If it works for you, grab a copy of the *.js file from my github: https://github.com/sbreiler/bootstrap-multi-modals
I have a basic slide-in slide-out animation for each route on enter and leave within my AngularJS app.
The animations work perfectly on desktop, although bug out on mobile. They do seem to work within the dev tools emulator though.
I have tracked it down to having something to do with the views position not being set correctly with the absolute position. Seems as if when a new view is loaded, they both exist within the page, hence making the pages width twice and large until the old view is unloaded and removed. I then tried a position relative on the parent container, although no luck.
WORKING DEMO
Use overflow: hidden for the container of your views, in the case of your plnkr, it's the <body>
I have a webpage that shows an image gallery for the current week, and I have a top bar navigation "prev" and "next" links to cycle through the galleries. Currently clicking on the links causes a whole page refresh. I think the user experience would be smoother if, when we click "next" we animate a slide-in of the next page content from right to left, and vice versa, if we click "prev" we animate the previous week of results from left to right (similar to how page transitions work in a mobile app when you swipe). Note, I do not need to detect actual swipe gestures and I think jquery mobile markup is overkill.
To preload the data that will be sliding in I can make an ajax call, or even have the data preloaded in json for me to construct the replacement html off screen. I will use html5 window history push state to change the url to the actual location we will be navigating to. The only thing I haven't been able to find is to do the actual animation. I have looked into carousels, but none of them quite do what I want. Is there an existing library that handles just the animation of page transition, having that slight recoil bounce effect?
Thanks.
EDIT: I just found jquery.animate which I think might do the trick.
There are any number of jQUery based image gallery libraries that you might want to choose from. If you can't find one to transition between different galleries teh way you want to, it should not be a problem to use jQuery to asynchronously load new galleries and then animate them into place.
I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.