We Keep Coding

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>
)})

JS Delete div content and write new code

I have this code
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I want to replace only in the first div, <img src = "" alt = ""> with <video> <source src = ""> </ video>.
To clean up div I found this code. But not the first. This is the first problem.
$('.item").empty();
To write the new code to play the video, I should use this code:
$(".item").html('<video><source src=""></video>');
I can not write a good javascript code to do what I explained you.
ps. I can’t change the first code because it’s a default slider of image.
Thanks for the help.

If you wish to use jquery you can utilise replaceWith() and :first pseudo selector to select and repalce only the first <img>:
$(function () {
$('img:first').replaceWith('<video><source src=""></video>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Bu tyou don't need Jquery to get it done. Document.querySelector() returns only the first element that matches the specified selector and the repalce it using replaceChild(https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/):
var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>

Try this, querySelector() selects only One selector, the first matched selector:
document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';

You can use jQuery replaceWith() method to achieve this as below.. you can modify the selector as per your need
$('img:first').replaceWith( "<video><source src=""></video>" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>

Javascript onclick function pass img src

I have 3 images which each have an onclick and a parameter passed. Here's the HTML:
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(1);">
<img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(2);">
<img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(3);">
<img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" />
</div>
</div>
</div>
What I need to do is have a function which gets the img src value of the myfunction passed parameter. So for example:
myFunction(id) {
$('body').html(/* passed parameter's img src here */);
}
How can I do this?

You can pass this as a parameter to the function which will be a reference to the clicked div element. You can then get the child img and read the src attribute.
However a much better solution would be to use unobtrusive event handlers over outdated on* event attributes. Try this:
$('.thumbnail').click(function() {
var $thumb = $(this);
console.log($thumb.data('foo'));
console.log($thumb.find('img').attr('src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="1">
<img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="2">
<img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="3">
<img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" />
</div>
</div>
</div>

Onlcick of respective divs image src can be get using var imgSrc = "assets/placeholders/sliders/slider" + id + ".png"; and it can be used as per need.
Please check working snippet.
function myfunction(id) {
//Get image src on click on the respective divs
var imgSrc = "assets/placeholders/sliders/slider" + id + ".png";
console.log(imgSrc);
//$('body').html( passed parameter's img src here );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(1);"><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(2);"><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(3);"><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>

Add an id attribute to your img tags and give them your id parameter.
<img id="1" ... />
<img id="2" ... />
<img id="3" ... />
In your script you can fetch them with jQuery.
myFunction(id) {
var src = $('#' + id).attr('src');
$('body').html(src);
}
However, there multiple ways to achieve this.

Using onclick attribute you can pass this keyword in myfunction which represents the current element, and then look for the src attribute.
function myfunction(e){
var src = $(e).find('img').attr('src');
alert(src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>
Even though you can achieve the desired outcome, this way of using onclick attributes for Javascript is not a good practice. Javascript developers recommend you should always put javascript entirely in a separate file.
$(document).ready(function(){
$('.thumbnail').on('click', function(){
var src = $(this).find('img').attr('src');
alert(src);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>

scrolling up set of pictures up and down on hover function

I have been working on a portfolio for a small firm that I have. I was planning to have the same function as this one from e-onetime http://eone-time.com/#team do you think this is possible with a gif image. The function that I would like to have is that on hover gif animated 1 time, or should I set multiple images like what they did on their portfolio and let it scroll up and down onclick.
This is a section from my TEAM section in which the static gif and animated gif is located:
<!-- Team Section -->
<section id="team" class="content-section text-center">
<div class="team-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>TEAM</h1>
<HR>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work page-scroll">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
This is the javascript function I have for my team profiler:
</script>
<!--Team JS Function!-->
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div, #pages div").siblings().hide("slow");
$("#pages2 div#" + id + "").toggle("slow");
});
</script>

just animate background-image using css keyframes for a .animated class, and then add this to your javascript:
$('#items a').mouseover(function(){
$(this).toggleClass('animated');
});