Docs

[fictionadmin]

hi!
workin stil on this side http://teststage.monkeeplatez.com
i want to have different hyperlink on mouse click on each of the 5 columns at the landing page.

have a mouse over effekt for the whole column and custom headline but how can i ad a
hyperlink (each with different url) to each of my 5 columns? Want to use it instead of a button.

thanks!
alex

[Nico]

Hi There,

Thanks for writing in.

You could follow the links below on how to cover a whole column with link:

https://community.theme.co/forums/topic/3-column-with-3-links/#post-1244755

https://community.theme.co/forums/topic/making-entire-column-a-link-alters-layout-of-columns/#post-1255988

Hope it helps.

Let us know how it goes.

Thanks.

[fictionadmin]

Hi!
i tryed the workaround 3 columns with 3 links.
but nothing happend. i wondering where i have to assing the column names?
he used 3 column names in the jquery… “.muni”,”.eco” & .tour
where i have to asign the column names? tryed it with “class” and “id” field direct
at the column inside conerstone but nothing?

thanks…

(function($){
$(document).ready(function($) {
$(“.muni”).append(““);
$(“.eco”).append(““);
$(“.tour”).append(““);
});
})(jQuery);

[Rupok]

Hi there,

Thanks for writing back. You need to place the Class names within the Class field for the columns. Hopefully it will work fine if you place the classes properly.

Cheers!

[fictionadmin]

hi!
unfortunately its not working dont know why.
i tryed it with different columns on the site but nothing happend no link.
think the asign in the class field of column is right i added also the other
class for hover background colour change and transittion this is working fine…

can u have a look again no idea why the links not workin fine ;(.

[fictionadmin]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve your issue, please follow these steps;
#1] In each of you column, you will need to add an ID. Please click on the column and in the column settings find the ID field (http://prntscr.com/e0vgvf)

#2] Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
 $(document).ready(function($) {
  $("#Ferienwohnungen").append("<a href='http://teststage.monkeeplatez.com/ferienwohnungen/'></a>"); 
  $("#Handwerker").append("<a href='http://teststage.monkeeplatez.com/handwerker'></a>"); 
  $("#Firmenwagen").append("<a href='http://teststage.monkeeplatez.com/firmenwagen'></a>"); 
 });
})(jQuery);

#3] And then please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#Ferienwohnungen, #Handwerker, #Firmenwagen {
    position: relative;
}

#Ferienwohnungen > a,
#Handwerker > a,
#Firmenwagen > a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

We would loved to know if this has work for you. Thank you.

[fictionadmin]

hi!
ok. now is the hyperlink working put the whole column is in one colour und u cant see the text boxes and headline. this is not what i want.

iam wokring with this code for “columnbackground” to have colour change on mouse hover and transition effekt. additional i like to have the hyperlink for each column not instead.
how can we make both working the hyperlink and the colour/transistion fx?
thanks again!

here my code

CSS
* Adding transition, for smooth effects */
.columnbackground {
background-color:#1492c8;
}
.x-column.columnbackground,
.x-column.columnbackground .h-custom-headline {
-webkit-transition: .25s linear all;
-o-transition: .25s linear all;
transition: .25s linear all;
}

/* Changing background color of Column on hover */

.x-column.columnbackground:hover {
background-color: #115c8a;
}

/* Changing the color of text on hover */

.x-column.columnbackground:hover .h-custom-headline,
.x-column.columnbackground:hover p {
color: #ccc;
}

[Lely]

Hello There,

First let’s look at your custom JS. It is causing syntax error because of the curly quotes. Look for this part:

/*Make columns equal height*/
(function($){
$(window).bind(‘ready load resize’, function(){
var max = 0,
mobile = $(window).width();

if ( mobile > 767 ){
$(“.equalize .x-column”).each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(“.equalize .x-column”).css(‘height’, max);
}
});
})(jQuery);

Update that code to this:

/*Make columns equal height*/
(function($){
$(window).bind('ready load resize', function(){
var max = 0,
mobile = $(window).width();

if ( mobile > 767 ){
$(".equalize .x-column").each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(".equalize .x-column").css('height', max);
}
});
})(jQuery);

Transition effect for column is working when I check. Font color turns to gray and the background color got dimmer.

Hope this helps.

[fictionadmin]

hell yes 😉
thanks a lot now its working fine.
cheers!

best
alex

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts