Docs

[Tristan A]

Ok, I understand you can’t do custom development. But I would really appreciate it if you could help me get this going in the right direction.

You edited the page but it is still not working. Also, if the Id now is linked-column-1 that would render the id link1 useless right?

I would really appreciate it if you could have one last look at the JS, and confirm it is actually working. I’ll be very happy to take it further myself from there onwards.

Many thanks!

[Rue Nel]

Hi Tristan,

I edited again your page and I have done the following steps:
1] Turn on the advance controls
2] Select which column you would like to link and insert a custom ID #linked-column-1 for example
(http://prntscr.com/8s8mz2)

3] Insert the following custom JS in the settings tab, Settings > Custom JS (http://prntscr.com/8s8m3c)

(function($){
  // column 1
  $('<a id="link1" href="#posture">').insertBefore('#linked-column-1');
  $('#linked-column-1').prependTo( $('#link1') );
  
  // column 2
  $('<a id="link2" href="#process">').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );

  //.... and more...
})(jQuery);

This should be working now.
http://prntscr.com/8s8pgq

Also, if the Id now is linked-column-1 that would render the id link1 useless right? No. You need the ID linked-column-1 and id of the link link1. Just follow my steps and it will be working for you.

Please let us know how it goes.

[Tristan A]

It works! Thank you!! Much appreciated!

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Thomxnj]

Hi, how do I do this while maintaining the margin less column look?

[Thomxnj]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! In your case you need to assign the ID on each of your column (e.g. column1 and column2). You can add this under Custom > CSS in the Customizer.

#column1, #column2 {
	float: left !important;
	cursor: pointer;
}

And add this under Custom > JavaScript in the Customizer.

(function($){
	$( "#column1" ).wrap( "<a class='x-1-2' href='http://www.ecocleannj.com/commercial-power-washing/' target='_blank'></a>" );
	$( "#column2" ).wrap( "<a class='x-1-2' href='http://www.ecocleannj.com/residential-power-washing/' target='_blank'></a>" );
})(jQuery);

Let us know how it goes, Cheers!

[scottstone]

I was able to get this working with CSS based on this thread: http://stackoverflow.com/questions/796087/make-a-div-into-a-link

Here’s my CSS

.clickable-div{
    /*Important:*/
    position:relative;
}

/*Important:*/
.link-spanner{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif 
  background-image: url('empty.gif');*/
}

I had something like this in each of my Columns via Text in Cornerstone:

[x-clear]<a href="https://www.google.com">
        <span class="link-spanner"></span>
    </a>
    <table class="custom-table">
  <tr>
    <td style="width:50px; height:50px;">
      <img src="http://dev-ingomoney-wp.pantheon.io/wp-content/uploads/2015/10/B2B-omni-services-icon.png">
    </td>
    <td style="padding-left:16px;">
      <span style="h1-text; color:#23ad4b;">OMNI-CHANNEL SERVICING PLATFORMS</span>
    </td>
  </tr>
</table>

[Paul R]

Hi,

Great idea.

Thanks for sharing.

Have a great day!

[kelleynunn]

Hey, ThemeCo!

I’m trying to create linkable columns in Cornerstone as Tristan was doing in the beginning of this thread. I tried following the instructions given, using this bit of code: `(function($){
$(‘<a id=”column-link” href=”#my-link”>’).insertBefore(‘.linked-column’);
$(‘.linked-column’).prependTo( $(‘#column-link’) );
})(jQuery);` but am having trouble understanding how to manage the IDs of each item.

For example, I have gone into each column and assigned an ID such as: “linked-column-1” but I am not able to get the column to link to another page. My question is, what values should I be using for the following: id="" and .prependTo( $('#?????') );

Thank you for your help!

-Kelley

[Jade]

Hi Kelley,

You have to set the value of those to be identical to each other so the javascript code could reference it correctly.

Could you provide us with the link and login access to your site in a private response so that we can check your current setup further? Thank you.

[kelleynunn]

This reply has been marked as private.

[Rue Nel]

Hello @KelleyNunn,

The code above that works in Tristan’s site won’t work for you because you have a different set up. You have to disable the marginless column to make it work. I went ahead and made some change in your page. I enabled the column container and disable the marginless column. I also added this JS code in the settings tab, Settings > Custom JS (http://prntscr.com/8s8m3c)

(function($){
  $('<a id="link1" href="http://02b71bc.netsolhost.com/wordpress5/about/history/">').insertBefore('#linked-column-1');
  $('#linked-column-1').prependTo( $('#link1') );
  
  $('<a id="link2" href="#your-link-here">').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );
  
  $('<a id="link3" href="#your-link-here">').insertBefore('#linked-column-3');
  $('#linked-column-3').prependTo( $('#link3') );
  
  $('<a id="link4" href="#your-link-here">').insertBefore('#linked-column-4');
  $('#linked-column-4').prependTo( $('#link4') );
})(jQuery);

Hope this would work for you.

[suzannereid]

I would liket to link the columns of the two featured images sections to their appropriate document. Can i have clear code for how best to do that on my site?

see link
http://easttexasorthodontics.com/new-patients

[Rad]

Hi there,

You mean the three cards? Each card has its own link already, and you should able to change it through it’s setting. Wrapping it with another link will destroy the layout, link within a link is not possible.

Thanks!

[Author]

Posts