We Keep Coding

How can I extract the text next to an image with Google Tag Manager?

Here's the challenge:
We have an image and text that describes it all nested in the same div. When somebody clicks on that image, we want Google Tag Manager to return that text.
Basically, we need to:
Go up 3 parent nodes
Go down to the child node with the class "right-section"
Go down to the child node with the class "is-title"
Go down to the child node with the tag "a"
Extract the text
Using my crude, self-taught Javascript knowledge, I came up with this monstrosity of a function:
function(){
return el.parentNode.parentNode.parentNode.getElementsByClassName("right-section")[0].getElementsByClassName("is-title")[0].getElementsByTagName("a")[0].innerText;
}
... which does not work at all.
Any suggestions?

this is an example markup basically the idea is use closest function to go up to dom tree and then use 'querySelector' with that result to go down to any element inside it
const img = document.querySelector(".item_image")
img.onclick = e=>{
const root = e.target.closest(".card") // goind back to root element
const text = root.querySelector(".text") // going down to text element
console.log(text.innerText)
}
<div class="card" style="width:400px;">
<div class="sections">
<img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
</div>
<div class="another-seci">
<div class="text">
Despite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full
</div>
</div>
</div>

ok, Here is an example of what you need to do. If you need an exact answer that would work by just copy pasting it, show the block of HTML exactly how Amir did. I used Amir's HTML example to do the trick. Also, if you see that it takes the same text when you click on different images, include in your html snippet the code from other images, so that we could see how they relate to the parents and could refine the selectors.
Here's your CJS code:
function(){
return {{Click Element}}.parentElement.parentElement.querySelector(".text").innerText
}
There's completely no need to hop from node to node once you got to the bottom. From the bottom parentElement, just do the query selector once and you're in good hands.
You could also use .closest, but it seems like its complexity is way over just a few parentElements. I know it's insignificant, but hey.
Here is how I debug it right on this page (in Amir's answer):

document.querySelectorAll('.item_image').forEach(item => {
item.addEventListener('click', event => {
const root = event.target.closest(".card") // goind back to root element
const text = root.querySelector(".text") // going down to text element
console.log(text.innerText)
})
})
<div class="card" style="width:400px;">
<div class="sections">
<img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
</div>
<div class="another-seci">
<div class="text">
Despite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full
</div>
</div>
</div>
<div class="card" style="width:400px;">
<div class="sections">
<img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
</div>
<div class="another-section">
<div class="text">
BlaDespite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full
</div>
</div>
</div>

Here's what ultimately worked, for anyone Googling this:
function (){
el = {{Click Element}};
var item = el.parentElement.parentElement.nextElementSibling.getElementsByTagName('a')[0].innerText;
return item;
}

Bootstrap-vue lazy loading showing old image

I'm using Nuxt for my web app and I have a list of items with images.
For image lazy loading I'm using component https://bootstrap-vue.js.org/docs/components/image and it is working fine.
Example of my usage:
<div class="item">
<b-img-lazy :src="imageUrl" />
</div>
The issue appearing when I'm doing filtering of my items, because views are reusing and when I filter, (let's say it was 10 and now only 1), item will have image of another item until it's image will be loaded.
So, basically, instead of seeing empty image for new item I can see image of item which had same position previously.
Is there way to reset old image?

v-bind:key might be your friend here. Binding a key will force a full re-render of the component instead of just patching what changed about the component.
<div class="item">
<b-img-lazy :key="imageUrl" :src="imageUrl" />
</div>
Docs here: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State

How to remove a class when a different template is rendered in Meteor

I am working on a website using Meteor. On one of the pages, I would like some of the images and divs at the top to be animated onto the page.
I have achieved this by adding:
Template.home.rendered=function(){
$('.animateblock').addClass('animated');
};
The added class changes some of the css properties, giving me the desired effect.
The problem I am having is that if I go to a different page of the site and then revisit the page with the animations, it doesn't reset. The class is only ever added once, and I haven't been able to figure out a way to have it removed when another page is visited.
My html code is as follows:
<div class="textAnimate animateblock">
<img src="/home/100.png" class="animateblock percent100" alt="100%">
<img src="/home/antibiotics.png" class="animateblock antibiotic" alt="Antibiotic Free">
<img src="/home/natural.png" class="animateblock natural" alt="All Natural">
<div class="horomoneAnimateContainer">
<div class="animateblock horomoneAnimate">
<img src="/home/horomone.png" class="horomone" alt="Horomone Free">
</div>
</div>
</div>
<div class="stampAnimate animateblock">
<img src="/home/tasty-stamp.png" class="tasty" alt="Tasty Certified">
</div>
I have tried a few different methods, such as adding a removeClass before the addClass, hoping that would fix it, but it did not.
Template.home.rendered=function(){
$('.animateblock').removeClass('animated');
$('.animateblock').addClass('animated');
};
I also tried creating a Template.destroyed section like so, but that didn't work either:
Template.home.destroyed=function(){
$('.animateblock').removeClass('animated');
};
I am using Meteor 1.2.0.1 and am also using iron router, but haven't been able to find a solution to add and remove classes with it. Any suggestions are appreciated!

I do something like this to call in jQuery on template loads:
Template.Messages.onCreated(function() {
var self = this;
self.autorun(function() {
self.subscribe('messageDB', function() {
$('.loader').delay(300).fadeOut('slow', function() {
$('.transition-wrapper').delay(200).fadeIn('slow');
});
});
});
});
Meteor Chef has a great resource on loading patterns here.

adding a slideshow to emberJS template page

EDIT: Did some more digging around and emberJS doesn't allow inline script execution. How would I go about creating a slideshow? Do I create a component?
I've only started out with emberJS. I've followed the guides on the website by Ember and looked on here to learn, but I've found myself in a bit of a dead end and I need your help!
This is the situation:
I want to add a slideshow to one of my templates. Now, to the best of my abilities I have added the slideshow .js and .css using 'BOWER INSTALL' and then edited my 'ember-cli-build.js' to reference the app.import for those two dependencies.
It's a basic website pages such as 'About Me', 'Services', 'Contact Us'. Nothing fancy. Say I want to add this slideshow to the 'Services' page, at first when I visit the site it loads up with no issues but when I switch between the templates/pages using {{#link-to}} function it disappears and won't load again.
Can anyone explain how I should add inline scripting on templates?
Sorry for the beginners question.
In order for me to run the slide show I need to execute the following script after the DOM elements on the page.
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
The HTML is as follows:
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/350x150/0889d8/000000" />
</li>
<li>
<img src="http://placehold.it/350x150/c1a4f0/ffffff" />
</li>
<li>
<img src="http://placehold.it/350x150/8b4513/000000" />
</li>
</ul>
</div>

I tried to use the slick addon, but ran into issues with it. So I created another ember addon that wraps the jquery unslider plugin. Check out ember-cli-unslider.
See the simple demo.
The un-slider component expects an array of slides. Within its block you must define the HTML content used for each slide.
{{#un-slider slides=model as |slide|}}
<img src="{{slide.url}}"/>
{{/un-slider}}
In the above example, model could look like this:
[
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 1&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 2&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 3&w=600&h=400' }
];

You can use an ember addon that already does that: ember-cli-slick
Install it using :
ember install ember-cli-slick
You can use it in your template like this:
{{#slick-slider autoplay=true arrows=false}}
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
{{/slick-slider}}
If you want to learn how to make a slideshow component look at the source code here:
https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js
This is just a wrapper component for the slick.js plugin . You would do the same for the flexslider plugin.

Angular ng-repeat, Jquery fail

So I am using ng-repeat to repeat some divs which show images out of my JSON file. What I want to do is that when I click on that image (whether its desktop or mobile) the image will scale. Now my problem is that when I want to create a click event on my image tag (which is inside that div that holds the ng-repeat), he doesn't do anything. He cant see the click.
I red something on the internet about issues with jquery and angular, but for me as a beginner its hard to understand what I have to do to make it work how I pleased. I just want to be able to put a jquery function on a image tag inside the ng-repeated divs, so I can manipulate the css from there.
I have a piece of the code posted below here, maybe I have to add something to my controller? I dont know, I am clueless at the moment. :-)
<section class="words">
<div class="colored-sidebar"></div>
<!-- content -->
<div class="previous-button"></div>
<div class="word-container" ng-controller="imageController as imageCtrl">
<h1><span>noun</span>words</h1>
<div class="category-body">
<p><span>noun</span>travel</p><hr>
<div class="category-section" ng-repeat="icon in imageCtrl.imageList.travel">
<!-- <div class="category-image" ng-include="icon.src"></div> -->
<div class="category-image">
<img src="{{icon.src}}" />
</div>
</div>
</div>
</section>
The angular file
(function() {
app.controller('imageController', function(){
this.imageList = imageJson;
});
var imageJson = {
//ALOT OF JSON DATA HERE//
};
})();
I hope this piece of code would be enough to help me :-)
Any tips are welcome, I love to learn this language better and also understand it better.
Thanks!

jQuery is not suitable here, because by the time you run your jQuery code inside jQuery.ready(), the elements in "category-image" class are not created yet.
For solution of your problem you can use two methods:
1) Use the "ng-click", as proposed before. You can also pass "$index" to function inside ng-click. This way you will know index of icon in imageList.travel that was clicked. But this way you will have no information about dom element.
2) Create a directive. The main difference between directives and controllers is that directive have information about dom object. You can treat element as typical jQuery object
JS:
app.directive('imageClick', [function () {
return {
link: function (scope, element, attr) {
element.on("click", function(e){
//do some stuff here
})
}
}
}]);
HTML
<section class="words">
<div class="colored-sidebar"></div>
<!-- content -->
<div class="previous-button"></div>
<div class="word-container" ng-controller="imageController as imageCtrl">
<h1><span>noun</span>words</h1>
<div class="category-body">
<p><span>noun</span>travel</p><hr>
<div class="category-section" ng-repeat="icon in imageCtrl.imageList.travel">
<!-- <div class="category-image" ng-include="icon.src"></div> -->
<div class="category-image">
<img image-click src="{{icon.src}}" />
</div>
</div>
</div>
</section>