I have a circle, when I clicked on it 2 options showed up.
<div class="col-sm-2" style="display: block;">
<span class="fa fa-mobile circle-icon fa-5x client" style="background-color: rgb(75, 183, 232);">
</span>
<div class="line" style="display: none;"></div>
<div class="options" style="display: block;">
<input type="text" class="search" name="">
<i class="fa fa-plus float-right"></i>
<p class="option" id="Dualstack-Pvt">
Dualstack-Pvt
<i class="fa fa-info-circle float-right"></i>
</p>
<p class="option" id="Dualstack-Pvt-2">
Dualstack-Pvt-2
<i class="fa fa-info-circle float-right"></i>
</p>
</div>
<div class="selected" style="display: none;"></div>
</div>
I want to do something when one of the option clicked.
I can't seem to select it.
This is what I have now.
$('.' + selector).on("click", function() {
if (steps.indexOf(selector) != -1) {
nextStep = steps[steps.indexOf(selector) + 1];
}
let self = $(this);
$('div.options').fadeOut('fast');
self.animate({
backgroundColor: fadeColor
}, 1400);
self.next().next('.options').slideDown(1000);
console.log(self)
self.find('.options').find('option').one("click", function(event) {
console.log('%c -------->> HERE <<--------', "color: green;");
});
});
This is my selection
self.find('.options').find('option').one("click", function(event) {
I thought find() will find the matching class ... No ?
Please help me understand why this is not working ...
In the query you have here:
self.find('.options').find('option')
The section self.find('.options') will look for elements that are the class option that are the children of self. In this case since self is a <span> with no children so the selector will not work. Note you are already doing this when you used self.next().next('.options'). Next the .find('option') part will look for the tag <option> and not the class option, so change this to .option. With those fixes you will have:
self.siblings('.options').find('.option').one("click", function(event) {
console.log('%c -------->> HERE <<--------', "color: green;");
});
Snippet example
$('.fa-mobile').on("click", function() {
let self = $(this);
$('div.options').fadeOut('fast');
self.next().next('.options').slideDown(1000);
self.siblings('.options').find('.option').one("click", function(event) {
console.log('%c -------->> HERE <<--------', "color: green;");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2" style="display: block;">
<span class="fa fa-mobile circle-icon fa-5x client" style="background-color: rgb(75, 183, 232);">Circle
</span>
<div class="line" style="display: none;"></div>
<div class="options" style="display: block;">
<input type="text" class="search" name="">
<i class="fa fa-plus float-right"></i>
<p class="option" id="Dualstack-Pvt">
Dualstack-Pvt
<i class="fa fa-info-circle float-right"></i>
</p>
<p class="option" id="Dualstack-Pvt-2">
Dualstack-Pvt-2
<i class="fa fa-info-circle float-right"></i>
</p>
</div>
<div class="selected" style="display: none;"></div>
</div>
Related
I have a very simple module to develop. On click of an image I need to open up a div element that I have created.I have attached my HTML and javascript file.When I am loading the page the div wont be coming because I have given style="display:none
myfunction() {
document.getElementById('Chatbot').style.visibility = "visible";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
<img src="sticky.png" style="width:50px;height:50px">
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
document.getElementById('Chatbot').style.display = "block";
function myfunction() {
document.getElementById('Chatbot').style.display = "block";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
Some Image
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
Avoid using inline scripts and also avoid capitalising the first letter of your ID or class name.
Just add an event listener to your #chat anchor link that loads a function which sets the css display property of your div to block on click like this:
/* JavaScript */
var chat = document.getElementById("chat");
var div = document.getElementById('chatbot');
function showDiv(){
div.style.display = "block";
}
chat.addEventListener("click", showDiv);
/* CSS */
a {text-decoration: none; padding: 5px; background-color: green; color: white;}
#chatbot {display: none;}
<!-- HTML -->
<a type="button" href="#Chatbot" id="chat">Open Div</a>
<hr>
<div id="chatbot">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
It can be a simple way
<script>
$( document ).ready(function() {
$('#chat').click( function(){
if ( $('#Chatbot').hasClass('active') ) {
$('#Chatbot').removeClass('active');
} else {
$('#Chatbot').addClass('active');
}
});
});
</script>
Add lil css
<style>
.active {
display:block!important;
}
</style>
Your HTML
<body>
<div id="chat">
Some Image
</div>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
I have knockout sortable bookmark page where it is possible to group your bookmarks and change the position. I have all my functions working but i can't seem to get the "afterMove" to work. This is my view:
<div class="col-lg-12">
<div class="bookmarkIconsBox">
<div data-bind="droppable: newGroup, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-plus"></i>Nieuwe groep aanmaken</div>
<div data-bind="droppable: deleteItem, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-trash"></i>Bookmark verwijderen</div>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visible()">
<input class="title" data-bind="textInput: $root.groupname()" />
<span data-bind="click: function() { $root.setVisible(), $root.changeGroupName($root.groupname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisible, visible: $root.visible()"><i class="fa fa-2x fa-close"></i></span>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visibleBookmarkName()">
<input class="title" data-bind="textInput: $root.bookmarkname()" />
<span data-bind="click: function() { $root.setVisibleBookmarkName(), $root.changeName($root.bookmarkname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisibleBookmarkName, visible: $root.visibleBookmarkName()"><i class="fa fa-2x fa-close"></i></span>
</div>
</div>
<div data-bind="foreach: allBookmarks.bookmarkGroups" class="col-lg-12">
<div class="bookmarkBoxTitle">
<h3 class="title" data-bind="text: Description" />
<span data-bind="click: function(){$root.edit(Description)}" class="editName"><i class="fa fa-2x fa-edit"></i></span>
</div>
<div data-bind="sortable: { template: 'itemTmpl', data: bookmarks, connectClass : 'lists', afterMove: $root.update($parent.allBookmarks.bookmarkGroups)}" id="sortable" class="lists bookmarkBackground">
</div>
</div>
<script id="itemTmpl" type="text/html">
<div class="card col-lg-4">
<div>
<span class="moveItem"><i class="fa fa-2x fa-arrows"></i></span>
<span data-bind="click: function(){$root.editBookmarkName(Description)}" class="editName"><i class="fa fa-2x fa-edit" data-bind="visible: !$root.visibleBookmarkName()"></i></span>
</div>
<div class="card-block">
<div class="bookmarkBoxTitle">
<h4 class="card-title" data-bind="text: Description " />
<h4 class="card-title" data-bind="text: $index" />
</div>
<ul class="card-text">
<li data-bind="text: workspace"></li>
<li data-bind="text: role"></li>
</ul>
<a class="btn btn-primary" data-bind="attr : {'href': '/#page/' + link }">Ga naar</a>
</div>
</div>
When i move an item in in a group or to a different group i want it to execute the $root.update() but i can't seem to get it to work.
I have three rows of which I want to get the values of all the text by looping them all, so I tried something like this.
var collection = $(".vendorDaterow");
collection.each(function() {});
But while debugging i didn't find the value in any of the property.
Below is my html
<tr>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName" id="dvVendorNameData">
<label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
<div class="add">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<i class="max"><label>(Maximum 5 Vendors)</label></i>
</div>
</td>
</tr>
What should I do to get the values of the input text of all the element
This is walking down the tree method. You can make it shorter but it is self-explanetory.
var collection = $(".vendorDaterow");
collection[0].childNodes.forEach((element)=>{
if (element.tagName == 'DIV'){
//console.log(element.childNodes)
element.childNodes.forEach((element) => {
if(element.tagName == 'SPAN') {
//console.log(element.childNodes);
element.childNodes.forEach((element) => {
if(element.tagName == 'INPUT'){
console.log(element.value)
}
})
}
});
}
})
It iterates and finds the proper elements, assuming that the structure will remain the same. You can remove comment tags to get the flow.
Attempt no2.
function recursiveEach($element){
$element.children().each(function () {
var $currentElement = $(this);
// This is our input so we do something with it
if($currentElement[0].tagName == 'INPUT') {
console.log(" the values are: " + $currentElement[0].value)
}
//////////// Loop her children
recursiveEach($currentElement);
});
}
//////////// Parent div
recursiveEach($(".vendorDaterow"));
The syntax is more bit jquery-esk, but it has nice recursive form of iteration.
The following snippet prints only the input value when it changes. We use the selector $(".vendorDaterow") and the delegation event on the input that have changed.
$(".vendorDaterow").on('change', 'input', function(){
var text = $(this).val();
console.log(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName" id="dvVendorNameData">
<label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
<div class="add">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<i class="max"><label>(Maximum 5 Vendors)</label></i>
</div>
</td>
</tr>
The snippet below prints all the input values after a change. After a change in an input, each() will loop over all the input elements inside the class vendorDaterow and get their values.
var save;
$(".vendorDaterow input").on("change",function(){
save = []
$(".vendorDaterow input").each(function(){
var text = $(this).val();
if(text){
save.push(text);
}
})
console.log(save);
})
//console.log($(".vendorDaterow").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName" id="dvVendorNameData">
<label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
<div class="add">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<i class="max"><label>(Maximum 5 Vendors)</label></i>
</div>
</td>
Here is my HTML and jQuery code. The code is working good but the problem is when I click on one checkbox, the text "FINISHED" becomes visible below all the checkboxes instead of that one only.
My html code is:
$('.label__checkbox').click(function() {
if ($(".label__checkbox").is(':checked')) {
$(".finish").css("display", "block");
} else {
$(".finish").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
You can use DOM traversal method to target them in the current element context i.e. this
.closest() can be use to traverse up to label then use .next() to target the <span>
$('.label__checkbox').change(function() {
var finish = $(this).closest('.label').next(".finish");
//var finish = $(this).closest('.center').find(".finish");
if ($(this).is(':checked')) {
finish.css("display", "block");
} else {
finish.css("display", "none");
}
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
I want to use jquery/javascript to change the class of the <span class="thm-card-status">Active</span> when the item is checked/unchecked. There will be a lot of <div class="thm-card"></div> containers so it should only be changed for that specific card.
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
EDIT:
I've tried:
$('.thm-checkbox-status').change(function() {
if($(this).is(':checked')) {
$('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
} else {
$('.open_sub_ja').closest('div').removeClass('someclass');
}
});
And
$("thm-checkbox-status:checkbox").on('change', function(){
$(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});
Here's a working example. I made the thm-card-status-active green, so that you can see it work.
$(function() {
$('input.thm-checkbox-status').change(function() {
if($(this).prop("checked") == true){
$(this).closest('div.thm-card').find('span.thm-card-status').addClass('thm-card-status-active');
} else {
$(this).closest('div.thm-card').find('span.thm-card-status').removeClass('thm-card-status-active');
}
});
});
.thm-card-status-active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
$('.thm-checkbox-status').change(function(){
$(this).closest('.thm-card-overlay').next().addClass('something');
});