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.

JQuery Offset issue when div position is fixed

I have a website which has a page layout and style something like mentioned in this JsFiddle
Now Using JQuery when I click on the button, content is being displayed properly as shown below:
But when I first scroll the page and then click the button, content is not displaying properly as shown:
Can you please guide me to handle this situation ?
I have used below jQuery for this. But it seems offset or position is not working
$('#btn').click(function(){
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 20 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function(){
$('.control-container').css('display', 'none');
});

You don't need to use offset to achieve that... And if you need to keep CSS with position:fixed, you need to switch it in javascript to static.
The thing you are looking for is simply display:table ...
$('#btn').click(function(){
$('.control-container').css({'display': 'table','position': 'static'});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none','position': 'fixed'});
});
Check out this JSFiddle
But if you really need a solution with position:fixed based on button position, you should try this way:
$('#btn').click(function(){
var button_fixed_position = $('#btn').get(0).getBoundingClientRect();
$('.control-container').css({'display': 'block','left' : button_fixed_position.left, 'top' : button_fixed_position.bottom});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none'});
});
Check out second JSFiddle

There is no need to specifically mention position property here.
Also remove the closing a tag and replace it with </button>
Currently container is occupying full width ,but that can also be set
$('#btn').click(function() {
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 30 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function() {
$('.control-container').css('display', 'none');
});
.header {
background-color: maroon;
color: #fafafa;
height: 60px;
position: fixed;
width: 100%;
text-align: center;
line-height: 19px;
font-size: 25px;
z-index: 2;
padding: 0px;
margin: 0px;
top: 0;
}
.content {
background-color: #fff;
border: 1px solid #999;
padding: 5px;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: 60px;
}
.control-container {
width: auto;
background-color: red;
#position: fixed;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
Header
</div>
<div style="clear:both">
</div>
<div class="content">
<br/>
<br/>
<br/>
<br/>
<br/>
<button id="btn">Click Me</button>
<div class="control-container" style="display:none;">
Keep me exactly underneath 'Click Me' when Page is scrolled.
</div>
</div>
</div>

CSS position fixed property positions an element referencing view's/body's dimension.
If you have access of modifying CSS, then just remove the position: fixed; property from .control-container.
If you don't have access, then using script add position: static !important property to .control-container.
$('.control-container').css('cssText', 'position: static !important');
Modified JSFiddle

How to simplify this code below?

I'd like to simplify this javascript code,
but I don't have ability to do this,
plz help me, I will really appreciate it, thank you very much!
$(function() {
$("#show1").click(function() {
$("#showmore1").toggle();
})
$("#show2").click(function() {
$("#showmore2").toggle();
})
$("#show3").click(function() {
$("#showmore3").toggle();
})
})
[2016/05/24] Here is my complete code, https://jsfiddle.net/o970b9cn/
sorry for my missing information.
I'd like to show many reviews, but it will hide the complete information first, when the user clicks on the button, to start the full text.
I tried the answer below yesterday, but it still can not run...sorry for my insufficient ability...

Give common class to each "show<your_id>". e.g. showmore
give some attribute to your element like data-showid, which contains id of toggle element.
For class "showmore", write click function
Like this
<a id="show1" class="showmore" data-showid="showmore1" >show more</a>
<a id="show2" class="showmore" data-showid="showmore2" >show more</a>
<a id="show3" class="showmore" data-showid="showmore3" >show more</a>
<script>
$(function() {
$(".showmore").click(function() {
var this_button = $(this);
$("#"+this_button.attr("data-showid")).toggle();
})
})
</script>

Use Attribute Starts With Selector [name^=”value”]
Selects elements that have the specified attribute with a value beginning exactly with a given string.
$(function() {
$("a[id^='show']").click(function() {
$(this).prev('div').find('span[id^="showmore"]').toggle();
});
});
$(function() {
$("a[id^='show']").click(function() {
$(this).prev('div').find('span[id^="showmore"]').toggle();
});
});
#import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
#import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
#import url(https://fonts.googleapis.com/css?family=Nunito:300);
*,
html,
body {
/*font-family: 'Noto Sans TC', 'Nunito', sans-serif;
font-weight: 300;*/
font-family: 'cwTeXYen', 'Nunito', sans-serif;
font-weight: lighter;
font-size: 16px;
letter-spacing: .2pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px;">
<div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore1" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
</div>
(read more)
</div>
<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px; margin-top: 30px;">
<div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore2" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
</div>
(read more)
</div>
<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px; margin-top: 30px;">
<div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore3" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
</div>
(read more)
</div>
Fiddle Demo

You can use each, simply you will iterate the function on each element that has the same attribute, in this case we will use class because the id should be unique.
We will give to each container (#show1 #show2 ...) a class such show and make this function https://jsfiddle.net/sL3qk853/
$('.show').each(function (index, elem) {
$(elem).on('click', function () {
$(this).find('div[id^="showmore"]').toggle();
});
});
If you have more than a div in the container you can specify the selected div by using begin with selector ( div[attribute^="something"] ) with a find , or just use children if you have a one div or want to make this on all the divs inside the .show container $(this).children().toggle(); .
Edit: instead of using class and each you can do this
$('div[id^="showCont"]').on('click', function () {
$(this).children().toggle();
});
div {
width: 100px;
height: 100px;
background-color: #eee;
margin: 1px;
float: left
}
div[id^="showmore"] {
background-color: #3498db;
float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showCont1">
<div id="showmore1">
</div>
</div>
<div id="showCont2">
<div id="showmore2">
</div>
</div>
<div id="showCont3">
<div id="showmore3">
</div>
</div>

Why doesnt my function run on .resize()?

I have created a function to center my <div> using jQuery, it works on page load but doesn't on page resize.
What am I doing wrong?
JS:
<script>
$( document ).ready(function() {
function reCenter() {
$('.content').css({
position:'absolute',
left: ($(window).width()
- $('.content').outerWidth())/2,
top: ($(window).height()
- $('.content').outerHeight())/2
});
}
$(window).resize(reCenter());
// To initially run the function:
reCenter();
});
</script>
HTML:
<div class="content">
<h1>Header</h1>
<span class="hyphen">-</span>
<h2>Subtext</h2>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
html {
background: darkgrey;
}
body {
color: #fff;
text-align: center;
/*padding-top: 300px;*/
}
h1 {
font-family: 'Arimo', sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 40px;
}
span.hyphen {
color: #0CFFFC;
font-size: 3em;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
UPDATE
After getting the function to fire up on page load, it has some inconsistent behaviour between page load and window resize
http://jsfiddle.net/7zqkd4w8/

It should be $(window).resize(reCenter); since you are sending it a function not the results of calling the function.

You are trying to find width of '.content' div. You won't get proper width of the div unless its floating or absolute. You are giving absolute class to .content in reCenter(); so if you trigger your resize function twice(on first time) it would work.
$(window).on('resize',function(){
reCenter()
}).resize().resize();
But suggested method to do it is just add float left to the content and your existing code should work.
.content{
float:left;
}

You should do like this:
$(window).on('resize',function(){
reCenter()
}).resize();//triggers on first page load

Show element based on URL

I am working on one task where I need to hide an element and redirect it to another URL when user click on a div.
If user directly go to that URL then it should not hide element as it has not clicked yet.
I have manage to do FIRST point.
Element will be on both pages.
My logic is here but it is not working:
flag = false;
$(document).ready(function() {
$("div.main").click(function() {
flag==true;
$(".notired").hide();
});
if ((document.location.href.indexOf("xyz") > 0) && (flag==true))
$(".notired").hide();
});
HTML:
<div class="main">
<a href="xyz.com" title="Click here">
<img src="../images/notif.png">
</a>
<span class="notired">';
echo $count;
echo '
</span>
</div>
CSS:
.notired
{
display: inline-block;
background: #E43C03;
text-align: center;
color: #FFF;
font-size: 12px;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
width: 14px;
z-index: 1;
margin-left:-9px;
}
.main
{
width:50px;
}
Looking for the solution.

Make sure your element is hidden by default, then:
check if the current URL matches the one you need
if it does, then do nothing as you want to keep it hidden
if it doesn't then show it
and if i understood correctly you need always to hide on the click function, then simply put the .hide() inside the event handler
$(document).ready(function() {
if(window.location.hash) {
// The URL contains the hash sent when clicked on button
$(".notired").hide();
}
});
and here
<a href="xyz.com#clicked" title="Click here">