clipboard.js hover for tables - javascript

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>

Related

Show different records in table on button click

I have a website where i have two divs that acts as button. I have two table in my database namely 'users' and 'stores'. I would like to show the tables based on the button clicked. Is there a way to achieve this without a page reload and without using ajax if possible.
below is the code i used for the buttons.
<html>
<head>
</head>
<body>
<div class="btn_container">
<div class="buttons" id="btn_products"><i class="fas fa-store"></i>
<h1 class="products_text">Total Products</h1>
</div>
<div class="buttons" id="btn_users"><i class="fas fa-users"></i>
<h1 class="users_text">Total Users</h1>
</div>
<div class="buttons">btn3</div>
</div>
<div class="table_container">
<!--the table should be loaded here-->
</div>
</body>
</html>
If you don't want to use Ajax you have no other choice to have all tables in your HTML code when the page is loaded.
Here is what I propose
const tables = [...document.getElementsByClassName('table')];
[...document.getElementsByClassName('buttons')].forEach(button => {
button.addEventListener('click', evt => {
const id = button.id.replace('btn_', '');
tables.forEach(table => {
table.style.display = table.id === id ? 'block' : '';
});
});
});
.table {
display: none;
}
<div class="btn_container">
<div class="buttons" id="btn_products"><i class="fas fa-store"></i>
<h1 class="products_text">Total Products</h1>
</div>
<div class="buttons" id="btn_users"><i class="fas fa-users"></i>
<h1 class="users_text">Total Users</h1>
</div>
<div class="buttons">btn3</div>
</div>
<div class="table_container">
<table class="table" id="products">
<tbody>
<tr>
<th>Table products</th>
</tr>
</tbody>
</table>
<table class="table" id="users">
<tbody>
<tr>
<th>Table users</th>
</tr>
</tbody>
</table>
</div>
Note that if you want one of the two table to be shown when the page is loaded change the CSS to
#products /* #users */ {
display: none
}

JS - How to find specific element TAG from a button click event to remove it?

If a button in my HTML is clicked, it should search / find the next parent 'table' element and delete it completly. How can I do that? Please check JS to find out what I have already test it.
My HTML:
<table class="table table-bordered">
<!-- OTHER HTML CODE with div etc. DONT REMOVE/TOUCH THIS! -->
</table>
<table class="table table-bordered"> <!-- THIS table element should delete, if the button is clicked -->
<hr class="my-4 border-dark" id="hereWeGo">
<div class="row">
<div class="col-auto justify-content-around d-flex flex-column border">
<button type="button" class="remove btn btn-danger" id="RemoveBtn">Remove</button>
</div>
<div class="col border">
<B>Title...</B><br />
<hr class="my-1">
Link...
</div>
</div>
</table>
<table class="table table-bordered">
<!-- OTHER HTML CODE with div etc. DONT REMOVE/TOUCH THIS! -->
</table>
My JS:
$(document).on('click', '.remove', function() {
//$(this).parents('table').remove();
//alert("im here");
//$(this).parents('table').remove();
//alert($(this).parents('hr').html());
//$('div.row').remove();
// after this is run, it should remove the <table class="table table-bordered"> element....
});
Use closest:
$(this).closest("table").remove();
However, your HTML is not valid: table cannot have div or hr tags as direct children, and so the table is not really the parent of the button. Browsers "fix" the error, and move all those invalid child elements out of the table.
This solution will only work if you make your table structure valid HTML. So, no children of it should be div.
For instance:
$(document).on('click', '.remove', function() {
$(this).closest("table").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<hr class="my-4 border-dark" id="hereWeGo">
<table class="table table-bordered"> <!-- THIS table element should delete, if the button is clicked -->
<tr class="row">
<td class="col-auto justify-content-around d-flex flex-column border">
<button type="button" class="remove btn btn-danger" id="RemoveBtn">Remove</button>
</td>
<td class="col border">
<B>Title...</B><br />
<hr class="my-1">
Link...
</td>
</tr>
</table>
What you are looking for is the JQuery closest() function.

Clone works for all clicked elements instead of this

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>

jquery hide/show work only for 1st element of foreach

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();
});

jQuery Filter divs By Class

I'm trying to filter divs by their class, but I'm having some trouble. For some reason, if any button is pressed, everything disappears. I've been troubleshooting this for a while now and I can't figure out why this is happening. A CodePen is here and my attempt is below:
HTML:
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
CSS:
div {
background: #eee;
height: 100px;
width: calc(25% - 10px);
float: left;
margin: 5px;
text-align: center;
}
.active {
color: red;
}
jQuery:
$( document ).ready(function() {
$("#all").click(function() {
$("div").fadeIn(500);
$("#all").addClass("active");
$(":not(#all)").removeClass("active");
});
$("#a").click(function() {
$(".a").fadeIn(500);
$(":not(.a)").fadeOut(0);
$("#a").addClass("active");
$(":not(#a)").removeClass("active");
});
$("#b").click(function() {
$(".b").fadeIn(500);
$(":not(.b)").fadeOut(0);
$("#b").addClass("active");
$(":not(#b)").removeClass("active");
});
$("#c").click(function() {
$(".c").fadeIn(500);
$(":not(.c)").fadeOut(0);
$("#c").addClass("active");
$(":not(#c)").removeClass("active");
});
$("#d").click(function() {
$(".d").fadeIn(500);
$(":not(.d)").fadeOut(0);
$("#d").addClass("active");
$(":not(#d)").removeClass("active");
});
});
It is because of the selector $(":not(.b)") which selects all elements and hides it except .b which will include the body element also.
You need to use a more specific selector, one option is to use a container element like
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('#ct > div').show();
} else {
var $el = $('.' + this.id).show();
$('#ct > div').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div id="ct">
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
Using a common selector like an element selector div also may not work as it could target other non related elements, so another option is to use a common class to all elements that need to be targeted.
var $items = $('.item');
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$items.show();
} else {
var $el = $('.' + this.id).show();
$items.not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="item a b">a & b</div>
<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<div class="item d">d</div>
Note: Also as you can see, there is no need to write separate click handlers for each button - given that the id of the button and the class you are looking for is the same.
The problem is this selector, for example:
:not(.d)
...will select everything that doesn't have class .d, including the body and all the buttons, etc. Restricting it more, like:
div:not(.d)
...should work. See my fix: http://codepen.io/anon/pen/cyhIK
sorting table content based on class name
May be it will help some one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$("table tbody tr").sort(function (a, b){
return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;
}).appendTo('table tbody');
sort table row values based on class name:
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>

Categories