I've set up a fiddle with a table.
You see, Im trying to make a table where the user will hover and click the td to show an id. Check the fiddle out and you'll understand.
Now, When the user hovers Parent4, you may notice there's space on the table where there's no text and the user can't click it so the Child4 wont appear....
Now, is there any way I can make the space where there's no text clickable so it shows up child4?
I tried
<td ahref="#child4"> but didn't work...
////?EDIT As its a bit confusing...
I need you to see the fiddle.
You can see the cell for Parent4 is bigger than the text. So when the user hovers on the cell I want the text to change color and the cell to change color too + if the user clicks the cell Child4 won't appear because a cell is unclickable, so My question, how can I make the cell clickable to display Child4?
UPD:
I didn't update the fiddle, but it's now up to date.
The href property is designed for anchor elements (<a/>). "ahref" as you've put should be <a href="">. a is an element of its own, not a HTML attribute, and href is an attribute it accepts.
To make the text of a td clickable you can simply put an anchor within it:
<td>
My clickable text
</td>
Edit: To fix this now that the question has been added, simply add in the following CSS:
td a {
display:block;
width:100%;
}
What this does is display the anchor tag as a block, allowing us to adjust the width, and then set the width to 100%, allowing it to fill the remaining space.
Working JSFiddle.
Add the onClick event on the td mark.
<td onClick="document.location.href='http://www.yoursite.com';"> some text here </td>
There is a very simple way of doing this with just HTML. Put the link text inside a DIV. The DIV occupies the whole TD and makes it all clickable.
<a href="http://whatever.com">
<div>
Link Text
</div>
</a>
If you're trying to make an area clickable with no text, you can define the size of the tag like so:
This will create the block without any object or text inside.
Just wanted to add two ways that actually worked inside the for me:
Using Angular 5:
a. in [yourname].component.html:
<table id='myTable'>
<tr><td (click)="myClick()">my cell</td>...
b. In [yourname].component.ts: (inside your exported class.. )
simply implement the needed function..
export class [youyname].... {
....
myClick() {
}
}
Pure JS:
<script>
function myClick(){
console.log("got here");
// Do Whatever you want
}
</script>
<div id='myDiv'>
<table id='myTable'>
<tr><td onClick="myClick()">Yo..</td><td>....
The easiest way..
(Note: It's possible to put the script inside the tag, or even load an external JS file inside it, but I don't like doing it like that.)
Very Simple way is just adding onClick='myFunction()'
Ex:
<table>
<tr>
<td onClick="myFunction()">hello</td>
</tr>
</table>
If using pug/jade try the following;
tr(onclick="document.location.href='http://www.google.com';")
td.py-2.align-middle
Simplest thing would be to populate the "empty" cell with:
That should do the trick for you.
Related
When the cursor is on the 2nd span, the photo will change and when the cursor is moved, the old photo will come.
This will require a little bit of JavaScript, but it can be put in your HTML document. The span tag can have a hover event call the JavaScript to change the image. Here is a simple example.
<img id="sampleImg">
<span id="span1" onmouseover="document.getElementById('sampleImg').src = 'image1.gif'"> Span 1</span>
<span id="span2" onmouseover="document.getElementById('sampleImg').src = 'image2.gif'">Span 2</span>
The image source paths will need changed to fit your needs, but otherwise this should be able to be implemented into your code. The onmouseover event in the span tag contains the JavaScript to change the given image's source.
I hope this solved your issue!
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
I'd like to have three cells in a table select the appropriate checkbox when you click on them, so I wrapped them with a label tag.
<table>
<tr>
<td>
<input id="input_id" type="checkbox">
</td>
<label for='input_id'>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</label>
</tr>
</table>
Unfortunately this broke the click functionality. Normally when you click the text in a label it toggle the check, but this doesn't work with wrapped elements. Any ideas why? Should it, or is there some reason this is a bad idea?
Interestingly, it does work if I use three separate labels around the cell contents with the same 'for' attribute....
It's a bad idea to write invalid mark-up as per your example. The only element that should wrap a td is a tr.
As it stands, your example won't break the click functionality, because the td tags will be discarded by the parser.
However, if the example was inside a table and tr element, then the input and label elements would be moved to before the table, and therefore wouldn't be wrapping either the tds or the "stuff" text (which stay inside the table), so clicking on that text will have no effect.
in my application i have table cell loaded with button and text. now my question is how do i hide text when button receives focus.is that possible to write same text on top of image.
here is my demo
You can not solve this problem with CSS alone in case of "focus", since the text (you were talking about the "help", right?) is not a child element of your button. I'd suggest to use JS for this or move the text/image inside of the button.
<button><span>Help</span></button>
Then you could use CSS to hide the text when the button like this:
button:focus span { display: none; }
But I'm not sure if that still does what you want.
I want the text to appear in one single line..td actually contains text and drop down list controls...Also its a table within another td tag
I have tried changing everything..alignment, width..what not
but the text moves to the next line instead of appearing on the same line..I want the horizontal bars to appear..what value should I give to the width attribute of table ?
hope the question isnt confusing :/
Try applying this class to td:
.scroll{
overflow:auto;
overflow-x:scroll;
}
<td class="scroll">A lot of content here....</td>
Alternatively, you can put a div inside the td and apply the style to that instead:
<td>
<div class="scroll">A lot of content here....</div>
</td>
Update
You can apply the inline style like this:
<td style="overflow:auto; overflow-x:scroll;">A lot of content here....</td>