I need to clone img of .selectedIcon into clicked .icon > then if clicked another .icon I need to edit only the selected .icon. My solution edits all clicked .icon. Is there any alternative to .click() that would solve this?
$(".icon").on("click", function() {
let thisIcon = $(this);
alert("icon clicked");
$(".icons").fadeIn("slow");
function imagePicker() {
$(".iconSelect").on("click", function() {
$(".selectedIcon").html("");
$(this).clone().appendTo(".selectedIcon");
$(thisIcon).html("");
$(".selectedIcon img").clone().appendTo(thisIcon);
})
}
imagePicker();
})
.icons {
display: none;
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panels">
<div class="first hidden">
<table>
<tr>
<td>
<div class="icon 20iconA">A</div>
</td>
</tr>
<tr>
<td>
<div class="icon 20iconB">B</div>
</td>
</tr>
</table>
</div>
</div>
<!--image picker -->
<div class="iconEditWrap">
<div class="iconEdit">
<div class="selectedIcon">
</div>
<div class="icons">
<img class="iconSelect" alt="img1">
<img class="iconSelect" alt="img2">
</div>
</div>
</div>
I think this is what you are trying to accomplish? You have your function inside the click which will add the next click event also on your old selection.
let thisIcon;
$(".icon").on("click", function() {
thisIcon = $(this);
alert("icon clicked");
$(".icons").fadeIn("slow");
//imagePicker();
})
//function imagePicker() {
$(".iconSelect").on("click", function() {
$(".selectedIcon").html("");
$(this).clone().appendTo(".selectedIcon");
$(thisIcon).html("");
$(".selectedIcon img").clone().appendTo(thisIcon);
})
//}
.icons {
display: none;
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panels">
<div class="first hidden">
<table>
<tr>
<td>
<div class="icon 20iconA">A</div>
</td>
</tr>
<tr>
<td>
<div class="icon 20iconB">B</div>
</td>
</tr>
</table>
</div>
</div>
<!--image picker -->
<div class="iconEditWrap">
<div class="iconEdit">
<div class="selectedIcon">
</div>
<div class="icons">
<img class="iconSelect" alt="img1">
<img class="iconSelect" alt="img2">
</div>
</div>
</div>
Related
I'm currently working on a web application that has to function as some sort of webshop later on. I'm now working on an addToCart function, that has to pick certain data from the clicked element (the name and the price of the product, and add 1 to pcs and save everything to a session), and paste these 2 values into a template I've made and place this in the shopCart. I'm now trying to print out the 2 values I've just mentioned, but I'm stuck now.
This is the current javascript code I've made for loading in all the products, and my attempt on showing some of the values of the clicked items:
$(function(){
$.getJSON("assets/products/sample_products.json", function(response) {
$.each(response.data, function (i, el) {
let card = $($('#productCard-template').html());
card.find('#cardName').html( el.name);
card.find('#cardPrice').html( '€' + el.price );
card.find('.productItem').attr('data-price', el.price)
.attr('data-article-number', el.article_number)
.attr('data-id', el.id)
.attr('data-name', el.name)
.attr('data-stock', el.stock)
.attr('data-categories', el.categories);
$('#touchViewProducts').append(card);
});
});
});
//onclick function adds data of product to the designated template
function addToCart(){
var value = document.getElementById("productCard").value;
var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
This is the html code of the templates:
<div class="row touchViewSection">
<!-- shopping sector -->
<!-- touchView -->
<!-- categories menu -->
<div class="col-3 categoriesSection">
<div class="categories">
<p style="background-color: white; margin-bottom: 0px" > Categories </p>
<a class="nav-link" id="all" href="#">All</a>
<a class="nav-link" id="knalvuurwerk" href="#">Knalvuurwerk</a>
<a class="nav-link" id="rotjes" href="#">Rotjes</a>
<a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</a>
</div>
</div>
<!-- categories menu -->
<!-- <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
<div class="col-9 productItems" >
<br>
<div class="row" id="touchViewProducts">
</div>
</div>
</div>
<!--/touchView -->
<!--Keyboard View -->
<div class="row keyboardViewSection">
<div class="col-12 keyboardViewRow">
<table id="data-table" class="table table-bordered" style="width: 100%;">
<thead id="tableHead">
<tr>
<th> # </th>
<th> Product name </th>
<th> Free Stock </th>
<th> Price </th>
<th> Action </th>
</tr>
</thead>
</table>
</div>
</div>
<!--/Keyboard View -->
<div class="footer">
<div class="container">
<p class="text-muted"> Developed by Vesta Group</p>
</div>
</div>
</div>
<!--/shopping sector-->
<div class="col-4 cartSection">
<!--cart-->
<div class="row">
<div class="col-5">Product</div>
<div class="col-1">Pcs.</div>
<div class="col-2">Price</div>
<div class="col-3">Total</div>
</div>
<hr style="background-color: white;">
<div id="output" class="row"></div>
<div class="row shopcardProducts" id="shopcartProducts">
</div>
<div class="row cartCheck">
<div class="col-5">Number of products</div>
<div class="col-1">1</div>
<div class="col-2">Subtotal</div>
<div class="col-3 total">€ 0,00</div>
<div class="col-5"></div>
<div class="col-1"></div>
<div class="col-2">Total </div>
<div class="col-3">€ 0,00</div>
</div>
<div class="row cartCheck">
<div class="col-12 checkoutBtn"> Checkout </div>
<div class="col-6 addDiscountBtn"> Add discount </div>
<div class="col-6 cancelBtn"> Cancel </div>
</div>
<!--buttons-->
<!--/cart-->
</div>
</div>
</div>
<script type="text/template" id="productCard-template">
<div class="col-3 productCard" id="productCard" onclick="addToCart()">
<a href="#" class="productItem">
<div class="card">
<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
<div class="container">
<div class="row" style="height: 6vh; max-width: 20ch;">
<p id="cardName"> </p>
</div>
<div class="row" style="height: 50%">
<b><p id="cardPrice"></p></b>
</div>
</div>
</div>
</a>
</div>
</script>
<script type="text/template" id="shopcartRow-template">
<div class="row">
<div class="col-5" id="valueName"> </div>
<div class="col-1" id="valueQty"> </div>
<div class="col-2" id="valuePrice"> </div>
<div class="col-3" id="valueTotal"> </div>
</div>
</script>
Here's an image of what the web app looks like, I hope that could make it more clear.
Because addToCart() is a callback, you can use this to access its context (the caller element):
function addToCart(){
var value = $(this).val(); // what val you want to refer? there are no input in the template
var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
I am using clipboard.js to display a button that will allow a user to copy the specific table that the mouse is hovering over. I got it to work for one table, but I need it to work for two. Here is what I have so far:
JS
new ClipboardJS('.btn');
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
e.clearSelection();
});
HTML
Table 1
<div class="container">
<h3>Table 1</h3>
<div id="table1" class="table1">
<div class="overlay">
<button type ="btn" class="btn btn-default pull-right tooltip" title="Copied!" style="display:none;" data-clipboard-target="#table1">
<img src="clippy.png" width="20px" title="Copy to clipboard">
</button>
</div>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.table1', function () {
$(this).find(":button").show();
}).on('mouseleave', '.table1', function () {
$(this).find(":button").hide();
});
});
</script>
<!-- TABLE 1 -->
<table>
</table>
<!-- END TABLE 1 -->
</div>
</div>
Table 2
<div class="container">
<h3>Table 2</h3>
<div id="table2" class="table2">
<div class="overlay">
<button type ="btn" class="btn btn-default pull-right tooltip" title="Copied!" style="display:none;" data-clipboard-target="#table2">
<img src="clippy.png" width="20px" title="Copy to clipboard">
</button>
</div>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.table2', function () {
$(this).find(":button").show();
}).on('mouseleave', '.table2', function () {
$(this).find(":button").hide();
});
});
</script>
<!-- TABLE 2 -->
<table>
</table>
<!-- END TABLE 2 -->
</div>
</div>
CSS
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.overlay:before{
content: ' ';
display: block;
height: 15%;
}
The hover works but it does not go away unless I am off the page rather than off the table and only one hover shows. I would like a button for each table. Could someone help? Also, if you are so kind to offer your help could you please post the code here instead of JSFiddle? I'm on my work computer at the moment and it has been blocked. Thanks!
There are several issues I have found here:
First: your buttons seem to be on the same place, this is why you only see one of them. This also makes the hover handle weirdly.
Change the CSS to:
.overlay {
position: relative;
}
Second, you can factorize all events into one jQuery call by using the same class for the containers.
<div class="container">
<h3>Table 1</h3>
<div id="table1" class="table">
<div class="overlay">
<button style="display:none;">Button A</button>
</div>
<table>
<tr>
<td>Table 1</td>
</tr>
</table>
</div>
</div>
<div class="container">
<h3>Table 2</h3>
<div id="table2" class="table">
<div class="overlay">
<button style="display:none">Button B</button>
</div>
<table>
<tr>
<td>Table 2</td>
</tr>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$(document).on('mouseenter', '.table', function() {
$(this).find("button").show();
}).on('mouseleave', '.table', function() {
$(this).find(":button").hide();
});
});
</script>
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');
});
Hide/Show work fine for first element of foreach cycle in asp.net view, but for another elements did not work.
Script
$('#SelectedContainer').hide();
$(".data").click(function(e) {
e.preventDefault();
$('#BrowseContainer').hide();
$('#SelectedContainer').show();
});
$("#goback").click(function(e) {
e.preventDefault();
$('#SelectedContainer').hide();
$('#BrowseContainer').show();
});
HTML:
foreach (var ....){
<table border="1">
<tr class="tableBody">
<td>
<div id="SelectedContainer" class="container-fluid">
<div class="row-fluid">
<div><a id="goback" href="#">hide</a></div>
Test
</div>
</div>
<div id="BrowseContainer" class="container-fluid">
<div class="row-fluid container">
<a class="data" href="#">Show</a>
</div>
</div>
</td>
</tr>
</table>
}
What is my problem?
IDs must be unique, You should use common classes instead. You should use $.fn.closest() then you can use $.fn.find() to target desired element.
Here in the example I have used classes instead of IDs.
HTML
<table border="1">
<tr class="tableBody">
<td>
<div class="SelectedContainer container-fluid">
<div class="row-fluid">
<div><a class="goback" href="#">hide</a></div>
Test
</div>
</div>
<div class="BrowseContainer container-fluid">
<div class="row-fluid container">
<a class="data" href="#">Show</a>
</div>
</div>
</td>
</tr>
</table>
Script
$('.SelectedContainer').hide();
$(".data").click(function (e) {
e.preventDefault();
var table = $(this).closest('table');
table.find('.BrowseContainer').hide();
table.find('.SelectedContainer').show();
});
$(".goback").click(function (e) {
e.preventDefault();
var table = $(this).closest('table');
table.find('.SelectedContainer').hide();
table.find('.BrowseContainer').show();
});
This is my Accordion, How can I expand "systemAccordion" automatically when its parent Configuration is expanded
<div spry:region="mainData">
<div class="Accordion" id="mainAccordion" tabindex="0">
<div class="AccordionPanel"><!-- <img align="left" src="/csm/include/images/healthicon.gif"> -->
<div class="AccordionPanelTab"> <a onClick="showHealthCheckSpan();"><img align="left" src="/csm/include/images/healthicon.gif">Health Check</a></div>
</div>
<div class="AccordionPanel"><!-- <img align="left" src="/csm/include/images/conficon.gif"> -->
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();"><img align="left" src="/csm/include/images/conficon.gif">Configuration</a></div>
<div class="AccordionPanelContent">
<div class="Accordion" id="systemAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">System</a></div>
<div class="AccordionPanelContent">
<a onClick="showKernelParamSpan();">Kernel Parameters</a><br/>
<a onClick="showDiskSpan();">Disk Usage</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> {mainData::#product}</div>
<div class="AccordionPanelContent">
<span id='selectodbc'><a onClick="showOdbcSpan();">ODBC</a></span><br/>
<span id='selectbitmode'><a onClick="showBitmodeSpan();">Bitmode</a></span><br/>
<br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
</div>
</div>
<script type="text/javascript">
var mainAcc = new Spry.Widget.Accordion("mainAccordion",{ defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
</div>
Got the answer, When we define the accordion we have a choice like below
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: 0, useFixedPanelHeights: false });
</script>
Solved my problem.