I am making an angularJS app where my goal is, when a user clicks a button inside one of the ng-repeat div, it should get focus by blurring all the other entries in of ng-repeat. I have created a minimal plunkr and described the problem with the image below.
I have this html
<ul ng-repeat="detail in details">
<li>
<div style="border-style:solid;"> {{detail.name}} </div>
</li>
</ul>
and the Empty Controller:
app.controller('MainCtrl', function ($scope) {
$scope.details =
[
{ "name": "Employees" },
{ "name": "Support" }
];
$scope.details.name =
[
{ "prof": "enginerr" },
{ "prof": "doctor" }
];
});
I have also added an image for demonstration
and created a plunkr for reference.
I am trying to achieve the bottom part of the image.
Thanks in advance.
Here's the sample I have created , please refer to it . Hopes this help you out. Thanks.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.details = [
{ "name": "Employees" },
{ "name": "Support" }
];
$scope.details.name = [
{ "prof": "enginerr" },
{ "prof": "doctor" }
];
$scope.isActive=false;
$scope.clickMe = function(index){
$scope.currentIndex=index;
$scope.isActive=!$scope.isActive;
}
});
/* Put your css in here */
.notActive {
pointer-events: none;
cursor: not-allowed;
opacity: 0.3;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li style="border-style:solid;" ng-class="{'notActive':isActive && currentIndex!=$index}">
<div > {{detail.name}} </div>
<button ng-click="clickMe($index)">Click me</button>
</li>
</ul>
</body>
</html>
Related
I want transform child element rotate if parent element have class open. Example in css
ul li.open > a > .sidebar-collapse-icon {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
How can I do it in tailwind?
Couldn't find the exact solution on Tailwind documentation. So tried this hack (instead of open, use group class):
<ul>
<li class="group">
<a>
<span class="sidebar-collapse-icon group-only:-rotate-180"></span>
</a>
</li>
</ul>
You should control css through JavaScript. Tailwind CSS is not relevant by question. I work with her and love this lib.
For example if you use:
Vanilla (pure) JavaScript:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
const el = document.querySelector('.container')
if (el) {
el.style.backgroundColor = 'red'
}
</script>
</body>
</html>
React (Hooks):
import React, { useState } from 'react'
export default function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
if (!isOpen) {
return null
}
return (<div className="some-tailwind-class"></div>)
}
Vue if-show directive:
<template>
<div if-show="!isOpen" class="some-tailwind-class"></div>
</template>
<script>
export default {
data() {
return {
isOpen: false;
}
}
}
</script>
Vue v-if directive:
<template>
<div if-show="!isOpen" class="some-tailwind-class"></div>
</template>
<script>
export default {
data() {
return {
isOpen: false;
}
}
}
</script>
I want to make an editor of files. By the following code (JSBin), we list all the file names on the left hand, and their body on the right hand. I use ui-codemirror to style the body of the files.
However, when we click on the file names and switch from one to another, from time to time, we could see the quick flick from a textarea to a codemirror frame, which is not a good experience for an editor.
Does anyone have a solution to avoid the flick? Addtionally, is it a good direction to make an editor by angularJS and ui-codemirror?
<html ng-app="flapperNews">
<head>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('file', {
template: '<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
controller: 'FileCtrl',
params: { name: null }
})
}]);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.files = [
{ name: "index.html", body: "<html><body>index.html</body></html>" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }];
}]);
app.controller('FileCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
$scope.file = $scope.files.find(function (file) { return file.name === $stateParams.name });
$scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ui-sref="file({name: file.name})">{{file.name}}</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
Every time you click on the link, it is creating new editor, which is an expense operation.
The best approach is to create one editor and load the content on every click.
so I removed the ui-router linking (ui-sref) and related controllers
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.files = [
{ name: "index.html", body: "<html><body>index.html</body></html>" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }];
$scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
// for every click event it will load the content
$scope.go=function(file){
$scope.file=file;
}
}]);
and the body
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ng-click="go(file)">{{file.name}}</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>
</div>
</div>
</body>
Example : JSBin
you could avoid the flick by adding hide class to textarea like the following code ( jsbin )
template: '<textarea class="hide" ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
I have created one AngularJs directive to clear the input field. I want the "close" icon to be placed inside the respective input element. But its going out of input field.
Here is the plnkr -
https://plnkr.co/edit/WHjRviyuYfFVfg2TnVUP?p=preview
Note: Please check the plnkr preview by resizing it.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: function(scope, element, attr) {
// Add wrapper to the element
scope.model = (scope.model == undefined) ? "" : scope.model;
element.wrap('<span class="wrapper"></span>')
.addClass('pr14')
.after('<span class="clear">×</span>');
var clearInputElement = angular.element(element.next());
clearInputElement.bind('click', function() {
scope.$apply(scope.model = "");
});
scope.$watch('model', function() {
if (scope.model.length > 0) {
clearInputElement.css("visibility", "visible");
} else {
clearInputElement.css("visibility", "hidden");
}
});
}
}
});
.wrapper {
position: relative;
display: inline-block
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</body>
</html>
As input tags are not container tag, you need to wrap input tag and close tag in a div.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: function(scope, element, attr) {
// Add wrapper to the element
scope.model = (scope.model == undefined) ? "" : scope.model;
element.wrap('<span class="wrapper"></span>')
.addClass('pr14')
.after('<span class="clear">×</span>');
var clearInputElement = angular.element(element.next());
clearInputElement.bind('click', function() {
scope.$apply(scope.model = "");
});
scope.$watch('model', function() {
if (scope.model.length > 0) {
clearInputElement.css("visibility", "visible");
} else {
clearInputElement.css("visibility", "hidden");
}
});
}
}
});
.wrapper {
position: relative;
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
.wrap{position:relative;}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<div class="wrap">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
</div>
<br>
<div class="wrap">
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</div>
</body>
</html>
Change your .wrapper class like this:
.wrapper {
position: relative;
display: inline-block;
}
I want to add active class to menu bar when it is active. I tried below javascript code at my workplace but didn't work. here is the online link of plunkr
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<script type="text/ng-template" id="pages/home.html">
<h1>Home</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/blog.html">
<h1>Blog</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/about.html">
<h1>About</h1>
<h3>{{message}}</h3>
</script>
Home
Blog
About
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>
javascript file
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'HomeController'
})
.when('/blog', {
templateUrl : 'pages/blog.html',
controller : 'BlogController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'AboutController'
})
.otherwise({redirectTo: '/'});
});
app.controller('HomeController', function($scope) {
$scope.message = 'Hello from HomeController';
});
app.controller('BlogController', function($scope) {
$scope.message = 'Hello from BlogController';
});
app.controller('AboutController', function($scope) {
$scope.message = 'Hello from AboutController';
});
In Html
<ul ng-repeat="menu in topMenuData.menu" class="nav navbar-nav">
<li ng-class="{active: isActiveMenu(menu)}">
<a ui-sref="{{menu.Url}}" ui-sref-opts="{reload: true, notify: true}" data-ng-click="isNoteClick(menu.Url)">
<i class="{{menu.IconCssClass}}"></i> {{menu.Name}}</a>
</li>
</ul>
In your Js
function isActiveMenu(menu) {
//if menu is current then show selected
if ($state.current.name.indexOf(menu.Url) == 0) {
return true;
}
return result;
}
In CSS
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff !important;
background-color: #E9573E !important;
}
Add a variable in controller named for get current path
app.controller('HomeController', function($scope, $location, $rootScope) {
$rootScope.activePath = $location.path();
$scope.message = 'Hello from HomeController';
});
app.controller('BlogController', function($scope, $location, $rootScope) {
$rootScope.activePath = $location.path();
$scope.message = 'Hello from BlogController';
});
app.controller('AboutController', function($scope, $location, $rootScope) {
$rootScope.activePath = $location.path();
$scope.message = 'Hello from AboutController';
});
Then add ng-class in link
Home
Blog
About
OR
Home
Blog
About
I've got a super simple site I'm experimenting with jquery. I've a CSS stylesheet but some of the properties are just getting ignored. For example, I'm setting the padding and border-radius properties. I checked the browser (firefox, though chrome is the same):
Error in parsing value for 'padding'. Declaration dropped. stylesheet.css:26:12
Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:28:15
Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:33:15
Error in parsing value for 'width'. Declaration dropped. stylesheet.css:40:7
Error in parsing value for 'height'. Declaration dropped.
Even width and height, which I've actually managed to set for some other divs! It seems totally random, some properties just don't get parsed, such as the border-radius.
So the result (snippet below) looks like this:
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);
$(document).ready(function() {
$('.square').mouseenter(function() {
$(this).animate({
width: '+=30px'
});
});
$('.square').mouseleave(function() {
$(this).animate({
width: '-=30px'
});
});
$('.square').click(function() {
$(this).toggle(1000);
});
var size = 10;
var graphData = [new Array(size),new Array(size)];
var column1 = graphData[0];
var column2 = graphData[1];
column1[0] = "Data1";
column2[0] = "Data2";
for (i = 1; i < column1.length; i++) {
column1[i] = i;
column2[i] = 2*i;
}
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['Data set 1'].concat(column1),
['Data set 2'].concat(column2)
],
types: {
'Data set 1': "step",
'Data set 2': "step"
}
}
});
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
var size = 40;
var column1 = new Array(size);
var last = 0;
for (i = 0; i < column1.length; i++) {
var newn = last + (0.5 - Math.random());
column1[i] = [i,newn];
last = newn;
}
data.addRows(column1);
var options = {
hAxis: {
title: 'Time2'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
#CHARSET "ISO-8859-1";
#red {
background-color:#FF0000;
}
#blue {
background-color:#0000FF;
}
#yellow {
background-color:#E2BE22;
}
#green {
background-color:#008800;
}
.blockspace {
height:70px;
width:400px;
margin-left:auto;
margin-right:auto;
padding:10;
border-radius:10;
background-color:#c8d8e8;
}
.square {
border-radius:10;
height:50px;
width:50px;
display: inline-block;
}
.chart {
width:350;
height:300;
display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hello World!</title>
<!-- Load c3.css -->
<!-- <link rel="stylesheet" type="text/css" href="libraries/bootstrap-3.3.5-dist/css/bootstrap.css">-->
<link rel="stylesheet" type="text/css" href="libraries/c3-0.4.10/c3.css">
<link rel="stylesheet" type="text/css" href="libraries/nvd3-master/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
<!-- Load d3.js and c3.js -->
<!-- <script src="libraries/c3-0.4.10/d3.v3.min.js" charset="utf-8"></script> -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="libraries/c3-0.4.10/c3.min.js"></script>
<script src="libraries/nvd3-master/build/nv.d3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Load jquery and script -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
<h1>A big hello</h1>
<p>Why don't you enjoy these coloured squares:</p>
<div class="blockspace">
<div class="square" id="red"></div>
<div class="square" id="blue"></div>
<div class="square" id="yellow"></div>
<div class="square" id="green"></div>
</div>
<div class="chartExperiments">
<div class="chart" id="chart"></div>
<div class="chart" id="chart_div"></div>
</div>
</body>
</html>
You forget to define the unit of measure, so just add the unit of measure and the issue will be resolved.
.chart {
width:350px; <--px unit of measure
height:300px; <--px unit of measure
display:inline-block;
}
.square {
border-radius:10px; <--px unit of measure
height:50px;
width:50px;
display: inline-block;
}