Question 2276 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How I can make whole div Clickable with its anchor link which is present inside the div? – WordPress

I have one box div inside that, user can easily add link for h1 tag i.e for title tag. but I require that it should apply to the whole div. The anchor tag is coming from WordPress editor toolbar, so how can I extract that href and add to whole div. code is using React.

eg :

<div class="box">

  <h1>
    <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-      element">The new face of marketing</a>
  </h1>
  <p>Marketing</p>
</div>

I will need whatever user will add url for title it should apply to whole div and make div clickable with respect to its url.

Tags:

3

Answers


  1. 0

    IT IS NOT Working On this Snippet
    You can see here Codepen link Link Open in New Tab Using Jquery

    You can find the URL in a tag and set it to a div for clickability using "jQuery."
    When you click on ".box," you’ll see the tag "a" inside. and click the link to open it in a new tab. 

    $(document).ready(function () {
  $(".box").click(function() {   
     strUrl=$(this).find("a").attr("href");       
     window.open(strUrl);return false;         
  });
});
    .box{
  background:lightgreen;
  cursor:pointer;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="box">
  <h1>
    <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element">The new face of marketing</a>
  </h1>
  <p>Marketing</p>
</div>
    Login or Signup to reply.
  2. 0

    One approach to this is the following, with explanatory comments in the code:

    // find all <h1> elements that are the children of a .box element,
// and iterate over that collection using NodeList.prototype.forEach():
document.querySelectorAll('.box > h1').forEach(
  // using an Arrow function we pass a reference to the current
  // <h1> element into the function body:
  (heading) => {
    // we find the <a> element within the <h1>
    let anchor = heading.querySelector('a'),
      // we get a reference to the .box ancestor element:
      box = heading.closest('.box');

    // if there is an anchor (querySelector() returns null if the
    // element is not found) and the ancestor box does not match
    // the CSS selector:
    if (anchor && !box.matches('a > .box')) {
      // we insert the children of the anchor into the <h1> before the
      // anchor element itself:
      while(anchor.firstChild){
        heading.insertBefore(anchor.firstChild, anchor);
      }
      // we find the parentNode of the box element, and insert the anchor
      // before the box element:
      box.parentNode.insertBefore(anchor, box);
      // we append the box element to the anchor element:
      anchor.append(box);

      // the following may not be required, but it depends on the
      // CSS rules, so it's here in case it's required:

      // we add the class of 'box' to the anchor's classList:
      anchor.classList.add('box');
      // we remove the 'box' class for the box element:
      box.classList.remove('box');
    }
  })
    *,
::before,
::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 1.2em;
}

main {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  inline-size: clamp(20em, 80vw, 1200px);
  margin-block: 1em;
  margin-inline: auto;
}

main .box {
  border: 2px solid #000;
  padding: 1em;
}

a.box {
  border-color: orange;
}

div.box {
  border-color: lime;
}

@media screen and (width < 800px) {
  main {
    grid-template-columns: 1fr;
  }
}
    <main>
  <div class="box">
    <h1><a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element">Should be changed by the JavaScript</a></h1>
    <p>Marketing</p>
  </div>

  <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element" class="box">
    <div class="box">
      <h1>Should not be changed by the JavaScript</h1>
      <p>Marketing</p>
    </div>
  </a>

  <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element" class="box">
    <div>
      <h1>Should not be changed by the JavaScript</h1>
      <p>Marketing</p>
    </div>
  </a>
</main>

    JS Fiddle demo.

    References:

    Login or Signup to reply.
  3. 0

    If you’re looking for a jQuery solution as your tag indicates, this is how I would do it.

    $(document).off('click.clickableBox').on('click.clickableBox', '.clickable-box', function(e){
    e.preventDefault();
    window.location.href = $(this).attr('href');
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box clickable-box" href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element">

  <h1>
    <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element">The new face of marketing</a>
  </h1>
  <p>Marketing</p>
</div>

    Explanation

    1. Add a href tag to the div you want to be clickable as well as a class clickable-box.

    2. Define a jQuery listener to watch for any click event on a div with the class clickable-box and redirect the page to the url defined in the div href tag.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search