Weird artefacts when moving text - javascript

HTML
I need help, so I have this button (has no text yet) and when its hovered, a css zoom happens with transitions, however the text below it has to move. When this happens it leaves behind this weird trail. Surprisingly it does not show in the code snippet insert tool.
Video:
https://youtu.be/-gh7mJxFz8o
//Game List
console.log(document.getElementById('close3').style.display);
function showGameList(){
document.getElementById("gameList").style.display= "block";
document.getElementById("close1").style.display = "none";
document.getElementById("close2").style.display = "none";
document.getElementById("close3").style.display = "none";
}
function closeGameList(){
document.getElementById("gameList").style.display= "none";
document.getElementById("close1").style.display = "block";
document.getElementById("close2").style.display = "block";
document.getElementById("close3").style.display = "inline";
}
/*fonts*/
#import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
/*general*/
html{
max-width: 100vw;
min-width: 100vw;
width: 100vw;
overflow-x: hidden;
height: auto;
}
body{
width: 100%;
min-height: 100vh;
height: auto;
background-color: black;
color: white;
text-decoration: none;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
margin: 0;
}
/*Navbar*/
#nav{
width: 100%;
background-color: black;
position: fixed;
border-bottom: 5px solid gold;
top: 0%;
padding: none;
}
#navLink{
text-decoration: none;
display: inline-block;
width: 22%;
padding: 1%;
transition: 0.5s;
text-align: center;
color: white;
}
#navLink:hover{
background-color: gold;
color: black;
}
#navLinkActive{
text-decoration: none;
display: inline-block;
width: 22.5%;
padding: 1%;
transition: 0.5s;
text-align: center;
color: black;
background-color: gold;
}
/*Home page*/
#page{
height: auto;
width: auto;
text-align: center;
}
.joinButton{
background-color: rgba(0,0,0,0.5);
border: 5px solid gold;
color: white;
padding: 20px;
text-align: center;
border-radius: 15px;
transition: 0.5s;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.joinButton:hover{
background-color: rgba(255,215,0,0.5);
zoom: 1.25;
}
#homePageBody{
height: 40vh;
padding-top: 15vh;
padding-bottom: 15vh;
}
#homePageBodySpecial{
height: auto;
padding-top: 15vh;
padding-bottom: 15vh;
}
#homePageBody p{
font-size: 20px;
}
.homePageBody1{
padding-top: 15vh;
margin-top: 5vh;
background-repeat: none;
background-size: cover;
background-position: center;
background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('assets/images/backgrounds/background1.png');
}
.homePageBody2{
margin-top: 1vh;
height: auto;
min-height: 40vh;
background-repeat: none;
background-position: center;
background-size: cover;
background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('assets/images/backgrounds/background2.png');
}
/* Game List */
#gameList{
display: none;
border: 5px solid gold;
border-radius: 5%;
width: 40vw;
padding:2.5vw;
margin-left: auto;
margin-right: auto;
background-color: rgba(0,0,0,0.5);
transition: 1s;
margin-bottom: 40px;
}
#gameListItem{
width: 30%;
display: inline-block;
height: auto;
}
#gameListItemImg{
width: 30%;
}
#closeButtonSmall{
width: 30px;
border-radius: 50%;
border:none;
text-align: center;
top: 2.5%;
right: 2.5%;
position: relative;
background-color: transparent;
color: white;
}
#gameListItemFullWidth{
width: 100%;
}
#counter1{
}
/*Animations*/
<!DOCTYPE html>
<html>
<head>
<title>AUG</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<!-- Navbar -->
<div id="nav">
<div id="navItemActive">Home</div>
<div id="navItem">About</div>
<div id="navItem">Join</div>
<div id="navItem">User Center</div>
</div>
<!-- Main Body -->
<div id="page">
<div id="homePageBody" class="homePageBody1">
<h1>Aussie Games</h1><br>
<p>Description</p>
<button class="joinButton"></button><br>
<h2>Current Member Count</h2>
<h3>28</h3>
</div>
<div id="homePageBodySpecial" class="homePageBody2">
<h2 id="close1">What we offer</h2><br>
<p id="close2">We offer great, inclusive communities, and competent staff for many of the games you know.</p>
<button id="close3" class="joinButton" onclick="showGameList()">What do we offer</button>
<div id="gameList" onclick="closeGameList()">
<div id="gameListItemFullWidth"><p>Click window to close</p></div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/FL.png">
<p>Flashing Lights</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/GM.png">
<p>Garry's Mod</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/IF.png">
<p>Infinite Flight</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/KSP.png">
<p>Kerbal Space Program</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/MC.png">
<p>Minecraft</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/P2.png">
<p>Payday 2</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/RB.png">
<p>Roblox</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/SM.png">
<p>Surving Mars</p>
</div>
<div id="gameListItem">
<img id="gameListItemImg" src="assets/images/gameIcons/TF.png">
<p>Team Fortress</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Related

How to place the top left of a div element to the top right of a button?

I am trying to place the top right of the div element friend_info to the top left of the button friend_button.
I have tried to use the code from https://javascript.info/coordinates#element-coordinates-getboundingclientrect but to no avail and I also tried to use this code:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.friend_info').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
> });
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
> });
but the div element disdplays in the middle of the button instead of the left hand side. Here is the html and css for the code I am working on.
HTML:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<div class="header">
<h1 class="Search_Media">Search Media</h1>
<div class="navigationbar">
<form>
<input type="text" placeholder="Search...">
<input type="submit" value="Search">
</form>
</div>
</div>
<br />
<div class="middle">
<div class="headings">
<a class="active" href="Main_Page.html">Home</a>
Messages
Friends
User page
</div>
<div class="friends">
<h2>Friends</h2>
<button type="button" class="friend-button" id="friend-button">
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend1</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info">
<video autoplay muted loop class="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend1</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-5">
<p class="info">Phone Number: 07914836605</p>
<p class="info">Name: Joe</p>
<p class="info">Surname: Smith</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 14/02/2003</p>
</div>
</div>
</div>
</div>
</div>
<div class="middle-grid">
<div class="user-post">
Create post:<br>
<form>
<textarea id="create_post" rows="10" cols = "50"></textarea><br>
<input type="submit" class="post-button" value="Post">
</form>
</div>
<div class="posts">
<div class="post">
<h3 id="existing_posts"><img src="default-pic.png" class="profile-pic" alt="Default Picture" width="50" height="50">Posts</h3>
<p>This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
<div class="options">
Like
Comment
Report
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<button onclick="topFunction()" id="myBtn" title="Go To Top">Top</button>
</div>
<script src="Main_Page.js"></script>
</body>
</html>
CSS:
body{
background-color: black;
color: white;
}
.Search_Media{
position: fixed;
top: 0px;
left: 0%;
padding: 10px;
width: 100%;
background-color: aqua;
z-index: 0;
color: black;
margin-top: 0px;
}
.Search-media{
text-decoration: none;
color: black;
}
.Search-media:hover{
text-decoration: none;
color: black;
}
.navigationbar{
background-color: aqua;
width: auto;
position: fixed;
padding-top:15px;
left: 50%;
margin-left: -88.5px;
color: black;
}
.headings{
left:20.17%;
height: 100;
width: 200;
position: fixed;
margin-top: 40px;
background-color: black;
}
.headings a{
padding: 6px 0px 6px 0px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
}
.headings a:hover{
color: black;
background-color: aqua;
}
.headings a.active{
background-color: aqua;
color: black;
}
.friend-button{
width: 90%;
margin-bottom: 1px;
background-color: black;
color: white;
cursor: pointer;
border-radius: 5px;
}
.friend-button:hover{
background-color: aqua;
color: black;
}
.middle{
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 10px;
margin: 0% auto;
width: 75%;
height: auto;
text-align: center;
}
.middle-grid{
border-right: 1px solid white;
border-left: 1px solid white;
padding-top: 37px;
width: 50%;
}
.user-post{
width: auto;
margin: 0% auto;
}
.post-button{
margin: 0% auto;
color: black;
padding-right: 50;
padding-left: 50;
padding-top: 5;
padding-bottom: 5;
}
textarea{
resize: none;
color: black;
}
h3{
margin-top: 5px;
margin-bottom: 1px;
}
.posts{
width:75%;
text-align: left;
padding:10px;
margin-left: auto;
margin-right:auto;
}
.post{
padding-bottom: 20px;
}
.post:nth-child(odd){
color: black;
background-color: lightblue;
z-index: 2;
}
.post p{
margin-top: 5px;
}
.options{
float: right;
}
.options .report{
color: red;
}
h2{
margin-top: auto;
margin-bottom: auto;
}
.friends{
position: fixed;
right: 10%;
margin-top: 70px;
padding: 0px;
margin-bottom: auto;
border: 1px solid white;
width: 15%;
overflow-y: scroll;
top: 0;
bottom: 0;
}
.media-body{
text-align: left;
}
h5{
font-size: 20;
margin-bottom: 2px;
}
#myBtn {
display: none;
position: fixed;
top: 95%;
left: 50%;
margin: 0% auto;
transform: translate(-50%, -50%);
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: darkred;
}
.friend_info{
display: none;
position: fixed;
width: 20vw;
height: 20vh;
text-align: center;
left: 0px;
right:0px;
top: 0px;
}
.backgroundInfo{
position: inherit;
z-index: -99;
max-width: 800px;
max-height: 600px;
left: inherit;
top: inherit;
}
.d-flex{
color: white;
}
.Friend_Name{
padding: 0px;
margin: 0px;
font-size: 60px;
}
h5{
font-size: 30px;
}
.info{
font-size: 20px;
}
.p-5{
border: 0%;
width: auto;
height: 0px;
bottom: 0px;
left: 0px;
top: 0px;
border-width: 0px;
padding: 2rem !important;
}

I had the correct idea, but wrong execution. The correct javascript is the following:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.backgroundInfo').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
});
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
});
Notice how I changed which element I got the width off. I changed it to the backgroud width and now displays just how I want.

How to move a search icon to the right of the search bar in HTML?

So this is all the code for a website I'm making and I have a search bar in my nav section. I wanted to include an icon from Font Awesome and I've added this in there, but I can't seem to place it in the correct place, which is next to the search bar on the right. Is there any way I can fix this? Some help would be greatly appreciated :)
As follows is the Javascript, CSS and HTML code for the website.
function AboutHover() {
document.getElementById('about-button').firstElementChild.style.fontWeight = "bold";
}
function AboutNormal() {
document.getElementById('about-button').firstElementChild.style.fontWeight = "normal";
}
function GalleryHover() {
document.getElementById('gallery-button').firstElementChild.style.fontWeight = "bold";
}
function GalleryNormal() {
document.getElementById('gallery-button').firstElementChild.style.fontWeight = "normal";
}
function ContactHover() {
document.getElementById('contact-button').firstElementChild.style.fontWeight = "bold";
}
function ContactNormal() {
document.getElementById('contact-button').firstElementChild.style.fontWeight = "normal";
}
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 1.5%;
}
header{
background:rgb(241, 200, 203);
position: relative;
overflow: hidden;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 9%;
height: 5.4%;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 6.3%;
padding-top: 1.8%;
font-size: 112.5%;
position: relative;
}
nav input[type=text]{
float: right;
margin-top: 2%;
background-color: transparent;
color: rgb(95, 62, 64);
font-size: 112.5%;
border: none;
border-bottom: solid 2px black;
margin-right: 10%;
}
nav input::placeholder{
color: rgb(95, 62, 64);
font-family: 'Work Sans', sans-serif;
}
nav i{
float: right;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 10%;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 0.8%;
width: 30%;
background-color: rgba(255, 255, 255, 0.1);
border: 10px double rgb(240, 178, 182);
margin-left: 2.5%;
margin-right: auto;
margin-bottom: auto;
display: block;
position: absolute;
margin-top: 2.5%;
}
h1{
text-align: center;
font-size: 406.25%;
color:rgb(0, 0, 0, .7);
}
.first-block{
height: 12%;
background-color:rgb(241, 200, 203);
text-align: center;
border: 10px double white;
padding-top: 1.6%;
padding-bottom: 3.8%;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 250%;
text-align: center;
color: rgb(199, 127, 131);
font-weight: 500;
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.about-box{
width: 32%;
height: 40%;
background-color: rgba(241, 200, 203, 0.7);
position: absolute;
margin-top: 15%;
margin-left: 3.8%;
margin-right: auto;
margin-bottom: auto;
display: block;
border-radius: 10px;
padding: 1.35%;
}
h4{
font-size: 312%;
text-align: center;
font-weight: 300;
margin-top: 7%;
margin-bottom: 10%;
color:rgb(126, 81, 83);
}
.about-box p, .gallery-box p, .contact-box p{
font-size: 125%;
text-align: center;
color:rgb(95, 62, 64);
}
.about-box-two{
width: 92%;
height: 45%;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 0%;
display: block;
border-radius: 10px;
}
.about-button{
width: 25%;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 21%;
margin-left: 102%;
display: block;
padding: 20px;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.about-button a, .gallery-button a, .contact-button a{
font-size: 156.25%;
text-decoration: none;
text-transform: uppercase;
color: rgb(126, 81, 83);
}
.far{
padding-left: 20px;
padding-bottom: 2px;
}
.bg-three{
background-image: url("bg-three.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.gallery-box{
width: 30%;
height: 40%;
background-color: rgba(241, 200, 203, .7);
position: absolute;
margin-top: 15%;
margin-left: 65%;
margin-bottom: auto;
display: block;
border-radius: 10px;
}
.gallery-box-two{
width: 91%;
height: 45%;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 3.5%;
display: block;
border-radius: 10px;
padding: 1%;
}
.gallery-button{
width: auto;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 30.55%;
margin-left: 50%;
display: block;
padding: 1.2%;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.bg-four{
background-image: url("bg-four.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.contact-box{
width: 36%;
height: 35%;
background-color: rgba(241, 200, 203, 0.7);
position: absolute;
margin-top: 16%;
margin-left: 3%;
margin-right: auto;
margin-bottom: auto;
display: block;
border-radius: 10px;
}
.contact-box-two{
width: 93%;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 3.4%;
margin-bottom: 15%;
display: block;
border-radius: 10px;
}
.contact-button{
width: auto;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 28.8%;
margin-left: 630px;
display: block;
padding: 20px;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.footer{
height: 20%;
text-align: center;
background-color: rgb(241, 200, 203);
position: relative;
}
#media screen and (max-width: 768px) {
h1{
font-size: 312%;
}
a{
font-size: 80%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>New York - The City That Never Sleeps</title>
<link rel="stylesheet" href="main.css">
<script src="app.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
<input type="text" placeholder="Search" >
</ul>
<i class="fas fa-search"></i>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two">
<div class="about-box">
<h4>ABOUT</h4>
<div class="about-box-two">
<p> Well-known for its attractive landscapes and environment, New York attracts more than 67 million visitors every year.
<br>Click on the button to explore New York's finest attractions and landmarks in the 'About' page!</br>
</p>
</div>
<div class="about-button" id="about-button" onmouseover="AboutHover()" onmouseout="AboutNormal()">
ABOUT<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
</div>
<div style="width:auto; height: 20px; background-color: rgb(241, 200, 203, .7);"></div>
<div class ="bg-three">
<div class="gallery-box">
<h4>GALLERY</h4>
<div class= "gallery-box-two">
<p>Take a peek into some first-hand images taken by tourists in New York.
<br>Click on the button to discover New York's beautiful features...</br></p>
</div>
</div>
<div class= "gallery-button" id="gallery-button" onmouseover="GalleryHover()" onmouseout="GalleryNormal()">
GALLERY<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<div style="width: auto; height: 20px; background-color: rgba(241, 200, 203, .7);"></div>
<div class="bg-four">
<div class = "contact-box">
<h4>CONTACT</h4>
<div class = "contact-box-two">
<p>To find out the places where you can experience the best of New York, click on the button!</p>
</div>
</div>
<div class = "contact-button" id="contact-button" onmouseover="ContactHover()" onmouseout="ContactNormal()">
CONTACT<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<div class="footer">
<p> </p>
</div>
</body>
</html>
What the header currently looks like

There are a few ways to do this, but going off the code you already have, I will suggest just a few tweaks that should make this possible:
Take the input out of the <ul> in your nav. Since it isn't in a <li> tag, it is actually invalid html to do it that way
Put a <div> after the <ul> and place the <input> and the icon inside it
Adjust the css so that the float: right; is on your <div> instead of on the input and i elements. Also move any spacing related styles onto the div
In the example below, I gave the new div a class of .search and moved some styles on to it from your input. I also removed the float from the icon style.
function AboutHover() {
document.getElementById('about-button').firstElementChild.style.fontWeight = "bold";
}
function AboutNormal() {
document.getElementById('about-button').firstElementChild.style.fontWeight = "normal";
}
function GalleryHover() {
document.getElementById('gallery-button').firstElementChild.style.fontWeight = "bold";
}
function GalleryNormal() {
document.getElementById('gallery-button').firstElementChild.style.fontWeight = "normal";
}
function ContactHover() {
document.getElementById('contact-button').firstElementChild.style.fontWeight = "bold";
}
function ContactNormal() {
document.getElementById('contact-button').firstElementChild.style.fontWeight = "normal";
}
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 1.5%;
}
header{
background:rgb(241, 200, 203);
position: relative;
overflow: hidden;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 9%;
height: 5.4%;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 6.3%;
padding-top: 1.8%;
font-size: 112.5%;
position: relative;
}
nav .search{
float: right;
margin-top: 2%;
margin-right: 10%;
}
nav input[type=text]{
background-color: transparent;
color: rgb(95, 62, 64);
font-size: 112.5%;
border: none;
border-bottom: solid 2px black;
}
nav input::placeholder{
color: rgb(95, 62, 64);
font-family: 'Work Sans', sans-serif;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 10%;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 0.8%;
width: 30%;
background-color: rgba(255, 255, 255, 0.1);
border: 10px double rgb(240, 178, 182);
margin-left: 2.5%;
margin-right: auto;
margin-bottom: auto;
display: block;
position: absolute;
margin-top: 2.5%;
}
h1{
text-align: center;
font-size: 406.25%;
color:rgb(0, 0, 0, .7);
}
.first-block{
height: 12%;
background-color:rgb(241, 200, 203);
text-align: center;
border: 10px double white;
padding-top: 1.6%;
padding-bottom: 3.8%;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 250%;
text-align: center;
color: rgb(199, 127, 131);
font-weight: 500;
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.about-box{
width: 32%;
height: 40%;
background-color: rgba(241, 200, 203, 0.7);
position: absolute;
margin-top: 15%;
margin-left: 3.8%;
margin-right: auto;
margin-bottom: auto;
display: block;
border-radius: 10px;
padding: 1.35%;
}
h4{
font-size: 312%;
text-align: center;
font-weight: 300;
margin-top: 7%;
margin-bottom: 10%;
color:rgb(126, 81, 83);
}
.about-box p, .gallery-box p, .contact-box p{
font-size: 125%;
text-align: center;
color:rgb(95, 62, 64);
}
.about-box-two{
width: 92%;
height: 45%;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 0%;
display: block;
border-radius: 10px;
}
.about-button{
width: 25%;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 21%;
margin-left: 102%;
display: block;
padding: 20px;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.about-button a, .gallery-button a, .contact-button a{
font-size: 156.25%;
text-decoration: none;
text-transform: uppercase;
color: rgb(126, 81, 83);
}
.far{
padding-left: 20px;
padding-bottom: 2px;
}
.bg-three{
background-image: url("bg-three.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.gallery-box{
width: 30%;
height: 40%;
background-color: rgba(241, 200, 203, .7);
position: absolute;
margin-top: 15%;
margin-left: 65%;
margin-bottom: auto;
display: block;
border-radius: 10px;
}
.gallery-box-two{
width: 91%;
height: 45%;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 3.5%;
display: block;
border-radius: 10px;
padding: 1%;
}
.gallery-button{
width: auto;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 30.55%;
margin-left: 50%;
display: block;
padding: 1.2%;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.bg-four{
background-image: url("bg-four.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.contact-box{
width: 36%;
height: 35%;
background-color: rgba(241, 200, 203, 0.7);
position: absolute;
margin-top: 16%;
margin-left: 3%;
margin-right: auto;
margin-bottom: auto;
display: block;
border-radius: 10px;
}
.contact-box-two{
width: 93%;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 3.4%;
margin-bottom: 15%;
display: block;
border-radius: 10px;
}
.contact-button{
width: auto;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 28.8%;
margin-left: 630px;
display: block;
padding: 20px;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.footer{
height: 20%;
text-align: center;
background-color: rgb(241, 200, 203);
position: relative;
}
#media screen and (max-width: 768px) {
h1{
font-size: 312%;
}
a{
font-size: 80%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>New York - The City That Never Sleeps</title>
<link rel="stylesheet" href="main.css">
<script src="app.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two">
<div class="about-box">
<h4>ABOUT</h4>
<div class="about-box-two">
<p> Well-known for its attractive landscapes and environment, New York attracts more than 67 million visitors every year.
<br>Click on the button to explore New York's finest attractions and landmarks in the 'About' page!</br>
</p>
</div>
<div class="about-button" id="about-button" onmouseover="AboutHover()" onmouseout="AboutNormal()">
ABOUT<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
</div>
<div style="width:auto; height: 20px; background-color: rgb(241, 200, 203, .7);"></div>
<div class ="bg-three">
<div class="gallery-box">
<h4>GALLERY</h4>
<div class= "gallery-box-two">
<p>Take a peek into some first-hand images taken by tourists in New York.
<br>Click on the button to discover New York's beautiful features...</br></p>
</div>
</div>
<div class= "gallery-button" id="gallery-button" onmouseover="GalleryHover()" onmouseout="GalleryNormal()">
GALLERY<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<div style="width: auto; height: 20px; background-color: rgba(241, 200, 203, .7);"></div>
<div class="bg-four">
<div class = "contact-box">
<h4>CONTACT</h4>
<div class = "contact-box-two">
<p>To find out the places where you can experience the best of New York, click on the button!</p>
</div>
</div>
<div class = "contact-button" id="contact-button" onmouseover="ContactHover()" onmouseout="ContactNormal()">
CONTACT<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<div class="footer">
<p> </p>
</div>
</body>
</html>

How to keep div x to the right of img its currently overlayed on using position absolute?

I am trying to create this (Black represents the div in my current code):
Currently the div is not consistent in its placement, like I would like it to be (I would like it to be constantly ini the same place like the image above).
How can I make the div stay in the same place like in the image?
Here is what I currently have:
.content {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
height: 100%;
padding: 5px;
margin-top: 95px;
/* 25 */
margin-right: 25px;
margin-left: 215px;
margin-bottom: 170px;
text-align: center;
}
#example {
position: absolute;
top: 10px;
left: 130px;
padding: 5px;
background-color: white;
border: 2px solid red;
color: darkgreen;
}
.grid-item:active {
box-shadow: 0 0 5px 0px rgba(0,0,0,1);
}
.grid-item:hover {
background-color: #262626;
}
.grid-item {
position: relative;
padding: 0px;
border-radius: 10px;
transition: 0.2s background-color;
}
.thumbnail {
/* background-color: black; */
/* object-fit: cover;
background-repeat: no-repeat;
background-size: cover; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 240px;
/* height: 70%; */
border-radius: 11px;
border: 1px solid #282828;
cursor: pointer;
object-fit: cover;
}
/* object-fit: cover; */
.details {
display: inline-flex;
/* text-align: center; */
/* display:block; */
/* display:table-cell;
vertical-align:middle; */
/* background-color: grey; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 75px;
cursor: pointer;
}
.portalTitle {
margin-top: 25px;
margin-left: 10px;
/* margin: auto; */
/* line-height: 70px; */
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight:500;
}
.profileImg {
cursor: pointer;
width: 45px;
height: 45px;
border-radius: 25px;
margin-top: 10px;
object-fit: cover;
}
<div class="content">
<div class="grid-item">
<img class="thumbnail" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731">
<div id="example">This is my div</div>
<div class="details">
<img class="profileImg" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731">
<span class="portalTitle"> Shanghai, China night sounds</span>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="images/testImg.png">
<div id="example">This is my div</div>
<div class="details">
<img class="profileImg" src="images/testImg.png">
<span class="portalTitle"> Shanghai, China night sounds</span>
</div>
</div>
</div>

Put your image inside a container div and make your example be positioned absolute to that div, not the griditem div. Also, DO NOT use multiple elements with the same ID. Here is an example where I made the first item be like you want it to be and your second one is how you originally had it so you can see the difference.
.content {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
height: 100%;
padding: 5px;
margin-top: 95px;
/* 25 */
margin-right: 25px;
margin-left: 215px;
margin-bottom: 170px;
text-align: center;
}
.example {
position: absolute;
top: 10px;
left: 130px;
padding: 5px;
background-color: white;
border: 2px solid red;
color: darkgreen;
}
.grid-item:active {
box-shadow: 0 0 5px 0px rgba(0,0,0,1);
}
.grid-item:hover {
background-color: #262626;
}
.grid-item {
position: relative;
padding: 0px;
border-radius: 10px;
transition: 0.2s background-color;
}
.thumbnail {
/* background-color: black; */
/* object-fit: cover;
background-repeat: no-repeat;
background-size: cover; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 240px;
/* height: 70%; */
border-radius: 11px;
border: 1px solid #282828;
cursor: pointer;
object-fit: cover;
}
/* object-fit: cover; */
.details {
display: inline-flex;
/* text-align: center; */
/* display:block; */
/* display:table-cell;
vertical-align:middle; */
/* background-color: grey; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 75px;
cursor: pointer;
}
.portalTitle {
margin-top: 25px;
margin-left: 10px;
/* margin: auto; */
/* line-height: 70px; */
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight:500;
}
.profileImg {
cursor: pointer;
width: 45px;
height: 45px;
border-radius: 25px;
margin-top: 10px;
object-fit: cover;
}
.imgcontainer {
display: inline-block;
position: relative;
}
<div class="content">
<div class="grid-item">
<div class="imgcontainer">
<img class="thumbnail" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731" />
<div class="example">This is my div</div>
</div>
<div class="details">
<img class="profileImg" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731" />
<span class="portalTitle"> Shanghai, China night sounds</span>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="images/testImg.png" />
<div class="example">This is my div</div>
<div class="details">
<img class="profileImg" src="images/testImg.png" />
<span class="portalTitle"> Shanghai, China night sounds</span>
</div>
</div>
</div>

Why is my jquery animation going slow and laggy?

Hey i am using the textillate.js plug in for my portfolio and i was testing the animation and it is really slow and laggy. dont know if its my laptop or not. The animation is my heading class and also whenever i did the animation in a separate page with only the header only it worked smoothly. is it possible my pages load time is affecting the animation?
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class = "heading tlt">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading tlt">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
<!------------------------------------------------------------ABOUT ME-------------------------------------------------------------------->
<div class = "about-container">
<div id = "underline">
<h1 class = "title" id = "about-me">About Me</h1>
</div>
<div class = "about-me-wrapper">
<div class = "details selfie wow fadeIn" data-wow-duration="2s"></div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<p id = "sum"><br>Lorem Ipsum </p>
</div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<div id = "details-hobbies">
<div class = "square">
<div class = "square-cont">
<div class = "ion-code ion-cont">
<p class = "under-img">Coding
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-basketball ion-cont">
<p class = "under-img">Basketball
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-people ion-cont">
<p class = "under-img">Family</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-university ion-cont">
<p class = "under-img">School</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------SKILLS------------------------------------------------------------------->
<div class = "skills-container">
<div id = "underline-second">
<h1 class = "title second" id = "skills">Skills</h1>
</div>
<div class = "skills-wrapper wow bounceInUp" data-wow-duration="3s">
<div class = "skills">
<div class = "logo">
<div class = "ion-social-html5">
<p class = "des">HTML5</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-css3">
<p class = "des">CSS3</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-javascript">
<p class = "des">JAVASCRIPT</p>
</div>
</div>
</div>
<div class = "skills last">
<div class = "logo">
<div class = "ion-social-angular">
<p class = "des">ANGULAR JS</p>
</div>
</div>
</div>
</div>
</div>
<!--------------------------------------------------------------PORTFOLIO----------------------------------------------------------------->
<div class = "portfolio-container">
<div id = "underline-last">
<h1 class = "title last" id = "portfolio">Portfolio</h1>
</div>
<div class = "portfolio-wrapper">
<a href = "#" class = "tiles wow slideInUp" data-wow-offset="280">
<div class = "port"><img src = "bg.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #1</h3>
<p class="content-text">Dallas Mavericks</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg2.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
</div>
</div>
<!-------------------------------------------------------------CONTACT-------------------------------------------------------------------->
<div id = "contact-container">
<div id = "contact-underline">
<h1 id = "contact-title">Hey Lets Keep In Touch!</h1>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="text" placeholder="email"/>
<input type="text" placeholder="subject"/>
<textarea placeholder="messge" rows = "7" cols = "60"></textarea>
<button>create</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "jquery-3.1.0.js"></script>
<script src="index.js"></script>
<script src = "jquery.lettering.js"></script>
<script src = "jquery.textillate.js"></script>
<script src= "wow.min.js"></script>
<script>new WOW().init();</script>
<!--<script src="viewportchecker.js"></script>-->
</body>
</html>
<!----------------------CSS-------------------------------------------->
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
/*-----------------------------------------------------------ABOUT ME--------------------------------------------------------------------*/
.about-container{
position: relative;
width: 100%;
height: 700px;
background-color: #ededed;
margin-top: 0;
padding: 0;
}
#underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #0A0A0A;
margin-bottom: 40px;
}
.title{
color: #0A0A0A;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
.about-me-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.details{
position: relative;
width: 370px;
height: 470px;
margin-top: 10px;
}
.details.selfie{
background-image: url(selfie2.png);
background-size: cover;
background-repeat:no-repeat;
border-radius: 10px;
}
#details-hobbies{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.square{
width: 50%;
height: 50%;
}
.square-cont{
position: relative;
width: 100%;
height: 100%;
}
.ion-cont{
position: absolute;
color: #0A0A0A;
text-align: center;
font-size: 105px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.under-img{
font-size: 25px;
color: #0A0A0A;
margin-top: -5px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-align: center;
}
/*-------------------------------------------------------------------SKILLS--------------------------------------------------------------*/
.skills-container{
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second{
color: black;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
#underline-second{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid black;
margin-bottom: 40px;
}
.skills-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.skills{
width: 280px;
height: 470px;
margin-top: 10px;
border-right: 4px solid black;
}
.skills.last{
border: none;
}
.logo{
width: 265px;
height: 340px;
margin-top: 10px;
}
.ion-social-html5{
text-align: center;
font-size: 280px
}
.des{
font-size: 25px;
margin-top: 0px;
color: black;
}
.ion-social-css3{
text-align: center;
font-size: 280px
}
.ion-social-javascript{
text-align: center;
font-size: 280px
}
.ion-social-angular{
text-align: center;
font-size: 280px
}
/*--------------------------------------------------------------------PORTFOLIO---------------------------------------------------------*/
.portfolio-container{
position: relative;
width: 100%;
height: 870px;
background-color: #444444;
top: 0;
padding: 0;
}
#underline-last{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #f5f5f5;
margin-bottom: 40px;
}
.title.last{
color:#f5f5f5;
}
.portfolio-wrapper{
position: relative;
max-width: 990px;
height: auto;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.port{
position: relative;
width: 280px;
height: 315px;
margin-top: 15px;
display:inline-block;
background-repeat: no-repeat;
}
.port:hover{
outline: #4169E1 solid 3px;
}
img{
position: relative;
max-width: 100%;
height: 100%;
}
.content-overlay{
background: rgba(0,0,0,0.9);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.port:hover .content-overlay{
opacity: 1;
}
.content-details {
position: absolute;
text-align: center;
font-family: 'Raleway',sans-serif;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.port:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-bottom{
top: 80%;
}
/*--------------------------------------------------------------CONTACT ME---------------------------------------------------------------*/
#contact-container{
position: relative;
width: 100%;
height: 650px;
background: rgba(32,157,229,1);
background: -moz-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(32,157,229,1)), color-stop(100%, rgba(32,108,229,1)));
background: -webkit-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -o-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -ms-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: linear-gradient(to right, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209de5', endColorstr='#206ce5', GradientType=1 );
}
#contact-underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #e1e1e1;
margin-bottom: 40px;
padding-top: 20px;
}
#contact-title{
font-family: 'Raleway',sans-serif;
margin-bottom: 10px;
text-align: center;
color: white;
}
.login-page{
width: 400px;
margin: auto;
height: 400px;
}
.form{
position: relative;
background: #FFFFFF;
max-width: 360px;
/*margin: 0 auto 80px;*/
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form textarea{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
outline: 0;
background: #1148a0;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
<!-------------------------------------JS--------------------------------->
$(document).ready(function(){
$('.heading').textillate({
in: {
effect: 'fadeInDown',
delay: 1000,
sync: true
}
});
});
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});

Div inside a div not appearing?

I am trying to place a div(id="testDiv") inside of a div that slides down from the top using jQuery .slideToggle(). Presently, the div inside the sliding div does not appear at all. Here are some pictures to explain what I mean:
You can run this here, but this is a link to a Plunker with my code just in case:
https://plnkr.co/edit/fxulzV76HJ0APP0wqZkD?p=info
Here is the code:
(function($){
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
$("#infoButton").click(function(){
$('#infoDiv').slideToggle(300);
});
$("#searchButton").click(function(){
$('#searchDiv').slideToggle(300);
});
});
})(jQuery);
body{
margin:0;
padding: 0;
}
.dropDown{
padding: 10px;
background: black;
display: none;
position: relative;
width: 70%;
height: 70px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
clear: both;
z-index: 100;
}
.selector{
text-align: center;
position: absolute;
transform: scaleX(1.5);
padding: 4px;
left: 49%;
background-image: -moz-linear-gradient(center top , rgb(219, 79, 0), rgb(255, 185, 95));
box-shadow: 2px 2px 10px rgb(51, 51, 51);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
width: 24px;
height: 24px;
color: white;
z-index: 100;
}
#leftDrop {
float: left;
text-align: center;
width: 33%;
margin-top: 20px;
}
#rightDrop {
float: right;
text-align: center;
width: 33%;
margin-top: 20px;
}
#centerDrop {
margin: 0 auto;
text-align: center;
width: 33%;
}
.dropButtonLeft {
transform: scale(1.6,1.6);
padding: 8px;
margin-left: 25px;
margin-top: -6px;
float: left;
cursor: pointer;
}
.dropButtonRight {
transform: scale(1.6,1.6);
padding: 8px;
margin-right: 25px;
margin-top: -6px;
float: right;
cursor: pointer;
}
.dropdowns div {
display: inline-block;
padding: 10px;
background-color: rgba(34, 34, 34, 0.8);
display: none;
position: relative;
width: 20%;
height: 18%;
margin-left: 16%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
z-index: 100;
text-align: center;
padding-left: 1%;
}
#infoDiv {
float: left;
margin-left: 17%;
}
#searchDiv {
float: right;
margin-right: 17%;
height: 200px;
}
#testDiv {
width: 100px;
height: 100px;
background: yellow;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = 'dropDown'>
<div id = 'leftDrop'>
<button type="button" id="infoButton">Click Me!</button>
</div>
<div id = 'rightDrop'>
<button type="button" id="searchButton">Click Me!</button>
</div>
<div id = 'centerDrop'>
</div>
</div>
<div class='selector'>
<span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>
<div class="dropdowns">
<div id="infoDiv">
</div>
<div id="searchDiv">
<div id="testDiv">
<br>
<p>testDiv</p>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>

Set display: block or display:inherit; on your #test div CSS
(function($){
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
$("#infoButton").click(function(){
$('#infoDiv').slideToggle(300);
});
$("#searchButton").click(function(){
$('#searchDiv').slideToggle(300);
});
});
})(jQuery);
body{
margin:0;
padding: 0;
}
.dropDown{
padding: 10px;
background: black;
display: none;
position: relative;
width: 70%;
height: 70px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
clear: both;
z-index: 100;
}
.selector{
text-align: center;
position: absolute;
transform: scaleX(1.5);
padding: 4px;
left: 49%;
background-image: -moz-linear-gradient(center top , rgb(219, 79, 0), rgb(255, 185, 95));
box-shadow: 2px 2px 10px rgb(51, 51, 51);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
width: 24px;
height: 24px;
color: white;
z-index: 100;
}
#leftDrop {
float: left;
text-align: center;
width: 33%;
margin-top: 20px;
}
#rightDrop {
float: right;
text-align: center;
width: 33%;
margin-top: 20px;
}
#centerDrop {
margin: 0 auto;
text-align: center;
width: 33%;
}
.dropButtonLeft {
transform: scale(1.6,1.6);
padding: 8px;
margin-left: 25px;
margin-top: -6px;
float: left;
cursor: pointer;
}
.dropButtonRight {
transform: scale(1.6,1.6);
padding: 8px;
margin-right: 25px;
margin-top: -6px;
float: right;
cursor: pointer;
}
.dropdowns div {
display: inline-block;
padding: 10px;
background-color: rgba(34, 34, 34, 0.8);
display: none;
position: relative;
width: 20%;
height: 18%;
margin-left: 16%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
z-index: 100;
text-align: center;
padding-left: 1%;
}
#infoDiv {
float: left;
margin-left: 17%;
}
#searchDiv {
float: right;
margin-right: 17%;
height: 200px;
}
#testDiv {
width: 100px;
height: 100px;
background: yellow;
color: black;
display:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = 'dropDown'>
<div id = 'leftDrop'>
<button type="button" id="infoButton">Click Me!</button>
</div>
<div id = 'rightDrop'>
<button type="button" id="searchButton">Click Me!</button>
</div>
<div id = 'centerDrop'>
</div>
</div>
<div class='selector'>
<span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>
<div class="dropdowns">
<div id="infoDiv">
</div>
<div id="searchDiv">
<div id="testDiv">
<br>
<p>testDiv</p>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>

Set display: block; for #testDiv
Your .dropdowns div are hidden

#testDiv is set to display: none;
Update the styles for that div
#testDiv {
display: block;
}

Categories