I want to pass values of table row td to the javascript function onclick on the tooltip.
Please find the fiddle http://jsfiddle.net/0w9yo8x6/16/
When i mouse over on image in the row, tooltip is shown and when clicked on test on the tooltip, javascript function is invoked.I want to pass the value of the row to the javascript function whenever we click on the tooltip.Please suggest.
We can achieve this using td onclick event , but my scenario is different.when clicked on the tooltip the row on which we clicked that corresponding value should pass to javascript function.
<table class="tooltipTable" style="position:absolute;">
<tr><td> <span onclick="test()">test</span></td></tr>
</table>
<br/><br><br>
<table border="1">
<tr>
<td>Data1 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
<tr>
<td>Data2 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
<tr>
<td>Data3 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
</table>
I'm guessing this is what you're talking about.
var display = function() {
var tooltip = [Create Tooltip Element];
// Style tooltip etc.
tooltip.addEventListener("click", function() {
test(this.parentNode.innerHTML); // Test parent's inner HTML.
}, false);
}
Hope this helps, let me know if I've misunderstood.
I believe this is what you are looking for I took the liberty of modifying your HTML a little bit. I added an id to the test and the display spans in your tooltip table. Here is the javascript tooltip
$(function() {
var rowData;
$(document).tooltip({
items: "img, [data-title]",
content: function () {
var element = $(this);
if (element.is("img"))
{
rowdata = element.attr("data-title");
$(document).off('click', '#test');
$(document).on('click', '#test', function() {
test(rowdata);
});
$(document).off('click', '#display');
$(document).on('click', '#display', function() {
display(rowdata);
});
}
return $(this).prop('title');
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(1000, 1);
},
function () {
$(this).stop(true).fadeOut(200, function () {
$(this).remove();
})
});
},
position: {
my: "left",
at: "right"
}
});
});
There are improvements you can make to the javascript but the essential idea is captured in the logic.
Related
So I have this project which requires me to use table and forbids me to use any <div> tags and jQuery.
I want to make a slider in one row of my table. I want the image to change with a click on other image in the second row. I've managed to do that using this code:
function changeImage(a) {
document.getElementById("imgblockjs").src=a;
}
And the html:
<HTML>
<HEAD>
<TITLE>
Home -- RTR
</TITLE>
<LINK REL="ICON" TYPE="IMAGE/PNG" HREF="../img/logo.png" />
<SCRIPT src="../script.js"></SCRIPT>
</HEAD>
<BODY>
<table border="0" width="100%" height="10px" cellspacing="0">
<tr>
<td colspan="4" >
<img id="imgblockjs" src="../img/singa.jpg" width="100%" height="300px" />
</td>
</tr>
<tr>
<td colspan="4" id="imgchanger">
<img src="../img/singa.jpg" id="imgthumb1" onclick="changeImage('../img/lion.jpg');">
<img src="../img/gajah.jpg" id="imgthumb2" onclick="changeImage('../img/elephant.jpg');">
</td>
</tr>
</table>
</BODY>
</HTML>
But that code doesn't have any transition.
After hours research on the internet, I found a jQuery code which works nicely:
$("#imgthumb1").click(function() {
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",$("#imgthumb1").attr("href"));
}).fadeIn(1000);
return false;
});
$("#imgthumb2").click(function() {
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",$("#imgthumb2").attr("href"));
}).fadeIn(1000);
return false;
});
$("#imgthumb3").click(function() {
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",$("#imgthumb3").attr("src"));
}).fadeIn(1000);
return false;
});
$("#imgthumb4").click(function() {
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",$("#imgthumb4").attr("src"));
}).fadeIn(1000);
return false;
});
with the html:
<tr><td colspan="4">
<img id="imgblockjs" src="../img/singa.jpg" />
</td></tr>
<tr><td colspan="4">
<a id="imgthumb1" href="../img/singa.jpg"><img src="../img/singa.jpg" /></a>
<a id="imgthumb2" href="../img/gajah.jpg"><img src="../img/gajah.jpg" /></a>
</td></tr>
But as I said before, I mustn't use jQuery. How can I convert the jQuery code to pure JavaScript code? Or I would be happy if there's any other suggestions.
Note, I simplified my html on purpose. Also, if possible I don't want any CSS because it may mess with original CSS file, but simple and short CSS is acceptable.
Below is vanilla JavaScript for changing the image from the thumbnails.
var changeImage = document.getElementById("imgblockjs");
document.getElementById("imgthumb1").addEventListener("click", function(e) {
changeImage.setAttribute("src", this.getAttribute("href"));
e.preventDefault();
})
However with this code you will not have the animation attached.
If you would like vanilla JavaScript animation there is very little support for that across browsers. You can check out more about that here https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
document.getElementById("imgthumb2").addEventListener("click", function(e) {
var self = this;
var animStart = changeImage.animate([{
opacity: 1
}, {
opacity: 0
}], {
duration: 1000
})
animStart.onfinish = function() {
changeImage.setAttribute("src", self.getAttribute("href"));
changeImage.animate([{
opacity: 0
}, {
opacity: 1
}], {
duration: 1000
});
}
e.preventDefault();
})
If you like animations but would like to avoid jQuery you can use GSAP JavaScript animation library from here https://greensock.com/. Or you can always use a CSS animation option.
I hope this helps a little.
I have a table or articles and a toggle on each row that displays the child row content. In the child row I also display Disqus comments. This all works fine but I do not want multiple rows opened up all at once and multiple Disqus comments loading, slowing down my page.
I want to disable all toggle buttons when one toggle is activated. Each toggle link (class option_toggle) and the row it's on has a unique ID. See below. How can I accomplish this via JQuery?
//Hide main article table's options row
$(document).ready(function() {
$(".option_toggle").click(function(e) {
e.preventDefault();
aid = $(this).attr('id');
//Determine if we are showing the comments or hiding the comments
is_hidden = $(this).parent().parent().next(".options_row").is( ":hidden" );
if(is_hidden)
{
disqus_container = '#disqus_container_' + aid;
jQuery('<div id="disqus_thread"></div>').insertBefore(disqus_container);
$.ajax({
type: 'POST',
url: 'http://www.example.com/disqus',
data: {'msmm_tn' : '12d406df3c8b2e178893e2c146d318e5', 'aid' : aid},
dataType: 'json',
success : function(data) {
if (data)
{
$('#disqus_container_' + aid).html(data.script);
DISQUS.reset({
reload: true,
config: function () {
this.page.url = 'http://www.example.com/#!'+ aid;
this.page.remote_auth_s3 = data.payload;
this.page.identifier = aid;
this.page.api_key = "cULB96iURBu1pZOtLOOSVlVgBj10SY9ctXWiv0eiQdzhdxqBq9UgmVr5SeSiaFiP";
}
});
}
}
});
}
else
{
//Remove the comments
$('#disqus_container_' + aid).prev('#disqus_thread').remove();
$('#disqus_container_' + aid).html('');
}
$(this).parent().parent().next(".options_row").toggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<tbody>
<tr class="main_row" data-id="ROWID428272">
<td class="bkgcol-sunflower wht-border">
<td>
<a id="428272" class="option_toggle" href="#" title="Ratings/Comments">
</td>
<td class="key-title dark unpadded">
<td class="artcl_info text-center">Scitech</td>
<td class="text-center" style="width:10px">
<td class="text-center">
</tr>
<tr class="options_row" style="display: table-row;">
<td colspan="6">
<div class="row article_options">
<div class="row comments_row">
<div id="comments" class="col-md-12">
<div class="text-center article_title top_pad" style="width: 100%;">Comment on This Article</div>
<div id="disqus_thread">
<div id="disqus_container_428272">
</div>
</div>
</td>
</tr>
<tr class="main_row" data-id="ROWID427694">
I want to disable all toggle buttons when one toggle is activated.
$(".option_toggle").click(function(e) {
e.preventDefault();
// Remove click event handler defined above, and add a new one which prevents
// the click from doing anything
$(".option_toggle").off('click').on('click', function(e) {
e.preventDefault();
});
aid = $(this).attr('id');
// Continue with rest of your code ...
});
But is this really what you want? It means once you click a toggle, you cannot click any others. It also means all other toggles still look like links, maybe you should update styling to indicate they are disabled or something like that, eg add a disabled class and style that:
Javascript:
$(".option_toggle").addClass('disabled-link');
CSS:
a.disabled-link {
cursor: default;
color: #666;
text-decoration: none;
}
I would like to put a simple pop up in my table to display additional details regarding each row. I just want to ask for ideas on how to show the pop up in every row. Currently the pop up is only shown for the first one.
Here's my code:
#foreach (var name in Model){
<table>
<tr>
<td>Name</td>
<td> <button id="#name.id">Show</button></td>
</tr>
</table>
}
Script:
<script type="text/javascript">
$(function() {
$('#').click(function() { //what should I put in the #? considering that it would have different id's?
$("#popupdiv").dialog({
title: "jQuery Popup from Server Side",
width: 430,
height: 250,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
return false;
});
})
View Pop:
<div id="popupdiv" title="Basic modal dialog" style="display: none">
<b> Welcome </b>
</div>
You should use a common class
<td> <button id="#name.id" type="button" class='popup-launcher'>Show</button></td>
Then you can use Class Selector (“.class”)
Selects all elements with the given class.
Script
$('.popup-launcher').click(function() {
//You can access elements id using this object
var id = this.id;
//Rest of your code
$("#popupdiv").dialog({
title: "jQuery Popup from Server Side",
width: 430,
height: 250,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
return false;
});
$('button').click(function () {
var row = $(this).closest('tr').index();
alert('In row ' + row)
//$('table').find('tr:eq('+row+')').find('td:nth-child(1)');
//pop code here
})
FIDDLE
This way you can get all the data of the row where you click the button
Hey I have a very basic HTML code. There is some problem with the HTML event attributes. Check this code:
<td ><div id="id" onMouseover="show()" onMouseout="hide()">
<table width=100%>
<tr><td>hiiii</td></tr>
</table>
</div></td>
here's the script :
<script>
function show() { document.getElementById('id').style.visibility="visible"; }
function hide() { document.getElementById('id').style.visibility="hidden"; }
</script>
The output displays hiiii no matter what.
It's an issue with the scope of the html event handler attributes. There's two easy solutions:
Make the show and hide functions available in the global scope:
window.show = function () { document.getElementById('id').style.visibility="visible"; }
window.hide = function () { document.getElementById('id').style.visibility="hidden"; }
Or put the event handlers in your JavaScript code, instead of HTML attributes:
var div = document.getElementById('id');
div.onmouseover = show;
div.onmouseout = hide;
function show() { document.getElementById('id').style.visibility="visible"; }
function hide() { document.getElementById('id').style.visibility="hidden"; }
The onmouseover and onmouseout attributes should be in lower case.
So:
<div id="id" onmouseover="show()" onmouseout="hide()">
DEMO
<td>
<div id="id" onmouseover="show()" onmouseout="hide()">
<table width="100%">
<tr><td id="test">
hiiii
</td>
</tr>
</table>
</div>
</td>
function show() {
document.getElementById('test').style.visibility = "visible";
}
function hide() {
document.getElementById('test').style.visibility = "hidden";
}
See this Fiddle: http://jsfiddle.net/obnzbpmd/8/
When Div is hidden it doesn't call the JS hide() function. you need to set ID on the control ifself which you want to show/hide based on condition and assign event handlers on the Main Div element.
Hope this helps and hope this is what you are looking for!
well i am filling a table with php with values from DB
what i was trying to but unsuccessful didnt is to change the tr background color when image is clicked
here is what i tried to do
<script>
function changeColor(tr)
{
var tableRow = document.getElementById(tr);
tableRow.style.backgroundColor='red';
}
</script>
<html>
<table>
<tr id='tr<?php echo $personID;?>'>
<td>
<?php echo $personName;?>
</td>
<td>
<?php echo $personLastName;?>
</td>
<td>
<img src= "/*an image*/" onmouseover="" style="cursor: pointer;" onclick="changeColor('tr<?php echo $personID;?>')" >
</td>
</tr>
</table>
</html>
obiously this is just for one case but when i get elements from DB this table is pretty long
any ideas?
THANKS IN ADVANCE
one more thing
my table already has an css design where
td
{
background: #EDEDED;
}
tr:hover
{
background: #d0dafd;
}
this is maybe why when doing onclick="this.parentNode.parentNode.style.background='gray'"
is not working how can i fix this?
You could simply use parentNode : DEMO
<img src="http://dummyimage.com/50x50"
onmouseover="this.parentNode.parentNode.style.background='gray'"
onmouseout="this.parentNode.parentNode.style.background=''"
/>
img->parentNode=td -> parentNode=tr
jQuery code
//code for clicks
$('td img').click(function() {
$(this).closest('table').children('tr').removeClass('highlight');
$(this).closest('tr').addClass('highlight');
});
//code for hovering
$('tr').hover(function() {
//if the tr has the highlight class do nothing, otherwise add hover style
if(!$(this).hasClass('highlight')) {
$(this).addClass('hoverStyle');
}
}, function() {
//if the tr has hover style remove it when hover ends
if($(this).hasClass('hoverStyle')) {
$(this).removeClass('hoverStyle');
}
});
Then just make a CSS class to define the highlight style.