We Keep Coding

Rearrange children orger in Javascript doesn't work multiple times

I've got the following code to move the childs order in an element. When I click once, it works fine, but when I click multiple times, it only works every 2nd or 3rd time.
const prevP = () => {
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
const lastProject = pList.lastChild;
pList.insertBefore(lastProject, firstProject);
}
const nextP = () => {
console.log("next");
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
let lastProject = pList.lastChild;
pList.insertBefore(firstProject, lastProject);
}
<span class="material-icons md-48 close icon-btn" onclick="prevP()"
>navigate_before</span
>
<div class="project-list" id="project-list">
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 1</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 2</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 3</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 4</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 5</p>
</div>
</div>
<span class="material-icons md-48 close icon-btn" onclick="nextP()"
>navigate_next</span
>
I also realised that sometimes the code messes up the order of the elements when using both buttons, and I have no idea why this is happening

The cause of that behaviour is that you use firstChild and lastChild. These may select text nodes with just some white space. Change these to firstElementChild and lastElementChild.
Secondly, the "Next" action should not insert the first element before the last element, but after it. For that you can use the method appendChild:
pList.appendChild(firstProject);

Image appear when hover the text (html bootstrap)

I'm coding my website with bootstrap (to make it responsive, and it's easier to update for me) and I'd like image to display when I over a text.
here's the code:
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
I would like the ihp_poster01.JPG image to appear when I hover "INSTITUT HENRI POINCARRE, POSTER — 2017". I've tried multiple things which didn't worked because the img and the text are not in the same <div>.
I guess I'll have to use Javascript, but I didn't found any JS for that :/
Can someone help me?
thanks

You can use mouseenter & mouseleave events (using JavaScript of course) on text and toggle the display style of image accordingly...
window.onload = function() {
var name = document.getElementById("name");
var image = document.getElementById("img");
name.addEventListener("mouseenter", function( event ) {
image.style.display = "block";
});
name.addEventListener("mouseleave", function( event ) {
image.style.display = "none";
});
}
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="img" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
Update: To make this dynamic and handle different text with different images one can use onmouseenter & onmouseleave with common JS function, have a look at the snippet below:
function toggleShow(elementId) {
let el = document.getElementById(elementId);
el.style.display = "block";
}
function toggleHide(elementId) {
let el = document.getElementById(elementId);
el.style.display = "none";
}
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="image1" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="image2" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>

Inherit href destination from <a> to <img> tag using Vanilla JavaScript

I have a number of divs that possess the same className (.sampleClass) of which contain both an a and img element. I have managed to inherit the href value from a to img, however, due to these elements residing inside divs with the same className, the href inheritance is applied to all img elements using only the first href value of a identified inside of a div with .sampleClass.
HTML before JavaScript:
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" />
<p>text</p>
<a><span>text</span></a>
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" />
<p>text</p>
<a><span>text</span></a>
</div>
The following JavaScript (vanilla) was used:
var aHref = document.querySelector(".sampleClass > a").getAttribute("href");
var img = document.querySelectorAll("img"); /* or (".sampleClass > img") */
img.forEach(function(inheritHrefImg) {
inheritHrefImg.setAttribute("href", aHref);
})
HTML after JavaScript:
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" href="example.html" /> /* this is correct */
<p>text</p>
<a><span>text</span></a>
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" href="example.html" /> /* want href to be "random.html" */
<p>text</p>
<a><span>text</span></a>
</div>
I need a way to indicate img elements to only target the href of the a element within the div of which both that img and a resides.
Thanks in advance!
NOTE: Unfortunately giving an individual className to each div, although a solution, is not an option.

Just loop over the divs instead. Also note that your example is missing the first </div> end tag, I presume:
document.querySelectorAll('.sampleClass')
.forEach(sampleClass => {
sampleClass.children[1].setAttribute('href', sampleClass.children[0].children[0].getAttribute('href'));
});
console.log(document.body.innerHTML);
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" />
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" />
</div>
But imgs should not have hrefs, I don't know what that's supposed to do; it would be much more elegant to simply enclose them in another dynamically created a, like this:
document.querySelectorAll('.sampleClass')
.forEach(sampleClass => {
const { href } = sampleClass.children[0].children[0];
const img = sampleClass.children[1];
img.remove();
const newA = document.createElement('a');
newA.href = href;
newA.appendChild(img);
const newAinsert = sampleClass.insertBefore(newA, sampleClass.children[1]);
});
console.log(document.body.innerHTML);
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" />
<p>text</p>
<span>text</span>
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" />
<p>text</p>
<span>text</span>
</div>

I'm not sure how a href attribute on an img tag will help.. But one way you can do this is by querying for the parent divs and operating on it's children in a for loop.
Note: If you are using that href attribute on the img tag programmatically through JS, it may be better to make it a data-* attribute..
Sample:
var divs = document.querySelectorAll('.sampleClass');
divs.forEach(function(div) {
var aTag = div.querySelector('a');
var iTag = div.querySelector('img');
if (!aTag || !iTag) {
// This div does not have an image or anchor tag, skip
return;
}
iTag.setAttribute('href', aTag.href);
});
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" />
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" />
</div>

Set multiple html tags with same structure to height of the next div

I have a webpage that has multiple elements with the same structure:
<img class="rollover" src="http://www.example.com/images/rollover.png"/>
<div class="text">
<h3>Example 1</h3>
</div>
<img class="rollover" src="http://www.example.com/images/rollover.png"/>
<div class="text">
<h1>Example 2</h1>
</div>
I want to set the height of the img tags with class="rollover" to the same height as the next div with class="text". There can be one or more of these appearing on the page. I have some basic jquery that can set the heights equal, but it sets all of the images to the same height. How can I adjust it so that it just takes the next div's height?
$('.rollover').height($('.text').height());

This works if there are always corresponding imgs and text-divs as in your code shown.
var txt = $('.text');
$('.rollover').each(function(i) {$(this).height(txt.eq(i).height());});

try this :
var x = $(".rollover").length;
for(var i=1; i<=x; i++)
{
var h = $(".rollover:nth-child('+i+'").next(".text").height();
$(".rollover:nth-child('+i+').height(h);
}

You may put each pair of img and div inside a new div element. This will improve the readability of the code...
<div class="eaqualHeight">
<img class="rollover" src="http://www.example.com/images/rollover.png"/>
<div class="text">
<h3>Example 1</h3>
</div>
</div>
<div class="eaqualHeight">
<img class="rollover" src="http://www.example.com/images/rollover.png"/>
<div class="text">
<h1>Example 2</h1>
</div>
</div>
And then use following jquery code...
$('.eaqualHeight').each(function(){
$(this).children('.rollover').height($(this).children('.text').height());
});

Programmatically apply the image alt attribue as a class to parent element

I want to add as a class the image alt attribute to its container element. Markup:
<div class="field-group-our-people">
<div class="field-items even>
<img alt="John">
</div>
<div class="field-items odd>
<img alt="Kevin">
</div>
<div class="field-items even>
<img alt="Kate">
</div>
<div class="field-items odd>
<img alt="Martin">
</div>
</div>
To be like this:
<div class="field-group-our-people">
<div class="field-items even john>
<img alt="John">
</div>
<div class="field-items odd kevin>
<img alt="Kevin">
</div>
<div class="field-items even kate>
<img alt="Kate">
</div>
<div class="field-items odd martin>
<img alt="Martin">
</div>
</div>
My Jquery code(but not working):
//Add the image alt attribute as class for individual styling
$('.group_our_people .field-item').each(function() {
var att = $('.group_our_people .field-item img').attr('alt');
$(this).addClass(att);
});
What is wrong/missing in my code?

You should get the img that is child of the current div (on iteration):
var att = $(this).find('img').attr('alt');
The way you're doing (i.e. repeating the selector), you end up retrieving multiple values, and only the first one is taken into account. So, every div will get its class: "John".

$('.field-group-our-people .field-items img').each(function() {
$(this).parent().addClass( $(this).attr('alt') );
});

$('div.field-group_our_people div[class^=".field-items"] img').each(function()
{
var att = $(this).attr('alt');
$(this).parent().addClass(att);
});