Angular 2 click on later placed element

Angular 2 click on later placed element - javascript

My page is basically split in two parts:
<div *ngIf="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>

Use [hidden] attribute, when you use *ngIf the element is not created in the dom so jQuery can not init the accordion on it.
<div [hidden]="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>

Related

jquery selector not working on a dynamic value

For some reason my jQuery function is not working on a dynamic value.
I'm trying to show/hide content ("item-content") when the user clicks on the span "Click here".
If I use not nested HTML, everything works fine, but for some reason, my function breaks when I use nested HTML.
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next('.main .child span.item-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

.next looks for the next sibling, so in your code you don't need to specify the class of what you're looking for as you're just getting the span sibling, which is .item-content.
Working example:
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

The selector you are toggling is incorrect, as it is looking for a span called 'item-content'. It should be:
$(this).next('.main .child div.item-content').toggle();

First of all make sure that the jQuery cdn library is initiated before the custom script on your page.
There are two ways to hide components by css and jquery both. I'm posting the css script too and it's better to hide using css.
Also there is no need for specifying the classes from top inside the click event for toggle, the next() function basically lookup for the next html component.
$('.item-content').hide(); // if using css to hide than this line is not required
$(document).on('click', '.item-title', function(){
$(this).next().toggle();
});
.item-content {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

semantic popup list width is too small

I am working with semantic ui and got stuck with Notification menu implementation in menu bar.
I am able to setup the popup with a list but i am getting small list item squeezed vertically , i need them to be horizontally relaxed .
Below is the html i am working with .
<div class="ui fixed stackable menu">
<a class="item" href="index.php"> <img src="logo.png" class="image"></a>
<a class="item">My Project</a>
<div class="right menu">
<div class="item">
<i class="bell outline icon"></i>
<div class="ui teal circular mini label">4</div>
<div class="ui wide notification popup bottom transition ">
<div class="ui link celled selection list">
<div class='item'>
<div class='content'>
<a class='header'>Millan kumar</a>
<span class='time'>2 hrs ago</span>
<div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
<div class='extra'>Thanks you for your support</div>
</div>
</div>
</div>
</div>
</div>
<a class="item" href="profile.php">Profile</a>
<a class="item" href="logout.php">Logout</a>
</div>
</div>
Javascript:
$('.teal.label')
.popup({
on: 'click'
});
JS Fiddle :
https://jsfiddle.net/jfk4wkb1/2/
I have tried putting up the things on JS Fiddle , but In there popup is not coming up even , but on my local environment popup is ok but it is vertically squeezed.

Like this: Fiddle link
You did not add jquery in your fiddle external resource . Also i add some padding and width to looks good .
<div class="ui link celled selection list" style ="padding: 20px;width: 300px;">
HTML:
<div class="ui fixed stackable menu">
<a class="item" href="index.php"> <img src="logo.png" class="image"></a>
<a class="item">My Project</a>
<div class="right menu">
<div class="item">
<i class="bell outline icon"></i>
<div class="ui teal circular mini label">4</div>
<div class="ui wide notification popup bottom right transition ">
<div class="ui link celled selection list" style ="padding: 20px;width: 300px;">
<div class='item'>
<div class='content'>
<a class='header'>Millan kumar</a>
<span class='time'>2 hrs ago</span>
<div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
<div class='extra'>Thanks you for your support</div>
</div>
</div>
</div>
</div>
</div>
JS:
$('.teal.label')
.popup({
on: 'click'
});

How to initialize different semantic-ui modules of the same type with different options?

I have nested accordion modules and would like to initialize them differently, in this case to only open the inner accordion when its icon is clicked. It seems like the initialization can only happen once, though. Is there a way to change the options for the inner accordion?
This is the re-initialization that doesn't work:
HTML:
<div class="ui accordion main">
<div class="title">
<i class="dropdown icon"></i> Main 1
</div>
<div class="content">
<div class="accordion sub">
<div class="title">
<i class="dropdown icon"></i> Sub Title
</div>
<div class="content">
Sub Content
</div>
</div>
</div>
<div class="title">
<i class="dropdown icon"></i> Main 2
</div>
<div class="content">
<p>Main 2 Content</p>
</div>
</div>
Javascript:
$('.ui.accordion').accordion();
// $('.ui.accordion.main').accordion(); // Also doesn't work
$('.ui.accordion.sub').accordion({
selector: {
trigger: '.icon'
}
});
http://jsfiddle.net/7sdj9bd2/

Fire onClick event to specific div

I have two cards and I am firing an onClick() event to create a dimmer on top of the card image if a user clicks on Like button (heart icon). I am trying to create the dimmer on the card image in which user clicked the heart icon.
I tried placing a condition :
if (e.target !== this)
return;
But it did not work. In real webpage, I will have a long list of cards with no identifier where I can specify the image to be dimmed. Is it possible in this scenario?
JSFiddle

So you're trying to limit your interaction to the currently selected image? Also, rather than reference a fiddle, post your working (or non-working) code here. Easier all around.
jQuery(document).ready(function($) {
$(document).on('click', '.loveit', function(e) {
e.preventDefault();
$(this).parents(".card").find('.imglove')
.dimmer('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>

Updated fiddle.
You should use the current clicked jQuery object $(this) instead to target the related .imglove in the same .card :
$(this).closest('.card').find('.imglove').dimmer('show');
NOTE : The .closest('.card') is used to get the related card with clicked icon loveit.
Hope this helps.
$(function() {
$(document).on('click', '.loveit', function(e) {
e.preventDefault();
$(this).closest('.card').find('.imglove').dimmer('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>

Target it parent with class card then find class imglove and add dimmer to it
jQuery(document).ready(function($) {
$(document).on('click', '.loveit', function(e) {
$(this).parents('.card').find('.imglove').dimmer('show');
});
});
DEMO

How can I put the icon and tag in the same line?

The icon and the word hi can not be put into the same line
<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet"/>
<div class="row">
<div class="col">
<h5 class="title">hi</h5>
</div>
<i class="icon ion-ios-heart"></i>
</div>
Thanks!!

Method 1 - CSS
<div class="row">
<div class="col">
<span class="item">
<h5 style="display:inline" class="title">hi</h5>
<i class="icon ion-ios-heart"></i>
</span>
</div>
</div>
Method 2 - In same column
<div class="row">
<div class="col">
<h5 class="title">hi<i class="icon ion-ios-heart"></i></h5>
</div>
</div>
Method 3 - In two columns in same row
<div class="row">
<div class="col">
<h5 class="title">hi</h5>
</div>
<div class="col">
<i class="icon ion-ios-heart"></i>
</div>
</div>

h5 will display as a block, so it has its own line.
Should work with the icon inside the h5 tags, though.

Develop Reference

JavaScript is the programming language of the Web.

Angular 2 click on later placed element - javascript

Related

jquery selector not working on a dynamic value

semantic popup list width is too small

How to initialize different semantic-ui modules of the same type with different options?

Fire onClick event to specific div

How can I put the icon and tag in the same line?

Categories

Resources