How to make whole box clickable

This topic contains 5 replies, has 3 voices, and was last updated by  laucocos 4 years ago.

Author Posts

laucocos

Hello,

I am working on the design for this website: https://staging.nexusdatacommunications.com

I added a transition effect to change the background color when hovering over certain boxes in a 3 box row (et_pb_row_1 .et-fb-mousetrap–column). I added the effect to each column/box (et_pb_column_3 .et-fb-mousetrap).

At the moment, only the writing is clickable. I would like for the whole box to be clickable. Is that possible to do with Microthemer?

Your advice would be much appreciated.

Best wishes,
Laura


Abland

Hi, Laura,

Your site is password protected so I couldn’t look closer, but as far as I know it’s not possible to make the box clickable in css. You could use a jquery click function that makes the entire div follow the contained link. Use the class of your text link to replace “.your-link-class”

$(".your-link-class").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});

Or you could edit the html and put the “a” tags around the div, or a contained full area div, instead of just the text.

That’s just off the top of my head.


Sebastian

@abland thanks so much for picking this up! I missed it before somehow.

Laura, if you can send me access details for your site via our secure contact form I should be able to advise you further.

When you say make clickable, do you mean in the context of MT’s click event for triggering a transition?

Thanks,
Sebastian


laucocos

Hi Sebastian,

Thanks for getting back to me. I sent you the login details via the form.

Also, I just updated the theme and the red transition effect is no longer working on the boxes when you hover over them. Would you be able to solve that too?

Thank you very much.

Best wishes,
Laura


Sebastian

Hey Laura,

Thanks for sending access details. Your theme update changed the HTML used for the columns, so I updated your Microthemer selectors to match the new HTML. The red transition effect is back.

To make the whole boxes clickable, rather than just the link text inside the boxes, @abland‘s technique works. This is the full code I added via Microthemer’s JS editor (View > code editor > JavaScript):

jQuery( document ).ready(function($) {
    $("body.mt-28342").find('.et_pb_section_3').find('.et_pb_column_1_3').click(function() {
        var url = $(this).find("a").attr("href");
        if (url){
           window.location = url; 
        }
        return false;
    });
});

I put the click event code inside the jQuery document ready function, as is standard practice. And I used the CSS selector for targeting the 3 boxes, but split it up with a few find() functions to give a little performance boost.

I hope that helps!

Cheers,
Sebastian


laucocos

This works brilliantly, thank you Sebastian

You must login or register to reply to this topic.