Develop Reference

How to close a `div` box in Angular when I click outside of it.Without using jQuery

I am working on a site which has been created using Angular. On the homepage I have a Service Box that contains icons which redirects us to different pages. Currently when I click on service box icon it displays the service box:
Now Whenever I click outside of it, it does not close. I am not using jQuery in my project. I have seen many answers for AngularJs but none worked.
Here is my code for service-box.component.html:
<button mat-icon-button (click)="opened = !opened">
<mat-icon>apps</mat-icon>
</button>
<div class="box" [class.opened]="opened">
<div class="tip">
<div class="border"></div>
<div class="foreground"></div>
</div>
<div class="services">
<div class="row">
<a href="https://blog.fossasia.org">
<div class="col">
<div class="img">
<img src="assets/images/blog.png" alt="Fossasia">
</div>
<span>Blogs</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search">
<div class="col">
<div class="img">
<img src="assets/images/github.png" alt="Fossasia">
</div>
<span>Github</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search/issues">
<div class="col">
<div class="img">
<img src="assets/images/bug.png" alt="Fossasia">
</div>
<span>Bug Report</span>
</div>
</a>
</div>
</div>
<hr />
<div class="services">
<div class="row">
<a href="https://fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
</div>
<span>FOSSASIA</span>
</div>
</a>
<a href="https://phimp.me">
<div class="col">
<div class="img">
<img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
</div>
<span>Phimpme</span>
</div>
</a>
<a href="https://susper.com/">
<div class="col">
<div class="img">
<img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
</div>
<span>Susper</span>
</div>
</a>
</div>
<div class="row">
<a href="https://chat.susi.ai/">
<div class="col">
<div class="img">
<img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
</div>
<span>Susi.AI</span>
</div>
</a>
<a href="https://pslab.fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
</div>
<span>PSLab</span>
</div>
</a>
<a href="https://eventyay.com/">
<div class="col">
<div class="img">
<img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
</div>
<span>Eventyay</span>
</div>
</a>
</div>
</div>
</div>
service-box.component.ts contains only a public variable opened set to false by default.
I have tried to wrap up whole code of service-box.component.html in a div and used (focusout) event like this:
<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>
But doing this disables the links in service box.
Any suggestion will be of great help.

You seem to be using #angular/material and therewith the CDK. You should try the CDK's Overlay package.
The overlay package provides a way to open floating panels on the screen.
By setting the attribute hasBackdrop, the overlay will create a backdrop element (= everything outside of your component) and with it a backdropClick #Output event, to which you could bind the closing of your "Service Box".

JQuery iterate through multiple items and remove the first child of every item

I know it might be a little bit dumm but i am really struggling with simple things like the following problem. Here is an example of the code that i have. The problem will be explained after the code. So here it is:
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
</div>
What i would like to do, is to keep every first item (image_item) of every div with the class "image" and remove the rest. Any idea how to achieve that? So far i got this but it removes everything accept the first one on the first div.
$('.first_only .immo_image').not(':first').remove();
I also tried to iterate through each element with the following code:
$('. image').each(function () {
$('.image_item').not(':first').remove();
});
But it does the same with the other example. It removes everything except the first image on the first div.
Any ideas?
Best regards

You can use $(this).find(".image_item:not(:first)").remove(); to remove all except the first image.
$(".image").each(function() {
$(this).find(".image_item:not(:first)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
</div>

For your particular document tree, this should work:
$('.image').each(function () {
$(this).find('.image-item').slice(1).remove();
});
For each .image, find all .image-item inside it and remove all but the first one (in document order).

There's no need to explicitly loop through the .image elements. You can use a single selector incorporating the :nth-child selector (negated with :not) to remove() all the elements you require. Something like this:
$('.image .image_item:not(:nth-child(1))').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource"> 1-1
</div>
<div class="image_item">
<img src="someSource"> 1-2
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource"> 2-1
</div>
<div class="image_item">
<img src="someSource"> 2-2
</div>
<div class="image_item">
<img src="someSource"> 2-3
</div>
</div>
</div>
</div>

CSS How to keep a hovered element in place

I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.

Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>

How can I wrap href to multiple elements in jquery

I'm trying to add a href tag and get the value of a div because I need to add that value on the href tag using jQuery, I have this code
<div class="field-items">
<div class="field-item even">book
<div class="icon-more_link"></div>
</div>
<div class="field-item odd">pencil
<div class="icon-more_link"></div>
</div>
</div>
I want to do this:
<div class="field-items">
<div class="field-item even">
book
<div class="icon-more_link"></div>
</div>
<div class="field-item odd">
pencil
<div class="icon-more_link"></div>
</div>
</div>
Could you please help me

You need to use .wrap function. More: http://api.jquery.com/wrap/
Here the code:
$('.field-item').each(function(){
// to get text and remove any unwanted space
var link = $(this).text().trim();
$(this).wrap('');
});
JSfiddle: https://jsfiddle.net/Ljvjvbkq/23/

This is what you need:
$(document).ready(function(){
$('.field-item').each(function(){
var search = $(this).text().trim();
$(this).wrap('');
});
});
https://jsfiddle.net/obLzf5st/1/

You can also try with Map function jquery map
var a = $("<a />");
$('.field-items > div.field-item').map(function(){
$(this)
.wrap($(a)
.attr('href','search/'+$(this).text().trim()));
return $(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-items">
<div class="field-item even">book
<div class="icon-more_link"></div>
</div>
<div class="field-item odd">pencil
<div class="icon-more_link"></div>
</div>
</div>
<div class="field-items">
<div class="field-item even">book-new
<div class="icon-more_link"></div>
</div>
<div class="field-item odd">pencil-new
<div class="icon-more_link"></div>
</div>
</div>

Stylesheet not loading in Ionic Angular project

I am building a page using Ionic and Angular. I'm including the stylesheet at the top as you can see, but when the page loads, the styles are completely messed up, until I refresh the page. I am not sure what I'm doing wrong. Thanks in advance.
<link rel="stylesheet" type="text/css" href="css/event-nba.css">
<div ng-repeat="events in eventsList" class="events-bg">
<a>
<div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">
<div class="nba-event-team">
<span><img class="logos logo-margin" src="{{events.logo1}}"></span>
<span><img class="logos" src="{{events.logo2}}"></span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventDate}}</span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventLocation}}</span>
</div>
<div class="nba-event-team">
<img class="network-logo" src="{{events.networkLogo}}"></img>
</div>
<div class="nba-event-team">
<button class="button button-assertive bth-red">
TICKETS
</button>
</div>
</div>
<div class="preview-box">
<span class="preview-text">{{events.eventPreview}}</span>
</div>
<div class="gear-title-box">
<span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-jacket">
<div class="item item-body">
<img class="full-image" src="img/nikesweatshirt200.png">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product">
<div class="item item-body">
<img class="full-image" src="img/kobe xi.jpeg">
<p class="shop-product-box-text-margin">
Shoes
</p>
<h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-uptime">
<div class="item item-body">
<img class="full-image" src="img/uptimebottle.png">
<p class="shop-product-box-text-margin">
Sport Supplements
</p>
<h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-nba">
<div class="item item-body">
<img class="full-image" src="img/lavinjersey.jpeg">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
</a>

So I found the answer. This stylesheet was using a few class names from a previous page, and that stylesheet had different css for those classes. The classes weren't being dumped before this page was loading, thus inheriting the other styles.