Before and After Text Link Is Not working On home page

Aaron_Chen
Participant

Hi Support/HubspotCOS designers,

 

Hope you are all well.

 

I have a issue with "Before and After Text Link Is Not working" on our home page (www.cmac.com.au)

 

See screenshot of the issue here: https://www.screencast.com/t/wHAUEoEWj

 

What we want is that "when you click 'previous or next' we would like the blue footer section to change content", but it is not working so far (after you click on the Yellow "<-previous" or "Next->", the previous/next testimonial content is supposed to show up.)

 

I have asked Hubspot support and they said they have basic design and coding knowledge and can't help.

 

They have also said:  "it looks like the footer modules are not referencing any id on the stylesheet, that is why there are no actions set for when 'previous' or 'next' are clicked."

 

"Specifically, the 'footer testimonials navigator' module uses the id="previous-testimonial", but on the stylesheet 'C-MAC_Theme.css' this id cannot be found. 
Since there is no styling done here, there a limit to what I can edit, as we will need to add new custom code into the stylesheet"

 

"It may be best for your designer to take a second look at this, and to add custom code that will reference the footer modules so that the paragraphs can slide with the click of a button "

 

So could anybody help?

 

Kind regards

Aaron Chen

Online Marketing Specialist

C-Mac Industries ( Aust ) Pty Ltd

72 Mandoon Road

Girraween NSW 2145
Phone:  +61 02 9631 6000

Web: www.cmac.com.au

 

0 Upvotes
6 Replies 6
Dallas_Antwerp
Contributor

Hi

Add this code to your document.

<script>
    $(document).ready(function() {
        var $footer_testimonials = $('.footer-testimonials'),
            $testimonial = $footer_testimonials.find('p'),
            testimonial_length = $testimonial.length - 1,
            $prev = $('#previous-testimonial'),
            $next = $('#next-testimonial'),
            $active_testimonial = 0;

            // show previous
            $prev.on('click', function(event) {
                event.preventDefault();

                $active_testimonial--;

                if ($active_testimonial < 0) {
                    $active_testimonial = testimonial_length
                }

                $testimonial.css('display', 'none');
                $testimonial.eq($active_testimonial).css('display', 'block');
            });

            // show next
            $next.on('click', function(event) {
                event.preventDefault();

                $active_testimonial++;

                if ($active_testimonial > testimonial_length) {
                    $active_testimonial = 0
                }

                $testimonial.css('display', 'none');
                $testimonial.eq($active_testimonial).css('display', 'block');
            });
    });
</script>

Aaron_Chen
Participant

Hi Dallas,

 

Thank you so much for your help!

 

I will just add your codes into "the stylesheet 'C-MAC_Theme.css'?

 

Any location in the stylesheet will do?

 

Regards

Aaron

0 Upvotes
Dallas_Antwerp
Contributor

No no! That will break your site layout !!!

Go to 'Content' -> 'Content settings'.
And copy-paste the code in the 'Site Footer HTML' texfield you see there.

 

(see screenshot)

Schermafbeelding 2017-01-17 om 16.11.59.png

Aaron_Chen
Participant

Thank you so much Dallas, I will try it out and then let you know.

 

Regards

Aaron

0 Upvotes
Aaron_Chen
Participant

Thanks again! It works!!Smiley Happy

0 Upvotes
Dallas_Antwerp
Contributor

No problem Smiley Happy.

0 Upvotes