I am working on angularJS application. I have a webpage with multiple tabs created using angularJs.
Please find the working tabs example : http://plnkr.co/edit/jHsdUtw6IttYQ24A7SG1?p=preview
I want to show the border of all the tabs with rounded corners and highlight the selected tab as shown in the image below. I tried using css but could not achieve as expected. Please suggest.
Code:
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
background-color: pink;
}
.pageSecTitle,.sel td:nth-child(2) {
border: 0;
}
td select {
vertical-align: top;
}
</style>
<script>
//controller for tabs
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller("TabsParentController", function ($scope) {
var setAllInactive = function() {
angular.forEach($scope.workspaces, function(workspace) {
workspace.active = false;
});
};
$scope.workspaces =
[
{ id: 1, name: "Tab1", active:true},
{ id: 2, name: "Tab2", active:false},
{ id: 3, name: "Tab3", active:false}
];
$scope.addWorkspace = function () {
setAllInactive();
};
});
app.controller ("TabsChildController", function($scope, $log){
});
</script>
</head>
<body>
<br><br>
<div ng-controller="TabsParentController">
<tabset>
<tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
active=workspace.active>
<div ng-controller="TabsChildController">
--some dynamic content here--
</div>
</tab>
</tabset>
</div>
</body>
</html>
Try adding this css rule to the css you already have:
.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
border: 1px solid red;
}
It should add a red border for all inactive tabs. You can add a border to the active tab by adding to the css rule you currently use to set the background pink.
Related
I wanted to create an effect where the whole body gets blurred or dimmed and only a particular list item appears clear. However when I set the z-index to the list item, it doesn't work. And when I set the z-index of the whole un-ordered list, it works but the all the list items appear clear (which I don't want).
Let me show you my html code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashish Toppo</title>
<link href="https://fonts.googleapis.com/css?family=Oxanium&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body >
<!-- the html for the top bar starts here -->
<div class="top_bar" id="topBar">
<div class="logo_name" id="logoName">Ashish Toppo</div>
<ul class="menu">
<li class="menu_items currently_active_menuItem" id="home">home</li>
<li class="menu_items" id="about">about</li>
<li class="menu_items" id="education">education</li>
</ul>
</div>
<!-- the html for the top bar ends here -->
<!-- the html for the intro starts here -->
<div class="intro" id="intro">
<div class="profile_pic" id="profilePic">
<img id="profileImg" src="images/ashish-toppo-green.jpg" width="100%" height="100%" alt="a picture of mine">
</div>
<div class="intro_box" id="introBox">
<!-- some introduction text here -->
<center id="aboutPointer">To know more about me, go to the about section!</center>
</div>
</div>
<!-- the html for the intro ends here -->
<script src="js/uiversal.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Now, the Universal javaScript file:
/* this is a reusable js file universal to all web pages */
/* Ashish Toppo */
"use strict";
function get(id_or_class){
var obj = {
element: ( document.getElementById(id_or_class) ) ? document.getElementById(id_or_class) :
( document.getElementsByClassName(id_or_class) ) ? document.getElementsByClassName(id_or_class) :
( document.querySelector(id_or_class) ) ? document.querySelector(id_or_class) :
console.error("The provided HTML element could not be found"),
html: () => { return obj.element; },
changeText: (text) => { obj.html().innerHTML = text; },
appendText: (text) => {
let appendOn = obj.html().innerHTML;
obj.html().innerHTML = appendOn + text;
},
previousDisplayMode: "block",
hide: () => {
obj.previousDisplayMode = obj.html().style.display;
obj.html().style.display = "none";
},
show: () => {
obj.html().style.display = obj.previousDisplayMode;
},
on: (event, callBack) => {
obj.html().addEventListener(event, callBack);
},
previousZIndex: 1,
focusOn: () => {
let blur = document.createElement("div");
blur.className = "theDivThatBlurs";
blur.style.width ="100vw";
blur.style.height ="100vh";
blur.style.display ="block";
blur.style.position ="fixed";
blur.style.top ="0";
blur.style.left ="0";
blur.style.zIndex ="9";
blur.style.backgroundColor ="rgba(0, 0, 0, 0.9)";
blur.innerHTML = "";
document.body.appendChild(blur);
obj.html().style.zIndex = "100";
}
}
return obj;
}
and the index.js file was as followed:
/* my css wasn't working as i wanted, so i had to fix it using js */
"use strict";
(function(d){
const active = d.getElementsByClassName("currently_active_menuItem");
active[0].style.textDecoration = "none";
})(document);
var about = get("about");
var aboutPointer = get("aboutPointer");
aboutPointer.on("click", function(){
console.log("the about pointer has been clicked");
focus(about);
});
function focus(theElement){
console.log("the focus is working");
theElement.focusOn();
}
You can use the box-shadow property to achieve the dimming effect. Quick and easy :)
Just toggle a class programmatically and it should work for any element you have.
Code
function focusAndDim() {
document.getElementById("maindiv").classList.toggle("visible");
// if you want to get more fancy ;)
document.getElementsByTagName("body")[0].classList.toggle("blur");
}
.visible {
box-shadow: 0 0 0 10000px #ccc;
/* this code below make everything else hidden */
/* box-shadow: 0 0 0 10000px #fff; */
position: relative;
}
.btn {
height: 20px;
line-height: 1.4;
border: 2px solid #999;
padding: 12px 24px;
margin-bottom: 10px;
border-radius: 2px;
cursor: pointer;
}
body {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100vh;
}
body.blur div {
filter: blur(2px);
}
body.blur div.visible {
filter: blur(0);
}
<div class="btn" onclick="focusAndDim()" id="maindiv">Click Me</div>
<div>Other elements</div>
I have this code where I populate the post coming from my database with a same class. This will produce multiple <p class="body">{{ $post->body }}</p
#foreach($posts as $post)
<article class="post" data-postid="{{ $post->id }}">
<p class="body">{{ $post->body }}</p>
<div class="info">
Posted by {{ $post->user->first_name }} {{ $post->user->last_name }} on {{ $post->created_at->diffForHumans() }}
</div>
</article>
//Show modal button here
#endforeach
And I have a Edit modal where the user can edit the post and save changes. After the button click, I want to change the background color (fading effect) using js or jquery.
This is my code where the specific <p class="body">{{ $post->body }}</p> background color change without fading effect.
var postBodyElement = event.target.parentNode.parentNode.childNodes[1];
$('#modal-save').on('click', function() {
$.ajax({
method: 'POST',
url: url,
data: {body: $('#post-body').val(), postId: postId, _token: token}
})
.done(function (msg) {
//console.log(JSON.stringify(msg));
$(postBodyElement).text(msg['new_body']);
$('#edit-modal').modal('hide');
postBodyElement.style.backgroundColor = '#eff0f1';
setTimeout(function() {
postBodyElement.style.backgroundColor = 'white';
}, 2000);
});
});
How to add .effect() function to my code or anything? http://api.jqueryui.com/effect/
You can do the transition using CSS and only add/remove a class using JavaScript. For example, consider the following snippet. Of course, you can change the timing to your liking. It is also possible to have the background transition in various different ways (more details).
$('.post').on('click', function() {
var $post = $(this);
$post.addClass('highlight');
setTimeout(function() { $post.removeClass('highlight'); }, 400);
});
.post {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
background-color: #fff;
border: 1px solid #444;
text-align: center;
transition: background-color .3s;
}
.post.highlight {
background-color: #ffb457;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Click me!</div>
<div class="post">Or me!</div>
<div class="post">Or me, maybe...</div>
This exact functionality (3 second glow to highlight a message) is implemented in the jQuery UI as the highlight effect
http://docs.jquery.com/UI/Effects/Highlight
Color and duration are variable.
Example Code Toggle a div using highlight effect.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>highlight demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "highlight" );
});
</script>
</body>
</html>
I found a solution to my problem. I miss this out. I just added this line of code to my current js.
$(postBodyElement).effect("highlight", {color: '#eff0f1'}, 5000);
So here is my final code:
var postBodyElement = event.target.parentNode.parentNode.childNodes[1];
$('#modal-save').on('click', function() {
$.ajax({
method: 'POST',
url: url,
data: {body: $('#post-body').val(), postId: postId, _token: token}
})
.done(function (msg) {
//console.log(JSON.stringify(msg));
$(postBodyElement).text(msg['new_body']);
$(postBodyElement).effect("highlight", {color: '#eff0f1'}, 5000);
$('#edit-modal').modal('hide');
});
});
I'm using React Virtualized in a similar setup like the snippet below. There are a couple of items that are rendered using a CellMeasurer. The last item indicates that more items will be loaded and is not rendered normally. This item has the wrong position/style and the wrong height associated with it. How can I fix this?
If you want to play with it, here is a Plunkr:
https://plnkr.co/edit/TrKdNu4FfNsXqERPVnYo?p=preview
var List = ReactVirtualized.List;
var CellMeasurer = ReactVirtualized.CellMeasurer;
var CellMeasurerCache = ReactVirtualized.CellMeasurerCache;
var cache = new CellMeasurerCache({
fixedWidth: true,
minHeight: 50
});
// List data as an array of strings
var namesList = [
'Brian Vaughn',
'Bob Smith',
'Someone Else',
'I hate making up names for the sake of names.'
// And so on...
];
var App = React.createClass({
getInitialState: function() {
return {
list: namesList
};
},
render: function() {
return <List
className='List'
width={300}
height={300}
rowCount={this.state.list.length + 1}
rowHeight={cache.rowHeight}
deferredMeasurementCache={cache}
list={this.state.list}
rowRenderer={
({ index, isScrolling, key, parent, style }) => {
var item = this.state.list[index];
let result;
if (!item) {
console.log(index);
result =
<div className='Row'
style={style}
key={key}
>Loading!!!
</div>; }
else
result = <CellMeasurer
cache={cache}
columnIndex={0}
key={key}
style={style}
rowIndex={index}
parent={parent}>
{
<div
className='Row'
key={key}
style={style}
>
{this.state.list[index]}
</div>
}
</CellMeasurer>;
return result;
}}/>;
}
});
// Render your list
ReactDOM.render(
<App/>,
document.getElementById('example')
);
.List {
border: 1px solid black;
box-sizing: border-box;
}
.Row {
width: 100%;
height: 100%;
border-bottom: 1px solid black;
display: flex;
align-items: center;
padding: 0 0.5rem;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-virtualized/styles.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="example">
<!-- This element's contents will be replaced with your code... -->
</div>
<script src="script.js"></script>
</body>
</html>
CellMeasurer wasn't intended for use with only certain rows in this way. From an external POV I understand why it looks like it should just work though.
When Grid renders a cell- if it thinks CellMeasurer is being used- then it positions the cell at top:0, left:0 to give it space within the Grid/List to expand. (The size of its container constrains its size, even though it's absolutely positioned. I'm not sure why this is to be honest.)
So in your case, Grid sees the last row hasn't been measured, think it's supposed to be, and positions it at 0,0.
The simplest solution for now would be to just wrap that row in CellMeasurer too.
I am new in Ionic and what I am trying to achieve is to present different non-static information into an accordion that shows or appear with a button. The thing is that each item it will be showing different information and I need to place images an more things.
Can I show a template inside each line or only plain text? How can I show more than only text?
Because the information is in the group array in the controller... so I have no idea how to do it.
I just take the example of the accordion from here...
http://codepen.io/anon/pen/zxJvxJ
HTML...
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic Accordion</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Accordion List</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<div ng-repeat="group in groups">
<ion-item class="item-stable"
ng-click="toggleGroup(group)"
ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
{{group.title}}
</ion-item>
<div ng-show="isGroupShown(group)">
<ion-item ng-repeat="content in group.contents" class="item-accordion">
{{content.line}}
</ion-item>
</div>
</div>
</ion-list>
</ion-content>
</body>
CSS..
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
/*
* http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations
*/
.list .item.item-accordion {
line-height: 38px;
padding-top: 0;
padding-bottom: 0;
transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
display: block !important;
}
JS...
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.groups = [{
title: "INTRODUCTION",
contents: [
{
line: "DONT BE AFRAID"
},
{
line: "WHY, WHAT & WHO"
},
{
line: "PITCH OR PRESENT"
},
{
line: "GREAT PRESENTATIONS"
}
]
},
{
title: "PREPARATION",
contents: [
{
line: "WHY?"
},
{
line: "WHAT IS THE MESSAGE?"
},
{
line: "WHAT IS THE VEHICLE?"
},
{
line: "WHO ARE THE AUDIENCE?"
}
]
},
{
title: "PITCH STRUCTURE",
contents: [
{
line: "BLAH"
},
{
line: "BLAH"
},
{
line: "BLAH"
},
{
line: "BLAH"
},
{
line: "BLAH"
},
{
line: "BLAH"
},
{
line: "BLAH"
}
]
}
];
/*
* if given group is the selected group, deselect it
* else, select the given group
*/
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
});
So if anyone can point me the correct path to follow now it would be great.
Thank you very much!
I am working on Angular UI for making my menus sortable, sometimes the code works and sometimes its breaks like duplicating the entries or filling the blank menus when I am re arranging items.
Following is the full code -
<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<title>Angular Sortable Demo</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script>
var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
$scope.list = ["one", "two", "three", "four", "five", "six"];
});
//angular.bootstrap(document, ['myapp']);
</script>
</head>
<body>
<div ng:controller="controller">
<ul ui:sortable ng:model="list">
<li ng:repeat="item in list" class="item">{{item}}</li>
</ul>
<hr />
<div ng:repeat="item in list">{{item}}</div>
</div>
</body>
</html>
<style>
.item, .placeholder {
padding: 2px;
width: 50px;
height: 20px;
border: 1px solid #333;
background: #EEE;
}
.placeholder {
background: #AEF;
}
</style>
Also If someone could help me while creating this in JSFiddle as I tried this but unable to set it as a fiddle - Fiddle Link
EDIT-
This is how it becomes at times Screenshot (Menu Items duplicated)
I wrote my own directive (plnkr):
<ol dnd-list="wrap.names">
<li ng-repeat="name in wrap.names">{{name}} is {{$index}}</li>
</ol>
// directive for a single list
app.directive('dndList', function() {
return function(scope, element, attrs) {
// variables used for dnd
var toUpdate;
var startIndex = -1;
// watch the model, so we always know what element
// is at a specific position
scope.$watch(attrs.dndList, function(value) {
toUpdate = value;
},true);
// use jquery to make the element sortable (dnd). This is called
// when the element is rendered
$(element[0]).sortable({
items:'li',
start:function (event, ui) {
// on start we define where the item is dragged from
startIndex = ($(ui.item).index());
},
stop:function (event, ui) {
// on stop we determine the new index of the
// item and store it there
var newIndex = ($(ui.item).index());
var toMove = toUpdate[startIndex];
toUpdate.splice(startIndex,1);
toUpdate.splice(newIndex,0,toMove);
// we move items in the array, if we want
// to trigger an update in angular use $apply()
// since we're outside angulars lifecycle
scope.$apply(scope.model);
},
axis:'y'
})
}
});
Its Working Fine.... Take a look at this
Preview
JSFiddle
html
<div ng:controller="controller">
<ul ui:sortable ng:model="list">
<li ng:repeat="item in list" class="item">{{item}}</li>
</ul>
<hr />
<div ng:repeat="item in list">{{item}}</div>
</div>
script
var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
$scope.list = ["one", "two", "three", "four", "five", "six"];
});
angular.bootstrap(document, ['myapp']);