Develop Reference

How to filter image gallery by tags using Javascript?

I've been struggling to understand how to overcome this problem. I've been tasked to retrieve user input, and on keystroke see if user input matches any amount of .tags If not, hide the .thumb-display.
So far, I've been able to gather that I'll need to add/remove the classlist "hidden" as well use the event handler "input", however I don't quite understand how to use event handler "input" in this context as well as change event.
This is for homework so I'd much rather have an explanation for an answer, rather than just an answer so I can understand what I currently can't. Even a hint could be vital and set me on the right track! Rules are: no changing HTML and must use JavaScript.
Here is the HTML:
<form class="frm-filter">
<div class="frm-group">
<a class="reset hidden" href="#">Reset</a>
<input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
</div>
</form>
</nav>
<section class="gallery">
<div class="row">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="thumb-display">
<img src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
<p class="tags">#africa #mountain #road</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
<p class="tags">#palmbeach #distantpeaks</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/beach_road.jpg" alt="beach road" />
<p class="tags">#oceanbeach #mountainroad</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
<p class="tags">#lake #clearskies #onthewater</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
<p class="tags">#fallcolors #bridgecrossing #river</p>
</div>
</div>
</section>

You need to listen on input keyup event and retrieve value from input then check if that value matches any tags and show/hide `parentNode
document.addEventListener('DOMContentLoaded', () => {
const inputEl = document.getElementById('filter');
const tags = Array.from(document.querySelectorAll('.tags'));
inputEl.addEventListener('keyup', () => {
const value = inputEl.value;
tags.forEach(tag => {
if (tag.textContent.includes(value)) {
tag.parentNode.style.display = 'block'
} else {
tag.parentNode.style.display = 'none'
}
})
})
})
<form class="frm-filter">
<div class="frm-group">
<a class="reset hidden" href="#">Reset</a>
<input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
</div>
</form>
<section class="gallery">
<div class="row">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="thumb-display">
<img src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
<p class="tags">#africa #mountain #road</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
<p class="tags">#palmbeach #distantpeaks</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/beach_road.jpg" alt="beach road" />
<p class="tags">#oceanbeach #mountainroad</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
<p class="tags">#lake #clearskies #onthewater</p>
</div>
<div class="thumb-display">
<img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
<p class="tags">#fallcolors #bridgecrossing #river</p>
</div>
</div>
</section>

You need to get user input. So you need to listen for an event. Add Event Listener to the rescue. Which event, though? How about "change".
Ok, so you can get what they typed, good. Now you need to compare it to the tags. So it's time to find all of those. You can get all of the ".tags" with a querySelector. That will get you a list of nodes that you can loop through to collect the innerText. You can check if the innerText includes the input that the user typed. If it doesn't, then you find the closest ".thumb-display" and set a style attribute to hide it. If the input IS in the innerText, then you need to remove any style attribute that is hiding the closest parent.
Boom, done. Maybe, I didn't try it an I almost never get it right the first time. But it would be something along those lines.

Check if next element has specific class else go to next section

I'm trying to make a script to scroll down to the correct section.
This is a small piece of the html code:
<div class="page_sections sectionOne">
<div class="product_options">
<input />
</div>
</div>
<div class="page_sections sectionTwo">
<div class="product_options">
<input />
</div>
<div class="product_options">
<input />
</div>
<div class="product_options">
<input />
</div>
</div>
<div class="page_sections sectionThree">
<div class="product_options">
<input />
</div>
<div class="product_options">
<input />
</div>
</div>
The idea of the script is whenever someone clicks on an input(all selects and radio's) to go to the next product_options. If no product options is found then go to the next section.
I think im pretty close but can't seem to finish it. Can you help me out:
$(".page_sections :input").change(function(){
var next = $(this).closest(".page_sections").nextAll('.page_sections').first();
if ($(this).closest(".product_options").next('.product_options').length){
next = $(this).closest(".product_options").next('.product_options');
}
$('html, body').animate({
scrollTop: $(next).offset().top - 180
}, 1500);
});
I was really close. Made a typo with lenght -> length...

I made a typo. Thanks for #PatrickEvans for pointing me to that!

Dynamic jQuery AppendTo Selector

I have an HTML page that is adding a toolbar to an item. That page is using some static IDs to make this happen. The most important line of code looks like this:
$('#tb').appendTo('.item-toolbar');
The above works as expected for a single item. But now, I'm trying to make this so that it work with multiple items. In an attempt to do this, I've created this fiddle. The most important code looks like this:
function moveNugget() {
var selected = $('#selector').val();
var tb = $('#tb');
var items = $('.item-container');
// The following line is the one that is giving me problems.
//.appendTo('.item-toolbar');
}
If you visit the Fiddle, it will be more clear. Basically, a user can choose 1, 2, or 3 from a drop down. Once selected, the tool bar should be "appended to" the corresponding item-toolbar. My challenge is, I can't figure out how to create the selector to a dynamically selected item and use the appendTo function.
I really want to use the appendTo because my actual code is more complicated. I've tried to strip it down to the part that is giving me the issue. It's clearly my approach to using appendTo. Right now, I'm trying:
$(tb).appendTo('.item-toolbar');
However, this approach completely disregards the selected item. I'm not sure how to use the selected items toolbar within the context of appendTo.

One of the variant of realization:
Add unique ids on each item-toolbar (For example view-0, view-1, view-2)
It will look like this:
<select id="selector">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
<button onclick="moveNugget();">
Move
</button>
<br /><br />
<div class="view">
<div class="item-container">
<div class="item-title">
[title]
</div>
<div id="view-0" class="item-toolbar">
[tb]
</div>
</div>
</div>
<br />
<hr />
<br />
<div class="view">
<div class="item-container">
<div class="item-title">
[title]
</div>
<div id="view-1" class="item-toolbar">
[tb]
</div>
</div>
</div>
<br />
<hr />
<br />
<div class="view">
<div class="item-container">
<div class="item-title">
[title]
</div>
<div id="view-2" class="item-toolbar">
[tb]
</div>
</div>
</div>
<br /><br /><br />
<ul id="tb" style="list-style-type: none;">
<li>[1]</li>
<li>[2]</li>
<li>[3]</li>
</ul>
Then when you click on button you can append your toolbar to appropriate block
Here is changed function code:
function moveNugget() {
var selected = $('#selector').val();
var tb = $('#tb');
var items = $('.item-container');
// Add toolbar to appropriate block
tb.appendTo('#view-' + selected);
}
Fiddle

Try:
function moveNugget() {
var selected = $('#selector').val();
var tb = $('#tb');
var items = $('.item-container .item-toolbar')[selected];
// The following line is the one that is giving me problems.
tb.appendTo(items);
}

My Ajax script and event object somehow does not prevent the load

I am currently using AJAX to actually make my website more dynamic. But somehow the event objects method e.preventDefault() does not fire to prevent the link to load. I have specified a container which will be replaced, now I don't know the reason for this failure. Through the .load method I am loading HTML content, to be exact the content from another 'container' in the HTML.
My index.php:
<nav>
<a class = "current" href="index.php">Home</a>
Search
</nav>
<div class="header">
<header class="title">jrr scientists - Official</header>
<img id="logo" height="100" width="160" src="Logo/dev.png">
</div>
<section id="content">
<div id="container">
<div class="img2">
<img id="ish"src="img/ish.jpg">
<img id="mit" src="img/it.png"><br>
<img width="100" height="100" id="home" src="img/toys1.jpg">
<img width="200" height ="100" src="img/This is CS50.gif"> <br><br> <br><br>
<p> This is supposed to be a small thank you to all these institutions to make </p>
<p> education accessable worldwide, even to non-college students. Therefore material </p>
<p> will be pblished here to enhance the use of this education. </p>
<p> *********************************************************************************************** </p>
<p> *********************************************************************************************** </p>
<p> From the Editor JRR - Jayant Raul Rao </p>
</div>
<div id="text">
<p> This is the official website of jrr developer and the </p>
<p> CS environment to make your life easier. This website</p>
<p> will focus on programming and computer science introducing </p>
<p> concepts, displaying offical documentations and scripts </p>
<p> from various examples. We can actually have a look at </p>
<p> Google Scholar pdf's and a lot of facts of cs, maths </p>
<p> and physics undermining the determination and will to </p>
<p> save and keep data in a way to help. This page will be </p>
<p> empowered by different features like a search engine, </p>
<p> CS50 lectures, Google Scholar texts and maths problems. </p>
<p>********************************************</p>
<p> JRR (Jayant Raul Rao) </p>
</div>
<div id="img">
<img class= "img" width="200" height="120" src="img/ibm.jpg">
<img id = "img1" width="190" height="120" src="img/term.png"> <br>
<img id="xcode"width="80" height="70" src="img/xcode.png">
</div>
</div>
</section>
<script type="text/javascript" src="JS/basis.js"></script>
<script type="text/javascript" src="JS/ajax.js"></script>
Now here I will replace the container through this jQuery script (ajax.js)
:
$('nav a').on('click', function(e) { // User clicks nav link
e.preventDefault(); // Stop loading new link
var url = this.href; // Get value of href
$('nav a.current').removeClass('current'); // Clear current indicator
$(this).addClass('current'); // New current indicator
$('#container').remove(); // Remove old content
$('#content').load(url + ' #container').hide().fadeIn('fast'); // New content
});
After this I will load this and replace the old container with the new one:
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
</head>
<body>
<section id = "content">
<div id="container">
<!-- <img src="toys1.jpg" /> -->
<div id="header">
<img class="pio"alt="CS50 Search" src="img/Unknown.gif"/>
</div>
<form action="https://www.google.com/search" method="get">
<input class="t" name="q" type="text"/><br/>
<button class="u">Search</button>
</form>
</div>
</section>
<script type="text/javascript" src="JS/ajax.js"></script>
</body>
</html>
Thank you in advance

JavaScript variables used inside html

I have to make a mock-up website for a school assignment. The website involves a search feature. For the assignment, the search feature does not have to be fully functional; So for the mock-up, I want to have an iframe that will change the src="" value after a button is pushed. At first, the iframe will display an image, then after the client/user enters something (any string the input doesnt matter) and hits "search", I want the src for the iframe to change. I was wondering if there was any way to do this using javascript. I'm fairly new and know very little about javascript. The iframe that I need to change has and id of search_frame. This is my code:
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="HOME.CSS"/>
</head>
<body>
<div id="main">
<div id="top" >
<a href="" id="LOGO">
<img alt="LOGO" height="37" src="LOGO.JPG" width="342" />
</a>
<img id="Cheetah_Logo" alt="cheetah_logo" height="29" src="Cheetah_Corner.PNG" width="205" /><a id="CHEETAH_LINK">
</a>
</div>
<div id="center">
<div id="Left_Section">
<div id="checkBox">
<form>
<input type="radio"/>Text-Books
<input type="radio"/>eBooks
<input type="radio"/>Class-Notes
<input type="radio"/>Exams
<input type="radio"/>Tutors
<input type="radio"/>Software
<input type="radio"/>Homework
<input type="radio"/>Free-Stuff
<input type="radio"/>Events
<input type="radio"/>Other
<a id="Advanced" href="http://Home.html">Advanced Search</a>
</form>
<div id="search_Div">
<form id="Search">
<input id="search_Bar" type="text" />
<button>Search</button>
</form>
</div>
</div>
<div id="search_results">
<iframe id="search_frame" scrolling="yes" src="image.png">
Your system does not support frames
</iframe>
</div>
<div id="links">
<a href="Product.html" id="link_product">
</a>
<a href="profile_2.html" id="link_profile">
<img id="profile_button" alt="profile_button" src="profile_button.jpg" />
</a>
<a id="click_here" href="profile_2.html">
Click here to view your profile!
</a>
</div>
</div>
<div id="bottom">
<center>
<img src="bottom_bar.JPG" alt="bottom_bar" />
</center>
</div>
</div>
<div>
<img src="Left_Filler.JPG" alt="Left_Filler" id="Left_Filler"/>
<img src="Right_Filler.JPG" alt="Right_Filler" id="Right_Filler"/>
</div>
</div>
</body>
</html>
This is the idea general idea of the type of script I want to run:
This will set the iframe to the image:
<script type="text/javascript">
function rowdy(num){
variable1='Rowdy.jpeg';
return variable1;
}
</script>
This is my mocksearch once the button is pushed:
<script type="text/javascript">
function mockSearch(var1)
{
var1='Results_Mock_CSS.css';
return var1;
}
</script>
I know these are incorrect, but I was thinking there might be a way to put the function calls inside the src for the iframe, any help, guidance, or ideas will be greatly appreciated, thanks in advanced!

You just need to have click event on your button like,
<input type="button" value="Search" onclick="SearchClicked();"/>
And that click can change the source like below.
<script type="text/javascript">
function SearchClicked() {
document.getElementById('search_frame').src = 'Rowdy.jpg';
}
</script>

First, kill the "form" element as that basically indicates a trip back to the server which you don't want (sortof, you may want it back later but leave that until you understand it). Then install an onclick handler for the button that locates the iframe and updates the src attribute.
Something like
<div id="search_Div">
<input id="search_Bar" type="text" />
<button onclick="document.getElementById('search_frame').src='Rowdy.jpeg';">
Search</button>
</div>
will do it.

As a previous answer states, you could use the onClick property. You could also use jQuery magic (which would be less efficient, but for a school project, the difference is negligible).
First, in the head, you'd have to import jQuery with the statement
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
and then, you could put right after it
<script>
$(document).ready(function() {
$('button').click(function() {
$('#search_frame').attr('src', 'Rowdy.jpg');
}
}
</script>
to bind a method to the click event on the button.