I've got a list of products which are Men & Women, using Javascript below each product I want to print a message to tell users that these products are available in whatever sizes are in-stock. To determine which products are Men & Women, I'm looking at the href and targeting "womensclothing" & "mensclothing" which works but when i go to print the messages they don't sit below the products correctly as you can see when you run the code. Any help on this would be appreciated.
Please note i do not have access to the html to make changes.
var womensClothing = document.querySelectorAll('.productTitle[href*="womensclothing"]');
var womenSizeLocation = document.querySelectorAll('.productPrice');
womensClothing.forEach(function(link, i) {
womenSizeLocation[i].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + link.getAttribute('href') + "><p>Women's sizes:xs, s, m, l</p></a>");
});
var mensClothing = document.querySelectorAll('.productTitle[href*="mensclothing"]');
var menSizeLocation = document.querySelectorAll('.productPrice');
mensClothing.forEach(function(links, el) {
menSizeLocation[el].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + links.getAttribute('href') + "><p>Men's Sizes: s, m, l, xl </p></a>");
});
.productWrapper {
margin: 0 0 10px;
border: 1px solid black;
}
<div class="productWrapper">
<a class="productTitle" href="/mensclothing/">Mens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/mensclothing/">Mens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/womensclothing/">Womens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/womensclothing/">Womens Product</a>
<div class="productPrice">€35,00</div>
</div>
Since the class for the price is same for all products: productPrice, you need to use the CSS Sibling operator ~ to select the elements that is the sibling of the specific <a> element.
var womensClothing = document.querySelectorAll('.productTitle[href*="/womensclothing"]');
var womenSizeLocation = document.querySelectorAll('.productTitle[href*="/womensclothing"] ~ .productPrice');
womensClothing.forEach(function(link, i) {
womenSizeLocation[i].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + link.getAttribute('href') + "><p>Women's sizes:xs, s, m, l</p></a>");
});
var mensClothing = document.querySelectorAll('.productTitle[href*="/mensclothing"]');
var menSizeLocation = document.querySelectorAll('.productTitle[href*="/mensclothing"] ~ .productPrice');
mensClothing.forEach(function(links, el) {
menSizeLocation[el].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + links.getAttribute('href') + "><p>Men's Sizes: s, m, l, xl </p></a>");
});
.productWrapper {
margin: 0 0 10px;
border: 1px solid black;
}
<div class="productWrapper">
<a class="productTitle" href="/mensclothing/">Mens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/mensclothing/">Mens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/womensclothing/">Womens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/womensclothing/">Womens Product</a>
<div class="productPrice">€35,00</div>
</div>
Related
I have a name card under a class and id named "column" . I have used the clone function with a for loop in JavaScript to increase the number of name cards so that i don't have to retype the code every time I create a new card. How do i access each name card and Enter/Edit the data inside each name card using JavaScript? Where ever i need to Enter data i have entered "DATA HERE" in the code below. At the moment I have 8 name cards using the clone property. As i am new to this, i don't know if this is the best way to do this. If there is a better way please let me know. Thanks a lot.
MAIN GOAL: i want to show different data in different name cards, but i don't want to rewrite the HTML code for each name card as the HTML code becomes very long. For example Name card 1 will have different data to name card 2.
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 7; i++) {
e.clone().insertAfter(e);
e.clone[i].attr('id', 'clone' + i++);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="column">
<div class="container">
<div class="header"> <h3>"DATA HERE" </h3> </div>
<div class="location">
<h1><ion-icon class ="icon1" name="location-outline" class="nav__icon"></ion-icon> "DATA HERE" </h1>
</div>
<form method="post" > <p>
<button type="button" class="button3"> LIGHTS</button></a>
<button class="button">ON</button> </p>
</form>
<form method="post" > <p>
<button type="button" class="button2">OFF</button> </p>
</form>
<div class="icon-bar">
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> "DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
</div>
</div>
OK now, you can use querySelectorAll to find the .column class, then you can set your code to each selector with it's index, starting from 0 to the 1st and ends with 7 in your case ..
here is an example for what i mean
try the snippet
EDIT: changed the snippet with all required areas.
here is an example of all content control on the 1st container, you can use what you need
Try the snippet.
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 7; i++) {
e.clone().insertAfter(e);
}
//selecting the first Container with variables
const allcls = document.querySelectorAll('.column');
const chld = allcls[0].querySelector('.header > h3');
const chld2 = allcls[0].querySelector('.location > h1');
const chld3 = allcls[0].querySelectorAll('form');
const frmchld = chld3[0].querySelector('p :nth-child(2)');
const frmchld2 = chld3[1].querySelector('p :nth-child(1)');
const chld4 = allcls[0].querySelectorAll('.icon-bar .active');
const chld5 = allcls[0].querySelectorAll('.icon-bar2 .active');
/* set data for each element */
//.header text with new style
chld.innerText = "New Text for Header";
chld.style.color = 'gray';
chld.style.textAlign = 'center';
chld.style.margin = 'auto';
chld.style.padding = '1rem';
chld.style.background = 'darkblue';
chld.style.width = 'max-content';
chld.style.border = '1px solid darkgray';
//.location text with new color
chld2.innerText = 'Location text';
chld2.style.color = 'darkblue';
//ON button link + name
frmchld.setAttribute('onClick', '#NEWLINK_FOR_ON');
frmchld.innerText = "ON Button";
//off button link + name
frmchld2.setAttribute('onClick', '#NEWLINK2_FOR_ON');
frmchld2.innerText = "OFF Button";
//icon-bar links ( names + href )
chld4[0].innerText = "Iconbar Link1";
chld4[1].innerText = 'Iconbar link2';
chld4[2].innerText = 'Iconbar link3';
chld4[3].innerText = 'Iconbar link4';
chld4[0].setAttribute('href', '#Link_1');
chld4[1].setAttribute('href', '#Link_2');
chld4[2].setAttribute('href', '#Link_3');
chld4[3].setAttribute('href', '#Link_4');
//icon-bar2 links ( names + href )
chld5[0].innerText = "Iconbar2 Link1";
chld5[1].innerText = 'Iconbar2 link2';
chld5[2].innerText = 'Iconbar2 link3';
chld5[0].setAttribute('href', '#Link_1');
chld5[1].setAttribute('href', '#Link_2');
chld5[2].setAttribute('href', '#Link_3');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="column">
<div class="container">
<div class="header">
<h3>"DATA HERE" </h3>
</div>
<div class="location">
<h1>
<ion-icon class="icon1" name="location-outline" class="nav__icon"></ion-icon> "DATA HERE" </h1>
</div>
<form method="post">
<p>
<button type="button" class="button3"> LIGHTS</button>
<button class="button" onClick="#">ON</button> </p>
</form>
<form method="post">
<p>
<button type="button" class="button2" onClick="#">OFF</button> </p>
</form>
<div class="icon-bar">
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> "DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
</div>
</div>
i dont know the final porpose of your problem, but i'm assuming you are trying to do that:
$(document).ready(function() {
var e = document.getElementById("column");
for (var i = 0; i < 7; i++) {
var newe=e.cloneNode(true);
document.body.insertAdjacentElement('beforeend', newe);
newe.id="column"+i;
}
hope it helps, probably you are learning but if the data comes from a database this workaround you are trying doing is usless (you will print trough a function this HTML.
Keep Growing, Plus Ultra!!!
I want to be able to click on an item and clone it immediately after that item, At moment it always Clones to the END, id adds it after the last LI in list.
I created a jsFiddle here jsfiddle test
JS
const curId = 20;
function cloneIt(){
var newId = Math.floor((Math.random() * 1000) + 1);
const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
newCloned.html(newCloned.html().replace(
new RegExp(curId, 'g'),
newId
));
$("#ulContainer").append(newCloned);
}
$('#ulContainer').on('click', '.tog', function(e) {
cloneIt();
alert('item cloned');
e.preventDefault();
});
HTML
<ul id='ulContainer'>
<li id="d20" class="cards__item">
<div class="card">
<div class="card__content cellb">
<a id="dup20" class="tog" href="http://test/pgdup/20">
<div class="dup20">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (20)</p>
</div>
</div>
</li>
<li id="d21" class="cards__item">
<div class="card">
<div class="card__content anchor">
<a id="dup21" class="tog" href="http://test/pgdup/21">
<div class="dup21">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (21)</p>
</div>
</div>
</li>
</ul>
You can try using .after() by passing the event to the function:
Insert content, specified by the parameter, after each element in the set of matched elements.
Change
$("#ulContainer").append(newCloned);
To
$(e.target.closest('li')).after(newCloned);
const curId = 20;
function cloneIt(e){
var newId = Math.floor((Math.random() * 1000) + 1);
const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
newCloned.html(newCloned.html().replace(
new RegExp(curId, 'g'),newId));
$(e.target.closest('li')).after(newCloned);
}
$('#ulContainer').on('click', '.tog', function(e) {
cloneIt(e);
alert('item cloned');
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='ulContainer'>
<li id="d20" class="cards__item">
<div class="card">
<div class="card__content cellb">
<a id="dup20" class="tog" href="http://test/pgdup/20">
<div class="dup20">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (20)</p>
</div>
</div>
</li>
<li id="d21" class="cards__item">
<div class="card">
<div class="card__content anchor">
<a id="dup21" class="tog" href="http://test/pgdup/21">
<div class="dup21">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (21)</p>
</div>
</div>
</li>
</ul>
I tra to filter the uk-filter from a button or a checkbox.
I understand that I can create a filter, in the that contains .js-filter. but I want to create a checkbox outside the div. so how can a call or set a posible selecction.
This is what I have.
<div uk-filter=".js-filter" data-id="page#4" id="page#4" class="uk-margin">
<ul class="el-nav uk-margin uk-subnav uk-subnav-pill">
<li class="uk-active" uk-filter-control="">
All
</li>
<li uk-filter-control="[data-tag~='Anual']">
Anual
</li>
<li uk-filter-control="[data-tag~='Temporada']">
Temporada
</li>
</ul>
<div class="js-filter uk-child-width-1-1 uk-child-width-1-2#m uk-grid-match uk-grid" uk-grid="">
<div data-tag="Anual Temporada" class="uk-first-column">
<div class="el-item uk-card uk-card-primary uk-card-small uk-card-body uk-margin-remove-first-child">
<h3 class="el-title uk-card-title uk-margin-remove-top uk-margin-remove-bottom">
Triplex MI 47
</h3>
<a href="">
</a>
<div class="el-content uk-panel uk-margin-top"><p style="column-count: 2; font-family: Montserrat; font-size: 14px;">info</p></div>
</div></div>
<div>
<div class="el-item uk-card uk-card-primary uk-card-small uk-card-body uk-margin-remove-first-child">
<h3 class="el-title uk-card-title uk-margin-remove-top uk-margin-remove-bottom">
Botafoch MI35 </h3>
<a href="">
</a>
<div class="el-content uk-panel uk-margin-top"><p style="column-count: 2; font-family: Montserrat; font-size: 14px;">info</p>
<p style="text-align: justify;">info</p></div>
</div></div>
</div>
</div>
This is the function i call from a onclick
function myFunction() {
var filter = document.querySelector('.js-filter');
var filterBar= document.querySelector('#page#4');
var activeFilter= document.querySelector('div [data-tag:'Anual']');
UIkit.filter( filterBar, {
target: filter,
selActive: activeFilter,
});
}
in other post i see they set a selection of the filter when the page is load and recive a hash, i like to do the same but from a button.
This is the other post UIkit 3's Filter component: Set active filter with URL hash - unable to change active filter with JS
I have 3 movies, (Annihilation, Bomb x City and The Commuter), i don't know hot to put javascript code so when i start to search like for "ann" that only annihilation movie box appear and other not displayed...like filtering...please help i am not so good at this stuff and i want to learn.Thanks in advance.
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
Probably the best way to do this is to use js libraries as angular or react.
but here is an simple example for vanila js using oninput event:
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search..." oninput="filterMovies(this.value)">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="movies_boxes_container" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
<script>
function filterMovies(val){
val = val.toUpperCase();
let moviesBoxes = document.getElementsByClassName('moviebox');
Array.prototype.forEach.call(moviesBoxes, child => {
let id = child.id.toUpperCase()
if(!id.includes(val))
child.style.display = "none";
else{
child.style.display = "block";
}
});
}
</script>
This alternative uses the functions querySelector and querySelectorAll
to find the elements and make the necessary comparison.
This approach uses the function indexOf to find the matches.
This approach uses a class called hide to hide the elements who don't match the entered value.
This approach is case-sensitive.
Use the event input to capture any changes from your input text field.
document.getElementById('filterInput').addEventListener('input', function() {
var value = this.value;
var container = document.getElementById('boxes');
Array.prototype.forEach.call(container.querySelectorAll('.moviebox'), function(e) {
e.classList.add('hide');
Array.prototype.forEach.call(e.querySelectorAll('.namemovie'), function(m) {
if (value.trim() === '' || m.textContent.indexOf(value) !== -1) e.classList.remove('hide');
});
})
})
.hide {
display: none
}
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="namemovie">Annihilation</h3>
<p class="genremovie">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
You have to implement a Filter/Search List.
There are countless ways to solve this problem but I will put here a complete example coming from w3schools.com
Here's the relevant example, all the code (css / javascript) is embedded in a single html page for the sake of simplicity.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>
This implementation is using a for cycle to loop all the items in the list in search of the position of the characters we are searching: .indexOf(filter) and showing / hiding the current item accordingly.
A few basic concepts that combined together can achieve such a user friendly and powerful use.
As first thing I'd suggest you to separate those functional units in different files writing the parts completely and answering to any question or doubt or unclear information you read.
Write the code in the new files by hand, letter by letter.
Read it, no copy and paste.
I've preferred to put a suggestion instead of a solution because your main request seems to be that you want to learn.
Once you can disassemble / reassemble this code it will also be easy to implement it in your current page.
Take time, answer your own questions, start a course, get books, never give up.
Have fun!
Some html:
<input id='search' type='text'>
<div id='hold_movies'>
<a class='movie'>Annihilation</a><br>
<a class='movie'>Bomb x City</a><br>
<a class='movie'>The Commuter</a>
</div>
Some jQuery:
$("#search").keyup(function() {
val = $.trim(this.value);
if (val === "") {
$('.movie').show();
} else {
$('.movie').hide();
$(".movie:contains(" + val + ")").show();
}
});
Result:
To ensure the search is case-insensitive you can extend jQuery as follows:
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Here is what I came up with. this is a good little project to learn some JS! you should try doing something next where you automate the creation of the html given an array of movies. It might be a bit heavy for what you're doing, but React is a neat JS library that's worth looking into and learning about.also be careful about classnames with a . in them. You usually dont want to do that. (looking at your container class)
// grab all the movies
let movies = document.getElementsByClassName('moviebox');
//this returns an object we want an array
//with all the names in it. so lets call OBject.keys() which will
//return an array with all the keys of this object
movies = Object.keys(movies)
.map(key => movies[key].id);
// what we did was loop through the keys, (0,1,2) and index into the object with them (movies[key]). then since hte id is the name of the movie it seems, we just grab the id (movies[key].id) we then save this update array into the already defined movies array.
console.log(movies);
//^ check it out, there are the list of movies, dynamically grabbed!
//lets define a function that will hide a movie given its name.
//this is a super basic function but it does one thing well.
function hideMovie(name) {
document.getElementById(name).style.display = 'none';
console.log("hide "+name)
}
//if we can hide a movie we want to be abble to show one too.
function showMovie(name) {
document.getElementById(name).style.display = 'block';
}
//now lets target the input box
const searchBox = document.getElementById('filterInput');
//we want to add an event listener so everytime the user inputs something
//we look through the movies and hide the ones that dont contain the string
//entered, we also want to make sure we show the right movies too
searchBox.addEventListener('input', () => {
const value = searchBox.value;
const visibleMovies = [];
console.log(value)
//lets filter the movies to only include the ones we want to hide
const hiddenMovies = movies.filter(movie => {
const hidden = movie.indexOf(value) < 0;
//if we're not going to hide it lets show it.
if(!hidden){
visibleMovies.push(movie)
}
return hidden;
});
console.log(hiddenMovies)
//loop through and hide the movies.
for(let i = 0; i< hiddenMovies.length; i++){
hideMovie(hiddenMovies[i]);
}
//loop through and show the movies
for(let i = 0; i< visibleMovies.length; i++){
showMovie(visibleMovies[i]);
}
})
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
I would add the attribute onkeyup to your input element and set it equal to a function that looks at the input text, and then loops through your moviebox div elements and hides them if the h3 element text does not contain the input value.
Example:
<input type="text" id="filterInput" placeholder="Search..." onkeyup="filterTable(this)" />
function filterTable(input) {
var search = input.value;
var movieDivs = document.querySelectorAll('div.moviebox');
for (var i = 0; i < movieDivs.length; i++;) {
var h3 = movieDivs[i].querySelector('h3');
if (h3.innerText.indexOf(search) >= 0)
movieDivs[i].style.display = '';
else
movieDivs[i].style.display = 'none';
}
}
I'm new in js, I need to change several images at hover on the same imagine like this : http://www.revzilla.com/ on slider, any suggest?
thi is my html, in ct-image I have several images that move your mouse inside the container replaces with the other imgs :
<li class="product-primary clearfix">
<a href="https://validator.w3.org/nu/#textarea">
<div class="ct-image" style="background:url(imgs/product1.jpg)" data-image="imgs/product1.jpg" data-alt="">
<div class="banner-new"><span>new</span>
<p class="title-product-hidd">lorem</p>
</div>
<!--.banner-new-->
<div class="banner-acti">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--.banner-acti-->
</a>
<!--effetto all'hover-->
<div class="ct-hove">
<div class="text-pro">
<p class="text">I</p>
<p class="text">I</p>
<p class="tex">I</p>
</div>
<ul>
<li class="compare-icon"><i class="fa fa-eye"></i>
</li>
<li class="buy-icon"><i class="fa fa-heart-o"></i>
</li>
<li class="wishlist-icon"><i class="fa fa-database"></i>
</li>
</ul>
</div>
<!--.ct-hover-->
<div class="ct-descript-prod-left">
<p class="title-prod">Name</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<!--.ct-descript-pro-bt-->
<div class="ct-descript-prod-right">
<h4>€ 0.000.00</h4>
<ul>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
</ul>
</div>
<!--.ct-descript-pro-bt-->
</li>
Simplest solution I have found for you:
$(document).ready(function() {
var timeout;
var flipImages = function($container) {
var amount = $container.data("amount");
var current = $container.data("current");
if(current >= amount){
current = 1;
} else {
current = current + 1;
}
var dataAttr = "image" + current;
var image = $container.data(dataAttr);
$container.fadeOut(200, function() {
$container.css("background-image", "url(" + image + ")");
$container.fadeIn(200);
$container.data("current", current);
});
timeout = setTimeout(function() {
flipImages($container);
}, 1000)
};
$(".ct-image").hover(
function() {
var $that = $(this);
timeout = setTimeout(function() {
flipImages($that);
}, 1000)
},
function() {
if(timeout) {
clearTimeout(timeout);
}
}
);
});
.ct-image {
display: block;
height: 300px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ct-image" style="background-image:url(http://dummyimage.com/300x300/00eb1b/fff)"
data-image1="http://dummyimage.com/300x300/00eb1b/fff"
data-image2="http://dummyimage.com/300x300/0c00eb/fff"
data-image3="http://dummyimage.com/300x300/eb8500/fff"
data-image4="http://dummyimage.com/300x300/eb0014/fff"
data-current="1"
data-amount="4">
<!-- your content-->
</div>
Note. Solution is without flipping animation. It requires change in structure of your code.
are you looking for something like that ?
$('.carousel').mouseleave(function(){
var currentActiveImage = $('.item-show');
var nextActiveImage = currentActiveImage.next();
if(nextActiveImage.length == 0)
{
nextActiveImage = $(".carousel #item").first();
}
currentActiveImage.removeClass('item-show').addClass('item-hidden');
nextActiveImage.addClass('item-show').removeClass('item-hidden');
});
.item-show {
display: inline-block;
}
.item-hidden{
display: none;
}
.info {
position:absolute;
top: 231px;
left: 505px;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div id="item" class="item-show">
<img src="http://www.bu.edu/khc/files/2012/09/Video11_700x300.jpg" />
<div class="info">
<span>some text</span>
<p>Price: 88$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/traffic-700x300.jpg" />
<div class="info">
<span>This is Cool</span>
<p>Price: 99$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/heaven-700x300.jpg"/>
<div class="info">
<span>This is train</span>
<p>Price: 100$</p>
</div>
</div>