Selecting last visible child using css [duplicate] - css-selectors

This question already has answers here:
A CSS selector to get last visible div
(11 answers)
Closed 4 years ago.
How to select last visible child using css
<div>
<span>1</span>
<span>2</span>
<span>3</span> <!— last visible child —>
<span style=“display:none”>4</span>
<span style=“display:none”>5</span> <!— last child —>
</div>

Using jquery you can add css for last visible child
$('span:visible:last').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<!— last visible child —>
<span style='display:none'>4</span>
<span style='display:none'>5</span>
<!— last child —>
</div>

Related

Parent selector: is it possible to target a div which is inside multiple div?

I would like if it's possible to select a div that is the child of two previous div. Based on my code the targeted div is "Middle" but it is inside :
class="start-page epages no-sidebars"
AND
class="Layout1 GeneralLayout Div"
I tried ".start-page .Middle " but it doesn't work
<body class="start-page epages no-sidebars" itemtype="http://schema.org/CollectionPage">
<div class="Layout1 GeneralLayout Div">
<div class="Header HorizontalNavBar HeaderSticky">
</div>
<div class="NavBarTop HorizontalNavBar" style="background-position-y: 90px;">
</div>
<div class="Middle">
</div>
</div>
</body>

How to set background color for a div dynamically in angular? [duplicate]

This question already has answers here:
Apply CSS style attribute dynamically in Angular JS
(6 answers)
Closed 5 years ago.
I'm very new to angular. I'm getting the background color to be shown from a backend api. I want to set it as a div's background color:
I've tried:
<div style="background-color: {{vitalItem.value.color}}" >
but the color is not set. In console, it shows:
WARNING: sanitizing unsafe style value background-color: #d9534f (see http://g.co/ng/security#xss)
Any help is appreciated..
EDIT:
Here's my html
<div class="latest-reading-box">
<div class="latest-reading-container value-contain-type" ng-style="{'background-color': vitalItem.value.color}">
<p class="p-time">{{vitalItem.value != null ? vitalItem.value.date : ""}}</p>
<h3 class="latest-value">{{vitalItem.value != null ? vitalItem.value.value : ""}}</h3>
<p class="type-value">{{vitalItem.value != null && vitalItem.value.vitalEntryType != 0 ?
getVitalEntryTypeName(vitalItem.value.vitalEntryType): ""}}</p>
</div>
</div>
In chrome's inspect, this is what see:
<div _ngcontent-c1="" class="latest-reading-container value-contain-type" ng-style="{'background-color': vitalItem.value.color}">
<p _ngcontent-c1="" class="p-time">08 Jul, 2017</p>
<h3 _ngcontent-c1="" class="latest-value">67</h3>
<p _ngcontent-c1="" class="type-value"></p>
</div>
everything except vitalItem.value.color is showing their value. Why is ng-style not working?
You can use ng-style to achieve this
<div ng-style="{'background-color':vitalItem.value.color}" >

Compile hidden elements in angular [duplicate]

This question already has answers here:
Insert HTML into view from AngularJS controller
(17 answers)
Closed 6 years ago.
I have a directive with an ng-repeat that outputs a list.
When hover over one of the items, a tooltip will be displayed.
The problem is that the "hover" text isn't compiled, and is displayed as a normal string: "test".
How do I go about compiling it?
Thanks
$scope. items = [{
name: "Test1",
type: 0,
hover: "<h4>test</h4>"
}];
<li ng-repeat="item in items">
<div ng-if="activeItemIndex === $index">
<div>{{item.hover}}</div>
</div>
</li>
Angular escapes html by default. To render variable value as it is use ng-bind-html directive:
<div ng-if="activeItemIndex === $index">
<div ng-bind-html="item.hover"></div>
</div>

Angular js drag and drop

I want to have drag and drop feature in the following structure.
Im using this library to make the above structure draggable.
But it has certain conditions to follow.
Main Parent is not draggable.
Main Parent can have any number of children.
Children can have any number of items.
Lets take Child 4.1. Say Item1 is of type admin and Item2 and Item3 are type users. Child can have only one admin but can have any number or users.
Next the condition for the child elements.
Child 4 has Child 4.1, but child 4.1 cannot have a inner child 4.1.1.
Child can move only upto level 3.
Child can be dragged from level 3 to level 2 and vice versa.
In this case, Child 3 can be dragged to as Child 4.2 and Child 4.1 can be dragged to as a new Child 5 or level 3 child named Child 3.1.
Im trying to integrate nested and type drag and drop to achieve this structure.
EDIT 1
Fiddle of what i have achieved so far.
Here type checking is done between 'men' and 'woman'. Each container can have only 3 men and 2 woman.
Now I want to make the list/child draggable and to be drop inside other list/child and these children will be inside one main parent which cannot be dragged
<script type="text/ng-template" id="types.html">
<ul dnd-list="list.people"
dnd-allowed-types="list.allowedTypes"
dnd-dragover="dragoverCallback(index,type,list,((list.people | filter:{type: 'men'}).length >= list.maxM),((list.people | filter: {type: 'woman'}).length >= list.maxW))"
dnd-drop="dropCallback(index, item, type)"
dnd-disable-if="(list.people.length >= (list.maxM+list.maxW))">
<li ng-repeat="person in list.people"
dnd-draggable="person"
dnd-type="person.type"
dnd-moved="list.people.splice($index, 1)"
dnd-effect-allowed="move" class="background-{{person.type}}">
<dnd-nodrag>
<div dnd-handle class="handle">:::</div>
<div class="name">
<input type="text" ng-model="person.name" class="background-{{person.type}} form-control input-sm">
</div>
</dnd-nodrag>
</li>
<li class="dndPlaceholder">
Drop any <strong>{{list.allowedTypes.join(' or ')}}</strong> here
</li>
</ul>
</script>
<div class="typesDemo">
<div ng-repeat="list in lists" class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">List of {{list.label}} (max. {{list.max}})</h3>
</div>
<div class="panel-body" ng-include="'types.html'"></div>
</div>
</div>
</div>
Used the callback listeners to satisfy my needs.
dnd-dragstart="dragStartCallBack(list,item,$index)"
dnd-dragover="dragoverCallback(event,list,type,index)"
dnd-drop="dropCallback(event,list,item,index)"
dnd-inserted="insertedCallback(event,list,item,index)"

controlling preventDefault on item inside of <a> [duplicate]

This question already has answers here:
How to preventDefault on anchor tags?
(28 answers)
Closed 8 years ago.
Here's how the code is setup :
<a class="list-group-item" data-ng-click="displayProject()">
<span class="icon" data-ng-click="showChildren()"><i class="icon ion-android-arrow-dropdown"></i> </span>
<span class="icon"><i class="icon ion-folder"></i></span>
<span data-ng-bind="project.name"></span>
</a>
As you can see, I have everything wrapped in an <a> tag, and there's an ng-click event on it. Basically it displays the selected project in another view.
Inside the <a>, I have an icon with another ng-click event, in this case, displaying the children of the specific project.
Of course, if I click on the icon, the displayProject() event is called.
How would I go about cancelling / using preventDefault on the <a> tag when the icon is clicked?
Thank you !
You can have an access to event by passing $event to ng-click callback.
<span class="icon" data-ng-click="showChildren($event)"><i class="icon ion-android-arrow-dropdown"></i> </span>
and in showChildren method:
$event.preventDefault();

Resources