[Resolved] Clickable column

[Norman]

Hi Tom and Leo,

I’m using GPP + gridable. How can I make a whole column clickable (link to other page), instead of only the words in it? The site I’m currently working on isn’t live yet. If it is needed, I can put it online temporarily

Tnx!

EDIT: now the page is online: https://www.fairfieldcollege.nl/home-test/

[Tom]

Usually you would just wrap all of your column content in an anchor element, and set it to display:block. However, WordPress will strip that element, as it thinks the HTML is broken.

You’ll likely need to use javascript, or stay out of the visual editor I’m afraid.

Let me know if you need more info 🙂

[Norman]

Thanks for your answer. I’m a programming noob, so I have no idea how javascript functions. I found this:

$('#myId').click(function () {
    window.location = 'newurl.php';
});

I know I should place it somewhere in GP Hooks, but I don’t know what else to do..

[Tom]

Can you give columns IDs? If so, that will work.

You could put this into the wp_footer hook:

<script>
    jQuery( '#my-column-id' ).on( 'click', function() {
        window.location = 'http://yourdestinationurl.com';
    } );
</script>

Then add this CSS:

#my-column-id {
    cursor: pointer;
}

[Krystian]

#my-column-id {
cursor: hand;
}

its doesnt work but this

#my-column-id {
cursor: pointer;
}

is working very well;)

[Tom]

Ah, of course. My bad. Glad you got it working 🙂

[Norman]

I think I can make it work, but I don’t know how I can give columns an ID.

I tried searching for it in the docs and gists, but couldn’t find any hints.

[Tom]

If Gridable doesn’t give you an option to add an ID, you can always wrap your content inside the column inside one:

<div id="my-id">
   Your content
</div>

[Norman]

If I do so, the styling gets messed up. Maybe you can take a look: http://www.fairfieldcollege.nl/home-test

It is almost at the bottom. The right column layout is okay, but only the word is clickable, not the whole column. The left column is clickable, but the styling is messed up.

Is it too complicated too make something like this work with gridable?

Tnx!

[Tom]

Can you try applying all of your custom styling to the ID? If you’ll be re-using the styles, you can give it a class:

<div id="your-id" class="your-reusable-class">

[Norman]

I made buttons instead (why didn’t I think of that sooner..). Thanks for your help:)

[Tom]

You’re welcome 🙂

[Author]

Posts