just like in the "phone" app of an android phone I want that each input should have a transition and some fading effects. This is because am trying to duplicate that kind of app using JS
try looking at this photo to see the project and what I need
Related
I'm using ionic 3 and angular. I want to change color and size of default tab bar in ionic, but when I modified main.css file, it can build success, but when I re-build, it seem return default status...
I don't know how to create new file css to change it.. How to can change new style of tab bar in ionic 3?
I'm so sorry because this is basic question, I'm a newbie
I am believing that you are asking for the tabs in ionic
It depends whether you are building for android or ios.
If you want to change for Android,
just add $tabs-md-background: color($colors, custom); in variable.scss file.
Where custom is your customized colour.
Similarly, you can change the size as well, depending on your phone os.
I am changing the chat bubble color using the css class with jquery. its working fine when its loaded at the first time. but when we are sending new message this new CSS class is not applying on that.
We play around it and found that if we applied the new CSS class on message:send event then it will work. so i did that. but its not working on first message send.
When we are sending 2nd message then the first one is updating.
I am using the following codes in the init and message:send event.
$('#sk-holder #sk-container #sk-conversation .sk-row.sk-right-row .sk-msg').addClass('newClass');
I am doing it for web only.
You can now change the bubble color directly from your account settings at https://app.smooch.io under Web. This new feature is supported since 2.2.3 and is available on the CDN.
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
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.