Develop Reference

need help removing an IMG and replacing it with text in its position with javascript

Im working on a project and a part of it is making an image disapear on hover, and replace that with text in the same location! I have to do it through javascript.
im very new to front end web development so any help would be great!
.main-img1{
height: 400px;
width: 600px;
margin-top: 80px;
background-size: 600px 400px;
box-shadow: 10px 10px 5px rgb(24, 22, 22);
position: relative;
text-align: center;
font-size: 25px;
color: black;
border-radius: 50px;
}
.img1-text{
display: none;
position: absolute;
bottom: 8px;
left: 150px;
<section class="main-body">
<div>
<img class="main-img1" src="img/automotive.jpg">
<h1 class="img1-text" id="img1text"> Here are some samples of my automotive photography! I specialize in "Rolling Shots" which are caputring a vehicle in motion, while the background and foreground show the motion.</h1>
</div>

You can replace any element using the "magical" outerHTML like this...
First, I gave your image an ID to make javascript operations easier...
<img id="I" class="main-img1" src="img/automotive.jpg">
Now replace the image with a paragraph of text...
I.outerHTML='<p>Well what do you know!</p>';
For easy one-line HTML...
<img onmouseover="this.outerHTML='<p>Well what do you know!</p>';" class="main-img1" src="img/automotive.jpg">

First off, this is a very odd thing to do in Javascript. Usually hover states, appearing and disappearing, etc. are handled by CSS.
to do it in js you have to add a mouseover event listener to the image to execute a function to grab the element you want to disappear, add a css class to apply "display: none" to it, grab the element you want to appear and remove a class that adds "display: none" from it.
assuming you have a 'display-none' class on your text element that applies 'display: none' to it, you can do this:
const image = document.querySelector('.main-image1')
const text = document.querySelector('.img1-text')
image.addEventListener('mouseover', () => {
image.classList.add('display-none')
text.classList.remove('display-none')
}
if you were to do this with css its as simple as
.image {
z-index: 2;
}
.image:hover {
display: none;
}
.text {
z-index: 1;
}
that way the text is set behind the image and when you hover over the image it disappears. This also has the benefit of when you take your cursor off the image for the image to reappear where js will need to be told explicitly to do that.

How to use the :first-of-type rule inside a styled-components/emotion partial?

I'm trying to replicate some CSS in Emotion using Partials but I don't see how it's possible to replicate a rule like :first-of-type in a situation where I'm using a partial. Is there some way to achieve this?
Starting CSS:
li.item {
background: white;
border: 1px solid;
}
li.item.isResult:first-of-type {
background: pink; /* Don't know how to port this rule */
}
Best attempt at porting this rule to Emotion:
import styled from '#emotion/styled';
import { css } from '#emotion/core';
const Item = styled.li`
background: white;
border: 1px solid;
${resultPartial}
`
const resultPartial = props => props.isResult && css`
&:first-of-type {
background: pink; // Has no effect
}
`
PS: Although partials don't seem to be mentioned in Emotion's docs, they are supported and do work. I'm specifically wondering about how to go about recreating a :first-of-type rule inside a partial.

Not a solution, but an explanation why it doesn't work.
const Div = styled.div`
color: black;
&:first-of-type {
color: red;
}
`;
Generates CSS like this:
.HaSh{color: black}
.HaSh:first-of-type{color: red}
However, the CSS spec only allows "type" to be a tag name for first/nth/last/only-of-type. Yet, styled-components relies and must rely on class names to distinguish differently styled div's. Thus, a dead end.
I believe you can work around the limitation (in general) by setting the style on any "parent's child", e.g.:
const Comp = () => <Container><p>1</p><p>2</p></Container>;
const Container = styled.div`
& > *:first-of-type {
color: red;
}
`;

Overwriting transitioned CSS property via JS makes transition stop working

In the example below, I want to change pad's color via JS to green, but also make it transition to yellow when it is active.
However, changing the color via JS like this: pad.style.background = 'green' will make the transition stop working. If I remove this line, the transition will work fine.
Why is that so and how can I fix this?
let pad = document.getElementsByClassName('pad')[0]
pad.style.background = 'green'
.pad{
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
<!DOCTYPE HTML>
<body>
<div class="pad"></div>
</body>

The reason for not working is because pad.style.background will add an inline css style which has a priority over a css class
Solution:
use a class instead of inline style like in the code bellow:
let pad = document.getElementsByClassName('pad')[0]
pad.classList.add("green");
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad.green {
background: green;
}
.pad:active {
background: yellow;
}
<div class="pad"></div>

It seems like JS is adding green to the :active state too.
Add !important to the active style in your css to make it more of a priority:
.pad:active {
background: yellow!important;
}

This is happening because you're overriding the existing style by applying the style via style attribute on the HTML element.
Instead you should create a new class and apply that using JavaScript, in that case the original styles won't be overidden and the transition would still work
Have your CSS as:
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
.pad-green {
background: green;
}
And then in your JavaScript, do this:
let pad = document.getElementsByClassName('pad')[0]
pad.classList.add('pad-green')
Hope that helps, let me know in the comments if there are any questions.

Getting JQuery to create multiple buttons that are styled in a group with CSS

So fair warning, I'm a novice when it comes to most things-JS.
I'm working on a unique project wherein I am customizing the visual appearance of a sub-section of a website for a product my company owns. I cannot alter the HTML code of the pages (for reasons above my pay-grade), so everything I'm adding/changing is being done through a combination of JS and CSS.
My issue is that I have created a series of buttons which I have organized into a group in CSS. I am placing the buttons on the page using JS, with functions for what each button is supposed to do (generally just navigating to a URL), and then further modifying the location of the button group via CSS. I was able to do this easily enough when the buttons were not grouped using CSS, but then I realized I needed the buttons organized seamlessly next to each other, while using the margin-left property to slide the group as a whole to a specific part of the page.
The JS code looks like this:
<script type="text/javascript">
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
}
);
function goHome() {
window.location.href = 'https://www.home-page.org/';
}
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
}
);
function contact() {
window.location.href = 'https://www.home-page.org/contact/';
}
The CSS looks like this:
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
The output result is just generic buttons with no styling, and not on the screen where I want them (they're appended correctly, they just aren't sliding to the right due to the lack of CSS stlying). They function correctly, but that's it.
If I've understood my own code correctly, what's happening is that the JS is creating the buttons, assigning them as the toolbar-btn class, and appending them to the #productToolbar div. They are not receiving the .toolbar-btn CSS styling, because they are a child of the .toolbar-btn-group class.
What I don't know how to do though, is write JS code that will create the group of buttons with the requisite number of buttons that will receive the CSS styling (assuming it's possible).

The easiest solution, assuming this doesn't mess up other layout in the page, would be to add that .toolbar-btn-group class to the container while you're at it:
$(document).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-group'); // <-- here
});
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {
background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar"></div>
If that would cause problems -- i.e. if you don't want some or all of the toolbar-btn-group styling to affect the product toolbar -- you may need to just duplicate the CSS specifically for the product toolbar element:
#productToolbar .toolbar-btn {
display: inline-block;
padding: 15px 25px;
/* ...etc... */
}
Far from ideal, of course, but so's the whole situation. (I sympathize. Been there too.)

Javascript - Adding Class and Style Prescience

I'm trying to make little progress indicators for a form that change depending on the page you are on. I thought the easiest way to do this would be to create the circle ID's, style them, and then just add a class list with one or two stylistic changes to show something different as a specific page was brought up.
When my function executes, the new class with the changes is being added -- the dom is proving that -- but, the style is not overtaking the original.
I've tried classList.Add, classList.toggle, className.add/Classname.toggle. Nothing seems to work.
Why might that be?
function nextPage()
{
var step2 = document.getElementById("step2");
step2.classList.toggle("newClass");
};
#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}
.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>
<br />
<p id="next" onclick="nextPage()">Next</p>

Calculating CSS Specificity Value:
As we know, it was because simply using the class name by itself had a lower specificity value and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were class and ID. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.
For more info https://css-tricks.com/specifics-on-css-specificity/
So, more specificity use Class aswell as IDs.
!importent, also works but it note a good practice.
Hope this will help you..

Your id step2 will always override your class newClass.
Easiest solution is just to change .newClass { ... } to #step2.newClass { ... } in your CSS to make it more specific
function nextPage()
{
var step2 = document.getElementById("step2");
step2.classList.toggle("newClass");
};
#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}
#step2.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>
<br />
<p id="next" onclick="nextPage()">Next</p>