How to hide clicked element when all having same parent class - javascript

How to hide caption of particular slide which user clicked. Here having same class name for all the slides is making big problem. How to over come this.
<div id="accordion-wrapper">
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider1.jpg" />
<div class="caption">
<p> 1</p>
</div>
</div>
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider2.jpg" />
<div class="caption">
<p> 2</p>
</div>
</div>
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider3.jpg" />
<div class="caption">
<p> 3</p>
</div>
</div>
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider4.jpg" />
<div class="caption">
<p> 4</p>
</div>
</div>
<div class="slide">
<div id="mask"></div> <img src="snd/images/slider5.jpg" />
<div class="caption">
<p> 5</p>
</div>
</div>
</div>


$(".slide").click(function(){
$(this).find(".caption").hide();
})

Related

Modal, how to open other pages from directory ? JS HTML CSS

<div class="row">
<div class="column">
<div class="container">
<img
src="../images/img1.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal1"><h1>Marathon</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img5.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal5"><h1>Weight Lifting</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img8.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal8"><h1>Jogging</h1></div>
</div>
</div>
</div>
</div>
How to add modals so I can open other pages ( image01.html, image05.html ....) when I click on h1 from that photo.. I am new in this and i can't find a soulution. Any help would be great

How to sort HTML elements alphabetically with vanilla JavaScript?

I have these animal cards in a container div, and i want to sort them alphabetically. I only want to use vanilla javascript, no jquery please.
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

Here's what I came up with. I selected all tags with the class "animal-name". Then stored their textContent in an Array, sorted it then replaced it in the original tags
let animals = document.querySelectorAll('.animal-name');
let animalNames = [];
for(let i=0; i<animals.length; i++){
animalNames.push(animals[i].textContent)
}
animalNames = animalNames.sort();
for(let i=0; i<animals.length; i++){
animals[i].textContent = animalNames[i];
}
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

The idea is to sort the DOM elements, and then append them in that order again inside the container element: this will actually move these elements in their right order:
const container = document.querySelector(".animal-container");
const key = (a) => a.querySelector(".animal-name").textContent.trim();
Array.from(container.children)
.sort((a, b) => key(a).localeCompare(key(b)))
.forEach(child => container.appendChild(child));
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>
</div>

You can do this by appending the elements to the DOM dynamically using JS.
For example,
const arr = ["Giraffe", "Camel", "Dog", "Lion"].sort()
arr.forEach((word) => {
document.getElementById("animal-container").appendChild(
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">{word}</div>
</div>
)})

Looped text changing

I'm trying to create an automatic text change (testimonials like ont click and scroll down please to see changing testimonials
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 1</p>
</div>
<div class="author">Pete</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 2</p>
</div>
<div class="author">Fiona</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 3</p>
</div>
<div class="author">Helen</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 4</p>
</div>
<div class="author">Laura</div>
</a>
</div>
I need each testimonial to show for few seconds and then change to another one so only one is shown at time. I'm not a good programmer and was trying to find this on google but I didn't. Thank you for help.

Try this
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 1</p>
</div>
<div class="author">Pete</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 2</p>
</div>
<div class="author">Fiona</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 3</p>
</div>
<div class="author">Helen</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 4</p>
</div>
<div class="author">Laura</div>
</a>
</div>
and jquery:
var divs = $('div[class^="testimonial"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
>> working example <<

Fullpage.js sections not working

I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});

Search within site and return items based on location

html want to show items based on the location in .offer_miliage
<div class="offer_list clearfix">
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_01.jpg" alt=""/>
</div>
<div class="offer_aside">
<h2>Project 1</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">32.690</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_02.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 2</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">56.300</div> <span class="offer_miliage">Choolaimedu</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_03.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 3</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">47.000</div> <span class="offer_miliage">T Nangar</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_04.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 4</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">26.750</div> <span class="offer_miliage">Pallavaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_05.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 5</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">33.300</div> <span class="offer_miliage">Tambaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_06.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 6</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">44.300</div> <span class="offer_miliage">fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_07.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 7</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">48.500</div> <span class="offer_miliage">Fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_08.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 8</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">63.300</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
</div>
<div class="widget-container widget_adv_filter">
<h3 class="widget-title">ADJUST SEARCH RESULTS</h3>
<form action="#" method="get" class="side_form">
<div class="row field_select" style="z-index:8">
<label class="label_title">Location:</label>
<select class="select_styled white_select" name="car_year" id='select'>
<option value="1">Pallavaram</option>
<option value="2">T Nagar</option>
<option value="3">Nungambakkam</option>
<option value="4">Choolaimedu</option>
<option value="5">Fort</option>
</select>
</div>
<div class="row rowSubmit"> <span class="btn btn_search"><input type="submit" value="SEARCH" onClick="go_button();"></span>
</div>
how to show items which are having same location when click in searched button. I have started java script but couldn't advance.
here is java script
<script type="text/javascript">
function go_button(){
var loc=document.getElementByClassName('offer_miliage')[0].innerText;
if(document.getElementById('select').value==1){
//what to write to update .offer_list with .offer_item that
//have .offer_miliage text pallavaram
}
};
</script>
friend can u please tell me whats wrong with this script
function go_button(){
if(document.getElementById('select').value==1){
$(function() {
$(".offer_item").search(function(a) {
// Find the location name from element
var priceAText = $(a).find(".offer_miliage").text();
// Return the result
if(priceAText=="Pallavaram"){return true;}
}).each(function() {
// Add all the elements back into the parent, in order
$(this).appendTo(".offer_list");
});
});
}
};

Your working example with jQuery: http://jsfiddle.net/9VQRt/ (highlight found data with red background).
$('body').on('click', '.search_button', function() {
var offerCollection = $('.offer_miliage');
$.each(offerCollection, function(ind, val) {
if($("#select option:selected").text() == val.innerHTML) {
$(this).addClass('red_bg');
}
});
});

Categories