Is there a way to do that manually ? I was trying to use Ionic Framework, they had an attribute for that but is deprecated now.
By Facebook's/WhatsApp's search box I mean:
1 - Hidden at first sigh
2 - If you want to see it you have to pull down
3 - Once you focus on it, it extends up to the top of the screen and overlaps the header
4 - Has a button which is an X to delete the content of the search box and other button named "Cancel" to close the search box.
Pretty sure everyone has notice that behavior already.
So, what are the techniques to implement it ?
I am using Angular so I do not know if there is a way to do a Directive, or just with css ? what are your suggestions ?
something like this
it would be too time consuming for me to realize the all thing. but is not so difficoult if you are familiar with " transitions " in css3.
here is a "lite version"
var searchbox={
topPos_open:0, topPos_close:-50, isOpen:false,
open:function(){
var box=document.getElementById("searchbox");
box.style.top=this.topPos_open+"px";
document.getElementById("searchfield").focus();
this.isOpen=true;
},
close:function(){
var box=document.getElementById("searchbox");
box.style.top=this.topPos_close+"px";
this.isOpen=false;
},
pop:function(){
!this.isOpen?this.open():this.close();
},
clear:function(){
document.getElementById("searchfield").value="";
}
}
#searchbox{position:fixed; top:-50px; left:0px; width:100%; height:60px; background-color:rgba(135, 206, 235, 1); -webkit-transition:top 0.5s ease 0s; -moz-transition:top 0.5s ease 0s; transition:top 0.5s ease 0s;}
#searchbox input{border:0px none; margin:0px 10px 0px 10px; padding:0px; width:80%; font-size:20px;}
#searchbox #input{float:left; background-color:rgba(255, 255, 255, 1); border:1px solid #dddddd; border-radius:20px; margin:5px; padding:5px; width:70%; min-width:250px;}
#searchbox #close{float:right; padding:10px:}
#searchbox button{border:0px none; background-color:transparent; font-size:20px; cursor:pointer;}
#searchbox #dots{clear:both; text-align:center; font-size:25px; cursor:pointer;}
<div id="searchbox">
<div id="input">
<input type="text" id="searchfield" value="">
<button type="button" onclick="searchbox.clear()">
X
</button>
</div>
<div id="close">
<button type="button" onclick="searchbox.close()">
Cancel
</button></div>
<div id="dots" onclick="searchbox.pop()">
......
</div>
</div>
<br>
<br>
<br>
<br>
Click the dots
Related
I have a font awesome icon on a button and it switches between fa-search and fa-spinner icons with ng-class (when user types something in the corresponding input, it tries to autocomplete, runs an AJAX request and displays spinner):
<button type="submit" class="btn btn-primary">
<i id="metasearch-icon" style="width: 15px;" ng-class="['fa', {'fa-spinner fa-pulse': loadingLocations, 'fa-search': !loadingLocations}]"></i>
<span class="hidden-xs-inline">Search</span>
</button>
However, with this implementation it blinks too fast and I want to display spinner for at least 0.25s. Thus, I wanted to introduce a transition-delay, but it doesn't work:
#metasearch-icon.fa-spinner-add,
#metasearch-icon.fa-spinner-remove {
transition-delay: 0.25s !important;
transition: 1s linear all !important;
background: red !important;
};
What am I doing wrong?
Put the property transition-delay after declaring the transition.
#metasearch-icon.fa-spinner-add,
#metasearch-icon.fa-spinner-remove {
transition: 1s linear all !important;
transition-delay: 0.25s !important;
background: red !important;
};
i saw this in a angularJS App:
Maybe he's drawing borders?? Any ideas how i could do this properly?
The color should be changeable.
I made a plunker where you can change the color of the dot with ngStyle, please take a look at it.
Using ngStyle you can also change the background-color within a controller.
HTML code:
<body ng-app="">
<input type="button" value="change color to blue" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="change color to red" ng-click="myStyle={'background-color':'red'}">
<div class="circle" ng-style="myStyle"></div>
</body>
CSS code:
.circle {
height: 20px;
width: 20px;
background-color: red;
border-radius: 10px;
}
$scope.clickUpload = function(){
$timeout(function() {
angular.element('#upload').trigger('click');
}, 100);
};
For example, 3 times this works fine, but on 4th click - nothing going on
How can I fix this?
I am editing my original answer since I didn't fully understand what it is you are trying to do. You can style an input type="file" without having to use jQuery/javascript to hide the original element and simulate a click on it. You can use standard HTML/CSS to do this...
CSS:
.upload {
height:25px;
width:70px;
background:#ccc;
color:#fff;
overflow:hidden;
text:'Upload';
}
.upload input {
display: block !important;
width: 70px !important;
height: 25px !important;
opacity: 0 !important;
overflow: hidden !important;
}
#uploadText {
left: 6px;
position: relative;
top: -45px;
}
HTML:
<div class="upload">
<input type="file" name="upload" />
<h3 id="uploadText">Upload</h3>
</div>
Given these are not ideal styles and I have no future as a graphic designer, they are enough to demonstrate how you can modify the style of the standard input type="file" without needing javascript.
Are there any clear button included with md-input of type Search? I know that I can just add an clear button outside or the search input component, but I would rather like to get it as part of the input field.
I solve it using a negative margin-right
.search {
md-content.md-default-theme {
overflow: visible;
}
.search-cancel {
color: white !important;
fill: white;
border: none;
width: 16px;
height: 16px;
margin: 8px 0 0 -36px;
overflow: visible;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s linear;
background: rgba(0, 0, 0, 0.3);
&:hover {
background: rgba(255, 0, 0, 0.8) !important;
}
}
}
<div layout="row" class="search">
<md-content flex="90" layout-padding>
<md-input-container md-no-float>
<md-icon md-svg-icon="search" class="name"></md-icon>
<input ng-model="search" type="search" title="Search" placeholder="Search">
</md-input-container>
</md-content>
<md-content flex layout-padding>
<md-icon ng-show="search" md-svg-icon="md-close" class="search-cancel"
ng-click="search=''"></md-icon>
</md-content>
</div>
The containing md-content also needs overflow-visible so that the icon is not clipped.
This is not possible with existing version of angular material (v0.9.0) but is targeted to v0.10.0. See more information here: https://github.com/angular/material/issues/2802#issuecomment-101764802
However, there is a Angular directive that might be used as a workaround. https://github.com/dcohenb/angular-clear-input
My code looks like this:
<div class="block-border"
data-ng-show="qty > 0">
xxx
</div>
I know there have been a lot of changes with Animation in AngularJS. Can someone tell me the easiest way for me to make it take 500ms to show and 50ms to hide the xxx when the value of qty changes. Note that I am using the very latest AngularJS.
Reference angular-animate.js
Add ngAnimate as a dependent module:
var app = angular.module('app', ['ngAnimate']);
Pick a name for your transition, for example 'fade', and then define the appropriate CSS classes based on the naming convention described in the documentation:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove,
.fade.ng-hide-add {
display: block !important; /* or inline-block, as appropriate */
}
.fade.ng-hide-remove {
transition: all linear 1000ms;
}
.fade.ng-hide-add {
transition: all linear 500ms;
}
Add the class to your element:
<div class="block-border fade" ng-show="qty > 0">
Demo: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview
I couldn't get the accepted answer to work, but the following did work (taken largely from this ng-nuggets post):
.fade {
transition: all linear 500ms;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
and then my HTML element which I wanted to fade in and out looked something like this:
<span data-ng-show="copyLinkClicked" class="fade">some text here</span>
As #MichaelNguyen mentioned, Bootstrap does appear to have a style already called fade, and we are using Bootstrap in our application, yet the above styles worked nonetheless. If you already have a style named fade, then change the name to something unique before using the above code.
If you want to fade in using ng-if as a boolean angular has some nice documentation here https://docs.angularjs.org/api/ngAnimate . I used ng-if for my fading purposes here's an example below:
form.html
<form name="exampleForm" ng-submit="submit()">
<input type="email" placeholder="Email Address" ng-model="email" required>
<input type="text" placeholder="Name" ng-model="name" required>
<input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
<input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>
form.css
/* css for button that will show when form is invalid */
.invalid-btn {
border: 1px solid #222;
width: 100px;
height: 50px;
color: #222;
background: #fff;
}
.invalid-btn.ng-enter {
opacity: 1;
}
/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
opacity: 0;
}
.valid-btn {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
}
/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
transition:0.5s linear all;
opacity: 0;
}
.valid-btn.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.3s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
/* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
opacity:1;
}
The way this works is if you want to fade in a button with a different color or text and different text color you can fade in a button when the form is filled out and valid and the invalid button will fade out leaving only one button depending on the state of the form. Kind of a hack but it works and looks smooth. I had to set a delay using .ng-enter-stagger because loading the animations at the same time was causing the buttons to blink and jump and not animate smoothly. So in this case we let invalid button hide first then load valid button when form is valid and all input fields have been filled out correctly.