Link from employees widget to same page

I have created a Team page on my website: www.treeguna.com
the page is: http://www.treeguna.com/?page_id=662
On the page I have used the Employees widget because it is so nice. Below it, I have created 3 rows, one for the bio of each member of the team. I’d like to add the same interaction the “Click to begin” button has on the front page, meaning having the site scroll down to the beginning of each one’s bio when the photo on the widget gets clicked. However I haven’t been able to do so using regular # ids. Help please? Is this possible? How should I do it?

Thanks

Hello there,

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided “Scripts in footer:” box

<script>
jQuery(function($) {

  if($('.roll-team').length){  
  
    var employee1 = $( '.roll-team .team-item:nth-of-type(1) .team-inner' );
    var employee2 = $( '.roll-team .team-item:nth-of-type(2) .team-inner' )
    var employee3 = $( '.roll-team .team-item:nth-of-type(3) .team-inner' )
    
    employee1.wrapInner('<a href="#flora"></a>');
    employee2.wrapInner('<a href="#pg-662-2"></a>');
    employee3.wrapInner('<a href="#pg-662-3"></a>');
    
  }
  
});
</script>

  1. Save settings

You would clear your web browser’s cache before reloading that page.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hello Kharis

That worked!! When you click on the employee’s name under the photo, the page scrolls down to the right section, brillian! Now, Is it possible to have this also happen when you click on the photo itself?

Thanks a lot

Muriel

Kharis

Also, the code is now visible in the footer of the page, how do I hide this??

Muriel

Hello there,

Please go to Settings > Header and Footer Scripts > Scripts in footer. Make sure the code you inserted looks like this.

Regards,
Kharis

Oh thanks! Silly me.
Let me know about whether we can make this happen when one clicks on the image as well.

M

Hello M,

Which image do you mean? The larger one?

Regards,
Kharis

I mean the image on the widget. I understand it is prepared so that personal social networks links appear on the colour solid when you hover over it, but since we are not using that option so far, it would be good to have that scroll down as well if clicked. Do you get what i mean? Thanks :slight_smile: Awesome support

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.sydney_employees_widget .pop-overlay{
  display: none;
}

Let me know if it isn’t what you want to achieve.

Regards,
Kharis

I like the hover function and don’t mean to remove it. I just want to make it possible for it to link to the same place in the page as the button below. It’s not a big deal if its not possible

Thanks

Hello There

I’m using Sydney yet again for one of my businesses and I want to have this functionality work so that I have the Employees widget link to the right row with their bio on the meet the guides page.
I tried to do the same thing you had advised me long ago but couldn’t make it work.

Here’s the page where I’m trying to use this:

http://tigrerowingtours.com.ar/meet-the-guides/

And I’m also using the widget in the landing page www.tigrerowingtours.com.ar in that one I just need it to link to: http://tigrerowingtours.com.ar/meet-the-guides/

Thank you in advance

Hello there,

The below code doesn’t work as expected due to the specified target elements don’t match; they don’t actually present.


jQuery(function($) {

  if($('.roll-team').length){  
  
    var employee1 = $( '.roll-team .team-item:nth-of-type(1) .team-inner' );
    var employee2 = $( '.roll-team .team-item:nth-of-type(2) .team-inner' )
    var employee3 = $( '.roll-team .team-item:nth-of-type(3) .team-inner' )
    
    employee1.wrapInner('<a href="#meet-the-guides-1"></a>');
    employee2.wrapInner('<a href="#meet-the-guides-2"></a>');
    employee3.wrapInner('<a href="#meet-the-guides-3"></a>');
    
  }
  
});

Replace #meet-the-guides-1 with #pg-37-1
Replace #meet-the-guides-2 with #pg-37-2
Replace #meet-the-guides-3 with #pg-37-3

is called as ID. To find the exact ID should be associated to the link, use the web browser inspector tool.

Regards,
Kharis