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';
}
}
Related
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>
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 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
When you enter anything in input fields, it would be replaced(changed) as intended, and i don't know how could they stay that way(changed based on input value) after page reload...I tried many options form here and from other forums but no help at all. please help i am newbie to this stuff.
var savea = document.getElementById("save3");
if (savea) {
savea.addEventListener("click", saveea);
}
var saveb = document.getElementById("save4");
if (saveb) {
saveb.addEventListener("click", saveeb);
}
function saveea() {
var changename = document.getElementById("savenamemovie").value;
document.getElementById("namemovie1").innerHTML = changename;
}
function saveeb() {
var changegenre = document.getElementById("savegenremovie").value;
document.getElementById("genremovie1").innerHTML = changegenre;
}
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<li>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="buy2" href="#">admin</a></li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea"><img src="../img/movie1.jpg"></a>
<h3 id="namemovie1">Annihilation</h3>
<input id="savenamemovie" type="text" name="movietitle"><a id="save3" class="save2">SAVE</a>
<p>Genre: <span id="genremovie1">Adventure, Fantasy</span></p>
<input id="savegenremovie" type="text" name="movietitle"><a id="save4" class="save2">SAVE</a>
</div>
<div class="trailer">
<embed src="https://www.youtube.com/embed/89OP78l9oF0" allowfullscreen="true">
</div>
<div class="moviebox">
<p>Ticket Price:<span id="pricemovie1" class="boje"> 250 RSD</span></p>
<p>Duration:<span id="durationmovie1" class="boje"> 147 min.</span></p>
<p>Date:<span id="datemovie1" class="boje"> 25/06/18</span></p>
<p>Time:<span id="timemovie1" class="boje"> 18:30</span></p>
<p>Place:<span id="placemovie1" class="boje"> Arizona, Springfiled 12</span></p>
<p>Theater:<span id="theatre1" class="boje"> A1</span></p>
<br>
<a id="delete">Free: 14 seats</a>
<a id="change">Movie rated: 7.8</a>
<a id="buy" class="buttons" href="buyticket.html">Buy a Ticket</a>
</div>
</div>
</section>
You could store your values in localStorage and update it on keyup to always be the correct value.
var input = document.getElementById("savenamemovie");
if (input) {
input.value = localStorage.getItem('savenamemovie') || "";
input.addEventListener("keyup", function(){
localStorage.setItem('savenamemovie',this.value);
});
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am designing an ecommerce system and on the product page there will be several tabs for information. I need a solution that when clicked on the tab it will change the style element of the HTML's CSS to style="visibility: visibile'" for the selected tab and other tabs to style="visibility: hidden;".
Is there a simple way of doing this with OnClick="" in the HTML? Javascript isn't really my strong suite I apologize.
<script type="text/javascript">
function toggleVisibility(id) {
var tabs_class = document.getElementsByClassName("tab");
var tabs_id = document.getElementById(id);
for ( var i = 0; i > tabs_class.length; i++){
tabs_class[i].style.display = "none";
}
tabs_id.style.display = 'block';
}
</script>
<ul class="tabs">
<li class="active">
<a onclick="toggleVisibility('product_description');">Description</a>
</li>
<li>
Photos
</li>
<li>
<a onclick="toggleVisibility('product_reviews');">Reviews</a>
</li>
<li>
<a onclick="toggleVisibility('return_policy');">Return Policy</a>
</li>
</ul>
<div class="tab" id="product_description">
<p>{$product_description}</p>
</div>
<div class="tab" id="product_photos" style="display: none;">
<p>Product Photos</p>
</div>
<div class="tab" id="product_reviews" style="display: none;">
<p>Reviews</p>
</div>
<div class="tab" id="return_policy" style="display: none;">
<p>Return Policy</p>
</div>
Native JavaScript:
// get all tags
var tags = document.getElementsByClassName("tag");
// register onclick event on tags
tags.addEventListener('click', modifyVisibility, false);
function modifyVisibility() {
// set all to hidden
tags.style.visibility = 'hidden';
// set clicked tag to visible
this.style.visibility = 'visible';
}
Instead of handling the tabs on your own, why not use jQueryUI to do the tabs for you. Check the example below:
https://jqueryui.com/tabs/
I use this:
<div id="popupInfo">
<div class="closeButton"
onclick="document.getElementById('popupInfo').style.visibility = 'hidden';">
</div>
contents....
</div>
where closebutton uses a .png containing an 'X' in two shades of grey...
.closeButton
{
position: absolute;
width: 32px;
height: 32px;
background: transparent url(4x4_X.png);
right: 5px;
top: 5px;
}
.closeButton:hover
{
background-position: 0px -32px;
z-index: 99;
}
simply include in their guides a class and get the same and add style
var elements = document.getElementsByClassName("className");
for(var i = 0; i > elements.lenght; i++){
elements[i].style.visibility = "hidden";
}
current.style.visibility = "visibile";
If you include JQuery you can use the following to change the "display" property:
<div id='clickMe' onclick='$("#clickMe").hide()'>Click on me!</div>
Or without JQuery you can do this:
<div id='clickMe' onclick='this.style.display = "none";'>Click on me!</div>
If you need the "visibility" property changed, you can do this:
<div id='clickMe' onclick='this.style.visibility = "hidden";'>Click on me!</div>
The following code will allow buttons to set the CSS display property to display: none; for all elements with specified class. It will also set the element with the specified ID to display: block;.
<script type="text/javascript">
function toggleVisibility(id) {
var tabs_class = document.getElementsByClassName("tab");
var tabs_id = document.getElementById(id);
for ( var i = 0; i < tabs_class.length; i++ ) {
tabs_class[i].style.display = "none";
}
tabs_id.style.display = "block";
}
</script>
<ul class="tabs">
<li class="active">
<a onclick="toggleVisibility('product_description');">Description</a>
</li>
<li>
Photos
</li>
<li>
<a onclick="toggleVisibility('product_reviews');">Reviews</a>
</li>
<li>
<a onclick="toggleVisibility('return_policy');">Return Policy</a>
</li>
</ul>
<div class="tab" id="product_description">
<p>{$product_description}</p>
</div>
<div class="tab" id="product_photos" style="display: none;">
<p>Product Photos</p>
</div>
<div class="tab" id="product_reviews" style="display: none;">
<p>Reviews</p>
</div>
<div class="tab" id="return_policy" style="display: none;">
<p>Return Policy</p>
</div>