Column links

[empireedge]

Hi there,

I am trying to turn 4 marginless columns into hyperlinks on my homepage: www.empireedge.com

Here is what I have done:

I have labeled each column with an ID tag (#acttests, #sattests, #highschool, #academic)

Then I added the following to the global javascript custom code section:

(function($){
 $(document).ready(function($) {
  $("#acttests").append("<a href='link'></a>"); 
  $("#sattests").append("<a href='link'></a>"); 
  $("#highschool").append("<a href='link'></a>");
  $("#academic").append("<a href='link'></a>");  
 });
})(jQuery);

Then I added the following to the Global CSS section:

#acttests, #sattests, #highschool, #academic {
    position: relative;
}

#acttests > a,
#sattests > a,
#highschool > a {
#academic > a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

I have the correct links in there. This forum just won’t let me add more than 1 link in the topic for some reason… Can someone explain where I am going wrong?

[christopher]

Hi there,

I edited your post to have the correct styling of the code you have pasted. You can use the Markdown language in the forum to add code. For more information:

http://assemble.io/docs/Cheatsheet-Markdown.html

For the question, I suggest that you add the same class to the columns you want to have the link go full. For example: fulllink :

Then add the JS code below to X > Launch > Options > JS:

jQuery('.fulllink').on('click', function() {
	window.location = jQuery(this).find('a').attr('href');
});

The code above adds a handler for a click event on the column. It searches for the clicked column inside anchor tag and find its href attribute value and uses to go to the destination page.

You will also need to add the CSS code below to X > Launch > Options > CSS to make the column look like it is clickable:

.fulllink {
	cursor: pointer;
}

Please kindly consider that all the code suggestions are part of the customization and are not an official recommendation as the custom code suggestions are outside of our support policy.

Hope it helps.

[empireedge]

@christopher.amirian

.fulllink {
cursor: pointer;
}

Thank you so much for your help with this! The links are working; however, the cursor still doesn’t change to a pointer when I hover over the columns?

[paul.r]

Hi,

There is a syntax error in your css code, making the code below it to be invalid.

#acttests > a,
#sattests > a,
#highschool > a {    /* replace { with comma */
#academic > a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

Please change it to

#acttests > a,
#sattests > a,
#highschool > a,
#academic > a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

Full Code

#acttests, #sattests, #highschool, #academic, #advisors, #testimonials, #faq {
    position: relative;
}

#acttests > a,
#sattests > a,
#highschool > a, 
#academic > a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}
.fulllink {
    cursor: pointer;
}

Hope that helps.

[empireedge]

Thanks guys!!!

[christopher]

Glad that we could be of a help