<div class="float-right">
<span class="language dashboard" data-toggle="dropdown">
<img class="current" src="us-flag.png" />
</span>
<div class="dropdown dashboard">
<a href="javascript:" (click)="setch('en');" class="dropdown-item">
<img src="us-flag.png" alt="" />english </a
>
<a href="javascript:" (click)="setch('it');" class="dropdown-item">
<img src="it-flag.png" alt="" />italian </a
>
</div>
</div>
this the jquery way:
$('.dropdown-item').on({
'click': function(){
//do other thing
$('.current').attr('src','it-flag.png');
}
});
am using angular 6
looking to write it in angular way without using jquery, however not familiar with it..
looking to load the logic at
ngOnInit() {
//assign from default database language setting
var dbflag = "it";
//assign $('.current').attr('src','it-flag.png');
}
setch(){
//change flag class="current"
}
any idea guys, for writing it in angular ts way?
you can do it like this on Html :
<div class="float-right">
<span class="language dashboard" data-toggle="dropdown">
<img class="current" src={{flag}} />
</span>
<div class="dropdown dashboard">
<a href="javascript:" (click)="setch('en');" class="dropdown-item">
<img src="us-flag.png" alt="" />english </a
>
<a href="javascript:" (click)="setch('it');" class="dropdown-item">
<img src="it-flag.png" alt="" />italian </a
>
</div>
</div>
on ts file declare a new variable and assign img name on it:
flag :string;
setch(fl){
if (fl == 'it') {
this.flag = 'it-flag.png"'
} else {
this.flag = 'us-flag.png'
}
}
you can do using angular binding.Change src to [src]
<div class="float-right">
<div class="dropdown dashboard">
<a href="javascript:" (click)="setch('it');" class="dropdown-item">
<img [src]="displayedImage" alt="">italian </a
>
</div>
</div>
in component.ts , you need to declare a variable called displayedImage.
this.displayedImage='it-flag.png';
Related
I want to add a short cut image to every dropdown item, therefore, I have written the following code:
<a class="dropdown-item" id="dropdown_new_line">
<span style="float: left">New Line</span>
<span style="float: right;">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>
This looks like the following:
And I want that it looks like the following:
So my question is, what do I have to do so that the highlight color goes over the whole element?
Test this
<a class="dropdown-item clearfix" id="dropdown_new_line">
<span class="float-left">New Line</span>
<span class="float-right">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>
You need to clear the floating using this class :
.clearfix{
clear:both;
}
And adding this class over the parent element:
<a class="clearfix dropdown-item" id="dropdown_new_line">
<span style="float: left">New Line</span>
<span style="float: right;">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>
I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});
You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.
I have this code:
<div class="list-group" id="generalView">
<a href="" id="today" onclick="displayData()" class="list-group-item" data-toggle="modal" data-target="#displayDiary">
<h4 class="list-group-item-heading">Today's Diary</h4>
</a>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">Last Week's Diaries</h4>
</a>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">Last Month's Diaries</h4>
</a>
</div>
$('#generalView > a').click(function(e) {
e.preventDefault();
$('#generalView > a').removeClass('active');
$(this).addClass('active');
});
I want to add a class active when an <a> tag is clicked but my selection isn't working. Am I selecting wrong? I already tried to give a single class to every <a> element and then try to select that class but doesn't work as well. Why is this happening?
Here's a simple solution using a class on each a tag. Hope it helps!
$(document).ready(function(){
$('#generalView > a').click(function() {
$('.myClass').removeClass('active');
$(this).addClass('active');
return false;
});
});
.active {
color: red;
}
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="list-group" id="generalView">
<a href="" id="today" onclick="displayData()" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary">
<h4 class="list-group-item-heading">Today's Diary</h4>
</a>
<a href="" class="list-group-item myClass">
<h4 class="list-group-item-heading">Last Week's Diaries</h4>
</a>
<a href="" class="list-group-item myClass">
<h4 class="list-group-item-heading">Last Month's Diaries</h4>
</a>
</div>
It can be done without js
consider following code for your situation
a:active {
color: orange;
}
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="list-group" id="generalView">
<a href="" id="today" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary">
<h4 class="list-group-item-heading">Today's Diary</h4>
</a>
<a href="" class="list-group-item myClass">
<h4 class="list-group-item-heading">Last Week's Diaries</h4>
</a>
<a href="" class="list-group-item myClass">
<h4 class="list-group-item-heading">Last Month's Diaries</h4>
</a>
</div>
I tried for changing the class name of li with class each_feature to each_feature--display.On each click of load more I need to change class for next 3 li inside ul.
But the below javascript is not working for me. On load I called load_more.display_items() this also doesn't work.
Someone please help me to make this work
<div class="export">
<section class="container">
<h2> Components Identified by scanner</h2>
<ul class="components_features">
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<a class="link" onclick="load_more.show_more_items()">
<span >Load more ...</span>
</a>
<hr>
</section>
</div>
Javascript:
var load_more = {
el: $('.export .components_features'),
list_index: 3,
display_items: function() {
if((this.list_index + 3) > this.el.find('.each_feature').length) {
this.el.find('.each_feature').addClass('each_feature--display');
}
this.el.find('.each_feature:lt(' + this.list_index + ')').addClass('each_feature--display');
},
show_more_items: function() {
this.list_index += 3;
this.display_items();
}
}
Something like this? Made in pure JS. For the a tag, you might want to prevent default link action if you are going to put a href.
<html>
<head>
<style>
.feature{
display: none;
}
</style>
<script>
function loadMore(){
features = document.getElementsByClassName("feature");
if(features.length > 0){
var count = 0;
while(features.length && count < 3){
count++;
features[0].className = "featureDisplay";
}
}
}
</script>
</head>
<body>
<ul>
<li class="feature">
1
</li>
<li class="feature">
2
</li>
<li class="feature">
3
</li>
<li class="feature">
4
</li>
<li class="feature">
5
</li>
<li class="feature">
6
</li>
<a onclick="loadMore()">Load more ...</a>
</ul>
</body>
</html>
The problem with using a for loop is that the value returned is a node list list which is a live object and it messes up the array when you modify a class. Read more about it here: javascript changes one some class names
on the 'load more' do this
$(".each_feature").addClass('each_feature--display');
$(".each_feature--display").removeClass('each_feature');
Of course you will have to adapt the code
<div class="scrolling-items-wrapper">
<div class="menu" style="max-height: 105px;">
<div class="scrolling" style="width: 196px; max-height: 105px;">
<div class="scrolling-content">
<ul >
<li data-menuid="ABC_1">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_1</span>
</a>
</li>
<li data-menuid="ABC_2">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_2</span>
</a>
</li>
<li data-menuid="ABC_3">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Manual click :
Whenever that element is clicked manually it generates a dynamic ID.
Using jQuery :
I want to click a particular element suppose ABC_1 using jQuery.
When it is clicked it should generate the Dynamic ID.
Did you try this?
$( "li[data-menuid='ABC_1']" ).click()
If it doesn't work here is a list of all jquery selectors: https://api.jquery.com/category/selectors/
If you have al element with ID ABC_123, you can do this:
$(document).ready(function() {
$("#ABC_123").click(function () {
var newId = "ABC_"+new Date().getTime();
this.id= newId;
});
});
This will change the id of the element by adding the date in miliseconds. Then, do what you want with the new ID.