How do I create 5 jump links (referencing tab categories) to show at the top of the browser.

SOLVE
gramirez
Contributor

On this "preview" page (see screenshots if unable to view):

https://app.hubspot.com/content/3377481/edit/46046586513/content?utm_source=sprocket-menu

There is a tabbed section near the bottom of the page (see "tabbed section.png")

There are 5 tabs for (Grades 1-5)

I've been asked to create 5 different jumplinks that will link to the corresponding Grade/Tab and show at the top of the browser window when clicked on. (see screenshot Need Links for TabsGrades.png).


Here is the HTML code for the Product V1 S2 - Supplemental Products Tabs

HTML CODE:

<div id="{{ module.section_id }}" class="product-tablisting">
<div class="product-tabmain">
<div class="page-center">
{% for item in module.product_tab %}
<div class="product-tabrow">
<div class="product-tabcol">
{% if item.product_icon.src %}
<div class="product-icon"><img src="{{ item.product_icon.src }}" alt="{{ item.product_icon.alt }}" width="{{ item.product_icon.width }}" height="{{ item.product_icon.height }}"></div>
{% endif %}
<h5>{{ item.product_title }}</h5>
<div class="protab-text">{{ item.product_text }}</div>
</div>
<div class="product-tabcontentwrap">
<div class="product-tableft">
{% if item.product_tab_details_image.src %}
<img src="{{ item.product_tab_details_image.src }}" alt="{{ item.product_tab_details_image.alt }}" width="{{ item.product_tab_details_image.width }}" height="{{ item.product_tab_details_image.height }}">
{% endif %}
</div>
<div class="product-tabright 100center">
<div class="product-tabsubtitle">{{ item.product_subtitle }}</div>
<h4> {{ item.product_details_title }}</h4>
<div class="protab-contenttext list-style">{{ item.product_details_text }}</div>
<div class="list-pop">{{ item.pop_modal }}</div>
<div class="product-grades">
<h5>{{ item.product_grades_title }}</h5>
<div class="product-gradesrow" data-select="{{ item.grades_choice }}" >
{% for item2 in item.grades %}
<div class="product-gradescol {% if item2.enable_disable %} hover {% endif %}">{% inline_text field="product_grades_number" value="{{ item2.product_grades_number }}" %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>


<script>
$(document).ready(function(){
if($('#{{ module.section_id }}.product-tablisting').length > 0) {
$('#{{ module.section_id }}.product-tablisting .product-tabrow').each(function(i,val){
//$(this).find('.product-tabcontentwrap').insertBefore($(this).parents('.product-tablisting'))
});
$('#{{ module.section_id }} .product-tabcontentwrap').wrapAll("<div class='product-tabcontentmain'><div class='page-center'></div></div>");
$('#{{ module.section_id }} .product-tabcontentmain').insertAfter('#{{ module.section_id }} .product-tabmain');

$('#{{ module.section_id }} .product-tabcontentmain .page-center').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '#{{ module.section_id }} .product-tabmain .page-center'
});


$('#{{ module.section_id }} .product-tabmain .page-center').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '#{{ module.section_id }} .product-tabcontentmain .page-center',
dots: false,
prevArrow: '<button type="button" class="slick-prev"><img src="//cdn2.hubspot.net/hubfs/3377481/assets_2018_S2/activeclassroom/arrow-dotted-left.png" ></button>',
nextArrow: '<button type="button" class="slick-next"><img src="//cdn2.hubspot.net/hubfs/3377481/assets_2018_S2/activeclassroom/arrow-dotted-right.png" ></button>',
focusOnSelect: true,
infinite:false,
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});

} // end if

}); // end of document.ready
</script>

Need Links for TabsGrades.pngNeed Links for TabsGrades.pngtabbed section.pngtabbed section.pngNew Elementary Atlases Overview (screenshot-1)New Elementary Atlases Overview (screenshot-1)New Elementary Atlases Overview (screenshot-2)New Elementary Atlases Overview (screenshot-2)Product V1 S2 - Supplemental Products Tabs (screenshot-1)Product V1 S2 - Supplemental Products Tabs (screenshot-1)Product V1 S2 - Supplemental Products Tabs (screenshot-2)Product V1 S2 - Supplemental Products Tabs (screenshot-2)Product V1 S2 - Supplemental Products Tabs HTML and Fields (screenshot-1)Product V1 S2 - Supplemental Products Tabs HTML and Fields (screenshot-1)Product V1 S2 - Supplemental Products Tabs HTML and Fields (screenshot-2)Product V1 S2 - Supplemental Products Tabs HTML and Fields (screenshot-2)Product V1 S2 - Supplemental Products Tabs HTML and Fields (screenshot-3)Product V1 S2 - Supplemental Products Tabs HTML and Fields (screenshot-3)

0 Upvotes
1 Accepted solution

Accepted Solutions
miljkovicmisa
Solution
Top Contributor | Gold Partner

Hello @gramirez , thank you for writing in the blog.

In order to accomplish that, you will need to create a module somewhere in the template where you want the jumplinks to live, then in the module create an html template and finally use javascript to create the jumplinks that will take you to the portion of the page where the content is and change the slide to the correct one. This will be done firstly by using javascript to dynamically create the jumplinks from a template and secondly by using the built in functions of slick carousel to make a custom button to change the slide on click.

 

I will not be covering creating a module as you probably know how to do that already, in any case if there is something you don't understand don't hesitate to write it here.

So roll up you sleeves and bear with me as I explain the code below:


1. This first part goes to the new module you will create and will hold the jumplinks

 

 

 

<!-- this ul will contain the final items -->
<ul class="slick-dots js-slider-dots show-for-small-only" role="tablist"></ul>

<!-- this is the template for the javascript -->
<template id="customSliderLinks">
    <li role="presentation">
      <!-- DON'T FORGET TO CHANGE THE ID TO BE THE ID OF THE CONTAINER OF THE SLIDES SO PAGE WILL SCROLL TO -->
      <a href="#{ THIS WILL BE THE ID OF THE CONTAINER OF THE SLIDES }" type="button" role="tab" tabindex="-1"></button>
    </li>
</template>

 

 

 

 

2. The code below, need to be inside your existing module where you create the sliders.

 

 

 

<!-- now this script is added below your existing script where you create the carousels -->
<script>
    // first we get the slick that contains the slides so we can count them with .slick.slideCount
const sliderItemsCount = document.querySelector('#{{ module.section_id }} .product-tabmain .page-center').slick.slideCount;

// next we get the ul that will hold our final produced jumplinks
const sliderLinksContainer = document.querySelector('.js-slider-links');

// and finally we get the template we created earlier
const sliderLinksTemplate = document.querySelector('#customSliderLinks');

// now we loop through each slide creating an appropriate jumplink for it
// I'm not going to dig into this for this case but you should probably take a look
// at the MDN documentation about <template> tags and cloning nodes
for (let sliderItem = 0; sliderItem < sliderItemsCount; sliderItem++) {
    const clone = sliderLinksTemplate.content.cloneNode(true);
    const sliderLinkButton = clone.querySelector('a');
    sliderLinkButton.setAttribute("id", "slick-slide-control"+sliderItem+1);
    sliderLinkButton.setAttribute("aria-controls", "slick-slide"+sliderItem+1);
    sliderLinkButton.setAttribute("aria-label", sliderItem+1+" of "+sliderItemsCount);
    sliderLinkButton.setAttribute("data-slide-target", sliderItem);
    sliderLinkButton.textContent = `Grade ${sliderItem+1}`;
    sliderLinksContainer.appendChild(clone);
}

// next we create a function that will change the slide
function changeSlide(){
    const slideToShow = this.dataset.slideTarget;
    document.querySelector('#{{ module.section_id }} .product-tabmain .page-center').slick.slickGoTo(slideToShow);
}

// and finally we bind all the links with the click event so they actually change to the appropriate slide
const sliderButtons = sliderLinksContainer.querySelectorAll('a');
sliderButtons.forEach(element => element.addEventListener("click", changeSlide));
</script>

 

 

Links:
1. Link on templating in html and javascript (MDN)

2. Slick Carousel Methods on Carousels (Search for "Methods")

 

If my answer was helpful, please mark it as a solution.

 

View solution in original post

2 Replies 2
dennisedson
Community Manager

@John , would you be able to show some of your coding muscle here? 💪

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
miljkovicmisa
Solution
Top Contributor | Gold Partner

Hello @gramirez , thank you for writing in the blog.

In order to accomplish that, you will need to create a module somewhere in the template where you want the jumplinks to live, then in the module create an html template and finally use javascript to create the jumplinks that will take you to the portion of the page where the content is and change the slide to the correct one. This will be done firstly by using javascript to dynamically create the jumplinks from a template and secondly by using the built in functions of slick carousel to make a custom button to change the slide on click.

 

I will not be covering creating a module as you probably know how to do that already, in any case if there is something you don't understand don't hesitate to write it here.

So roll up you sleeves and bear with me as I explain the code below:


1. This first part goes to the new module you will create and will hold the jumplinks

 

 

 

<!-- this ul will contain the final items -->
<ul class="slick-dots js-slider-dots show-for-small-only" role="tablist"></ul>

<!-- this is the template for the javascript -->
<template id="customSliderLinks">
    <li role="presentation">
      <!-- DON'T FORGET TO CHANGE THE ID TO BE THE ID OF THE CONTAINER OF THE SLIDES SO PAGE WILL SCROLL TO -->
      <a href="#{ THIS WILL BE THE ID OF THE CONTAINER OF THE SLIDES }" type="button" role="tab" tabindex="-1"></button>
    </li>
</template>

 

 

 

 

2. The code below, need to be inside your existing module where you create the sliders.

 

 

 

<!-- now this script is added below your existing script where you create the carousels -->
<script>
    // first we get the slick that contains the slides so we can count them with .slick.slideCount
const sliderItemsCount = document.querySelector('#{{ module.section_id }} .product-tabmain .page-center').slick.slideCount;

// next we get the ul that will hold our final produced jumplinks
const sliderLinksContainer = document.querySelector('.js-slider-links');

// and finally we get the template we created earlier
const sliderLinksTemplate = document.querySelector('#customSliderLinks');

// now we loop through each slide creating an appropriate jumplink for it
// I'm not going to dig into this for this case but you should probably take a look
// at the MDN documentation about <template> tags and cloning nodes
for (let sliderItem = 0; sliderItem < sliderItemsCount; sliderItem++) {
    const clone = sliderLinksTemplate.content.cloneNode(true);
    const sliderLinkButton = clone.querySelector('a');
    sliderLinkButton.setAttribute("id", "slick-slide-control"+sliderItem+1);
    sliderLinkButton.setAttribute("aria-controls", "slick-slide"+sliderItem+1);
    sliderLinkButton.setAttribute("aria-label", sliderItem+1+" of "+sliderItemsCount);
    sliderLinkButton.setAttribute("data-slide-target", sliderItem);
    sliderLinkButton.textContent = `Grade ${sliderItem+1}`;
    sliderLinksContainer.appendChild(clone);
}

// next we create a function that will change the slide
function changeSlide(){
    const slideToShow = this.dataset.slideTarget;
    document.querySelector('#{{ module.section_id }} .product-tabmain .page-center').slick.slickGoTo(slideToShow);
}

// and finally we bind all the links with the click event so they actually change to the appropriate slide
const sliderButtons = sliderLinksContainer.querySelectorAll('a');
sliderButtons.forEach(element => element.addEventListener("click", changeSlide));
</script>

 

 

Links:
1. Link on templating in html and javascript (MDN)

2. Slick Carousel Methods on Carousels (Search for "Methods")

 

If my answer was helpful, please mark it as a solution.

 

View solution in original post