We Keep Coding

How to remove table data shaking after coming tooltip message

After creating a table, when I implemented the Onclick text copier in table data, the Onclick text copier working well but the problem is after clicking on the table data tooltip message come, and then data shake right to left. In Laravel temple, I embedded this code in a big data table somewhere shaking somewhere not shaking. How can I solve this problem?
function textCopied(el){
var inp = document.createElement('input');
document.body.appendChild(inp);
inp.value = el.textContent;
inp.select();
document.execCommand('copy',false);
inp.remove();
var tt = el.parentNode.querySelector(".custom-tooltip");
tt.style.display = "inline";
setTimeout( function() {
tt.style.display = "none";
}, 1000);
};
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.copy_button{
background-color:#fff;
border:0;
outline:0;
cursor:pointer;
opacity:1;
position:absolute;
width:40px;
height:40px;
z-index:9;
border-radius:24px;
}
.button-tooltip-container {
display: flex;
align-items: center;
margin-top: 16px;
min-height: 30px;
}
#custom-tooltip {
display: none;
margin-left: 40px;
padding: 5px 12px;
background-color: #000000df;
border-radius: 4px;
color: #fff;
}
table tbody tr td{
padding: 20px 80px;
}
<div class="container">
<table>
<thaed>
<tr>
<th>ID</th>
</tr>
</thaed>
<tbody>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94426</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94425</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94424</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>

How to prevent a click on a '#' link from jumping but still execute the rest of the code

I'm trying to make a clickable <td>, end up with below code :
HTML :
<table class="coolTable">
<tr>
<td>
<a id='parent1' href='#child1' class="parent">G</a>
<div id="child1" class="child child-dropdown"></div>
</td>
</tr>
<tr>
<td>
<a id='parent2' href='#child2' class="parent">C</a>
<div id="child2" class="child child-dropdown"></div>
</td>
</tr>
</table>
JQUERY :
$(document).ready(function(){
$(".parent").click(function() {
$(this).parent(".child").empty();
var data="<p>A</p><p>B</p>"
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".child");
// Display the returned data in browser
resultDropdown.html(data);
});
$(document).on("click", ".child p", function(){
$(this).parents(".parent").find('a').val("A");
$(this).parent(".child").empty();
});
});
CSS :
a {
color:white;
text-decoration:none;
}
.child p {
margin: 0;
padding: 5px 8px;
border: 1px solid #CCCCCC;
cursor: pointer;
background : white;
}
.child p:hover {
background: #f2f2f2;
}
.child-dropdown {
position: absolute;
display: none;
z-index: 9;
color: red;
}
.child-dropdown:target {
display: block;
}
table.coolTable td {
background-color: green;
color: green;
margin: 0;
padding: 5px 8px;
}
table.coolTable td:hover {
background-color: green;
color: green;
}
td a {
display: block;
width: 100%;
}
https://jsfiddle.net/kakatua/cnej7dfs/
If i clicked a <td> it will execute the rest of the code and show me an option for me to replace the innerHTML of an <a>.
but when i implemented this on the actual web page, when i clicked the <td> it will jump to the bottom of the page (and will show my dropdown list).
i dont want the page to jump after clicked the <td>
i've used preventDefault, a="#/", and yes it will not jump, but also, its not returning my dropdown list.
is there any way to prevent this jumping thing but still execute my dropdown list?
or anyone can suggest me to make clickable <td> without using <a>
Thanks!

Updated your code, removed the using of the method val that uses only for forms, removed showing dropdown by adding hash in the link, it was replaced just adding class active that makes dropdown visible.
PS Sorry for my bad English...
$(document).ready(function(){
$(".parent").click(function(e) {
e.preventDefault();
const $link = $(this);
const data="<p>A</p><p>B</p>"
const inputVal = $link.data('selected', '');
const resultDropdown = $link.siblings(".child");
resultDropdown.html(data).addClass('active');
});
$(document).on("click", ".child p", function(){
const $selected = $(this);
const $link = $selected.parents('td').find('.parent');
$link.text($selected.text());
$link.data('selected', $selected.text());
$selected.parent(".child").removeClass('active');
});
});
a {
color:white;
text-decoration:none;
}
.child p{
margin: 0;
padding: 5px 8px;
border: 1px solid #CCCCCC;
cursor: pointer;
background : white;
}
.child p:hover{
background: #f2f2f2;
}
.child-dropdown{
position:absolute;
display:none;
z-index:9;
color:red;
}
.child-dropdown.active{
display:block;
}
table.coolTable td {
background-color:green;
color:green;
margin: 0;
padding: 5px 8px;
}
table.coolTable td:hover {
background-color:green;
color:green;
}
td a {
display:block;
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="coolTable">
<tr>
<td>
<a id='parent1' href='#child1' class="parent">G</a>
<div id="child1" class="child child-dropdown"></div>
</td>
</tr>
<tr>
<td><a id='parent2' href='#child2' class="parent">C</a>
<div id="child2" class="child child-dropdown"></div></td>
</tr>
</table>

Please add This new 2 css
table.coolTable td {
position: relative;
}
.child-dropdown {
top: 0px;
left: 29px;
}

By Using Anchor Tag(): Use "javascript:void(0)" and id to write click function in JavaScript like following:
login
$('#toCallFunction').click(function(){
doSomething();
alert('something');
}

shrinking tr width when it get position fix

I have a table of data which cols is determined automatically with its data.
but I need to fix first row as header title "for scrolling it remains fix at the top". when I give it position:fixed , header row`s width shrinks comparing to others!!!
first pic before setting position:fixed :
after setting position:fixed:
I can't change my structure code, because there are too many similar tables !!!! Only css or javascript can be used.
my code :
<table class="list_row_container">
<tr class="list_row_title">
<td width="30px" align="center"><input type="checkbox" id="keyCheckbox" onclick="updateCheckboxes(this.checked)"></td>
<td>
تاریخ ثبت
</td>
<td>
نوع کاربری
</td>
<td>
آدرس منطقه
</td>
<td>
زیر بنا
</td>
<td>
طبقه
</td>
<td>
اتاق
</td>
<td>
عمر
</td>
<td>
اجاره
</td>
<td>
ودیعه
</td>
<td> مشاهده</td>
</tr>
<tr class="list_row_even" id="row492314" >
<td align="center"><input type="checkbox" name="info[rowIds][492314]"></td>
<td class="list_field_container"><span class"list_field_normaltext">1394/02/29</span></td>
<td class="list_field_container"><span class"list_field_normaltext">موقعيت اداري </span></td>
<td class="list_field_container"><span class"list_field_normaltext">.بلوار فردوس غرب پروانه شمالي خ شقايق غربي پ 8</span></td>
<td class="list_field_container"><span class"list_field_normaltext">100</span></td>
<td class="list_field_container"><span class"list_field_normaltext">2</span></td>
<td class="list_field_container"><span class"list_field_normaltext">2</span></td>
<td class="list_field_container"><span class"list_field_normaltext">1</span></td>
<td class="list_field_container"><span class"list_field_normaltext"> -</span></td>
<td class="list_field_container"><span class"list_field_normaltext">660,000,000</span></td>
<td>
<a id="viewmbt-492314" style="cursor: pointer;" title="مشاهده مشاور"><img src="../images/search.png" alt="مشاهده" /></a>
<a id="viewmbt2-492314" style="cursor: pointer;" title="مشاهده مشتری"><img src="../images/groupIcon.png" alt="مشاهده" /></a>
</td>
</tr>
....
css style :
.list_container
{
width:100%; border:1px solid #395bc2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
min-height:100px;
display:table;
}
.list_header
{
width:98%; padding:1%; height:10px;
background: #c9e3fd; /* Old browsers */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color:#000099;
line-height:10px;
font-size: 18px;
}
.list_footer_container
{
background-color: #ffcc99;
font-size: 14px;
color: black;
padding: 10px;
}
.list_has_no_row
{
font-family: sans-serif;
font-size: 13px;
color: red;
}
.list_row_container img
{
width: 25px;
height: 25px;
}
.fixed-header{
position: fixed;
top:0px;
}
.list_row_container
{
border-top: 1px silver navy;
width: 100%;
text-align: center;
}
.list_row_title
{
background-color: #ffcc99;
font-size: 14px;
color: #000099;
}
.list_row_title td{padding: 10px;}
.list_row_even
{
background-color: #ffffff;
font-size: 14px;
color: black;
}
.list_row_even:hover
{
background-color: #ffcc99;
}
.list_row_odd
{
background-color: #c9e3fc;
font-size: 14px;
color: black;
}
.list_row_odd:hover{
background-color: #ffcc99;
}
.list_field_container
{
text-align: center;
padding: 0px;
margin: 0px;
}
.list_row_title {
background-color: #9c42a0;
color: #fff;
position: fixed;
}

this is the solution :
$(document).ready(function(){
/// get the td`s width automatically and set inline style width for all tds
$(".list_row_title td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $(".list_row_container td").eq(index).width();
});
});
$(".list_row_even td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $(".list_row_container td").eq(index).width();
});
});
///if scroll make fix header tr
var $window = $(window);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 250) {
$(".list_row_title").addClass('fixed_table_header');
}
else {
$(".list_row_title").removeClass('fixed_table_header');
}
});
});
style :
.fixed_table_header
{
position: fixed;
top:0;
}

JQuery controlled Popup div on button click

I am trying to get a popup window which should be controlled by a jQuery function that will show/hide on the button click. My button is an asp.net control but I can't figure out how to "call" the jQuery function when the button is clicked
I have tried to add a function name to my asp.net control's onClientClick that should at least just show the popup div but that is not working. I am new to using jQuery and I believe I have everything set up correctly but I am not positive. I am also not certain whether or not I am trying to "call" the jquery function correctly.
Here is the jQuery code..
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(documnet).ready(function () {
$("#AddToCartBtn").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
$("#AddToCartBtn").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e) {
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog() {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
Heres the css..
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
and lastly the asp button control and the <div>'s
<asp:ImageButton ID="AddToCartBtn" runat="server" RowIndex='<%# Container.DisplayIndex %>'
ImageUrl="~/Pictures/ShoppingCart.png" onClientClick="ShowDialog()"
/>
<div id="output"></div>
<div id="overlay" runat="server" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Online Survey</td>
<td class="web_dialog_title align_right">
Close
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Choose your favorite mobile brand? </b>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
<input id="brand2" name="brand" type="radio" value="Sony" /> Sony
<input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
So recap, I am having trouble calling my jQuery function when my asp.net button is clicked. I don't think the function is ever getting called at all because when i set breakpoints at the function it never jumps to them when testing. Any help would be greatly appreciated

ASP.NET Buttons have a dynamic generated ID, depending on its parent controls. So your Button ID isn't #AddToCardBtn. Check the generated HTML for that. As a workaround you can call out the generated ID by: <%=AddToCardBtn.ClientID%> into your jquery code to get the generated client ID of your button.
Example:
$("#<%=AddToCardBtn.ClientID%>").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
Thats the cause why your window isn't showed. The function isn't bound to your button.

Dynamically bind check boxes and button on click using jQuery

Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.

You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});