We Keep Coding

How to open link in <a href> when click on parent <h3> element?

I have the problem when click in my title some post. Because I need set title have font-size and line-height is big. When user click between two line, they can't click. If hover in text, it's work.
I added a red arrow with 2 heads in the middle of the 2 lines (click on this to see image)
But user not hover exactly all time, so they will try click many time when start read some post in my website.
Code look like that:
.entry-title {
font-family: Arial,Helvetica,sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
I purposely to width 50% to have 2 line in sample code.
Have any method to fix that? User only hover anything on h3 tag, click on h3 tag and will open link in the a href.
So sorry if my first post is bad. I also research in Stackoverflow before ask this question but can't find the question same my case.
I prefer the simple method to resolve that. Thank you very much!!!

Since you cannot change your HTML structure, you can select all elements with the entry-title class using document.querySelectorAll and add click event handlers to all of them to click the child anchor tag.
document.querySelectorAll('.entry-title').forEach(title => title.addEventListener("click", function(e){
this.querySelector('a').click();
}));

var h3 = document.querySelector(".entry-title");
h3.addEventListener("click", function () {
var a = h3.getElementsByTagName('a')[0];
a.click();
});
.entry-title {
font-family: Arial,Helvetica,sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
cursor:pointer;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>

Update:
Use addEventListener on <h3> and simulate click(); on <a> link
Your example could be:
var h3 = document.getElementsByClassName("entry-title");
for (var i = 0; i < h3.length; i++) {
var a = h3[i].getElementsByTagName("a")[0];
h3[i].addEventListener("click", function() {
a.click();
});
}
.entry-title {
font-family: Arial, Helvetica, sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>

Adding padding might help or put everything in a div and add an Eventlistner to the div
div = document.getElementbyid('divid')
div.addEventlistner('click',function(e){
window.location.assign('url')
})
sorry for poor spellings

Try enclosing the heading itself within the a tags.

How to anchor a fixed-height <div> to the bottom right of a <td> without intruding into content above?

1) The Basic Problem.
I know this is a long statement of a problem, but please bear with me. The problem's kind of simple, but it takes me a bit to set it up for you.
I have a 5x7 table representing 5 time slots in the day with 7 classrooms in each slot. The <td>s have a complex inner HTML structure housing the class title, and instructor's name, together with a class desrciption and instructor bio that populate modal dialogs that popup when the title or name are clicked.
I need to add a <div> (a real-time registration counter) anchored to the <td>'s bottom right without it intruding upward into content above it.
2) The Problem Setup.
The HTML for a typical <td> looks like this.
<td id="x0900A"> <!-- 0900 room A -->
<div class="classTitle"></div>
<div class="classDescrip"></div>
<div class="instructor"></div>
<div class="gender"></div>
<div class="instructorBio"></div>
<div class="instructorImg"></div>
<div id="x0900A-roomCount" class="roomCount">
<div class="regis">registered</div>
<div class="cap">capacity</div>
</div>
</td>
The title, instrucrtor name, and room count show in the cell. The other <div>s are display {hidden;}. Their content populates modal dialogs that popup on a click on title or name.
With this CSS, I can lock .roomCount to the bottom right.
td {
position: relative;
}
.roomCount{
position: absolute;
right: 0;
bottom: 0;
tex-align: right;
}
But, in some cells, its text directly abuts the instructor name above it. In others, not. When it does, the name is illegible.
The table data is on an Amazon Web Services server. With JavaScript, on each page load, I dynamically retrieve it and build the table.
You can see it all at work at this pen on CodePen.
3) I Need A Solution That Doesn't Restructure The HTML.
I need to keep .roomCount from abutting the instructor name as it does in some cells.
I wouldn't mind restructuring the HTML but that I stupidly wrote the JavaScript dependent upon the elements' positions in the <td>. (It was my first time. What can I say?) I'd have to rewrite the JS, which I also wouldn't mind doing, but that I haven't time before I have to take the site live.
So, I need a solution without restructuring the HTML elements in the <td>s.
4) Any Help?
Any help?
Thanks ever so much for reading this far. Your help will be greatly appreciated. In fact, if you can solve it, I'll polish your shoes for six months. (I hope you wear sneakers.)

A brutally hacky way is to increase the size of the bottom padding or margin on the instructor's name.
.schedule p {
line-height: 1.2em;
padding: 10px 5px 0px 5px;
margin: 0 0 25px 0;
}
That will put more room under the course title though. If you want it under only the instructor, change the instructor css block to
.schedule p.instructor {
margin: 0 0 25px 0;
padding: 10px 5px 0px 5px;
font-size: .85em;
text-align: right;
color: #00b8b8;
}
The margin and padding properties on your .instructor rule are currently being ignored because .schedule p has higher specificity.

The problem is caused by .classTitle having different height because the length of content is different. Height of all td in a same row are the same. When .classTitle takes up more space, .roomCount is left with less space at the bottom. And with position: absolute, it 'overlaps with .instructor
You can try adding fixed height to .classTitle and .instructor. This way, you can remove the position: absolute from .roomCount.
.classTitle {
padding: 5px;
font-size: 1.05em;
text-align: left;
color: #00b8b8;
height: 4em; /* Added Sample Height */
}
.instructor {
margin: 0 0 10px 0;
padding: 0 3px 0 3px;
font-size: .85em;
text-align: right;
color: #00b8b8;
height: 1.2em; /* Added Sample Height */
}
.roomCount {
/* position: absolute; */
/* bottom: 0; */
/* right: 0; */
text-align: right;
}

Displaying text inside an HTML input

Is it possible to display dynamic texts contents inside an HTML input element, some thing similar to how chrome browsers CTRL + F works.
Like it shows the number of hits in the page.
Can anyone please help, if possible how or share some useful materials to achieve the same?

You can easily achieve this using a combination of relative and absolute positioning on the parent and child elements like this:
.field {
position: relative;
display: inline-block;
}
.field__input {
padding-right: 40px;
}
.field__helper {
position: absolute;
right: 5px;
top: 4px;
color: #999;
font-size: 12px;
}
/* this is just fluff to make it look nicer */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<div class="field">
<input type="text" value="find" class="field__input">
<span class="field__helper">1 of 5</span>
</div>
We use a relatively positioned parent (.fieldRow) to wrap around the input field. Then, we use a span (.helper) containing the text we want to display and using position: absolute; we can position it to the right of the input field. Last of all, we need a little padding on the right hand side of the input to stop the inputted value from bleeding into our helper text.

Edit cursor not displayed on Chrome in contenteditable

When you open this page (see Live demo) with Chrome :
<span id="myspan" contenteditable=true></span>
CSS :
#myspan { border: 0; outline: 0;}
JS :
$(myspan).focus();
the contenteditable span has focus (you can start to write things and you will see that it already had focus), but we don't see the "I" edit cursor.
How to make that this cursor is displayed ? (Remark : outline:0 is needed, as well as the fact that the span is empty even with no white space).
Note : With Firefox, the cursor is displayed.

The problem is that spans are inline elements. Just add display:block; to your CSS and it will fix the problem.
$(myspan).focus();
#myspan {
border: 0;
outline: 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="myspan" contenteditable=true></span>

I added padding to the left and the cursor appears.
#myspan
{
border: 0;
outline: 0;
min-width: 100px;
height: 30px;
padding-left: 1px;
}
Demo in jsFiddle

.cont_edit {
outline: 1px solid transparent;
}

This just has to do with the way an empty ContentEditable area is rendered. To prove it's not about the focus, add some text to your editable div, and then delete it. When the last character is gone, the cursor will disappear
From the question Setting the caret position to an empty node inside a contentEditable element
The selection/range model is based around indexes into text content, disregarding element boundaries. I believe it may be impossible to set the input focus inside an inline element with no text in it. Certainly with your example I cannot set focus inside the last element by clicking or arrow keys.
It almost works if you set each span to display: block, though there's still some highly strange behaviour, dependent on the existence of whitespace in the parent. Hacking the display to look inline with tricks like float, inline-block and absolute position make IE treat each element as a separate editing box. Relative-positioned block elements next to each other work, but that's probably impractical.
You could also try adding a zero-width character like ​
document.getElementById('myspan').focus();
#myspan {
border: 0;
outline: 0;
}
<span id="myspan" contenteditable="true">​</span>

The solution was to change <span> to <div> (I've seen that this solves many contenteditable problems in other questions here and there) + to add a min-width.
Indeed, with the following code, the size of the <div> would be 0px x 18px ! That explains why the caret (edit cursor) would be hidden !
HTML
<div id="blah" contenteditable=true></div>
CSS
#blah {
outline: 0;
position: absolute;
top:10px;
left:10px;
}
JS
$("#blah").focus();
Then, adding
min-width: 2px;
in the CSS will allow the caret to be displayed, even with Chrome : http://jsfiddle.net/38e9mkf4/2/

The issue I faced on Chrome v89.0.4389.90 was that contenteditable fields would sometimes show the blinking caret on focusin and sometimes not. I noticed it always blinks when there's already content in the field before focusing. It's when there's no content that the sometimes will/won't behavior occurs.
At first, I thought there must be some conflicting event handler that's erratically taking focus away. I disabled all my event binds and timers. Still the same erratic behavior. Then I thought it might be some conflicting CSS, so I disabled all stylesheets. At least now the behavior was consistent: the caret blinks 100% of the time when the field has content; the caret does not blink 100% of the time when the field has no content.
I enabled binds and stylesheets again. My div was already set to display: block; with min-width, min-height, and padding set in the final computed style set. None of the other answers here worked. I do have a placeholder on :empty:before that was a possible culprit. I commented that out. Now the behavior was consistent again, same as if the stylesheet was off. Oddly enough, the runnable snippet on SO works with the same computed CSS stack. I want to keep the placeholder, so it requires further research with my actual codebase...
The only solution I could get to work 100% of the time with my current issue involved forcibly placing the caret inside empty fields by creating a blank space and removing it immediately afterwards. Best I can do for a workaround until debugging the root cause.
//force caret to blink inside masks
let force_caret = function() {
if (!this.textContent) {
this.textContent = ' ';
let r = document.createRange(),
s = window.getSelection();
r.setStart(this.childNodes[0], 0);
r.collapse(true);
s.removeAllRanges();
s.addRange(r);
this.textContent = '';
}
}
//binds
let els = document.querySelectorAll("[contenteditable]");
for (let i = 0; i < els.length; i++) {
els[i].addEventListener('focusin', force_caret, false);
}
/* styles irrelevant to the issue, added for visual assist */
:root {
--b-soft: 1px solid silver;
--bs-in: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
--c-soft: gray;
--lg-warm: linear-gradient(30deg, rgb(254, 250, 250), #eedddd);
}
body {
font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
}
[contenteditable] {
outline: initial;
}
[contenteditable][placeholder]:empty:before {
content: attr(placeholder);
color: var(--c-soft);
background-color: transparent;
font-style: italic;
opacity: .5;
font-size: .9em;
}
.input {
border-bottom: var(--b-soft);
padding: .2em .5em;
}
.input_mask {
display: flex;
align-items: baseline;
color: var(--c-soft);
}
.mask {
box-shadow: var(--bs-in);
border-radius: .2em;
background: var(--lg-warm);
font-weight: 500;
border: 1px solid transparent;
text-transform: uppercase;
/* styles possibly relevant to the issue according to other proposed solutions */
margin: 0 .4em .1em .4em;
padding: .2em .4em;
min-width: 3em;
min-height: 1em;
text-align: center;
}
<div data-type="tel" data-id="phone" class="input input_mask">
<span>+1 (</span>
<div maxlength="3" contenteditable="true" placeholder="111" class="mask"></div>
<span>)</span>
<div maxlength="3" contenteditable="true" placeholder="111" class="mask"></div>
<span>-</span>
<div maxlength="4" contenteditable="true" placeholder="1111" class="mask"></div>
<span>x</span>
<div maxlength="5" contenteditable="true" class="mask"></div>
</div>

Add a CSS style of
min-height: 15px;
you may also need
display: block;
to your contenteditable="true" tag

For me setting it content of contenteditable div to <br> works. I tried setting it to nbsp; but that creates extra character space in the div before i start editing. So, i choose this:
<div id="blah" contenteditable=true><br></div>
over:
<div id="blah" contenteditable=true>nbsp;</div>
Hope this helps.

I use Chrome and your Code works fine.
Try to use cursor: text; in your CSS. See here

jQuery slideDown / slideUp not working in IE7

So I'm using a very basic jQuery .slideDown which is working great in FF, Safari, and Chrome. Won't work at all in IE7. here is the script:
//Top Mailing List Drop down animation
$(document).ready(function() {
$('div#top_mailing_hidden').hide();
// Expand Panel
$("input#top_mailing").focus(function(){
$("div#top_mailing_hidden").slideDown("slow");
});
// Collapse Panel
$("input#top_mailing").blur(function(){
$("div#top_mailing_hidden").slideUp("slow");
});
});
I've been researching for hours and found something about a bug relating to slideup/down that causes it to fail in IE7 when being used on descendants of postion:fixed elements. This animation is happening within a position:fixed navbar, however, I've tried wrapping the inner elements with position:relative but to no avail, I still get nothing in IE. Also, notice that the nav element is being hidden with jQuery, that function is working even in IE7, however, the slideup/down are not.
Here is the related CSS:
/* --------------Top Dropdown Mailing List------------------- */
#top_nav div#top_mailing{
float: right;
width: 351px;
padding: 0 10px 10px 5px;
background: url(images/top_mailing_bg.png) bottom center no-repeat;
position: absolute;
top: 0;
right: 0;
color: #fff;
text-shadow:0 -1px 0px #222;
}
#top_mailing #top_mailing_hidden{
font-size: .7em;
text-align: center;
position: relative;
height: 30px;
zoom: 1;
}
#top_mailing #top_mailing_hidden div{
}
#top_mailing #top_mailing_hidden a{
color: #acffc0;
font-weight: bold;
}
#top_mailing #top_mailing_visible{
height: 30px;
font-weight: bold;
font-size: .9em;
padding-top: 5px;
}

jQuery's slideUp(), slideDown() and slideToggle() don't work with position:relative elements in IE7.
Some slide issues can be resolved by adding
zoom: 1;
To the sliding container and/or elements.
We had to revert to use <table> for layout to solve some of the sliding issues.

The reason for this behavior in my example is that IE doesn't recognize .focus which I was using to trigger the .slideUp/Down. I've found a good answer explaining the problem here, however this allows you to add a CSS class on focus, but I need to animate a separate element with slideUp/Down on .focus so the CSS class doesn't help my situation, anyone have ideas?
Got it! I had to use mouseenter rather than focus, but here is the completed script with a conditional mouseenter event for the devil, a.k.a. IE:
//Top Mailing List Drop down animation
$(document).ready(function() {
if (jQuery.browser.msie === true) {
jQuery('#top_mailing')
.bind("mouseenter",function(){
$("#top_mailing_hidden").slideDown('slow');
}).bind("mouseleave",function(){
$("#top_mailing_hidden").slideUp('slow');
});
}
$('#top_mailing_hidden').hide();
// Expand Panel
$("input#top_mailing").focus(function(){
$("#top_mailing_hidden").slideDown("slow");
});
// Collapse Panel
$("input#top_mailing").blur(function(){
$("#top_mailing_hidden").slideUp("slow");
});
});