Coloring of tabs with Dynamics - javascript

I have a question, (Below) I am trying to make the links to the two tabs that rollup accordion style to shade the one that isn't selected. I have accomplished this but now I need to darken to two links once they are both closed.
Could you point me in the right direction?
WDH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- <script type="text/javascript" src="../../../jQ_161/jquery-1.6.1.js"></script> -->
<script type="text/javascript">
$(document).ready(function(){
$(".divOneDropdown").show();
$(".clickOnePara").click(function() {
$(".divOneDropdown").slideToggle(777);
if ( $(".divTwoDropdown").css("display") != "none" ) {
$(".divTwoDropdown").slideUp(777);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".clickTwoPara").click(function() {
$(".divTwoDropdown").slideToggle(777);
if ( $(".divOneDropdown").css("display") != "none" ) {
$(".divOneDropdown").slideUp(777);
}
});
});
</script>
<script type="text/javascript">
function flickColor1() {
document.getElementById("dropButtonTxt1").style.color="white";
document.getElementById("dropButtonTxt2").style.color="gray";
}
function flickColor2() {
document.getElementById("dropButtonTxt2").style.color="white";
document.getElementById("dropButtonTxt1").style.color="gray";
}
</script>
<style type="text/css">
.divOneDropdown, .clickOnePara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickOnePara{
background-color: transparent;
width: 200px;
float: left;
}
.divTwoDropdown, .clickTwoPara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickTwoPara{
background-color: transparent;
width: 200px;
float: left;
left: 4px;
}
.divOneDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
.divTwoDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
#contained{
/*border: black solid 2px;*/
width: 800px;
height: 700px;
position: relative;
margin: auto;
}
#topNavs{
position: relative;
left: 0px;
/*width: 100%;*/
padding-bottom: 0px;
}
#contentDrops{
padding-top: 20px;
}
/* Below is the Dropdown Nav Styles */
#dropButtons{
}
#dropNavButton1{
height: 31px;
left: 121px;
padding-left: 37px;
position: absolute;
width: 504px;
z-index: 5;
}
#dropNavButton1 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/ProcedureAndRecover.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton1 a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
#dropNavButton1 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropNavButton2{
height: 31px;
left: 376px;
padding-left: 37px;
position: absolute;
width: 503px;
z-index: 5;
}
#dropNavButton2 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/SafetyAndEffects.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton2 a:hover {
background-position: -252px 0;
}
#dropNavButton2 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropButtonTxt1{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
#dropButtonTxt2{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
/* Photo Gallery - Text not associated with above sprite */
#dropNavButton1 a:link{
color: #FFFFFF;
}
#dropNavButton1 a:visited{
color: #FFFFFF;
}
/* Contact - Text not associated with above sprite */
#dropNavButton2 a:link{
color: #FFFFFF;
}
#dropNavButton2 a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
/* Dropdown Nav Styles END */
/* Complimentary Consultation Button - START */
.compConsult{
background: url("Work/Images/ComplimentaryConsultation.png") no-repeat scroll 0 0 transparent;
background-color: #000000;
height: 38px;
left: 33%;
padding-left: 0;
position: relative;
width: 262px;
z-index: 5;
}
.compConsult a {
display: block;
height: 31px;
width: 248px;
text-decoration: none;
}
.compConsult a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
.compConsult a:active {
background-position: -504px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsult a:link{
color: #FFFFFF;
}
.compConsult a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsultTxt{
font-family: 'LaneB';
font-size: 18px;
padding-top: 6px;
position: absolute;
right: 16px;
width: 230px;
}
/* Complimentary Consultation Button - END */
</style>
</head>
<body>
<div id="contained">
<div id="topNavs">
<div id="dropNavButton1">
<p class="clickOnePara"><span id="dropButtonTxt1">PROCEDURE AND RECOVERY</span></p>
</div>
<div id="dropNavButton2">
<p class="clickTwoPara"><span id="dropButtonTxt2">SAFETY AND SIDE EFFECTS</span></p>
</div>
</div>
<div id="contentDrops">
<div class="divOneDropdown">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo est,
consequat vel rutrum ut, venenatis sit amet erat. In placerat tellus nunc,
et placerat arcu. Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aliquam laoreet lectus
et libero luctus mattis. Sed ac laoreet odio. Mauris nec cursus dui.
Curabitur tincidunt pretium quam, a iaculis velit porta nec.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Curabitur dignissim leo sed dolor dapibus quis auctor dui
vestibulum.
<br /><br />
Sed ac laoreet odio. Mauris nec cursus dui.
</p>
</div>
<div class="divTwoDropdown">
<p>
Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Sed elit enim, congue et laoreet a, molestie in neque.
<br /><br />
In placerat tellus nunc, et placerat arcu.
</p>
</div>
</div>
</div>
</body>
</html>

I believe I understand what you are asking for. Give this a shot:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".divOneDropdown").show();
$(".divTwoDropdown").hide();
ChangeColor()
$(".clickOnePara").click(function () {
$(".divOneDropdown").slideToggle(777,
function () {
ChangeColor();
}
);
$(".divTwoDropdown").hide();
});
$(".clickTwoPara").click(function () {
$(".divTwoDropdown").slideToggle(777,
function () {
ChangeColor();
}
);
$(".divOneDropdown").hide();
});
});
function ChangeColor() {
if ($('.divOneDropdown').is(':visible')) {
document.getElementById("dropButtonTxt1").style.color = "white";
document.getElementById("dropButtonTxt2").style.color = "gray";
}
else if ($('.divTwoDropdown').is(':visible')) {
document.getElementById("dropButtonTxt1").style.color = "gray";
document.getElementById("dropButtonTxt2").style.color = "white";
}
else {
document.getElementById("dropButtonTxt1").style.color = "gray";
document.getElementById("dropButtonTxt2").style.color = "gray";
}
}
</script>
<style type="text/css">
.divOneDropdown, .clickOnePara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
#contained { background-color: lightgray; }
.clickOnePara{
background-color: transparent;
width: 200px;
float: left;
}
.divTwoDropdown, .clickTwoPara {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickTwoPara{
background-color: transparent;
width: 200px;
float: left;
left: 4px;
}
.divOneDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
.divTwoDropdown {
display: none;
height: 260px;
top: 28px;
overflow: hidden;
}
#contained{
/*border: black solid 2px;*/
width: 800px;
height: 700px;
position: relative;
margin: auto;
}
#topNavs{
position: relative;
left: 0px;
/*width: 100%;*/
padding-bottom: 0px;
}
#contentDrops{
padding-top: 20px;
}
/* Below is the Dropdown Nav Styles */
#dropButtons{
}
#dropNavButton1{
height: 31px;
left: 121px;
padding-left: 37px;
position: absolute;
width: 504px;
z-index: 5;
}
#dropNavButton1 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/ProcedureAndRecover.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton1 a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
#dropNavButton1 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropNavButton2{
height: 31px;
left: 376px;
padding-left: 37px;
position: absolute;
width: 503px;
z-index: 5;
}
#dropNavButton2 a {
display: block;
height: 31px;
width: 248px;
background: url(Work/Sprites/SafetyAndEffects.png) 0 0 no-repeat;
text-decoration: none;
}
#dropNavButton2 a:hover {
background-position: -252px 0;
}
#dropNavButton2 a:active {
background-position: 0px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
#dropButtonTxt1{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
#dropButtonTxt2{
font-size: 16px;
font-family: 'LaneB';
padding-left: 0px;
padding-top: 6px;
}
/* Photo Gallery - Text not associated with above sprite */
#dropNavButton1 a:link{
color: #FFFFFF;
}
#dropNavButton1 a:visited{
color: #FFFFFF;
}
/* Contact - Text not associated with above sprite */
#dropNavButton2 a:link{
color: #FFFFFF;
}
#dropNavButton2 a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
/* Dropdown Nav Styles END */
/* Complimentary Consultation Button - START */
.compConsult{
background: url("Work/Images/ComplimentaryConsultation.png") no-repeat scroll 0 0 transparent;
background-color: #000000;
height: 38px;
left: 33%;
padding-left: 0;
position: relative;
width: 262px;
z-index: 5;
}
.compConsult a {
display: block;
height: 31px;
width: 248px;
text-decoration: none;
}
.compConsult a:hover {
background-position: -252px 0;
color: #FFFFFF;
}
.compConsult a:active {
background-position: -504px 0;
color: #DDDDDD;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsult a:link{
color: #FFFFFF;
}
.compConsult a:visited{
color: #FFFFFF;
}
/* a:link - - unvisited link */
/* a:visited - - visited link */
/* a:hover - - mouse over link */
/* a:active - - selected link */
.compConsultTxt{
font-family: 'LaneB';
font-size: 18px;
padding-top: 6px;
position: absolute;
right: 16px;
width: 230px;
}
/* Complimentary Consultation Button - END */
</style>
</head>
<body>
<div id="contained">
<div id="topNavs">
<div id="dropNavButton1">
<p class="clickOnePara">PROCEDURE AND RECOVERY</span></p>
</div>
<div id="dropNavButton2">
<p class="clickTwoPara">SAFETY AND SIDE EFFECTS</span></p>
</div>
</div>
<div id="contentDrops">
<div class="divOneDropdown">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo est,
consequat vel rutrum ut, venenatis sit amet erat. In placerat tellus nunc,
et placerat arcu. Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aliquam laoreet lectus
et libero luctus mattis. Sed ac laoreet odio. Mauris nec cursus dui.
Curabitur tincidunt pretium quam, a iaculis velit porta nec.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Curabitur dignissim leo sed dolor dapibus quis auctor dui
vestibulum.
<br /><br />
Sed ac laoreet odio. Mauris nec cursus dui.
</p>
</div>
<div class="divTwoDropdown">
<p>
Phasellus dignissim leo sed dolor dapibus quis auctor dui
vestibulum. Sed elit enim, congue et laoreet a, molestie in neque. Fusce
ullamcorper sapien ut tellus dictum id sollicitudin nunc congue.
Pellentesque posuere ultrices aliquam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
</p>
<div class="compConsult">
<span class="compConsultTxt">Complimentary Consultation</span>
</div>
<p>
Sed elit enim, congue et laoreet a, molestie in neque.
<br /><br />
In placerat tellus nunc, et placerat arcu.
</p>
</div>
</div>
</div>
</body>
</html>

Related

How can I show only a desired section and hide all others with vanilla Java Script?

I'm doing a landing page that builds the navigation menu dynamically with JS, and each item in the menu links with one section of the page.
Initially, all sections are hidden (CSS display: none), and then when the user clicks the menu item, the respective section appears.
The problem is that when I've already clicked on the menu to go to a certain section and then I click to go to another, both sections appear, and what I want is to only the section that I click appear, and the others hide.
For example, I click on section 2 then it appears. And when I click on section 4, section 2 disappears and section 4 appears.
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Antic+Slab&family=Henny+Penny&display=swap" rel="stylesheet">
</head>
<body>
<div class="grid__container">
<header class="page__header">
<nav class="navbar__menu">
<!--Mobile menu - won't appear on Desktop view-->
<div class="mobile__menu" onclick="toggleMenu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<ul id="navbar__list" class="menu__list"></ul>
</nav>
</header>
<div class="banner__hero">
<h1 class="heading__page">Landing Page </h1>
<div class="banner__center">
<ul class="motives__list__banner">
<li class="motives__item">Great motive</li>
<li class="motives__item">Great motive</li>
<li class="motives__item">Great motive</li>
<li class="motives__item">Great motive</li>
</ul>
<!--This review will only appear here on Desktop view-->
<q class="quote__review"><b>Great review from one of your customers</b><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus.
</q>
</div>
<button type="button" class="page__button">Buy here!</button>
<p class="introduction__text">Why someone would buy your product? (up to 5 lines)</p>
<button type="button" class="page__button" id=buttonContent>More info here!</button>
</div>
<!--The sections will only appear when the appropriate button is clicked-->
<main class="page__main">
<section id="section1" data-nav="More motives" class="your-active-class section__box">
<h2 class=" heading__section">More motives</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue.</p>
<p>Nunc molestie leo non cursus volutpat. Nam aliquam volutpat finibus. Cras rhoncus nec nisl sit amet pretium. Nullam scelerisque neque urna. Nam eget volutpat augue, eget lobortis enim.</p>
</section>
<section id="section2" data-nav="Images" class="section__box section__2">
<h2 class="heading__section">Images/ Screenshots of your product</h2>
<img src="img/product.jpg" alt="Product" class="product__image">
<p>Morbi porttitor auctor enim, sit amet sagittis odio suscipit eu. Vestibulum rutrum mollis dolor, non tristique lacus luctus ac. Integer in ipsum eget nisl pellentesque imperdiet ac vel sapien. Mi dui, sagittis in erat id, rutrum efficitur nisi. Fusce varius risus enim, vitae accumsan eros tincidunt sit amet. Phasellus blandit finibus eros eu suscipit.
</p>
</section>
<section id="section3" data-nav="Reviews" class="section__box section__3">
<h2 class="heading__section">Good reviews of your product</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt.</p>
<p>Morbi porttitor auctor enim, sit amet sagittis odio suscipit eu. Vestibulum rutrum mollis dolor,non tristique lacus luctus ac. Integer in ipsum eget nisl pellentesque imperdiet ac vel sapien.</p>
<p>Nunc molestie leo non cursus volutpat. Nam aliquam volutpat finibus. Cras rhoncus nec nisl sit amet pretium. Nullam scelerisque neque urna. Nam eget volutpat augue, eget lobortis enim. Proin hendrerit eu risus sed tempus. Nunc non lacinia sem, nec suscipit arcu.</p>
</section>
<section id="section4" data-nav="Maybe later" class="section__box section__4">
<h2 class="heading__section">Maybe later?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue.</p>
<p>Morbi porttitor auctor enim, sit amet sagittis odio suscipit eu. Vestibulum rutrum mollis dolor,non tristique lacus luctus ac. Integer in ipsum eget nisl pellentesque imperdiet ac vel sapien.</p>
<p>Nunc molestie leo non cursus volutpat. Nam aliquam volutpat finibus. Cras rhoncus nec nisl sit amet pretium. Nullam scelerisque neque urna. Nam eget volutpat augue, eget lobortis enim.</p>
<button type="button" class="page__button">Let's keep
talking</button>
</section>
</main>
<footer class="page__footer">
<h1 class="heading__section">Add me!</h1>
<p class="contact-text">Github</p>
<p class="contact-text">Linkedin</p>
</footer>
</div>
<script src="js/app.js"></script>
</body>
This is my CSS:
/*
============================
Universal layout
============================
*/
body {
max-width: 100%;
box-sizing: border-box;
font-family: "Antic Slab", serif;
font-size: 16px;
color: #1f2932;
background: linear-gradient(to bottom, #ffefba, #ffffff);
padding: 0px;
margin: 0px;
}
p {
text-align: justify;
}
.grid__container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content;
grid-template-areas:
"nav"
"banner"
"main"
"footer";
max-width: 100%;
}
.page__header {
grid-area: nav;
width: 100%;
}
.menu__list {
font-family: "Henny Penny", cursive;
list-style-type: none;
}
.menu__link {
text-decoration: none;
color: #000000;
font-size: 1.3rem;
border-radius: 25px;
padding: 5px;
border-bottom: 2px inset #000000;
}
.banner__hero {
text-align: center;
grid-area: banner;
border-bottom: 2px dotted #000000;
}
.motives__item {
list-style-image: url(../img/tick-mark.svg);
font-weight: bold;
}
.heading__page {
font-family: "Henny Penny", cursive;
font-size: 4rem;
text-align: center;
}
.page__button {
border: 2px inset #000000;
padding: 12px;
margin: 20px 0;
font-size: 2rem;
background-color: #ffff00;
text-align: center;
cursor: pointer;
}
.page__button:hover {
font-weight: bold;
background-color: #9acd32;
}
.introduction__text {
text-align: center;
}
.page__main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: justify;
max-width: 100%;
padding: 0 10px 0 5px;
gap: 5px;
height: 100%;
}
.heading__section {
font-family: "Henny Penny", cursive;
text-align: center;
}
.product__image {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Setting the display to none, will change onclick with JS */
.your-active-class,
.section__2,
.section__3,
/*
The review will only appear in this part if the user is on a desktop.
Otherwise, it will appear, in the section of reviews (3).
*/
.quote__review {
display: none;
}
.section__4 {
text-align: center;
display: none;
}
.page__footer {
grid-area: footer;
width: 100%;
text-align: center;
display: block;
border-top: 2px dotted #000000;
}
.contact {
text-decoration: underline;
color: #000000;
font-size: 1.2rem;
}
.contact-text {
text-align: center;
}
/*
============================
Mobile layout
============================
*/
#media screen and (max-width: 599px) {
.mobile__menu {
display: inline-block;
cursor: pointer;
}
/* Creating the sandwich menu */
.bar1,
.bar2,
.bar3 {
width: 2rem;
height: 0.3rem;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.menu__list {
display: none;
overflow: hidden;
position: relative;
padding: 0px;
}
.menu__link {
display: block;
margin-bottom: 10px;
padding: 12px;
font-size: 1.3rem;
border-radius: 25px;
border-bottom: 2px inset #000000;
width: 50%;
}
.motives__list__banner {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 40%;
font-size: 1.3rem;
}
.motives__item::marker {
font-size: 4rem;
}
.introduction__text {
font-size: 1.2rem;
}
.product__image {
width: 100%;
}
}
/*
============================
Tablet layout
============================
*/
#media screen and (min-width: 600px) and (max-width: 900px) {
.mobile__menu {
display: inline-block;
cursor: pointer;
}
/* Creating the sandwich menu */
.bar1,
.bar2,
.bar3 {
width: 2rem;
height: 0.3rem;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.menu__list {
display: none;
overflow: hidden;
position: relative;
padding: 0px;
}
.menu__link {
display: block;
margin-bottom: 10px;
padding: 12px;
font-size: 1.3rem;
border-radius: 25px;
border-bottom: 2px inset #000000;
width: 50%;
}
.motives__list__banner {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.motives__item {
font-size: 1.6rem;
}
.motives__item::marker {
font-size: 4rem;
}
.page__button {
font-size: 2.5rem;
}
.product__image {
width: 80%;
}
}
/*
============================
Desktop layout
============================
*/
#media screen and (min-width: 901px) {
.mobile__menu,
.change .bar1,
.change .bar2,
.change .bar3 {
display: none;
}
.menu__list {
display: flex;
justify-content: space-between;
font-family: "Henny Penny", cursive;
list-style-type: none;
background-color: #ffefba;
}
.menu__link {
text-decoration: none;
color: #000000;
font-size: 1.3rem;
border-radius: 25px;
padding: 5px;
border-bottom: 2px inset #000000;
}
.menu__link:hover {
background-color: #657482;
}
.banner__center {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.motives__list__banner {
text-align: left;
width: 20%;
margin-left: auto;
}
.motives__item {
font-size: 2rem;
}
.motives__item::marker {
font-size: 4rem;
}
.quote__review {
display: block;
margin-right: auto;
font-style: italic;
width: 40%;
height: 100%;
}
.introduction__text {
font-size: 1.5rem;
}
.product__image {
width: 50%;
}
}
And this is my JS:
// Global variables
const sections = document.getElementsByTagName("section");
const fragment = document.createDocumentFragment();
const navBar = document.querySelector("#navbar__list");
const button = document.querySelector("#buttonContent");
// Function that creates dynamically the NavBar
function createNavBar () {
for (section of sections) {
const newElement = document.createElement('li');
newElement.innerHTML = `<a class="menu__link" id="menu__${section.id}" href="#${section.id}"> ${section.dataset.nav}</a>`;
fragment.appendChild(newElement);
}
navBar.appendChild(fragment);
}
// Calling the function
createNavBar();
// Showing the sections content only when the linked Nav button is clicked
const menuLink = document.querySelectorAll(".menu__link");
const navList = document.querySelector('.navbar__menu');
navList.addEventListener('click', function showContent (event) {
let currentSelection = event.target.id;
let sectionNumber = currentSelection.slice(-1);
let element = document.querySelector('#section'+sectionNumber);
element.style.display = "block";
})
// Function to display the menu list on Mobile & Tablet layouts
// Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon
function toggleMenu() {
if (navBar.style.display === "block") {
navBar.style.display = "none";
} else {navBar.style.display = "block"}
}
// If the button 'More info here' is clicked, all the content appears.
button.addEventListener ('click', function () {
for (section of sections) {
section.style.display = 'block';
}
})
Did it with the help of #Randy Casburn and #Chris G in the comments:
const sections = document.getElementsByTagName("section");
function showSection () {
navList.addEventListener('click', function showContent (event) {
for (section of sections) {
section.style.display = "none";
let currentSelection = event.target.id;
let sectionNumber = currentSelection.slice(-1);
let element = document.querySelector('#section'+sectionNumber);
element.style.display = "block";
}
})
}
showSection();

Modals not showing properly

Im doing some modals for a web but they don't show properly on my PC. I played with this code (https://codepen.io/joshuaward/pen/jYZXGo) to do it, adding the information that I would use and changing the font and all went good but when I transfered it to Sublime Text and save it, this is what looks like.
modals
JAVASCRIPT:
const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
const modal = document.querySelector(`[data-modal=${trigger}]`);
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
I just added a google font (and changed font family in CSS file) + added charset utf-8 (because the information is in spanish) in the top of the original code in the HTML file.
Hi the problem is the code from where you are copying the stuff is using the SCSS
https://codepen.io/joshuaward/pen/jYZXGo
You need to convert or compile the SCSS to CSS
using this link https://www.cssportal.com/scss-to-css/
Below code is for converted CSS from SCSS and working fine.
const buttons = document.querySelectorAll(`button[data-modal-trigger]`);
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
const modal = document.querySelector(`[data-modal=${trigger}]`);
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
html {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-smooth: auto;
font-weight: 300;
line-height: 1.5;
color: #444;
background-color: slategray;
}
button {
cursor: pointer;
}
body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.trigger {
margin: 0 0.75rem;
padding: 0.625rem 1.25rem;
border: none;
border-radius: 0.25rem;
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.24);
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
font-size: 0.875rem;
font-weight: 300;
}
.trigger i {
margin-right: 0.3125rem;
}
.trigger:hover {
box-shadow: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.25), 0 0.625rem 0.625rem rgba(0, 0, 0, 0.22);
}
.modal {
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 0vh;
background-color: transparent;
overflow: hidden;
transition: background-color 0.25s ease;
z-index: 9999;
}
.modal.open {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.25s;
}
.modal.open > .content-wrapper {
transform: scale(1);
}
.modal .content-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 50%;
margin: 0;
padding: 2.5rem;
background-color: white;
border-radius: 0.3125rem;
box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
transform: scale(0);
transition: transform 0.25s;
transition-delay: 0.15s;
}
.modal .content-wrapper .close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: none;
background-color: transparent;
font-size: 1.5rem;
transition: 0.25s linear;
}
.modal .content-wrapper .close:before, .modal .content-wrapper .close:after {
position: absolute;
content: '';
width: 1.25rem;
height: 0.125rem;
background-color: black;
}
.modal .content-wrapper .close:before {
transform: rotate(-45deg);
}
.modal .content-wrapper .close:after {
transform: rotate(45deg);
}
.modal .content-wrapper .close:hover {
transform: rotate(360deg);
}
.modal .content-wrapper .close:hover:before, .modal .content-wrapper .close:hover:after {
background-color: tomato;
}
.modal .content-wrapper .modal-header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0 0 1.25rem;
}
.modal .content-wrapper .modal-header h2 {
font-size: 1.5rem;
font-weight: bold;
}
.modal .content-wrapper .content {
position: relative;
display: flex;
}
.modal .content-wrapper .content p {
font-size: 0.875rem;
line-height: 1.75;
}
.modal .content-wrapper .modal-footer {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin: 0;
padding: 1.875rem 0 0;
}
.modal .content-wrapper .modal-footer .action {
position: relative;
margin-left: 0.625rem;
padding: 0.625rem 1.25rem;
border: none;
background-color: slategray;
border-radius: 0.25rem;
color: white;
font-size: 0.87rem;
font-weight: 300;
overflow: hidden;
z-index: 1;
}
.modal .content-wrapper .modal-footer .action:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
transition: width 0.25s;
z-index: 0;
}
.modal .content-wrapper .modal-footer .action:first-child {
background-color: #2ecc71;
}
.modal .content-wrapper .modal-footer .action:last-child {
background-color: #e74c3c;
}
.modal .content-wrapper .modal-footer .action:hover:before {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<button data-modal-trigger="trigger-1" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 1
</button>
<button data-modal-trigger="trigger-2" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 2
</button>
<button data-modal-trigger="trigger-3" class="trigger">
<i class="fa fa-fire" aria-hidden="true"></i>
Modal 3
</button>
<div data-modal="trigger-1" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 1</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
<div data-modal="trigger-2" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 2</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
<div data-modal="trigger-3" class="modal">
<article class="content-wrapper">
<button class="close"></button>
<header class="modal-header">
<h2>This is a modal 3</h2>
</header>
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
<footer class="modal-footer">
<button class="action">Accept</button>
<button class="action">Decline</button>
</footer>
</article>
</div>
I think you missed add CSS file link or put the SCSS code if you using only HTMl then use css not scss
I try with your code in subline it's work fine
Here i upload link in W3Schoolenter link description here

how can i overlay div to

how can i remove my overlay background div with mouse move with mouse radius area, i attached my code for demo... pls solved any one and help me thank you. any one create this type of structure for my website
var mouseX = 0, mouseY = 0;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
// cache the selector
var follower = $(".follower");
var xp = 0, yp = 0;
var loop = setInterval(function () {
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({ left: xp, top: yp, opacity:1});
//$(follower).css({ });
}, 30);
$(document).ready(function () {
$(".divStick").click(function () {
$(".divOverlay").addClass("overlayStick");
$(this).addClass("active");
if ($(".divOverlay").hasClass("overlay")) {
$(".divOverlay").removeClass("overlay");
}
if ($(".divOverlay").hasClass("overlayShoes")) {
$(".divShoes").removeClass("active");
$(".divOverlay").removeClass("overlayShoes");
}
});
$(".divShoes").click(function () {
$(".divOverlay").addClass("overlayShoes");
$(this).addClass("active");
if ($(".divOverlay").hasClass("overlay")) {
$(".divOverlay").removeClass("overlay");
}
if ($(".divOverlay").hasClass("overlayStick")) {
$(".divOverlay").removeClass("overlayStick");
$(".divStick").removeClass("active");
}
});
});
<style>
.txt {
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:rgba(0,0,0,0.9);
z-index: 9999;
color: white;
text-align: center;
}
.overlay:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.overlayStick {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 9999;
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
cursor: url(stick2.png), auto;
}
.overlayStick:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.overlayShoes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 9999;
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
cursor: url(shoes.png), auto;
}
.overlayShoes:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.txt {
display: inline-block;
vertical-align: middle;
padding: 10px 15px;
position: relative;
font-weight: bold;
background-color: #C90;
}
.txt:hover {
background-color: #900;
cursor: pointer !important;
}
.tx {
display: inline-block;
vertical-align: middle;
padding: 10px 15px;
position: relative;
font-weight: bold;
}
.active {
background-color: #900;
}
.new {
display: inline-block;
vertical-align: middle;
padding: 10px 15px;
position: relative;
font-weight: bold;
}
.overlay2 {
text-align: center;
}
.overlay2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 9999;
color: white;
}
.overlay2:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
/*.overlay2 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
cursor: url(shoes.png), auto;
}*/
.new a {
color: #fff;
}
.txt a {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.follower {
position: absolute;
background-color: #FFFFFF;
color: #fff;
height: 80px;
width: 80px;
border-radius: 50%;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
/*.follower {
position: absolute;
background-color: #FFFFFF;
color: #fff;
height: 150px;
width: 150px;
border-radius: 50%;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}*/
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="box medium">
<h1>overlay div remove with mouse move</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<div class="divOverlay overlay">
<div class="txt divStick">Stick</div>
<div class="txt divShoes">Shoes</div>
<div class="follower"></div>
<div class="tx">TAKE SOMEOTHER TIME </div>
</div>
</div>
</body>
</html>

CSS: Set of images move over when image1 animates out of place when they should stay where they are

I'm building a CSS lightbox gallery. I want to pretty up part of its operation using CSS transition animations. What I'm attempting to do is this: When you hover over the base image, it animates with a "pulse" to let you know you can interact with it. When you click on it, it spins and zooms and fades out towards the viewer, as if it's turning into the block of information that will fade in in the lightbox that is supposed to appear. The box that comes up is not purely an image. It's a span of text with an image. Then when you click the (X) close button or click anywhere on the page, the lightbox disappears abruptly without fading out and all the original images are back in place.
What's actually happening is you click on the base image, it spins, zooms, and fades like it should, but in the background, the other images to its right slide over to take its place. Then when you click the lightbox away, everything is back in place. I don't want the other images to move over and fill where the first one was. How do I keep everything from shifting, so that when you click on image1 and it animates away, the other images stay put? This way if you click on image2, image 3, 4, and 5 etc don't slide over, or whatnot.
I'm using some Javascript to make my click animations happen, that I borrowed/learned from another Stack Overflow question that was answered. If you can find a better way to achieve what I want, please help and add it.
As a side question, how can I make the lightbox come up such that if you click on the (X) close button or outside the text box, it closes the lightbox, but if you click inside the text box, nothing happens and the lightbox stays where it is? This way people can click and highlight to copy text inside of the text box if they want.
I cannot seem to reproduce any of the click animation through the snippet code, so just so you can see what's actually happening, here's a link to the original test code on my personal web account where you can see the actual click animation and what's going wrong: http://www.cafenocturne.com/testpage/biogallery/
Here's a snippet of the code I'm working with.
$(window).load(function() {
$(".ClickAnim").click(function() {
$(this).addClass("rotOutZm");
setInterval(function() {
$(".ClickAnim").removeClass("rotOutZm");
}, 2000);
});
});
/* Just some base styles not needed for example to function */
*,
html {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
html,
body {
height: 100%;
}
body,
form,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
margin: 0;
padding: 0;
}
body {
background-color: #606061;
color: WHITE;
overflow: hidden;
}
img {
border: none;
}
p {
font-size: 12px;
margin: 0 0 1em 0;
}
h2 {
padding: 10px 0 0 20px;
}
.clear + h2 {
padding: 0 0 0 20px;
}
.clear {
height: 0 !important;
line-height: 0 !important;
clear: both !important;
font-size: 1px !important;
margin: 0;
padding: 0;
float: none !important;
}
/* animations */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*rotateOut+Zoom */
#keyframes rotOutZm {
100% {
margin: -50px;
/* image is 100x100px size so... */
-webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
opacity: 0;
}
}
#-webkit-keyframes rotOutZm {
100% {
margin: -50px;
/* image is 100x100px size so... */
-webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
opacity: 0;
}
}
.rotOutZm {
-webkit-transform-origin: center;
-webkit-animation: rotOutZm forwards 1.8s;
transform-origin: center;
animation: rotOutZm forwards 1.8s;
}
/* pulse */
#-webkit-keyframes pulse1 {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes pulse1 {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
/* fadeIn */
#-webkit-keyframes fadeIn1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn1 {
-webkit-animation-name: fadeIn1;
animation-name: fadeIn1;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
/* Bio styles */
ul {
padding: 20px 0 20px 20px;
float: left;
}
ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0 10px 0 0;
}
.pulse1:hover {
-webkit-animation: pulse1 0.8s;
/* Safari 4+ */
-moz-animation: pulse1 0.8s;
/* Fx 5+ */
-o-animation: pulse1 0.8s;
/* Opera 12+ */
animation: pulse1 0.8s;
/* IE 10+, Fx 29+ */
}
ul li img,
ul li label {
display: block;
cursor: pointer;
}
ul li input {
display: none;
}
ul li input:checked + .overlay {
display: table;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 999;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
.overlay label {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.overlay img {
display: inline;
border: none;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: WHITE;
}
.overlay label > img,
.content01 {
border: 1px solid GRAY80;
-moz-box-shadow: 5px 5px 10px BLACK;
-webkit-box-shadow: 5px 5px 10px BLACK;
box-shadow: 5px 5px 10px BLACK;
}
.content01 {
display: block;
width: 460px;
padding: 20px;
background: WHITE;
color: BLACK;
margin: 0 auto;
text-align: left;
cursor: auto;
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.content01 .inner_content {
display: block;
height: 500px;
overflow-y: auto;
}
.content01 .inner_content span {
display: block;
margin-bottom: 12px;
font-size: 12px;
}
.overlay .inner_content {
height: 265px;
}
.content01 img:first-child {
float: left;
display: block;
margin: 0 10px 0 0;
}
.content01 img {
float: right;
margin: 0 10px;
padding: 0;
}
input[id^='bio'] {
cursor: pointer;
height: 265px;
}
.content02 {
width: 820px;
padding: 0;
}
#close {
display: none;
}
.closebutton {
background: #606061;
color: #FFFFFF;
cursor: pointer;
height: 24px;
line-height: 24px;
overflow: hidden;
position: absolute;
right: -12px;
text-align: center;
top: -12px;
width: 24px;
border: 2px solid;
border-color: #c18c8b #c05a58 #cc514e #a67776;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
-moz-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
-webkit-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
}
.closebutton:hover {
background: #f43530;
text-shadow: 1px 1px 1px GRAY80;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<h2>Static Content</h2>
<ul>
<li>
<label class="animated pulse1" for="bio">
<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Hideto" />
</label>
<input type="radio" id="bio" name="Staff" />
<div class="overlay animated fadeIn1">
<label for="close"> <span class="content01">
<strong class="closebutton" title="Close bio">X</strong>
<span class="inner_content">
<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
</span>
</span>
</label>
</div>
</li>
<li>
<label class="animated pulse1" for="bio2">
<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Kieran" />
</label>
<input type="radio" id="bio2" name="Staff" />
<div class="overlay animated fadeIn1">
<label for="close"> <span class="content01">
<strong class="closebutton" title="Close bio">X</strong>
<span class="inner_content">
<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
<span>OTHER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
</span>
</span>
</label>
</div>
</li>
</ul>
<div class="clear"> </div>
<input type="radio" id="close" name="Staff" />
</body>
</html>
I have dabbled on your link. If you put a width and height (same width and height of image) on the that is wrapping the image it will keep the space there, instead of moving the next image in its place.
ul li label{
width: 100px;
height: 102px;
}

Resizing divs depending on information inside

I have a container where I want to hold information (which would be updated regularly). But sometimes, I might want this information to be long or short, and for this I cant have a fixed height on my container, so depending on the amount of text/information it should resize. Here's my script.
HTML:
<html>
<head>
<title>LoL Champs</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- NAVIGATION -->
<div id="nav-bar">
<div id="nav-bar-title">LoL Champs</div>
<ul>
<li>Champs</li>
<li>Info</li>
<li>Guides</li>
<li>Model Viewer</li>
<li>Lists</li>
</ul>
</div>
<!-- END NAVIGATION -->
<div id="main-body">
<div id="nav-body-divider"></div>
<p id="home-body-title">News</p>
<!-- News Container -->
<div id="news-container">
</div>
</div>
</body>
</html>
And CSS:
/** MAIN PAGE CONFIG CSS **/
html, body {
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 1920px;
max-height: 1050px;
font-size: 100%;
}
html {
background: url(../images/JinxBG.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
color: white;
}
a:link {color: inherit;}
a:visited {color: inherit;}
a:active {color: inherit;}
a {text-decoration: none;}
/** MAIN CSS **/
/**NAVIGATION**/
#nav-bar {
width: 100%;
height: 10%;
background-color: #A62D2D;
position: fixed;
box-shadow: 0px 2px 9px black;
font-size: 100%;
max-height: 10%;
max-width: 100%;
}
#nav-bar-title {
font-family: 'Sansita One';
color: #262424;
position: absolute;
width: 20%;
height: 100%;
left: 0.3%;
font-size: 1.8em;
max-width: 16%;
margin-top: 1.2%;
}
#nav-bar ul {
list-style-type: none;
color: #2E2C2C;
font-family: 'Belleza';
font-size: 1.5em;
position: absolute;
top: 0;
max-width: 100%;
max-height: 100%;
left: 15%;
line-height: 0%;
margin-top: 0;
margin-bottom: 10%;
top: 50%;
}
#nav-bar li {
margin-right: 45px;
display: inline;
height: 100%;
-webkit-transition: color 0.5s ease;
}
#nav-bar li:hover {
color: #C7C7C7;
-webkit-transition: color 0.5s ease;
}
/** END NAVIGATION **/
/** MAIN TEXT BODY **/
#nav-body-divider {
width: 100%;
height: 1px;
background: #B55050;
}
#main-body {
max-width: 100%;
max-height: 90%;
background: #A62D2D;
width: 70%;
height: 100%;
margin: auto;
position: relative;
top: 10%;
}
/** MAIN BODY NEWS **/
#home-body-title {
font-size: 2.4em;
font-family: Belleza;
color: #C98A5D;
position: relative;
left: 3%;
top: 0%;
}
#news-container {
width: 45%;
height: 40%;
background: #CF4040;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
position: relative;
left: 3%;
}
I want to resize news-container so that it adapts to the amount of stuff in it, but resize it only on height. The width should stay the same. Also, if the div will be bigger, how can I move the objects that will be below that div to accommodate further down on the page and make space for the big container?
Cheers, Nick
You should never set a height on anything. Always let the content grow naturally. http://jsfiddle.net/LQkj3/
<div id="news-container">
<p>
This is the news section! height will automatically grow depending on the amount of data! you should NEVER control height with pixels or percentage! always let the content grow it automatically.
</p>
</div>
<style>
#news-container { width: 45%; background: #CF4040; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; position: relative; left: 3%; padding: .5em 1em; }
</style>
...Unless of course you need a scrollable container (like #griegs suggested). ;)
Then you could put a max-width: 10em; or something to that effect.
<div style="width:200px; border: 1px solid black; max-height: 400px; overflow: scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et iaculis dui, id dapibus nibh. Phasellus sollicitudin urna non elementum aliquam. Vivamus nec aliquet quam. Mauris eget sollicitudin tellus, at dictum tellus. Donec sed porttitor quam, in suscipit nisl. Praesent vestibulum auctor turpis quis vulputate. Quisque eget erat vel tellus pretium bibendum. Mauris feugiat urna nec pharetra bibendum. Integer consectetur nisl cursus aliquam rhoncus. Mauris vulputate pulvinar commodo. Mauris placerat enim erat, a dignissim metus laoreet quis. Aenean nec ipsum neque. Proin adipiscing tellus ut nisi rutrum tempus. Aliquam erat volutpat. In dignissim consectetur tellus sit amet sagittis. Nam ac quam id nunc adipiscing commodo.
</div>
Remove the overflow and the max-height if these are not important to you. I put them in to demonstrate that pure css should be all you need.
As the div grows, the elements below it will be pushed down so long as they are not positioned absolute or floated etc.

Categories