How to make whole table row clickable? - javascript

I have searched this site for a better solution on this but it seems that I can't find the right one.
I want to make my whole table row clickable in case of PC and also same thing should happen when user touches anywhere inside the row in case of tablet.
So far I have the following code and I would prefer a Html or JavaScript solution or anything along those lines.
<tr onclick="window.document.location='';">
<td><img src="/chemsolver/images/help.jpeg" alt="" width="36" height="36" id="Synthesis2" style="background-color: #996633" align="right" /></td>
<td> Help With Table </td>
</tr>

Set display: block on the anchor tag. And then set your height on the anchor.
http://jsfiddle.net/u2qLC/
Alternatively use an onclick event on the tr and have cursor: pointer set on the tr. Instead of using anchor tag.

Related

center button after change display mode

I have a problem with centering a button after I set it to display: block.
I've got a table:
<table border="0" id="contacts" width="100%">
<tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
<tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
</table>
Both buttons are centered in the table. Now I switch the visibility with:
document.getElementById("contacts").style.display = "none";
The table and buttons are invisible. After I switch the visibility back with:
document.getElementById("contacts").style.display = "block";
The buttons are aligned to the left. How can I center the buttons again?
First, do not use a table structure for formatting. Tables have their place, but using them as HTML scaffolding is so 1990. Instead, use DIVs with css.
Break your page up into several outer boxes, or containers. (For this, you can use DIVs - you can use DIVs for just about all containers - or sections or other container elements depending on your need for extra SEO cred.)
Within each outer container (div), you then subdivide into the type of layout you need (again, using divs). Then, within each sub-area, again use divs (or other container element) to do any further sub-divisions.
So, how to size / position all these things? Use CSS.
In css, there is a reason why the most important change from Bootstrap3 to Bootstrap4 is moving from floats to flexbox. Floats was the old way to position items; flexbox (and CSSGrid) are the new way. Flexbox is dead easy.
Flexbox requires two things:
A parent container (e.g. DIV, section, aside, p, etc)
One or more child elements (e.g. div, p, img, etc)
Here is an excellent 5min video tutorial
Here is a great cheatsheet
You would use document.getElementById("contacts").style.display = "table";
You could also give it a class "align-content-center" in this example
<table border="0" id="contacts" width="100%">
<tr>
<td>
<div class="align-content-center">
<button style="width:200px;">btn1</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="align-content-center">
<button style="width:200px;">btn1</button>
</div>
</td>
</tr>
</table>
and then just style your div around the buttons
.align-content-center{
width: 100%;
text-align: center;
}

JQuery link entire table row to anchor to trigger fancybox

I have found multiple ways to link an entire table row to another page with jQuery. But every solution I've tried for this does not work with anchors which point to a div that triggers a fancybox.
I have the following HTML
<tbody class="result" data-href="#details1">
<tr>
<td rowspan="2" class="resultlogo">
<img class="resultlogoimg" src="images/logos/logo-orshop.png">
</td>
<td class="resulthead">
<h1><a class="detaillink" href="#details1">Orshop</a></h1>
</td>
<td rowspan="2" class="resultprice">
<h1>€ 69.00</h1></td><td rowspan="2" class="resultrating">
<span class="markbg"><h1>8,3</h1></span>
</td>
</tr>
<tr>
<td class="resultpc"><h2>3074ES, Rotterdam</h2></td>
</tr>
</tbody>
With the following jQuery to trigger the click event:
$(".result").click(function() {
window.document.location = $(this).data("href");
});
The <tbody> tag wraps 2 table rows because of the way a result row is layed out. I want to show div contents in a fancybox based on the user clicking a row (or tbody tag).
Is it not possible to use data-href with anchors?
If you are going to wrap the 2 table rows, set you data attributes in the <table> tag, and not in the <tbody> tag.
Then you only need a simple fancybox initialization script like:
$(".result").fancybox();
And use the fancybox's special data attributes to set the href and the type of content like
<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>
See JSFIDDLE

Hide element issue

So I am trying to hide a DIV that sits inside a td. Issue I am facing is that the attached code fades the div perfect fine but the table space stays there. How do I make this table space disappear completely?
Table:
<table width="100%" id="myTabDiv">
<tr><td align="center"><div id="innerDiv"> This disappears </div></td> </tr>
</table>
Just to clarify, the solution was to wrap the table in another div and hide that div instead.

Slide Down tabe row smoothly and Slowly

I want to Slide Down tabe row smoothly and Slowly.
The problem now is, it is instantly appearing and hiding, how can i make it smooth.
**Please check this fiddle:**
http://jsfiddle.net/5WT9g/2/
HTML:
Show Content
<br><br><br>
<table width="400" border="1">
<tr id="mainContent" style="display:none;">
<td> THIS IS MAIN CONTENT </td>
</tr>
</table>
JS:
$('#showContent').click(function ()
{
$('#mainContent').slideToggle('slow');
});
I think you mean to use slideToggle() and not toggleslide().
However, the animation still won't work smoothly for table cells. It will work slightly more smoothly if you set a height for the tr. For a completely smooth animation, I recommend using divs instead.
Here is a modified version of your code that has a sort of smooth animation with tables:
http://jsfiddle.net/TS77v/1/
As you can see, you will have to do the animation on the td, not the tr. I also had to set the height of the td for this to work, otherwise it will just appear and disappear.
Why doesn't the animation work properly on tables?
From "Learning jQuery" by Chaffer and Swedberg
Table rows present particular obstacles to animation, since browsers
use different values (table-row and block) for their visible display
property. The .hide() and .show() methods, without animation, are
always safe to use with table rows. As of jQuery version 1.1.3,
.fadeIn() and .fadeOut() can be used as well.
For your reference: https://stackoverflow.com/a/920480/3016565
It would be much easier with divs but if you prefer/need tables then tables it is. I'd do it by putting a div inside the table cell ja use the slideToggle to it. Yes, it still adds the div there but atleast you got the table structure. To make it work you need to do just a minor change to your HTML code, JS stays the same:
HTML
Show Content
<br><br><br>
<table width="400" border="1">
<tr>
<td><div style="display: none;" id="mainContent">THIS IS MAIN CONTENT</div></td>
</tr>
</table>
And a fiddle: http://jsfiddle.net/32HR9/1/
AFTER GETTING THE INFORMATION THAT YOU CAN'T CHANGE THE HTML
I assume you can edit the javascript? You haven't said anything about that. This trick isn't neat but there's no need to change the HTML and it gets the job done:
So, with jQuery
Make the tr visible.
Wrap the content of the tr in a div.
Hide the div.
Make the slideToggle work with the created div.
with code
$('#mainContent').css('display', 'table-row');
$('#mainContent > td').wrapInner("<div class='hideshow'></div>");
$('.hideshow').css('display', 'none');
$('#showContent').click(function (){
$('.hideshow').slideToggle('slow');
});
and a fiddle: http://jsfiddle.net/5E5VS/7/
Try this.
Show Content
<table id="mainContent" width="400" border="1">
<tr>
<td> <p style="display: none"> THIS IS MAIN CONTENT</p></td>
</tr>
</table>
$("#showContent").click(function () {
$('#mainContent').find("p").slideToggle();
});

HTML email template solution to javascript link in table TD?

This is my current code:
<td height="150" style="background: url(bg.jpg); cursor: pointer;" onClick="document.location.href='http://www.youtube.com';">
Now obviously with JavaScript this isn't likely to work in email clients (is it?). What is an HTML solution? Thanks in advance! I've tried wrapping link tags around but that doesn't seem to do the trick.
Why not just style a link to take up the width and height of the td:
<td height="150" style="background: url(bg.jpg);"></td>
Given the information you have posted (and your comment on #PAM's answer), I think this will solve your problem:
<td width="150" style="background-color:rgb(128,128,128); background-image:url('http://www.yoursite.com/yourpicture.gif'); cursor:pointer;">
<a href="http://www.youtube.com">
...Text...
</a>
</td>
I've added the background-color attribute to the td so that users have a fallback if their email client does not display background images. Of course, you should set this to a colour which is similar to the background image.
Can't you just type like that:
<td height="150"><img src="bg.jpg" /></td>

Categories

Resources