Related
I would like to display a tooltip with item name when user hover over the image item. The items are shown inside a grid with scrollbar (class="itemGrid" and item itself is class="itemOnGrid").
I've tried many solutions over the internet, however I'm learning about CSS now and I could not solve my problem.
HTML
<body>
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a><span class="tooltiptext">Giant Sword</span></div>
</div>
</div>
<div class='sets'></div>
</div>
</center>
<script src='main.js'></script>
</body>
CSS
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.itemOnGrid .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.itemOnGrid .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.itemOnGrid:hover .tooltiptext {
visibility: visible;
z-index: 1;
}
The items are added by JS, I wrote down 3 examples hard-coded.
Image of tooltip being cutted off:
Thanks in advance!
I am afraid, that in your situation you can not solve it with css alone.
Since overflow:hidden cuts off everything outside of it.
You could probably remove position:relative from itemOnGrid class, but all your tooltips would end up in the same place - I really doubt you want to manually position all of them.
My solution is to use javascript for tooltip location(and also change its text).
I did change the placement of your elements a little, also edited the css accordingly for the new view.
The copies of the elements are just for demonstration purposes.
Now the solution is basically this function prepare where I assign eventListeners to every itemOnGrid. In this eventListener I read the position of the element that has been hovered and move (and change text of) the tooltip. I didn't really care about perfect location of the tooltip here, so you might want to play with it a little.
function prepare(){
let items = document.getElementsByClassName('itemOnGrid');
for(let i = 0; i < items.length; i++){
items[i].addEventListener('mouseover', function(){
let tooltip = document.getElementById('tooltip');
let top = this.offsetTop;
let left = this.offsetLeft;
tooltip.style.top = top-30+'px';
tooltip.style.left = left-35+'px';
tooltip.style.display = 'block';
tooltip.innerText = this.getAttribute('itemName');
});
items[i].addEventListener('mouseout', function(){
let tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
});
}
};
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
<body onload="prepare()">
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
</div>
<span id='tooltip' class="tooltiptext">Giant Sword</span>
</div>
<div class='sets'></div>
</div>
</center>
</body>
I am working on a web project every thing was too good until i decided to add JS, to make my page dynamic but at that point i faced a big problem when i try to access my elements by tagName or by id or class it always returns null and undefined, any solution please , i am new at this ,Thanks in advance,if you are unavle to understand the question you can mail me or reply here but please i need solution
console.log('test1')
window.onload = function() {;
elements.forEach((element) => element.style.color = 'red');
}
/* * {
margin: 0;
} */
}
body {
margin: 0;
box-sizing: border-box;
display: block;
background: #eee;
}
header {
color: white;
background: linear-gradient(to left, #222, black, #222);
box-sizing: border-box;
border-bottom: 2px solid #999;
display: block;
overflow: hidden;
width: 100%;
text-align: center;
padding: 22px;
padding-bottom: 20px;
}
header .page-title {
cursor: pointer;
display: block;
font-size: 25px;
font-variant: small-caps;
transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
cursor: pointer;
font-size: 25px;
color: green;
text-shadow: 0 0 7px #004800;
transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
float: left;
text-decoration: none;
font-size: 15px;
padding: 17.5px;
display: inline-block;
border: none;
border-left: 1px solid white;
box-sizing: border-box;
color: white;
background: black;
width: 88%;
}
.icon {
float: left;
border-right: none;
text-align: : left;
box-sizing: border-box;
background: black;
margin: 0;
display: inline-block;
color: white;
padding: 17.5px;
font-size: 15px;
width: 6%;
}
input:focus {
outline: none;
}
/*input:before{
border:1px solid black:
content:"";
}
//.icon:before{
border:1px solid black;
content:"";
}
*/
.contextBtn {
//box-shadow:inset 0 0 7px white;
border-top: 1px solid white;
font-size: 15px;
padding: 15px;
display: block;
box-sizing: border-box;
text-align: center;
width: 100%;
background: black;
color: white;
}
ul {
list-style-type: none;
padding: 0 0 5px 0;
margin: 0;
box-shadow: 0 0 3px black;
}
li {
width: 100%;
}
li a {
position: relative;
color: #fff;
//background:#333;
background: linear-gradient(to left, black, #222, black);
font-size: 110%;
text-align: center;
text-decoration: none;
box-sizing: border-box;
margin: auto;
//padding:3%;
padding: 20px;
width: 100%;
height: 6%;
display: block;
overflow: hidden;
box-shadow: 0px -1px 1px white;
transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
box-sizing: border-box;
display: block;
background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
font-size: 120%;
margin-left: auto 10%;
width: 80%;
height: 6%;
overflow: hidden;
//padding:4%;
padding: 23px;
border-left: 3px solid green;
border-right: 3px solid green;
border-radius: 25px;
box-shadow: 0 0 3px #67FF67;
box-shadow: inset 0 0 7px #69FF69;
transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
//transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
background-color: red;
}
li a:before {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
left: 50%;
transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 3px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 2px solid green;
box-sizing: border-box;
bottom: 0;
left: 0;
transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
right: 50%;
transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 2px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 1px solid green;
box-sizing: border-box;
bottom: 0;
right: 0;
transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
//position: relative;
background: green;
padding: 25px;
border-radius: 30px;
border-top: 0.5px solid #989898;
border-bottom: 0.2px solid black;
width: 80%;
margin: auto;
font-size: 22px;
box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
border: 1px solid green;
box-shadow: 0 0px 5px #3F7D00;
}
article {
//position: relative;
margin: 2px;
padding: 20px 8px;
box-shadow: 0px 0px 5px black;
//font-size:20px;
}
article p {
font-size: 15px;
}
.divider {
text-align: center;
}
footer {
margin: 0 2px 5px 2px;
background: grey;
}
.foot-container {
background: grey;
//position: relative;
box-sizing: border-box;
box-shadow: 0 1px 5px black;
}
.foot-section {
line-height: 25px;
text-align: center;
color: white;
float: left;
margin: 0.1111111111111111%;
width: 33%;
box-sizing: border-box;
box-shadow: 0 0 1px black;
}
/* .foot-section:after{
content"";
display:table;
clear:both;
}*/
.foot-section h4 {
//text-decoration:underline;
display: inline-block;
margin: 6px auto 8px auto;
font-size: 110%;
}
.foot-section a {
color: white;
text-decoration: none;
display: block;
clear: both;
}
.foot-section a:hover {
font-size: 90%;
box-shadow: inset 0 0 7px #2F2F2F;
}
address {
text-decoration: none;
margin: 5px auto;
line-height: 20px;
box-shadow: 0 0 5px black;
text-align: center;
color: white;
}
.social {
width: 100%;
display: block;
box-sizing: border-box;
text-align: center;
//bottom: 0;
}
.social a {
border: 1px solid black;
border-radius: 8.5px;
width: 17px;
height: 17px;
margin: 2px;
padding: 3px;
display: inline-block;
box-shadow: 0 0 5px black;
}
.social a:hover {
color: white;
background: black;
}
#media only screen and (min-width: 500px) {
body {
background: white;
//position: relative;
}
/* .contextBtn {
display: none;
} */
li a {
overflow-y: hidden;
//position: sticky;
width: 25%;
float: left;
top: 0;
transition: none;
}
li a:hover:not(.active-item) {
width: 25%;
padding: 20px;
z-index: 1;
border-radius: 0%;
font-size: initial;
transition: none;
}
li a.active-item {
display: none;
}
article {
margin: 50px 5px 10px 5px;
padding: 50px 5px;
}
.icon {
width: 8%;
}
.search {
width: 92%;
}
}
/* #media only screen and (min-width:350px) {
.contextBtn {
display: none;
}
.search {
width: 90%;
}
.icon {
width: 8%;
}
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 ">
<title>About Us </title>
<link rel="stylesheet" href="style/mystyles.css">
<script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
<!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
</head>
<body>
<header>
<h1 class="page-title">About MixHacxTricks    
<i class="fas fa-id-card-alt"></i></h1>
</header>
<nav>
<div>
<ul>
<div class="search-area"><input class="search" type="search" placeholder="Search">
<!--<label class="icon">-->
<span class="icon"> <i class="fas fa-search"></i></span>
<!--</label>-->
</div>
<span class="contextBtn" id="context"> x </span>
<li class="menu">Home   <i class="fas fa-home"></i></span></li>
<li class="menu">Android   <i class="fab fa-android"></i></span></li>
<li class="menu">Windows   <i class="fab fa-windows"></i></span></li>
<li class="menu">Trending   <i class="fas fa-chart-line"></i></span></li>
<li class="menu">About <i class="fas fa-id-card-alt"></i></span></li>
</ul>
</div>
</nav>
<article>
<div class="article">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
</div>
<div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
</article>
<footer>
<div class="foot-container">
<div class="foot-section">
<h4>Android</h4>
Apps
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Windows</h4>
Softwares
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Others</h4>
WebTools
Source Code
O.S.<br>
</div>
<address>
MixHacxTricks<br>
Web Site: Soon Uploaded<br>
Developer:Priyanshu Agrawal<br>
Contact:-<br>Email:<br>priyanshu#mail2expert.com<br>
</address>
</div>
</footer>
</body>
<script src="js/myscript.js"></script>
</html>
The problem is you are loading your js script before rendering elements on the page.
You can use defer attribute for the script tag to launch script after page rendering.
<script src="js/myscript.js" defer>
getElementsByTagName() is returning a HTMLCollection, so here is a working code:
console.log('test1');
let elemens = document.getElementsByTagName('p');
for (let i=0; i < elemens.length; i++) {
elemens[i].style.color = 'red';
}
console.log(elemens);
And by the way, is it a typo with elemens variable up above?
<p class="mp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p class="mp">Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
<!-- always place js in footer -->
<!-- method by classname in javascript-->
<script>
var x = document.getElementsByClassName("mp");
x[0].style.color = "red";
x[1].style.color = "blue";
</script>
<!-- method by tag in jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
jQuery("p").css("color", "yellow");
</script>
</body>
</html>
Wrap Javascript code in DOMContentLoaded event
Like
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
More information
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
document.addEventListener("DOMContentLoaded", function(event) {
console.log('test1')
let elemens = document.getElementsByTagName('p');
for (let i = 0; i < elemens.length; i++) {
elemens[i].style.color = 'red';
}
});
/* * {
margin: 0;
} */
}
body {
margin: 0;
box-sizing: border-box;
display: block;
background: #eee;
}
header {
color: white;
background: linear-gradient(to left, #222, black, #222);
box-sizing: border-box;
border-bottom: 2px solid #999;
display: block;
overflow: hidden;
width: 100%;
text-align: center;
padding: 22px;
padding-bottom: 20px;
}
header .page-title {
cursor: pointer;
display: block;
font-size: 25px;
font-variant: small-caps;
transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
cursor: pointer;
font-size: 25px;
color: green;
text-shadow: 0 0 7px #004800;
transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
float: left;
text-decoration: none;
font-size: 15px;
padding: 17.5px;
display: inline-block;
border: none;
border-left: 1px solid white;
box-sizing: border-box;
color: white;
background: black;
width: 88%;
}
.icon {
float: left;
border-right: none;
text-align: : left;
box-sizing: border-box;
background: black;
margin: 0;
display: inline-block;
color: white;
padding: 17.5px;
font-size: 15px;
width: 6%;
}
input:focus {
outline: none;
}
/*input:before{
border:1px solid black:
content:"";
}
//.icon:before{
border:1px solid black;
content:"";
}
*/
.contextBtn {
//box-shadow:inset 0 0 7px white;
border-top: 1px solid white;
font-size: 15px;
padding: 15px;
display: block;
box-sizing: border-box;
text-align: center;
width: 100%;
background: black;
color: white;
}
ul {
list-style-type: none;
padding: 0 0 5px 0;
margin: 0;
box-shadow: 0 0 3px black;
}
li {
width: 100%;
}
li a {
position: relative;
color: #fff;
//background:#333;
background: linear-gradient(to left, black, #222, black);
font-size: 110%;
text-align: center;
text-decoration: none;
box-sizing: border-box;
margin: auto;
//padding:3%;
padding: 20px;
width: 100%;
height: 6%;
display: block;
overflow: hidden;
box-shadow: 0px -1px 1px white;
transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
box-sizing: border-box;
display: block;
background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
font-size: 120%;
margin-left: auto 10%;
width: 80%;
height: 6%;
overflow: hidden;
//padding:4%;
padding: 23px;
border-left: 3px solid green;
border-right: 3px solid green;
border-radius: 25px;
box-shadow: 0 0 3px #67FF67;
box-shadow: inset 0 0 7px #69FF69;
transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
//transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
background-color: red;
}
li a:before {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
left: 50%;
transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 3px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 2px solid green;
box-sizing: border-box;
bottom: 0;
left: 0;
transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
content: "";
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
right: 50%;
transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 2px solid green;
border-left: 0px solid green;
border-right: 0px solid green;
border-top: 1px solid green;
box-sizing: border-box;
bottom: 0;
right: 0;
transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
//position: relative;
background: green;
padding: 25px;
border-radius: 30px;
border-top: 0.5px solid #989898;
border-bottom: 0.2px solid black;
width: 80%;
margin: auto;
font-size: 22px;
box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
border: 1px solid green;
box-shadow: 0 0px 5px #3F7D00;
}
article {
//position: relative;
margin: 2px;
padding: 20px 8px;
box-shadow: 0px 0px 5px black;
//font-size:20px;
}
article p {
font-size: 15px;
}
.divider {
text-align: center;
}
footer {
margin: 0 2px 5px 2px;
background: grey;
}
.foot-container {
background: grey;
//position: relative;
box-sizing: border-box;
box-shadow: 0 1px 5px black;
}
.foot-section {
line-height: 25px;
text-align: center;
color: white;
float: left;
margin: 0.1111111111111111%;
width: 33%;
box-sizing: border-box;
box-shadow: 0 0 1px black;
}
/* .foot-section:after{
content"";
display:table;
clear:both;
}*/
.foot-section h4 {
//text-decoration:underline;
display: inline-block;
margin: 6px auto 8px auto;
font-size: 110%;
}
.foot-section a {
color: white;
text-decoration: none;
display: block;
clear: both;
}
.foot-section a:hover {
font-size: 90%;
box-shadow: inset 0 0 7px #2F2F2F;
}
address {
text-decoration: none;
margin: 5px auto;
line-height: 20px;
box-shadow: 0 0 5px black;
text-align: center;
color: white;
}
.social {
width: 100%;
display: block;
box-sizing: border-box;
text-align: center;
//bottom: 0;
}
.social a {
border: 1px solid black;
border-radius: 8.5px;
width: 17px;
height: 17px;
margin: 2px;
padding: 3px;
display: inline-block;
box-shadow: 0 0 5px black;
}
.social a:hover {
color: white;
background: black;
}
#media only screen and (min-width: 500px) {
body {
background: white;
//position: relative;
}
/* .contextBtn {
display: none;
} */
li a {
overflow-y: hidden;
//position: sticky;
width: 25%;
float: left;
top: 0;
transition: none;
}
li a:hover:not(.active-item) {
width: 25%;
padding: 20px;
z-index: 1;
border-radius: 0%;
font-size: initial;
transition: none;
}
li a.active-item {
display: none;
}
article {
margin: 50px 5px 10px 5px;
padding: 50px 5px;
}
.icon {
width: 8%;
}
.search {
width: 92%;
}
}
/* #media only screen and (min-width:350px) {
.contextBtn {
display: none;
}
.search {
width: 90%;
}
.icon {
width: 8%;
}
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 ">
<title>About Us </title>
<link rel="stylesheet" href="style/mystyles.css">
<script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
<!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
</head>
<body>
<header>
<h1 class="page-title">About MixHacxTricks    
<i class="fas fa-id-card-alt"></i></h1>
</header>
<nav>
<div>
<ul>
<div class="search-area"><input class="search" type="search" placeholder="Search">
<!--<label class="icon">-->
<span class="icon"> <i class="fas fa-search"></i></span>
<!--</label>-->
</div>
<span class="contextBtn" id="context"> x </span>
<li class="menu">Home   <i class="fas fa-home"></i></span></li>
<li class="menu">Android   <i class="fab fa-android"></i></span></li>
<li class="menu">Windows   <i class="fab fa-windows"></i></span></li>
<li class="menu">Trending   <i class="fas fa-chart-line"></i></span></li>
<li class="menu">About <i class="fas fa-id-card-alt"></i></span></li>
</ul>
</div>
</nav>
<article>
<div class="article">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium lectus.
Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus nullam eget felis.
Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
<br>
<p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque viverra
mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
<!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->
</div>
<div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
</article>
<footer>
<div class="foot-container">
<div class="foot-section">
<h4>Android</h4>
Apps
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Windows</h4>
Softwares
Games
Tools<br>
</div>
<div class="foot-section">
<h4>Others</h4>
WebTools
Source Code
O.S.<br>
</div>
<address>
MixHacxTricks<br>
Web Site: Soon Uploaded<br>
Developer:Priyanshu Agrawal<br>
Contact:-<br>Email:<br>priyanshu#mail2expert.com<br>
</address>
</div>
</footer>
</body>
</html>
You are loading the script tag in the Head without any delay. So when the page loads, it loads JS first then the body of the Page. I will suggest calling it after the body so that the whole page loads first and after that, the JS loads so that it can have access to the DOM otherwise it will not find any object. That is why it is not working. Load it like this:
</body>
<script src="name.js"></script>
</html>
After the body tag and it should work just fine.
This is mostly because your javaScript is loading before the completely loading of DOM.
there is two Way you can Solve this
1st By wrapping you js code with
window.onload = function() {
// Your code
}
2nd By placing your Script tag after body.
</body>
<script src="name.js"></script>
</html>
Codepen here: https://codepen.io/nickfindley/pen/dJqMQW
I'm looking to have the same behavior as is currently on the page, except without setting a height on the header. The header should fit whatever content is present, adjust according to window resizing, etc. It should also be covered up by the rest of the page when scrolling. The navbar sticks to the top when it gets there with some JavaScript.
var pn = $(".page-nav");
pns = "page-nav-scrolled";
hdr = $(".page-header").height();
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
pn.addClass(pns);
} else {
pn.removeClass(pns);
}
});
$(window).on("scroll load", function() {
pn.toggleClass(pns, $(this).scrollTop() > hdr);
});
body {
margin: 0;
padding-top: 10em;
}
.page-header {
background-color: yellow;
text-align: center;
padding: 2em 0;
position: fixed;
top: 0;
width: 100%;
height: 20em;
z-index: -100;
}
.page-nav {
background-color: black;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
width: 100%;
height: 4em;
position: relative;
margin-bottom: -4em;
z-index: 10000000;
}
.page-nav .nav-wrapper .nav-brand {
float: left;
padding: .584em 0;
font-size: 1.5em;
}
.page-nav .nav-wrapper .nav-brand a {
color: yellow;
}
.page-nav .nav-wrapper .nav-menu {
margin: 0;
float: right;
}
.page-nav .nav-wrapper .nav-menu .nav-item {
display: inline-block;
height: 4em;
line-height: 1em;
padding: 1.5em 0;
margin-left: 2em;
}
.page-nav .nav-wrapper .nav-menu .nav-item .nav-link {
color: yellow;
}
.page-nav-scrolled {
position: fixed;
width: 100%;
top: 0;
}
.page-main {
position: relative;
padding-top: 6em;
background-color: red;
}
.nav-wrapper, .page-content {
margin: 0 2em;
}
.header-content {
margin: 0 6em;
}
/* https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="page-header" role="banner">
<section class="header-content">
<h1>Fixed Header</h1>
<p>Praesent non hendrerit sapien.
<p>Praesent non hendrerit sapien. Vivamus sit amet pellentesque nisl. Maecenas hendrerit elit ut mi porta, sagittis accumsan felis mollis. Fusce ut tincidunt lectus...</p>
</section>
</header>
<nav class="page-nav" role="navigation">
<div class="nav-wrapper">
<div class="nav-brand">
Brand
</div>
<ul class="nav-menu">
<li class="nav-item nav-active">
<a class="nav-link" href="">News</a>
</li>
...
</ul>
</div>
</nav>
<main class="page-main">
<section class="page-content">
<article class="entry">
<header class="entry-header">
<h2>Quisque a dolor vel leo porttitor luctus</h2>
</header>
<section class="entry-content">
<p class="type">Lorem ipsum dolor sit amet...</p>
</section>
</article>
</section>
</main>
Would love a pure CSS solution but I'm plenty open to JS solutions.
Please check the codepen here. What I did was
Removed the body padding
Removed the position fixed and added relative
Removed the fixed height
I believe this is what you wanted.
https://codepen.io/anon/pen/vpvmxo
Just posting the changed css sections.
body {
margin: 0;
//padding-top: 10em;
}
.page-header {
background-color: yellow;
text-align: center;
padding: 2em 0;
position: relative;
top: 0;
width: 100%;
//height: 20em; // not really necessary, visible portion of header is determined by body padding-top
z-index: -100;
}
demo image I am using the window resize function to check the width of my page, if it's below 891, I fire the function to move my #formWrapper div to #formbottom on the page, the media query is set to max width 891 to change the formWrapper to float left, and have a max-width of 100%. Everything is almost working properly but there is a slight jump, when the browser reaches 891px, it seems like the media query and the JS function are slightly off?
You can see this by resizing the browser window. Any insight would be greatly appreciated.
$(document).ready(function() {
$(window).resize(function() {
if ($(window).width() < 891) {
$("#formWrapper").detach().appendTo('#formbottom');
} else {
if ($(window).width() > 891) {
$("#formWrapper").detach().appendTo('#formtop');
}
}
});
});
#charset "utf-8";
/* CSS Document */
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
background-color: #F2F2F2;
}
ol,
ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" "";
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* LANDING PAGE */
html {
position: relative;
min-height: 100%;
}
body {
font-family: proxima-nova, sans-serif;
margin: 0 0 100px;
/* bottom = footer height */
}
#container {
width: 100%;
margin: auto;
}
.content-wrapper {
max-width: 1040px;
margin: auto;
overflow: hidden;
padding-top: 38px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
/* landing page masthead */
#mastheadBar {
max-width: 100%;
background-color: #FDA929;
}
#mastheadImage {
max-width: 1520px;
background-image: url(https://pages.infor.com/rs/227-UHD-858/images/hero.png);
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: scroll;
margin: auto;
}
.logoWrapper {
max-width: 310px;
margin-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 23px;
color: #FFF;
vertical-align: middle;
display: table;
}
.LogoWrapperText {
display: table-cell;
vertical-align: middle;
padding-left: 21px;
}
h1 {
font-size: 50px;
font-weight: 700;
line-height: 54px;
color: #FFF;
max-width: 50.2128%;
margin-top: -14px;
margin-bottom: -8px;
}
/* landing page main content */
#mainContent {
background-color: #fff;
overflow: hidden;
}
#mainContent p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #737373;
padding-top: 12px;
}
#mainContent li {
color: #737373;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style-position: outside;
margin: 0 0 8px 10px;
}
#mainContent ul {
list-style-position: inside;
list-style-type: disc;
padding-top: 32px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
#mainContentLeft {
float: left;
width: 57.4468085106383%;
margin-top: -5px;
}
#mainContentLeftWrap {
margin-bottom: 11px;
}
#mainContentRight {
float: right;
width: 31.91489361702128%;
padding-top: 9px;
}
#mainContentRight img {
max-width: 100%;
height: auto;
}
/* footer */
#footer {
background-color: #F2F2F2;
font-size: 12px;
font-weight: 400;
color: #737373;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
#footerWrapper {
max-width: 1040px;
margin: auto;
padding: 22px 50px 22px 50px;
overflow: hidden;
}
/* form page */
#formWrapper {
background-color: #fff;
box-shadow: 0 0 10px #888;
box-sizing: border-box;
float: right;
margin-top: 120px;
padding: 20px;
width: 36.1702%;
}
#formWrapper img {
max-width: 100%;
height: auto;
}
.content-wrapperForm {
max-width: 1040px;
margin: auto;
padding-top: 38px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
position: relative;
}
#mainContentWrap {
background-color: #fff;
}
#mainContentWrap p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #737373;
padding-top: 12px;
}
#mainContentWrap li {
color: #737373;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style-position: outside;
margin: 0 0 8px 10px;
}
#mainContentWrap ul {
list-style-position: inside;
list-style-type: disc;
padding-top: 32px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
.formIntro {
float: left;
width: 67%;
}
.formIntroCta {
color: #595959;
font-size: 18px;
font-weight: 700;
line-height: 22px;
margin-bottom: 17px;
}
.formIntroReq {
color: #737373;
font-size: 12px;
font-weight: 400;
line-height: 14px;
margin-bottom: 34px;
}
.formIntroImg {
float: right;
width: 70px;
}
.formIntroImg img {
max-width: 100%;
}
/* form */
/* form wrapper */
.mktoForm {
text-align: left;
width: 100% !important;
}
/* remove form wrapper padding mobile */
.mktoMobileShow .mktoForm,
.mktoForm * {
padding: 0 !important;
}
/* remove form wrapper padding */
.mktoForm,
.mktoForm * {
padding: 0 !important;
}
/* form column holding field and label */
.mktoForm .mktoFormCol {
float: left;
min-height: 2em;
position: relative;
width: 100% !important;
}
/* form column wrapper */
.mktoForm .mktoFieldWrap {
float: none !important;
width: 100% !important;
margin-bottom: 15px !important;
}
/* form column left padding - set to zero to make columns flush to left */
.mktoForm .mktoOffset {
float: left;
height: 1.2em;
width: 0 !important;
}
/* Non-required Label */
.mktoForm .mktoLabel {
color: #999999;
font-size: 14px;
font-weight: 300 !important;
line-height: 16px;
margin-bottom: 7px !important;
width: auto !important;
}
/* Required field label */
.mktoForm .mktoRequiredField label.mktoLabel {
color: #999999;
font-size: 14px;
font-weight: 300 !important;
line-height: 16px;
margin-bottom: 7px;
}
/* Asterix appearance */
.mktoForm .mktoAsterix {
color: #bf0000;
float: right;
padding-left: 5px;
}
/* Asterix position */
.mktoForm.mktoLayoutAbove .mktoRequiredField .mktoAsterix {
float: right !important;
padding-left: 0;
padding-right: 0;
}
/* Field formating */
.mktoForm input[type="text"],
.mktoForm input[type="url"],
.mktoForm input[type="email"],
.mktoForm input[type="tel"],
.mktoForm input[type="number"],
.mktoForm input[type="date"],
.mktoForm textarea.mktoField,
.mktoForm select.mktoField {
border: 1px solid #d9d9d9 !important;
padding: 10px 12px !important;
width: 100% !important;
height: auto !important;
}
/* Button row container */
.mktoButtonRow {
display: inline-block;
position: relative;
width: 100%;
}
/* Button style */
.mktoForm button.mktoButton {
background-color: #fc6621;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
font-weight: 300;
line-height: 19px;
padding: 12px !important;
width: 100%;
margin-top: 14px;
margin-right: 0;
margin-bottom: -6px;
margin-left: 0;
}
/* Reset for form items to be flush left */
.mktoForm div,
.mktoForm span,
.mktoForm label,
.mktoForm p {
margin: 0 !important;
text-align: left;
}
/* Field text formating */
.mktoForm .mktoField {
color: #666666;
float: left;
font-size: 16px !important;
line-height: 19px;
}
/* Comment field formating */
.mktoForm.mktoLayoutAbove textarea.mktoField {
float: left;
margin-bottom: 7px;
}
/* Float check and radio button right */
.mktoRadioList {
width: auto !important;
float: left !important;
clear: none !important;
}
/* Remove left padding from Radio and Checkbox */
.mktoForm .mktoRadioList,
.mktoForm .mktoCheckboxList {
padding: 0 !important;
}
.mktoForm select.mktoField::-ms-expand {
display: none;
}
.mktoForm select.mktoField {
background: url(http://na-ab22.marketo.com/rs/625-VIS-608/images/input_icon_selector.png) no-repeat right;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
background-position-x: 97%;
}
/* Checkbox formating */
.mktoCheckboxList input {
opacity: 0;
position: absolute;
}
.mktoCheckboxList input,
.mktoCheckboxList label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.mktoCheckboxList label {
position: relative;
}
/* Edit the properties below to change the colors of the un-checked checkbox */
.mktoCheckboxList input+label:before {
background: #fff none repeat scroll 0 0;
border: 1px solid #d9d9d9;
content: "";
display: inline-block;
height: 25px;
margin-right: 10px;
padding: 4px;
text-align: center;
vertical-align: middle;
width: 25px;
}
/* Edit the properties below to change the colors of the checked checkbox */
.mktoCheckboxList input:checked+label:before {
content: "\2713";
background: #56CFD2;
color: #fff;
border-color: #3eb9bc;
}
body .mktoForm .mktoCheckboxList>label {
margin-left: 0;
}
/* Checkbox and Radio formating */
.mktoRadioList input {
opacity: 0;
position: absolute;
}
.mktoRadioList input,
.mktoRadioList label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.mktoRadioList label {
position: relative;
}
/* Edit the properties below to change the colors of the un-checked radio button */
.mktoRadioList input+label:before {
background: #fff none repeat scroll 0 0;
border: 2px solid #ddd;
content: "";
display: inline-block;
height: 25px;
line-height: 15px;
margin-right: 10px;
padding: 4px;
text-align: center;
vertical-align: middle;
width: 25px;
;
}
.mktoRadioList input+label:before {
border-radius: 50%;
}
/* Edit the properties below to change the colors of the checked radio button */
.mktoRadioList input:checked+label:before {
content: "\2713";
color: #bbb;
}
.mktoRadioList input:focus+label {
outline: 1px solid #ddd;
/* focus style */
}
/* Radio button label padding */
body .mktoForm .mktoRadioList>label {
float: left;
margin-left: 0;
padding-right: 10px !important;
}
/* Radio button wrapper padding */
.mktoForm.mktoLayoutAbove .mktoRadioList {
margin-top: -5px !important;
padding-left: 10px !important;
}
/* Error Message */
.mktoForm .mktoError {
color: #666666;
position: absolute;
z-index: 99;
}
/* Error Message arrow */
.mktoForm .mktoError .mktoErrorArrow {
background-color: #666666 !important;
border-top-color: #666666 !important;
border-right-color: #666666 !important;
border-bottom-color: #666666 !important;
border-left-color: #666666 !important;
margin-top: 5px !important;
}
/* Error Message box */
.mktoForm .mktoError .mktoErrorMsg {
background-color: #666666 !important;
background-image: none !important;
border: 1px solid #666666 !important;
border-radius: 0px !important;
box-shadow: none !important;
padding: 5px !important;
text-shadow: none !important;
margin-top: 7px !important;
}
/*MEDIA QUERIES*/
#media all and (max-width:891px) {
h1 {
font-size: 45px;
font-weight: 700;
line-height: 49px;
color: #FFF;
max-width: 745px;
margin-top: -14px;
margin-bottom: 23px;
}
.content-wrapperForm {
overflow: hidden;
}
#mainContentLeft {
float: left;
width: 100%;
margin-top: 0;
}
#formWrapper {
float: left;
width: 100%;
padding: 24px;
margin-top: 10px;
box-sizing: border-box;
background-color: #FFF;
}
}
#media all and (max-width:320px) {
#mastheadImage {
background-image: none;
}
.logoWrapper {
margin-bottom: 30px;
}
h1 {
font-size: 32px;
font-weight: 700;
line-height: 36px;
margin-top: -11px;
margin-bottom: 23px;
}
#footerWrapper {
max-width: 1040px;
margin: auto;
padding: 22px 30px 22px 30px;
overflow: hidden;
}
}
<!doctype html>
<html>
<head>
<!-- Other Meta Tags -->
<meta charset="utf-8">
<link href="LP-Standard-Form-2017-2.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${page-title}</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- container -->
<div id="container">
<!-- masthead -->
<div id="mastheadBar">
<div id="mastheadImage">
<div class="content-wrapperForm">
<div id="formtop">
<div id="formWrapper">
<div class="formIntro">
<div class="formIntroCta">Please fill in the form below.</div>
<div class="formIntroReq">Fields marked with a <span style="color: #fc6621">*</span> are required.</div>
</div>
<div class="formIntroImg"></div>
<div class="mktoForm" id="DKform1" mktoName="Form"></div>
</div>
</div>
<div class="logoWrapper">
<div class="LogoWrapperText">${logo-text}</div>
</div>
<h1>${page-title}</h1>
</div>
</div>
</div>
<!--/masthead -->
<!--main content-->
<div id="mainContentWrap">
<div class="content-wrapperForm">
<div id="mainContentLeft">
<div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body Text">
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
</div>
</div>
<div id="formbottom"></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<!--/main content-->
<!--footer-->
<div id="footer">
<div id="footerWrapper">© Copyright
<script type="text/javascript">
document.write(new Date().getFullYear());
</script> Infor. All rights reserved.</div>
</div>
<!--/footer-->
</div>
<!--/container -->
</body>
</html>
I haven't change the code, only added transition property to #fromWrapper.
Please find the answer.
Updated code
#formWrapper {
float: left;
width: 100%;
padding: 24px;
margin-top: 10px;
box-sizing: border-box;
background: #FFF;
transition: all 1s linear;
}
http://postimg.org/image/sadzaa0up/
I'm trying to get the JS navigation buttons to fall inline with a full width background/box so the buttons aren't just floating. When I try to set this in the CSS I find the buttons aren't in line with this background/box/container. They sit slightly above it. I've tried altering margins etc but had no luck.
I'm not sure if the issue is related but I'm finding I can't position the nav bar directly beneath the logo container/header. It's being pushed so it's a 150px or so below the logo with a big gap between.
Then finally, the main body content area won't stretch to the width on the left side. I've sorted the right side using margins, yet the left side won't get rid of the gap.
Any help on this is greatly appreciated.
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='Index.html'>HOME</a></li>" +
"<li><a href='Customers.html'>SECTIONS</a></li>" +
"<li><a href='About.html'>HOWS</a></li>" +
"<li><a href='About.html'>OUR EXPERIENCE</a></li>" +
"<li><a href='About.html'>TESTIMONIALS</a></li>" +
"<li><a href='About.html'>NEWS</a></li>" +
"<li><a href='About.html'>CONTACT US</a></li>" +
"</ul>";
document.getElementById("foot01").innerHTML =
"<p>© lumi " + new Date().getFullYear() + " All rights reserved.</p>";
/* Check how to edit nav main background colour */
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px padding: 5px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -2;
}
#header {
position: absolute;
opacity: 0.6;
background-color: #ffffff;
width: 100%;
height: 90px;
margin: auto;
z-index: -1;
}
#logo {
position: center top;
margin: 0;
z-index: 2;
}
ul#menu {
width: 100%;
height: 50px;
padding: 0px;
border: 0px;
border-color: #374754;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu {
position: relative;
background-color: #374754;
padding: 0;
margin-top: 70px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: auto;
}
#h1 {
text-shadow: 5px 5px 5px ##374754;
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: center;
font-size: 24px;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>LOREM IPSUM</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="logo">
<img src="logo.png" alt="CROWD" style="width: 305px; height125px">
</div>
<nav id="nav01"></nav>
</div>
<link href="Site.css" rel="stylesheet">
<div id="main">
<h1>Welcome to LOREM</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est dui, aliquam non auctor eget, maximus eu ligula. Ut sed iaculis elit, ac pharetra sem. Nam ipsum sem, consectetur id bibendum vitae, faucibus at tellus. Mauris aliquam, justo efficitur luctus vehicula, velit arcu efficitur nunc, eu volutpat diam erat ut eros. Vestibulum nec mi tristique, blandit eros sit amet, porttitor urna. Ut vehicula elit ipsum, a rhoncus erat fermentum sed. Suspendisse non diam at ex tincidunt pharetra eu id sem.</h2>
<p>content</p>
<p>content</p>
<p>more content</p>
<p>data (more content)</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>