Develop Reference

What's the problem with this angular ts code for implementing floating label input onfocus?

I am trying to float the labels onfocusing input in angular.
I did wrote code to perform the action of a class to be applied on focusing the input, & then focus out to check empty value or values present, to remove the applied class.
forms.component.html
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_fn" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_fn" id="forms_input" class="forms-field-inp-lbl">
FirstName
</label>
</div>
</div>
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_ln" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_ln" id="forms_input" class="forms-field-inp-lbl">
LastName
</label>
</div>
</div>
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_p" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_p" id="forms_input" class="forms-field-inp-lbl">
Password
</label>
</div>
</div>
<div class="forms-login-btn">
Login
</div>
forms.component.scss
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.forms-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
background-color: #ffffff;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
min-height: 120px;
padding: 20px;
border-radius: 5px;
}
.forms-field-box {
background-color: #ffffff;
margin-bottom: 15px;
}
.forms-field-inp-box {
width: 97%;
position: relative;
}
.forms-field-inp {
width: 100%;
height: 35px;
border-radius: 5px;
border: 1px solid #e4e4e4;
outline: none;
padding: 6px;
}
.forms-field-inp:hover {
border: 1px solid #cccccc;
}
.forms-field-inp:focus {
border: 1px solid #0089ff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.forms-field-inp-lbl {
position: absolute;
top: 8px;
left: 10px;
font-size: 14px;
font-weight: 600;
background-color: #ffffff;
padding: 2px 6px;
user-select:none;
color: #cccccc;
}
.forms-field-inp-lbl-anim ~ .forms-field-inp-lbl {
top: -9px;
}
.forms-login-btn {
width: 20%;
height: 35px;
text-align: center;
font-size: 18px;
padding: 5px;
background-color: blue;
border: 1px solid blue;
border-radius: 5px;
margin: 10px auto;
cursor: pointer;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
forms.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss']
})
export class FormsComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
inpAnim(){
let forms_input_ele:any = document.querySelector(".forms-field-inp-box input");
forms_input_ele.addEventListener("focusin", () => {
console.log("focussed in");
forms_input_ele.classList.add("forms-field-inp-lbl-anim");
} );
forms_input_ele.addEventListener("focusout", () => {
let forms_inp_val = forms_input_ele.value;
if(forms_inp_val == ""){
forms_input_ele.classList.remove("forms-field-inp-lbl-anim");
console.log("focussed out");
console.log(forms_inp_val);
}
});
}
}
Please Help me to solve this.
input focused & label floated
input has value & label stays
Problem: But, the first input only works, other inputs not working if focused & nothing happens.,
Next input is focused, but label not floating
This can be easily applied by css, but need to make this small code to work correctly

Angular-Breadcrumb: parent state's label is empty

I'm using the angular-breadcrumb module to build a navigation panel.
I have a problem displaying the parent state's dynamic label: when activated the child's label is displayed and the parent's one is empty. Both states use different controllers.
What's wrong with my setup?
var parentState = {
name: 'parentState',
parent: 'parentParentState',
url: '/:department_id/object/:object_id?department_name&object_name',
ncyBreadcrumb: {
label: '<% resNavCtrl.stateLabel %>'
},
views: {
'main': {
controller: 'resourcesNavController',
controllerAs: 'resNavCtrl',
templateUrl: templateUrl
}
},
params: {
department_name: null,
object_name: null
},
};
var childState = {
name: 'childState',
parent: 'parentState',
url: '/:resourceType?resourceTypeName',
ncyBreadcrumb: {
label: '<% resCtrl.stateLabel %>'
},
views: {
'main#': {
controller: 'resourcesController',
controllerAs: 'resCtrl',
templateUrl: templateUrl
}
},
params: {
resourceType: '',
resourceTypeName: ''
}
};

You can use this breadcrumb instead
Use this directive as <div md-breadcrumb></div> or <md-breadcrumb></md-breadcrumb>
Note: This works only with Angular UI Router
md-breadcrumb.tmpl.html
<article>
<nav class="breadcrumb-block" role="navigation">
<span class="icon-breadcrumb-mobile"></span>
<div class="nav-wrapper breadcrumb-content">
<a ng-repeat="breadcrumb in breadcrumbs track by $index" ng-if="!$first" href="" class="breadcrumb" title="{{breadcrumb.url}}" ng-click="onClickingLink($event, breadcrumb)">{{breadcrumb.url | firstLetterCaps}}</a>
</div>
<div ui-view class="breadcrumb-child"></div>
</nav>
</article>
md-breadcrumb.ctrl.js
function breadcrumbController($scope, $state) {
$scope.breadcrumbs = [];
stateChanged(); // call to get initial breadcrumb
// change breadcrumb on each state change success
$scope.$on('$stateChangeSuccess', stateChanged);
// executes on $stateChangeSuccess
function stateChanged(){
$scope.breadcrumbs = getParentList($state.$current); // holds all active states
$scope.onClickingLink = onClickingLink; // holds link clicking function
$scope.breadcrumbs.reverse(); // reverse breadcrumbs child to root states
}
// executes on link click
function onClickingLink(event, breadcrumb) {
event.preventDefault(); // prevent default action
$state.go(breadcrumb.stateName); // move to state
}
// below function used to get parent states
function getParentList(state) {
var parentList = []; // holds parent states list
while(state) { // loop until root state occurs
// push into parentList array
parentList.push({'state': state, 'url': state.self.url.slice(1, state.self.url.length), 'stateName': state.toString()});
state = state.parent; // make parent as current state for loop
}
return parentList; // return parentList
}
}
md-breadcrumb.directive.js
function breadcrumbDirective() {
return {
restrict: 'EA',
templateUrl: 'md-breadcrumb.tmpl.html',
controller: breadcrumbController
}
}
md-breadcrumb.css
.breadcrumb:before {
display: none;
}
.breadcrumb-block {
box-shadow: none;
background: inherit;
height: auto;
line-height: 1.5;
margin-top: 0px;
padding-right: 12px;
}
.breadcrumb-block .breadcrumb {
color: #ffffff;
font-size: 14px;
padding: 8px 18px 8px 28px;
background: #015798;
position: relative;
display: block;
float: left;
}
.breadcrumb-block .breadcrumb:hover, .breadcrumb-block .breadcrumb:focus {
background-color: #0288D1;
outline: none;
}
.breadcrumb-block .breadcrumb:hover:after, .breadcrumb-block .breadcrumb:focus:after {
border-left: 10px solid #0288D1;
}
.breadcrumb-block .breadcrumb:first-child {
padding-left: 18px;
}
.breadcrumb-block .breadcrumb:last-child{
color: #ffffff;
/*font-size: 13px;
font-weight: 500;*/
background-color: #0288D1;
}
.breadcrumb-block .breadcrumb:last-child:after {
border-left: 10px solid #0288D1;
}
.breadcrumb-content:after {
display: block;
content: " ";
clear: both;
}
.breadcrumb-block .breadcrumb-icon:after,
.breadcrumb-block .breadcrumb:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #015798;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
z-index: 1;
}
.breadcrumb-block .breadcrumb-icon:before,
.breadcrumb-block .breadcrumb:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #DDDAD5;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb-block .breadcrumb-icon:after {
border-left: 10px solid #FFF;
}
/*.breadcrumb-block .breadcrumb:last-child:after {
content: " ";
display: block;
border-left-color: #fff;
}*/
.breadcrumb-block .breadcrumb:last-child:before {
content: " ";
display: block;
}
.breadcrumb-block .breadcrumb-icon {
font-size: 16px;
color: #B8B8B8;
display: none;
padding: 10px 12px 12px 12px;
background: #fff;
width: 40px;
height: 40px;
position: relative;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.breadcrumb-content {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
display: inline-block;
}
.breadcrumb-block a:focus {
border-bottom: 0px none;
}
#media only screen and (max-width: 799px) {
.breadcrumb-block .breadcrumb-icon {
display: block;
margin-bottom: 5px;
}
.breadcrumb-block .breadcrumb-content .breadcrumb {
display: block;
width: 100%;
margin-bottom: 5px;
}
.breadcrumb-block .breadcrumb:before,
.breadcrumb-block .breadcrumb:after {
/*content: "";*/
/*display: none;*/
}
.breadcrumb-block .breadcrumb {
padding-left: 18px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.breadcrumb-content {
display: block;
box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);
width: 100%;
}
}
.subcrumb {
color: #015798;
cursor: pointer;
}
.breadcrumb-child {
padding: 20px;
font-size: 15px;
}

Stying in React-tag-input

I am using "React-tag-input" react-tag-input.
But can't find how to do styling of react-tag-input
my code looks like this
import { WithContext as ReactTags } from 'react-tag-input';
const App = React.createClass({
getInitialState() {
return {
tags: [],
suggestions: []
}
},
handleDelete(i) {
let tags = this.state.tags;
tags.splice(i, 1);
this.setState({tags: tags});
},
handleAddition(tag) {
let tags = this.state.tags;
tags.push({
id: tags.length + 1,
text: tag
});
this.setState({tags: tags});
},
handleDrag(tag, currPos, newPos) {
let tags = this.state.tags;
tags.splice(currPos, 1);
tags.splice(newPos, 0, tag);
this.setState({ tags: tags });
},
render() {
let tags = this.state.tags;
let suggestions = this.state.suggestions;
return (
<div>
I am looking for styling in ReactTags
<ReactTags tags={tags}
suggestions={suggestions}
handleDelete={this.handleDelete}
handleAddition={this.handleAddition}
handleDrag={this.handleDrag} />
</div>
)
}
});
ReactDOM.render(<App />, document.getElementById('app'));
Can you guide me, how to do styling in this??

You can use CSS. From the documentation:
<ReactTags> does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. By default, the component provides the following classes with which you can style -
ReactTags__tags
ReactTags__tagInput
ReactTags__tagInputField
ReactTags__selected
ReactTags__selected ReactTags__tag
ReactTags__selected ReactTags__remove
ReactTags__suggestions
So, if you want to change the background of a tag, you could do something like this in your CSS:
.ReactTags__tag {
background-color: red;
}

/* Example Styles for React Tags*/
#app {
padding: 40px;
}
div.ReactTags__tags {
position: relative;
}
/* Styles for the input */
div.ReactTags__tagInput {
width: 200px;
border-radius: 2px;
display: inline-block;
}
div.ReactTags__tagInput input.ReactTags__tagInputField,
div.ReactTags__tagInput input.ReactTags__tagInputField:focus {
height: 31px;
margin: 0;
font-size: 12px;
width: 100%;
border: 1px solid #eee;
padding: 0 4px;
}
/* Styles for selected tags */
div.ReactTags__selected span.ReactTags__tag {
border: 1px solid #ddd;
background: #eee;
font-size: 13px;
display: inline-block;
padding: 6px;
margin: 0 5px 5px 5px;
cursor: default !important;
border-radius: 2px;
}
div.ReactTags__selected a.ReactTags__remove {
color: #9c9c9c;
margin-left: 5px;
cursor: pointer;
}
/* Styles for suggestions */
div.ReactTags__suggestions {
position: absolute;
color: #000 !important;
font-weight: normal !important;
font-size: 14px !important;
}
div.ReactTags__suggestions ul {
list-style-type: none;
box-shadow: .05em .01em .5em rgba(0,0,0,.2);
background: white;
width: 200px;
}
div.ReactTags__suggestions li {
border-bottom: 1px solid #ddd;
padding: 15px 10px;
margin: 0;
}
div.ReactTags__suggestions li mark {
text-decoration: underline;
background: none;
font-weight: 600;
}
div.ReactTags__suggestions ul li.ReactTags__activeSuggestion {
background: #b7cfe0;
cursor: pointer;
}

link in html is not working

I have the following code snippet that I am embedding into a Wix website.
// JavaScript
var countries = [
{ name: 'Thailand', link: 'www.google.com' },
{ name: 'Tanzania', link: '' },
{ name: 'Tunisia', link: '' },
{ name: 'Taiwan', link: '' },
];
var matchingCountries = [];
function updateCountry() {
var searchTerm = document.getElementById('countrySearchInput').value;
var resultsList = document.getElementById('countrySearchResults');
resultsList.innerHTML = '';
if(searchTerm.length === 0) return;
var matchingCountries = countries.filter(function(country) {
return country.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;
});
if(matchingCountries.length > 0) {
var fewerCountries = matchingCountries.splice(0, Math.min(matchingCountries.length, 5));
fewerCountries.forEach(function(country) {
resultsList.innerHTML += "<li><a href='" + country.link + "'>" + country.name + "</a></li>";
});
} else {
resultsList.innerHTML += "<li>No search results</li>";
}
}
function startSearch() {
document.getElementById('countrySearchResultsContainer').style.display = 'block';
}
function endSearch() {
document.getElementById('countrySearchResultsContainer').style.display = 'none';
}
/* CSS */
#country-search {
font-family: Helvetica;
}
*, *:before, *:after {
box-sizing: border-box;
}
#country-search {
width: 400px;
display: block;
}
#country-search .entry input {
width: 400px;
font-size: 24px;
padding: 12px;
border-radius: 10px;
border: 3px solid white;
background-color: rgba( 150, 150, 150, 0.1);
margin: 0;
}
#country-search .entry input:focus {
/*
border: 3px solid white;
outline: none;
*/
}
#countrySearchResultsContainer {
width: 100%;
border: 3px solid #eee;
border-radius: 5px;
display: none;
background-color: rgba(220,220,220,0.7);
}
#countrySearchResults {
margin: 0;
width: 100%;
padding: 0;
}
#countrySearchResults li {
font-size: 24px;
list-style-type: none;
padding: 12px;
}
#countrySearchResults li:hover {
background-color: #eee;
}
#countrySearchResults li:not(:last-child) {
padding-bottom: 10px;
}
#countrySearchResults li a {
text-decoration: none;
color: black;
}
#countrySearchResults li a:visited {
color: black;
}
#countrySearchInput {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-webkit-input-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-moz-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-ms-input-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-ms-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<!-- HTML -->
<div id="country-search">
<div class="entry">
<input id="countrySearchInput" type="text" placeholder="Enter a country name" onkeyup="updateCountry()" onfocus="startSearch()" onblur="endSearch()" />
</div>
<div id="countrySearchResultsContainer">
<ul id="countrySearchResults">
</ul>
</div>
</div>
In this script, I am trying to type in Thailand, and when it appears as an option, I click it. However, when I do, the website: "www.google.com" does not pop up. What am I missing?

The URL that you have entered is incorrect. When referencing external websites you need to include the scheme. Change the link from www.google.com to http://www.google.com and you will be able to open the link when entering Thailand.

When you use www.google.com, the link will refer to a file or something in the folder the HTML files in in called www.google.com. If you want to use a weblink in your file, you should consider adding http:/ or https:/ before your link.
https:/www.google.com/

What is wrong with this tabbed content?

I have a google map and a contact form on my contact.html file. They were displayed block as default. I wanted to change it to a tabbed look.
Let's say i have a code like this in HTML:
<div id="tab-group" class="tab-group">
<h3 class="tab-header activate" id="tab-header-1">We are here</h3>
<div class="tab-content activate" id="tab-content-1"></div>
<h3 class="tab-header" id="tab-header-2">Contact us</h3>
<div class="tab-content" id="tab-content-2">
The content in that div with the id="tab-content-1" , I have a google map with the necessary script in the head. And in div with the id="tab-content-2", I have a contact form like;
<form class="tab-content-2" method="post" action="contact-post.html">
<div>
<span><label>NAME</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>PHONE</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>YOUR MESSAGE</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" value="Send me"></span>
</div>
</form>
Here is the JavaScript:
"use strict";
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('tab-group').className = 'activate';
var headerClass = 'tab-header',
contentClass = 'tab-content';
document.getElementById('tab-group').addEventListener('click', function(event) {
var myHeader = event.target;
if (myHeader.className !== headerClass) return;
var myID = myHeader.id, // e.g. tab-header-1
contentID = myID.replace('header', 'content'); // result: tab-content-1
deactivateAllTabs();
myHeader.className = headerClass + ' activate';
document.getElementById(contentID).className = contentClass + ' activate';
});
function deactivateAllTabs() {
var tabHeaders = document.getElementsByClassName(headerClass),
tabContents = document.getElementsByClassName(contentClass);
for (var i = 0; i < tabHeaders.length; i++) {
tabHeaders[i].className = headerClass;
tabContents[i].className = contentClass;
}
}
});
I know I have to clean all these up but i am lost in such a basic thing and getting angry, here is the CSS:
#tab-group h3 {
text-align: left;
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
.activate {
position: relative;
margin-bottom: 2em;
}
#tab-group.activate .tab-header {
font-weight: normal;
font-size: 13px;
text-transform: uppercase;
padding: 4px 6px;
display:inline;
}
.activate .tab-header {
position: absolute;
top: 0;
margin: 0;
padding: 0.25em 0.5em;
left: 0;
background: rgba(168, 161, 152, 0.34);
border: 1px solid #161616;
border-radius: 4px 4px 0 0;
z-index: 2;
cursor: pointer;
}
.activate .tab-header.activate {
background: #000;
}
.activate .tab-content {
position: relative;
top: 0;
margin: 0;
padding: 0.5em;
top: 24px;
border: 1px solid #999;
z-index: 1;
background: white;
zoom: 1;
}
.activate .tab-content:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.activate #tab-header-2 {
left: 9em;
}
.activate .tab-content {
}
.activate .tab-content:active {
display: block;
}
#tab-content-1 {
width: 56.4em;
height:30em;
}
#tab-header-1 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-header-2 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-content-2{
position:relative;
padding-bottom:30px;
background-color:#000;
}
I want it to act like a simple tabbed content. Yet, the contents of the tabs are displayed as block and it doesn't change the content when you click on h3 tab-headers.
it looks like this.....
What am I doing wrong ? Thanks in advance...

It should just be a simple fix. Try adding:
.activate .tab-content { display: none; }
.activate .tab-content.activate { display: block; }
That way, only the active tab is visible, and the others are hidden.
Check it out: http://jsfiddle.net/t8G57/2/