Develop Reference

Image SRC Not Considered A Link Or Not Loading

I am building a small social media site to enhance my skills in HTML CSS & JS, but I have ran into a problem.
I have an <img> in a <button>, and I am trying to change that image onclick() [the button will hide some text under the button].
The problem is that the image will not load. When I click the button, the new image will not load, and when I re-click the image to reload the image that was in the fist place, it won't load either.
The only clue I have is this error massage every time I click the buttton GET file:///C:/Users/emile/Desktop/Mini%20learning%20projects/Social%20App/scripts/iconsarrow-up.webp net::ERR_FILE_NOT_FOUND. This last part net::ERR_FILE_NOT_FOUND is weird because I copied the path of the image.
And when I try to open the image from the console in a new tab, it will tell me Your file couldn’t be accessedIt may have been moved, edited, or deleted. ERR_FILE_NOT_FOUND
Any ideas ?
Here is the code:
function ButtonHide() {
const element = document.getElementById('friend-request-container');
const personnaInfoDiv = document.getElementById('personnal-info');
const sideBarArrowTooltip = document.getElementById('sidebup-arrow-tooltip');
const friendRequestCount = document.getElementById('friend-request-count');
const sidebarArrowImage = document.getElementById('friends-arrow');
if (element.style.display === 'none') {
element.style.display = 'inline-block';
document.getElementById("personnal-info").style.marginBottom = "0px";
sideBarArrowTooltip.innerHTML = 'Hide Requests';
sidebarArrowImage.src = 'icons\arrow-up.webp';
} else {
element.style.display = 'none';
friendRequestCount.style = 'display: inline-block; position: absolute; top: 0px; width: 200px;';
document.getElementById("personnal-info").style.marginBottom = "15px";
sideBarArrowTooltip .innerHTML = 'Show Requests';
sidebarArrowImage.src = 'icons\vector-down-arrow.png';
}
}
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
width: 372px;
margin-left: 20px;
margin-right: 30px;
}
.sidebar-top-container {
border-bottom: solid 2px rgb(199, 199, 199);;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 223px;
font-family: Roboto, Arial;
font-weight: bold;
margin-bottom: 50px;
}
.personnal-info,
.friend-request-container {
position: relative;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
position: absolute;
top: -8px;
margin-left: 2px;
}
.up-arrow {
width: 25px;
position: absolute;
top: 7.5px;
display: inline-block;
margin-bottom: 5px;
}
.friend-request-container {
margin-top: 10px;
}
.friend-request-image {
display: inline-block;
height: 46px;
border-radius: 23px;
margin-left: -9px;
}
.friend-request-count {
display: inline-block;
position: absolute;
top: 0px;
}
.sidebar-container {
display: inline-block;
margin-left: 190px;
width: 30px;
height: 30px;
}
.name-and-profile {
position: relative;
}
.up-arrow {
position: absolute;
top: -26px;
}
.name-and-profile {
position: relative;
}
.hide-requests-button{
background-color: transparent;
display: inline-block;
border: none;
height: 35px;
width: 35px;
padding: 4px;
border-radius: 22px;
margin-bottom: 85px;
margin-top: 4px;
margin-left: 308px;
padding-right: 30px;
padding-left: 5px;
cursor: pointer;
margin-top: 26.5px;
}
.hide-requests-button:hover {
background-color: rgb(215, 215, 215);
}
.hide-requests-button:active {
background-color: rgb(180, 180, 180);
}
.friend-request-count {
font-size: 15px;
font-weight: bold;
font-family: Roboto, Arial;
color: rgb(118, 118, 118);
}
.sidebar-container .tooltip {
margin-left: 300px;
}
.sidebar-container .tooltip {
z-index: 200;
}
.sidebar-container:hover .tooltip{
opacity: 1;
}
.sidebar-container .tooltip {
font-family: Roboto, Arial;
position: absolute;
background-color: gray;
color: white;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
font-size: 12px;
bottom: -30px;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
white-space: nowrap;
}
.sidebar-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}
<div class="sidebar">
<div class="sidebar-top-container">
<div class="sidebar-heading">
<h1 class="home">Home</h1>
<a class="create-button" href="C:\Users\emile\Desktop\Mini learning projects\Social App\scripts\Home Page.html">Create</a>
</div>
<div class="personnal-info" style="height: 32px;" id="personnal-info">
<div class="name-and-profile">
<img class="sidebar-profile-picture" src="C:\Users\emile\Desktop\New HTML Course\icons\my profile.jpg">
<p class="my-user-name">Emile Feghali</p>
</div>
<div class="sidebar-container">
<button class="hide-requests-button" onclick="ButtonHide()">
<img class="up-arrow" id="friends-arrow" src="C:\Users\emile\Desktop\New HTML Course\icons\arrow-up.webp">
</button>
<div class="tooltip" id="sidebup-arrow-tooltip">Hide Requests</div>
</div>
</div>
<div class="friend-request-container" id="friend-request-container">
<img class="friend-request-image" src="C:\Users\emile\Desktop\New HTML Course\icons\add-friends-image.jpg">
<p class="friend-request-count" id="friend-request-count">2 pending friend requests</p>
</div>
</div>

input values not displaying

I have two input tags within my html but it doesn't allow me to input anything within them. I have no idea what it could be the values of the input when you click on them aren't clickable. If you would paste my code into your IDE or whatever you use try to replicate my issue. Nothing is able to input into the values I am not sure if it has to do with some of the css I have implemented or what.
body {
margin: 0;
padding: 0;
}
#box1 {
height: 100vh;
width: 100%;
background-image: url(http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-coffee-cup-glasses-macbook.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#backgroundnav {
/*background-color: #ADD8E6;*/
background-color: #989898;
height: 50px;
margin-top: -15px;
padding: 30px;
}
#content {
height: 600px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: white;
text-decoration: none;
cursor: pointer;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
#content h1 {
font-family: 'Cabin';
font-size: 50px;
font-weight: bold;
margin-top: -10px;
color: black;
}
#content p {
font-size: 20px;
}
img {
text-align: center;
}
#left {
height: 450px;
width: 50%;
background-color: #989898;
float: left;
display: table-cell;
position: relative;
bottom: 130px;
font-size: 30px;
}
#right {
float: right;
height: 450px;
width: 50%;
background-color: #D2B48C;
display: table-cell;
position: relative;
bottom: 130px;
font-family: 'Raleway';
font-size: 30px;
}
#middle {
height: 80%;
}
ol li {
font-size: 40px;
color: white;
}
hr {
width: 115px;
color: #989898;
}
h1 {
font-size: 50px;
color: white;
vertical-align: middle;
font-family: 'Raleway';
text-align: center;
}
#wrap {
position: relative;
top: 250px;
}
#about h1 {
text-align: center;
position: relative;
top: 50px;
font-family: 'Raleway';
color: steelblue;
}
#aboutleft {
padding: 20px;
line-height: 25px;
margin-left: 400px;
margin-right: 400px;
position: relative;
right: 350px;
top: 20px;
font-family: 'Open Sans';
}
#aboutright {
padding: 20px;
line-height: 25px;
margin-left: 400px;
margin-right: 400px;
position: relative;
left: 350px;
bottom: 285px;
font-family: 'Open Sans';
}
#hr1 {
position: relative;
top: 20px;
width: 200px;
}
#projects h1 {
color: black;
}
#projects {
background-color: #99C4D2;
height: 1300px;
}
.align {
position: relative;
left: 129px;
bottom: 50px;
}
figure {
float: left;
width: 500px;
padding-bottom: 10px;
background-color: #EAEAEA;
}
figcaption {
text-align: center;
font-style: italic;
font-family: serif;
}
#projects h1 {
position: relative;
bottom: 70px;
}
#contact {
background-color: steelblue;
height: 700px;
}
form {
padding: 20px;
position: relative;
left: 130px;
top: 110px;
}
label {
font-size: 20px;
font-family: 'Roboto Slab';
width: 50px;
padding: 20px;
}
input {
height: 20px;
width: 200px;
}
fieldset {
background-color: white;
width: 75%;
padding: 25px;
margin-bottom: 15px;
}
legend {
position: relative;
bottom: 20px;
right: 9px;
font-size: 24px;
text-transform: uppercase;
}
h2 {
text-align: center;
font-size: 40px;
}
<body>
<div id="backgroundnav">
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="box1">
<div id="wrap">
<h1>Peter Nguyen</h1>
<hr>
<h1>Web Developer</h1>
</div>
</div>
<div id="color">
<div id="content">
<section id="about">
<h1 id="about">About Me</h1>
<hr id="hr1">
<p id="aboutleft">My names Peter and learning how to code and persuing it in education was one of the best decisions I have made. When I am not at work coding and solving complex web application issues, I am at home learning the latest and greatest frameworks.
One of the best feelings is knowing that you solved an issue. I am extremly easy to get along with and easy to work with which would make me a great addition to any team. Web development is more than just a hobby and career path for me its a
passion and a way for me to get creative and think outside of the box!
</p>
<p id="aboutright">What else do I do besides code? I enjoy barbequing, lifting weights, being outdoors. I am also secretely a nerd so I enjoy playing video games, and reading books. Did I also mention that I enjoy playing ping pong? I was born in California and
lated move out to Arizona as a young kid growing up. As a kid I had a very high interest in computers and always wondered about the person who created every component a computer has. I beilive that is why to this day I am so intrigued by development.
</p>
</section>
</div>
<div id="left">
<h1>Place holder content for future case projects</h1>
<input type="text" id="case1">
<input type="text" id="case1x">
</div>
<div id="right">
<h1>Place holcer content for future case projects</h1>
<input type="number" name="">
</div>
</div>
<div id="projects">
<h1>Projects</h1>
<figure id="link" class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Guessing game created with JavaScript
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay kayak
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay Waterfalls
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay Cave
</figcaption>
</figure>
</div>

Your problem is differently in css. Open your page in browser then try to inspect input box - you will see that it overlapped by h1 tag. So fix the sizing of h1 -and you will get your input work.

You are making your H1 position relative. In fact, you have a lot of excess relative positioning going on in your CSS. The H1 tag is huge and overlapping most of your page

slideshow of images and keeping a text on it all the time

I have to make a slideshow of images based on my this jsfiddle. I need to have three more images just after this image which is already there in my jsfiddle. So I will have three more images and three dots at the bottom border of the image and if I click those dots, it should show other image and I want to keep BESPOKE INSURANCE SOLUTIONS text on top of my slideshow.
I tried integrating this w3schools example but my original jsfiddle is getting messed up and it is not working at all. Here is my updated jsfiddle and as you can see it is messed up. What is the best way to solve this?
Below is my code:
<div class="header">
<div class="header-background">
<img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
</div>
<div class="orange-bar">
<img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
</div>
Here is my CSS:
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
top: -430px;
left: -160px;
}
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.8);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li.home {
position: relative;
right: 40px;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
left: 15px;
position: relative;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
font-style: italic;
font-size: 10px;
position: relative;
left: 20px;
top: 5px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
top: 3px;
font-size: 12px;
position: relative;
left: 35px;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.login-signup {
padding-top: 30px !important;
position: relative;
left: -35px;
}
li.insurance {
padding-top: 30px !important;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header h1 {
padding-left: 110px;
color: white;
text-align: center;
font-size: 25px;
left: -175px;
letter-spacing: .300em;
position: relative;
top: -613px;
font-family: "AvantGarde";
text-transform: uppercase;
}

This is my way. You should create a div contain BESPOKE INSURANCE SOLUTIONS, set position: absolute, align: top left. It's keep text no changes.

Resize iframe to loaded content

I want to load content in the iframe and make it resize its height according to the content. All the pages are in the same domain. I tried some scripts I found, but nothing worked. Most of the times, it just opens the loaded content in a new tab.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav">Home The Band
News Gallery
Contact</div> <div id="content"></div>
<iframe id="frame"></iframe>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
font-weight: bolder;
font-variant: normal;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
#frame {
position: absolute;
top: 200px;
bottom: 40px;
width: 800px;
border: none;
left: 120px;
height: auto;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}

you could try to get the height after iframe is loaded , and change it with jquery
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}

OK Button does not get added dynamically to div, even when called

I can't seem to able to figure this out using javascript, I want to dynamically add an 'ok' button to my custom alertbox but, it seems that when it is called, it does not appear. I am at a lost. I am unsure as to what I am doing wrong:
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
visibility: hidden;
}
#alertBox_container {
background: rgb(212,208,200);
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#alertBox_titlebar {
height: 22px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
font-weight: bold;
}
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top:27px;`
}
#alertBox_div_btn {
position: relative;
height: auto;
text-align: center;
border: none;
margin-top: 7px;
visibility: hidden;
}
#button_ok {
border: 1px solid rgb(88,88,88);
font-family: tahoma;
font-size: 8pt;
height: 22px;
width: 35px;
}
</style>
<script type="text/javascript">
//alertBox('text','ok')
function alertBox(text,x) {
if (x == 'ok') {
document.getElementById('alertBox_div_btn').innerHTML = '<input id="button_ok" type="button" value="OK" onclick="alertBox_hide()">'
}
document.getElementById('alertBox_text').innerHTML = text
document.getElementById('alertBox').style.visibility = 'visible'
}
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
</head>
<body onload="alertBox('this is a test','ok')">
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text">This is some sample text that will appear here</div>
<div id="alertBox_div_btn"></div>
</div>
</div>
</div>
</body>
</html>

Your css, specifically #alertBox_div_btn, is setting the visibility of the div that contains the button to hidden.