We Keep Coding

How To Display A Unique Element Based On A Click Event In Angular 6

So I have two files. An app.component.ts file and an app.component.html file.
Below is an image example of what I want to achieve in my User Interface.
If you look at the photo, you'll see an action icon by the right displaying a nav box element.
I tried achieving something similar in my angular application and this is what I get any time I click on the action Icon:
All the nav boxes display on the UI when I click on the icon. This is because the nav element is inside a *ngFor loop.
Here is my code in the app.component.html file:
<div class="row" *ngFor="let picture of pictures">
<div class="cell">
<p>{{picture.name}}</p>
<p class="med-text meta space-text">{{picture.ticketid}}</p>
</div>
<div class="cell"><p class="meta">{{picture.email}}</p></div>
<div class="cell-photo"><p class="meta">{{picture.ticket_type}}</p></div>
<div class="cell-large">
<div class="toggle on">
<div class="toggle"></div>
</div>
</div>
<div class="small">
<div>
<div class="toggle-on" (click)="toggleActionNav()">
<div class="action"></div
</div>
<!--- nav-Element Starts ---->
<nav class="dropdown-list w-dropdown-list w--open" *ngIf ="actionNav">
<div>View Pictures</div>
<div >Edit Pictures</div>
</nav>
<!--- nav-Element Ends ---->
</div>
</div>
</div>
And here is the code on my app.component.ts file:
actionNav: boolean;
toggleActionNav() {
this.actionNav = !this.actionNav;
}
My question goes thus. How do I get the nav elements to display uniquely and not all displaying together at the same time, just like it is in the first photo?
All responses will be deeply appreciated. Thanks

You can, for example, add a showActionNav property to your picture object. Then you can do (click)="picture.showActionNav = !picture.showActionNav" to toggle it and *ngIf ="picture.showActionNav" to display it.

simplest answer would be just set flag,
for example, actionNavOpen in your object:
(click)="picture.actionNavOpen = !picture.actionNavOpen"
in navs ngIf do: *ngIf ="picture.actionNavOpen"
of course if you're heavily typed this will give you some errors.
so few tips what to do next:
toggling of this flag (actionNavOpen) should be via method
in this method you can also set all others flag in pictures to false
just remember you don't need to pre-set this flag to falsy - it's already falsy while you get this data from rest api
to remove type errors you should extend returning model (interface) from rest api with your model which has this particular flag (actionNavOpen)

if you could show the before and after image will help to understand the problem. Here the problem statement given , when clicking the icons overlap or design itself is overlapping ?

actionNav variable shouldn't be in component's scope. It should be part of picture object which you are using in the ngFor.
And, pass the picture object along with index to the toggleActionNav method to change the actionNav value.
Below is what you need.
<div class="row" *ngFor="let (picture, index) of pictures">
<div class="cell">
<p>{{picture.name}}</p>
<p class="med-text meta space-text">{{picture.ticketid}}</p>
</div>
<div class="cell">
<p class="meta">{{picture.email}}</p>
</div>
<div class="cell-photo">
<p class="meta">{{picture.ticket_type}}</p>
</div>
<div class="cell-large">
<div class="toggle on">
<div class="toggle"></div>
</div>
</div>
<div class="small">
<div>
<div class="toggle-on" (click)="toggleActionNav(picture, index)">
<div class="action"></div>
</div>
<!--- nav-Element Starts ---->
<nav class="dropdown-list w-dropdown-list w--open" *ngIf="picture.actionNav">
<div>View Pictures</div>
<div>Edit Pictures</div>
</nav>
<!--- nav-Element Ends ---->
</div>
</div>
</div>
And the toggle method needs to be like:
toggleActionNav(picture, index) {
//disable all the actionNavs to false
this.pictures.map(pictureObj => pictureObj.actionNav = false)
this.pictures[index] = true
}

Code to automatically insert HTML into certain points on the page?

Is there any code that I could add to the header of every page that would insert HTML at 2 or 3 points on a page (probably in the body), spread out evenly? This would be amazing for the platform that I am currently working on.
For example, maybe you wanted to embed a video using this. Ideally, I could put the code in the header, and it'd insert it 2 or 3 times in the body -- spread evenly.

Here you go: https://jsfiddle.net/westryder907/808xtyq7/
$(document).ready(function() {
$('.body > div').each(function(i, el) {
if (i % 3 === 0) {
$(this).append(" Inserted text via jQuery 2.2");
if (i > 3) {
return false;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="body">
<div class="region1">
Region1
</div>
<div class="region2">
Region2
</div>
<div class="region3">
Region3
</div>
<div class="region4">
Region4
</div>
<div class="region5">
Region5
</div>
<div class="region6">
Region6
</div>
<div class="region7">
Region7
</div>
<div class="region8">
Region8
</div>
<div class="region9">
Region9
</div>
<div class="region10">
Region10
</div>
</div>
</div>

Why not just edit your code and manually insert content from an external file with PHP?
I think more information is needed to fully understand why you'd want to approach this with your current method. It just doesn't make much sense to me why you would want to do it like this?

JQuery loop through div and build multi-line string based on data attribute

I have two questions:
1.) As you can see I have multiple divs and I have onclick things going on when the callout panel notes div is clicked. It accesses the data-category attribute. I'm using
$(this).parent().parent().siblings().first().data("category");
To access it, which works, but it seems messy. I tried parents().last().data(...) but that never worked. I feel like there's a more efficient way. So any opinions would be appreciated.
2.) My next question I can't figure out. Some of the divs have the selected class (after I click on the div). Later I'm going to hit a button to grab the selected stuff, and send it through some ajax stuff. There are 5 other "categories" so I need the .selected content to be associated with the data-category="a", ie, I need to make sure it only loops withing the that category. Can anyone help me loop through the data-category="a" and build a multi-line string with the data-response-text of the .selected classes?
The html is below:
<div class="row responses panel">
<div class="small-12 column" data-category="a">
<h3>Responses</h3>
</div>
<div class="small-12 column">
<div class="callout panel notes" data-response-text="Info 1">
Info 1
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 2">
Info 2
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 3">
Info 3
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 4">
<div class="remove-response"></div>
Info 4
</div>
</div>
<div class="small-12 column">
<div class="add-new-box">
<div class="add-new">
Add Response
</div>
<div class="add-new-text">
<input class="text-response" type="text" placeholder="Response">
</div>
</div>
</div>
</div>
<div><span class="button">Submit</span></div>

For the first part you can do:
$(this).closest('.row.responses').children(':first').data('category');
If either .row or .responses are unique to that level elements, you can use that solely then.
For the second part, I assume "content to be associated with the data-category a" means elements insides .row.responses which firs element has data-category="a". If so then you can do:
var str = "";
var sls = $('[data-category="a"]').parent().find('.selected');
sls.each(function() {
str += $(this).data('response-text') + "\n";
});

First question: I would select the panel like so:
$(this).find('[data-category]').data();
I would then create a function that's called on each of the panels and then returns an array of the data you require from .selected
function getData(panel) {
var $selected = $(panel).find('.selected');
var dataArr = [];
for (var i = 0; i < $selected.length; i++) {
dataArr.push($selected.eq(i).data().responseText);
}
return dataArr;
}
var panelData = getData($('the-panel-in-question'));

jQuery - Having the same HTML twice renders my script inoperative

I'm quite new to jQuery and I have come up with script which affects the HTML below. The script works perfectly and I have gotten it to whether I would like. The problem I am having
is when I'm duplicating the HTML and the script, once clicked, only shows the last project-info and project-images within the document. I've tried quite a few different methods just as
$(this).children()
but I can't seem to get any to work. Any help would be much appreciated.
Thank you
jQuery
$(document).ready(function() {
$('.apple').click(function() {
$('#darken').addClass('dark');
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
});
});
$(document).ready(function() {
$('.close').click(function() {
$(".project-info, .project-images").fadeOut('slow');
});
});
HTML
<div class="apple">
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
</div>
<div class="project-info" style="display:none;">
<div class="project-title">
<h1>hello world</h1>
</div>
<div class="details">
<p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>
<div class="links">
link
</div>
<div class="close"></div>
</div><!-- end of project info -->
</div>
<div class="project-images" style="display:none;">
<div class="-images">
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
</div>
<div class="close end"></div>
</div> <!-- Project Images -->
</div> <!-- # Darken -- >

You're nearly there. Children wouldn't work in the above example because the divs with class 'apple' don't have any children. You need to move that first closing tag to the bottom of the portfolio item so that your html for each portfolio item is structured like this:
<!--PORTFOLIO ITEM-->
<div class="apple">
<!-- ICON GOES HERE-->
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
<!-- PROJECT INFO GOES HERE-->
<div class="project-info" style="display:none;">
</div>
<!-- PROJECT IMAGES GOES HERE-->
<div class="project-images" style="display:none;">
</div>
</div>
I.e. the divs with classes 'project-info' and 'project-images' are inside the 'apple' div. Then change this:
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
to this:
$(this).children('.project-info').delay('1000').slideDown('slow');
$(this).children('.project-images',this).delay('1000').fadeIn('slow');
If you've updated your html correctly, $(this) will be pointing to a div element that does indeed have children with classes 'project-info' and 'project-images'. Here's an updated JSFiddle that should do you what you want: http://jsfiddle.net/8k3Ms/1/

.slideToggle() is being triggered many times?

I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?

If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle

code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)