Columns as link - possible animation

Support
#1

Hi there folks,

Just after some help (more i know). Its a little bit like this post: https://theme.co/apex/forum/t/i-need-to-make-complete-column-a-link/13358

I have a row of 4 columns that i have shrunk and added text to each so that they look like tabs. A couple of things:

  1. Can i make the column itself a link rather than having to click on the text inside
  2. is there any way that on hover that the column moves down just a little so it looks a bit like they are tabs.
  3. i have around 10 pages with these on so would it work across those pages

Here is a screenshot of my columns so you can get a feel for what it looks like:

As always thanks for your help guys.

#2

Hi Chris,

Thanks for writing in! Your question is outside the scope of our support. However try following this thread (https://theme.co/apex/forum/t/column-links/14651) and see if that helps.

Here’s another example (https://theme.co/apex/forum/t/how-to-make-my-column-link-to-another-page/7208/4).

Thanks!

#3

Thanks @mldarshana I am very very nearly there. I followed the exact method here:

I have added the code but changed my ID’s to terms that suit my need and the columns are linking now and going to the correct section but they seem to be going halfway down each section. I have given each section an ID and if i click the title text which has links to the sections on the page it works fine but if i click on the column where the js and css is applied it goes to the sections but halfway down the section, not the top of the section. See my video here:

https://www.useloom.com/share/d66e7228fb7a49ad8b2eec5db9fabd97 "

Any ideas how to get it to go to the top of the section? Here is my CSS:

#snintro, #snmtt, #snsubjects, #snlnews {
position: absolute;
}

#snintro > a,
#snmtt > a,
#snsubjects > a,
#snlnews > a {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
.fulllink {
cursor: pointer;
}

And my JS is:

(function($){
$(document).ready(function($) {
$("#snintro").append("");
$("#snmtt").append("");
$("#snsubjects").append("");
$("#snlnews").append("");
});
})(jQuery);

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

thanks all.

Chris

#4

Hello Chris,

This happens because the point of reference for the section is the top of the page and not the end of your custom menu. You will need to modify the JS code and get the x,y location of your section minus the height of the total menu (navbar + custom menu).

Would you mind send us the url of your site so that we can check up correctly. We might be able to help you with your JS code issue.

Thanks.

#5

HI @RueNel,

To see the site that i am referring to, you will have to enter the following into your local host file and clear your browser cache and flush your dns as i am building it ready to replace a live site:

77.104.134.196 snhs.kirklees.sch.uk

thanks,

#6

Hello Chris,

I am seeing a broken site. Most of the css and js files does not load on my end.
Please have your JS code updated instead:

(function($){
  $(document).ready(function($) {
    $("#snintro").append(""); 
    $("#snmtt").append(""); 
    $("#snsubjects").append("");
    $("#snlnews").append("");
  });
})(jQuery);

jQuery('.fulllink').on('click', function(e) {
  e.preventDefault();
  window.location = jQuery(this).find('a').attr('href');
  var target = jQuery(this).find('a').attr('href').offset().top
  jQuery('html, body').animate({ scrollTop: target }, 850, 'xEaseInOutExpo');
});

Hope this helps.

#7

Hi @RueNel

Can you elaborate on what you mean by broken site? This has me worried. The whole site? I am working on it fine with no issues at the moment. Did you amend your hosts files and clear cache and dns? Could it be your end? Its not fully live yet hence the ammendment to your local host file. When its ready to go live i just need to point the domain at the hosting server. Thanks for the code. I will update this and let you know.

#8

Hello @King,

It is now fixed. I am seeing your site correctly with no issues unlike an hour ago. Could you please provide which page do I have to look the column link you have applied?

Thanks.

#9

@RueNel, phew!!! Glad to here it! :grinning: The page you are after is under the Curriculum Heading > Performing Arts.

Thanks.

#10

Hello @king,

You might need to update the JS code a bit and use this:

(function($){
  $(document).ready(function($) {
    $("#snintro").append(""); 
    $("#snmtt").append(""); 
    $("#snsubjects").append("");
    $("#snlnews").append("");
  });
})(jQuery);

jQuery('.fulllink').on('click', function(e) {
  e.preventDefault();
  window.location = jQuery(this).find('a').attr('href');
  var target = jQuery(this).find('a').attr('href').offset().top - 80;
  jQuery('html, body').animate({ scrollTop: target }, 850, 'xEaseInOutExpo');
});

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

#11

Hi @RueNel

No joy i’m afraid, its still doing the same thing going halfway down the sections.

thanks.

#12

Hi Chris,

Your setup is becoming complex, the column is clickable while the texts have links. It’s like linking as the column is clicked but also linking since there is a link and it creates conflict.

Before we go further, I like to clarify it first. Should it link or should just scroll? I may provide the last snippet and we can’t provide further customization.

Thanks!

#13

Hi @Rad,

It just needs to scroll to the section on the page like a normal anchor using IDs do. I don’t need separate links of the text as well as the column, just as long as you click anywhere in the column which i guess includes the text scrolls to the point on the page. I didn’t think it would be this much of a problem just trying to do a clickable kind of tab. Sorry guys.

thanks.

#14

Hi Chris,

I see, in that case, would you mind providing your admin login credentials? I’ll just create a sample in a separate page. Currently, I couldn’t make the code function due to other existing codes and even adding styling through browser developer is being reset.

Thanks!

#15

Hi @Rad, i have attached a secure note to this message.

Thanks,

#16

Hello @King,

We have exhausted all our resources for your custom JS. We even updated into this:

(function($){
  $(document).ready(function($) {
    $("#snintro").append(""); 
    $("#snmtt").append(""); 
    $("#snsubjects").append("");
    $("#snlnews").append("");
  });
  
  $('.fulllink').on('click touchstart', function(e) {
    e.preventDefault();
    window.location = $(this).find('a').attr('href');
    var target = $(this).find('a').attr('href');
    console.log(target);
    console.log( $(target).offset().top );
    
    var offset = $(target).offset().top - 120;
    console.log(offset);
    $('html, body').animate({ scrollTop: offset }, 850, 'xEaseInOutExpo');
  });
})(jQuery);

Still not working because of the conflict with the page scroll built in the theme. The best and easiest way to resolve this is to increase the top and bottom padding of each section. By default, the padding is 45 pixel. Increasing it to 80 or 100 pixel would somehow make it work.

Hope this make sense.

#17

Thanks @RueNel,

I do really appreciate all of your time on this one. I guess i may have to stick to just using the text as the links for now as adding so much padding would make it all look a bit lost. Thank you for trying fo me, its a shame that it didnt work. I guess would work obviously for links to different pages, just not to other parts of the page. :pensive: Oh well. Thanks again.

#18

You are most welcome.
If you need anything else we can help you with, don’t hesitate to open another thread.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.