I'm making a website that includes carousels and buttons. When you click the buttons it moves the carousel to the left or right to see more or previous content. I made it at first by creating two functions, one for the button that goes back and one for the button that goes forward. It worked, but I realized that I needed to make it for All of the buttons since I had multiple carousels.
var nextButton = document.querySelectorAll('.button-forward');
var backButton = document.querySelectorAll('.button-back');
nextButton.addEventListener('click', function() {
itemContainer.style.transform = 'translateX(-40%)';
});
backButton.addEventListener('click', function() {
itemContainer.style.transform = 'translateX(10%)';
});
I tried storing all the forward and backward buttons with document.querySelectorAll and gave them a forEach method where in it is the event listener for them. The other two carousel buttons still weren't working, I also tried making them an array to see if it would help, but it didn't change anything. In summary I want to make it where I can give the event listener to all of the pairs of buttons instead of just one. Could you guys help me? If you need a better description please tell me!
var nextButton = document.querySelectorAll('.button-forward');
var backButton = document.querySelectorAll('.button-back');
nextButton.forEach(button => {
button.addEventListener('click', nextButton => {
itemContainer.style.transform = 'translateX(-40%)';
})
})
backButton.forEach(button => {
button.addEventListener('click', backButton => {
itemContainer.style.transform = 'translateX(10%)';
})
})
Here's my HTML structure of the carousel for those who want to know:
I used the main element keep the parts of my carousel together, inside it is the visible_items div that only shows the items that are in it with overflow: scroll in CSS. Inside of that os the item_container which just contains the items. The ion-icons or buttons are at the top and bottom of the main element, and when you click them they make the item_container translate left or right making the items shown in the visible_items div change.
<ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
<main>
<h1>Poular Shoes</h1>
<div class="visible_items">
<div class="item_container">
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
</div>
</div>
<ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
</main>
The procedure is correct, however I am afraid you are applying the transformation always to the same "itemContainer" element. This should in fact point to the element related to the button pair you assign during that iteration.
We then need to fetch all the carousels via querySelectorAll; each will have element containers and their buttons as children. In this case you have a guaranteed order and only one array to scroll through.
Example:
document.body.querySelectorAll(".carousels").forEach((c) => {
const container = c.querySelector(".container")
c.querySelector(".next")
.addEventListener("click",
() => container.style...)
c.querySelector(".back")
.addEventListener("click",
() => container.style...)
})
I would recommend that you modify your html code as follows:
<!-- Move this inside the carousel div -->
<ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
<!-- This is not a good tag to create many carousel divs -->
<!-- I will use something like <div class="carousel"> -->
<main>
<h1>Poular Shoes</h1>
<div class="visible_items">
<div class="item_container">
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
</div>
</div>
<ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
</main>
I'll leave you a snippet to start with:
// get all carousels in the page
const carousels = document.body.querySelectorAll(".carousel");
// scan each carousel and assign events to children
carousels.forEach((carousel) => {
// get item_container
const itemContainer = carousel.querySelector(".item_container");
// assign event to button-back
carousel.querySelector(".button-back").addEventListener('click', () => {
itemContainer.style.transform = 'translateX(-40%)';
});
// assign event to button-forward
carousel.querySelector(".button-forward").addEventListener('click', () => {
itemContainer.style.transform = 'translateX(10%)';
});
});
<!-- Changed -->
<div class="carousel">
<!-- Moved -->
<ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
<h1>Poular Shoes</h1>
<div class="visible_items">
<div class="item_container">
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
</div>
</div>
<ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
<!-- Changed -->
</div>
Related
Trying to get navigation tabs to toggle content based on it's tab selected but content is not toggling and all content is being displayed and not hidden on default.
I have tried onclick=showBody("tabid") with no luck.
Right now code is as follows;
<section class="border-black">
<div class="container sr-subresults-nav">
<ul class="sr-navigation">
<li class="sr-subnav-item" onclick=showBody("bridgerectifiers")>Bridge Rectifiers</li>
<li class="sr-subnav-item" onclick=showBody("limitingdiodes")>Limiting Diodes</li>
<li class="sr-subnav-item" onclick=showBody("sfrecovery")><a class="sr-nav-link" href="">SF Recovery</li>
</ul>
</div>
<section class="pt-1 mb-0 border-black">
<div id="product-results">
<div id="bridgerectifiers" class="search-result-products">
<div class="diodes-rectifiers-content" id="bridge-rectifiers-diodes-filter-div">
<h6>Bridge Rectifiers</h6>
content for bridge rectifiers goes here
</div>
</div>
<div id="limitingdiodes" class="search-result-products">
<div class="diodes-rectifiers-content" id="current-limiting-diodes-filter-div">
<h6>Current Limiting Diodes</h6>
content for current limiting diodes goes here
</div>
</div>
<div id="sfrecovery" class="search-result-products">
<div class="diodes-rectifiers-content" id="super-fast-recovery-diodes-filter-div">
<h6>Super Fast Recovery Diodes</h6>
content for super fast recovery diodes goes here
</div>
</div>
</div>
</section>
JS
function showBody(item) {
hideBody();
if (item == "bridgerectifiers") {
$("#bridgerectifiers").show();
$("#bridgerectifiers").hidden = false;
}
if (item == "limitingdiodes") {
$("#limitingdiodes").show();
$("#limitingdiodes").hidden = false;
}
};
function hideBody() {
$("#bridgerectifiers").hide();
$("#bridgerectifiers").hidden = false;
$("#limitingdiodes").hide();
$("#limitingdiodes").hidden = false;
}
Would like to get all content hidden on default and the tab selected to show the content related to that tab while all other content is hidden or not displayed. New to js and jquery so open to other options other than onclick.
In hideBody() function, you should remove $("#bridgerectifiers").hidden = false; and $("#limitingdiodes").hidden = false;.
They're code to show elements again.
You can also remove $("#bridgerectifiers").hidden = false; and $("#limitingdiodes").hidden = false; from showBody() function because they do same as $("#bridgerectifiers").show();.
Or you just use the following code.
function showBody(item) {
hideBody();
$("#" + item).show();
};
function hideBody() {
$(".search-result-products").hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="border-black">
<div class="container sr-subresults-nav">
<ul class="sr-navigation">
<li class="sr-subnav-item" onclick='showBody("bridgerectifiers")'>Bridge Rectifiers</li>
<li class="sr-subnav-item" onclick='showBody("limitingdiodes")'>Limiting Diodes</li>
<li class="sr-subnav-item" onclick='showBody("sfrecovery")'>SF Recovery</li>
</ul>
</div>
</section>
<section class="pt-1 mb-0 border-black">
<div id="product-results">
<div id="bridgerectifiers" class="search-result-products">
<div class="diodes-rectifiers-content" id="bridge-rectifiers-diodes-filter-div">
<h6>Bridge Rectifiers</h6>
content for bridge rectifiers goes here
</div>
</div>
<div id="limitingdiodes" class="search-result-products">
<div class="diodes-rectifiers-content" id="current-limiting-diodes-filter-div">
<h6>Current Limiting Diodes</h6>
content for current limiting diodes goes here
</div>
</div>
<div id="sfrecovery" class="search-result-products">
<div class="diodes-rectifiers-content" id="super-fast-recovery-diodes-filter-div">
<h6>Super Fast Recovery Diodes</h6>
content for super fast recovery diodes goes here
</div>
</div>
</div>
</section>
I have two groups of links all with the same class names, the only difference is the text in the .
I need to get the text for the clicked link and pass it to GA through GTM.
<div class="item-set">
<header>Section Title One</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
<div class="item-set">
<header>Section Title Two</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
I have created a custom javascript variable
function() {
$('section.products div.list').click(function() {
return $(this).closest('.item-set').find('header').text();
});
}
But the bleep thing isn't working as I expect (or at all). It returns "undefined".
Any assistance is greatly appreciated.
You shouldn't bind to click event in JS variable. You should use JS variables in GTM only for receiving values
The correct way to achieve your goal is:
1) Enable built-in variable Click Element (if you already have it, you can skip this step)
2) Create trigger, which will fire when you clicking on your links
CSS selector on the screenshot is .item-set .list a
3) Create JS variable
Code is: function() {
return $({{Click Element}}.closest('.item-set')).find('header').text();
}
3) Create a tag, which will send data to GA
Here you can use your variable form step 3 {{Click List Header}}
Maybe you are not capturing/storing the return $(this).closest('.item-set').find('header').text(); from the function?
When you for example immediately invoke your function and click a div, the text of the <header> will be logged to the console.
(function() {
$('section.products div.list').click(function(e) {
e.preventDefault(); // to prevent the default action of the click
console.log($(this).closest('.item-set').find('header').text());
return $(this).closest('.item-set').find('header').text();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-set">
<header>Section Title One</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
<div class="item-set">
<header>Section Title Two</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!
The following code display columns that slide down (the .select-plan-details div) when pressing .select-plan-buy (the other columns, if open, slide up).
HTML:
<div class="select-plan-container">
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-starter">
</div>
<div class="select-plan-details select-plan-details-starter">
</div>
</div>
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-level">
</div>
<div class="select-plan-details select-plan-details-level">
</div>
</div>
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-levels">
</div>
<div class="select-plan-details select-plan-details-levels">
</div>
</div>
</div>
JS:
jQuery(".select-plan-buy").click(function () {
jQuery('.select-plan-column .select-plan-details').slideUp();
jQuery(this).next(".select-plan-details").slideToggle();
});
Right now when I press .select-plan-buy again (when .select-plan-details is already open), it slides up and then down again (the current column). How can I do it so it slides up properly?
You could use:
jQuery('.select-plan-column .select-plan-details').not(jQuery(this).next(".select-plan-details")).slideUp();
jQuery(".select-plan-buy").click(function () {
var objDetail=$(this).next(".select-plan-details");
$('.select-plan-column .select-plan-details').not(objDetail).slideUp();
objDetail.slideDown();
});
I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?
If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle
code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)