How to make whole box clickable

Author Posts

laucocos August 28, 2018 at 4:53 pm

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 August 31, 2018 at 2:28 pm

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 August 31, 2018 at 3:01 pm

@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 September 16, 2018 at 6:29 pm

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 September 17, 2018 at 11:30 am

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 September 20, 2018 at 5:12 pm

This works brilliantly, thank you Sebastian

You must login or register to reply to this topic.