I have the following HTML:
<div class="sidenav-contact__types">
<div class="sidenav-contact__type js-sidenav-contact__type" data-contact-type="call-me-back">
<figure>
<svg class="sidenav-contact__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/etc/designs/site/img/icons.svg#caller-inverse"></use></svg>
</figure>
<h5>Call me back</h5>
<p>Talk to a Representative about our range.</p>
</div>
<div class="sidenav-contact__type js-sidenav-contact__type" data-contact-type="contact-us">
<figure>
<svg class="sidenav-contact__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/etc/designs/site/img/icons.svg#info-inverse"></use></svg>
</figure>
<h5>Contact Us</h5>
<p>For FAQs, feedback, suggestions or media.</p>
</div>
<a class="sidenav-contact__type" href="http://site" data-contact-type="new button">
<figure>
<svg class="sidenav-contact__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/etc/designs/site/img/icons.svg#recall-inverse"></use></svg>
</figure>
<h5>Information</h5>
<p>vehicle is affected.</p>
</a>
</div>
What I'm trying to do is detect when a user clicks inside a div or a with the given class sidenav-contact__type, when clicked I then need to retrieve the data-contact-type value.
Now I could of course target this class in general, but when I click on the h5,p,figure or svg the script doesn't run due to none of those elements having the class sidenav-contact__type
The javascript I currently have is:
var myElements = document.getElementsByClassName('sidenav-contact__type');
for(var i = 0; i < myElements.length; i++){
myElements[i].addEventListener('click', function(){
console.log('here');
//get data-contact-type from div or a
});
}
Can a javascript guru please show me how I can register a click event on the children elements of the parent element that has the class sidenav-contact__types
note: has to be in javascript
This way you can retrieve the data contact-type attribute. Note the camelcase notation of contactType.
var myElements = document.getElementsByClassName('sidenav-contact__type');
for(var i = 0; i < myElements.length; i++){
myElements[i].addEventListener('click', function(){
console.log(this.dataset.contactType);
});
}
See here your working example: https://jsfiddle.net/skmqya0u/
try this it should work
var myElements = document.querySelectorAll(".sidenav-contact__type, .sidenav-contact__type *"); //select every class element and it's childs
for(var i in myElements){
myElements[i].addEventListener('click', function(){
console.log('here');
//get data-contact-type from div or a
});
}
Related
So, on my website I have a pop-up modal that contains a form. The form has 5 divs that contain a picture and a description. I found the following JS code on w3schools that enables me to select a div and give it the styling I want. However, when I first open the modal, one div is selected. But I don't want any to be selected. I am not sure how to modify this code to make it so no divs are seleced initially.
// When user clicks an div, add background
var divs = document.getElementsByClassName("mood-state");
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Here is some of the div in the modal
<div class="mood-state">
<img src="neutral.svg" alt="" />
<p>Neutral</p>
</div>
<div class="mood-state">
<img src="smile.svg" alt="" />
<p>Pleasant</p>
</div>
<div class="mood-state active">
<img src="grin.svg" alt="" />
<p>Very Pleasant</p>
</div
Remove the active class in the HTML. Having that there makes it initially start as active.
<div class="mood-state active"> <-- You have the active class here
<img src="grin.svg" alt="" />
<p>Very Pleasant</p>
</div>
Change that to
<div class="mood-state"> <-- No 'active' class here
<img src="grin.svg" alt="" />
<p>Very Pleasant</p>
</div>
You also need to change your JavaScript to fix a bug
// When user clicks an div, add background
var divs = document.getElementsByClassName("mood-state");
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("click", function() {
[...document.getElementsByClassName("active")].forEach(ele => ele.classList.remove("active"));
this.classList.add("active");
});
}
So I have
<a href="1.html">
<img src = "image.jpg" class = "picture"/>
<div class="desc"><p>Brief Description</p></div>
</a>
<a href="2.html">
<img src = "image2.jpg" class = "picture"/>
<div class="desc"><p>Brief Description</p></div>
</a>
How do I cycle through the pictures and alter the div accordingly?
So far I have something like:
var pictures = $('.picture');
(var a = 0; a < pictures.size(); a++){
var description = (pictures.get(a)) (.siblings?)(.next?);
//Do what I want with the description
}
You can use Jquery .each() to loop through the elements. And .siblings() to get the sibling of that element.
$('.picture').each(function(){
var description = $(this).siblings('div. desc').text();
// Do what I want with the description
});
notice that .get(a) won't give you a jQuery set, but instead a plain object
https://api.jquery.com/jquery.get/
var pictures = $('.picture');
pictures.each(function() {
var description = $(this).next().html();
//Do what I want with the description
console.log(description);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="1.html">
<img src = "image.jpg" class = "picture"/>
<div class="desc"><p>Brief Description 1</p></div>
</a>
<a href="2.html">
<img src = "image2.jpg" class = "picture"/>
<div class="desc"><p>Brief Description 2</p></div>
</a>
How about selecting the description's <p> directly?
Like this:
$('.picture .desc p')....
You could use next.
$('.picture').each(function(idx, picture){
$(picture).next('.desc'); //this will select div.desc
});
I have a list of elements similar to simplified HTML below. When one of the images is clicked some JavaScript if fired, and the image that is clicked becomes this.theImage.
I now need to get the position of the image; for example if the first image was clicked, the position should be 1, if the second is clicked it should be 2, and so on.
I could use var elements = $('.image-preview', '#gallery');, to take a list of all elements with the image-preview class, and then loop through them and match the ID to the image, but that seems really inefficient.
Is there another way of achieving this task that is more efficient?
<div id="gallery">
<div class="image-preview">
<img id="image-1" src="http://www.mysite.com/image1.jpg" />
</div>
<div class="image-preview">
<img id="image-2" src="http://www.mysite.com/image2.jpg" />
</div>
<div class="image-preview">
<img id="image-3" src="http://www.mysite.com/image3.jpg" />
</div>
<div class="image-preview">
<img id="image-4" src="http://www.mysite.com/image4.jpg" />
</div>
</div>
Not sure I get it, you catch a click on the image like this
$('.image-preview img').on('click', function() {
});
and then to get the index you'd do
$('.image-preview img').on('click', function() {
var index = $('.image-preview img').index(this);
});
note that it's zero based
FIDDLE
You can make Array.prototype.indexOf do it for you:
var gallery = document.getElementById('gallery'),
els = [].slice.call(gallery.getElementsByTagName('img'));
gallery.onclick = function(e) {
if(e.target.tagName.toLowerCase() !== 'img') return;
var position = els.indexOf(e.target);
};
Demo
I have this html code:
<div class="comment" id="7" >
<div style="display:inline-block">
<img style="width:64px;height:64px" src="http://origin.black-marketplace.net/content/images/users/1.jpg"><br>
<div class="rating" style="background-position:0px -10px" title="1 stelle su 5"></div>
</div>
<div style="display:inline-block;float:right;width:172px;height:75px">
<b>Xriuk</b>
<div style="font-size:10px;color:#BEBEBE;line-height:10px">ha comprato</div>
<span class="ellips games">mkx brteshtnx</span>
</div>
<span style="font-size:12px;height:50px;width:236px;display:block" class="ellips">sdjchsdui edi0ufwuèè+eè+è+èàùiek ci0hxjomwui9vjko'asdhvfyu8rk cxi0ehfuioweju9cwej icjnweuceioncuiasn cu9wecji0wejucm vuiom fiwefdoeqr hg wgtehwhwtwghrh</span>
<a class="url" style="float:right;font-size:11px;display:none" href="7">Continua a leggere -></a>
</div>
Basically all the elements with the class ellips get ellipsed if overflow the size of the box, what I want to do is to display the if any of two span contains the string "...".
What I already did:
$(".ellips").ellipsis();
var text = document.getElementsByClassName("ellips");
if(text){
for(var i = 0; i < text.length; i++){
if(text[i].innerHTML.indexOf("...") != "-1"){
***HERE***
}
}
}
In ***HERE*** I need to put a code which returns the child element "#url" of the top parent element ".comment" (the top parent element must correspond to the current ".ellips" selected).
Any help?
Thanks!
Try
$(".ellips").ellipsis();
$('.comment .ellips').each(function () {
if (this.innerHTML.indexOf("...") != "-1") {
var $url = $(this).closest('.comment').find('.url');
//here $url refers the element with url class under the same .comment element
}
})
Try this:
$(text[i]).closest('.comment').find('a.url')
Hi i want to access all images under some specific div in javascript.My code is :
<div id="image-container" style="background-image:url(loading.gif)">
<div class="fade-box" id="image-1"><img src="2bscene-logo.gif" alt="" width="330" height="108" border="0" /></div>
<div class="fade-box" id="image-2" style="display: none;"><img src="streetgallery-logo.gif" alt="" width="330" height="108" border="0" /></div>
<div class="fade-box" id="image-3" style="display: none;"><img src="g4m-logo.gif" alt="" width="330" height="108" border="0" /></div>
</div>
While my js code is :
var image_slide = new Array('image-1', 'image-2', 'image-3');
I want to get all DIVs based on id dynamically, not having a predefined array. How can I do that?
By pure javascript, you can try:
var arr = document.querySelectorAll('#image-container img');
for(var i=0;i<arr.length;i++){
console.log(arr[i].getAttribute('src'))
}
On browsers that support querySelectorAll. (IE8 and up, modern versions of others, not IE7 and down.) - As mentioned in the comment by T.J. Crowder
With JavaScript, you can do this easily with the DOM:
var container = document.getElementById("image-container");
var child;
var image_slide = [];
for (child = container.firstChild; child; child = child.nextSibling) {
if (child.id && child.nodeName === "DIV") {
image_slide.push(child.id);
}
}
Live Example | Source
Note that the code above must be run after the elements are already in the DOM. The best way to ensure that is to put the script tag below them in the page (just before the closing </body> element is good).