I am making a website for my university project and I am going through some issues regarding my text classes. For some reason my classes seem to have an odd height, resulting in a white strip appearing at the bottom of my web page.
#index-section div.index-title-quote{
top: 165%;
left: 50%;
margin-bottom: -100%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 1;
}
#index-section div.index-title-quote h2{
font-family: 'Bebas Neue', cursive;
color: #fff;
font-size: 20px;
padding: 20px;
opacity: 0.8;
}
#index-section div.index-title-quote h5{
font-family: 'Roboto', sans-serif;
color: #fff;
font-style: italic;
font-size: 13px;
opacity: 0.6;
}
<div id="index-section">
<div class="index-title-quote">
<center><h2>"Honour may not win power, but it wins respect. And respect earns power</h2></center>
<center><h5>- Ishida Mitsunari, legendary samurai</h5></center>
</div>
here is my code, thank you for taking the time to read this.
Your code has quite a lot wrong with it. To begin with, your first <div> tag is not closed.
<div id="index-section">
Your text is white on a white background, making it impossible to see.
color: #fff;
Your div text is positioned 165% of the page-height away from the top, ensuring that it can't be seen at all.
top: 165%;
I've attached a snippet with these fixes
#index-section div.index-title-quote{
top: 10%;
left: 50%;
margin-bottom: -100%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 1;
}
#index-section div.index-title-quote h2{
font-family: 'Bebas Neue', cursive;
color: black;
font-size: 20px;
padding: 20px;
opacity: 0.8;
}
#index-section div.index-title-quote h5{
font-family: 'Roboto', sans-serif;
color: black;
font-style: italic;
font-size: 13px;
opacity: 0.6;
}
<div id="index-section">
<div class="index-title-quote">
<center><h2>"Honour may not win power, but it wins respect. And respect earns power</h2></center>
<center><h5>- Ishida Mitsunari, legendary samurai</h5></center>
</div>
</div>
Related
background video image
Hi I have a background video (The jellyfish move) this is a photo of a frame of this video
I need to understand why writing "Medusa" text has a background color, maybe the color is #222, but I don't see how to disable it in code. i need to create a navbar but the background color is getting in the way!
I need the navigation bar to be transparent like this
tesla navbar example
See Code
import logo from './logo.svg';
import './App.css';
import bgvideo from './components/bgvideo.mp4';
function App() {
return (
<div className="App">
<div className='navbar'>
<h1>Medusa</h1>
</div>
<div className='bg'>
<video autoPlay muted loop>
<source src= {bgvideo} type ="video/mp4" />
</video>
</div>
</div>
);
}
export default App;
* {
margin: 0;
padding: 0;
background-color: #222;
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1 {
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 6rem;
margin-top: 30vh;
background-image: none;
background-color: none;
}
* {
margin: 0;
padding: 0;
/* background-color: #222; remove this line */
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1 {
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 6rem;
margin-top: 30vh;
/* background-image: none; and no need for this */
/* background-color: none; and this */
}
this should fix your problem of navbar not being translucent
.navbar {
background-color: rgb(0 ,0 , 0, 0.5);
}
using the rgb coloring it you can have a 4th value for opacity or you can simply use the opacity type
.navbar {
opacity: 50%;
}
background-color: none; is not valid CSS, background-color will only take a colour value. You can use transparent instead so use background-color: transparent; instead of background-color: none;. You may find this does nothing when you add it to your <h1> element and that is because the *{} css query selector is giving absolutely every single element that styling, this will make the div containing the text have a background colour. Putting stuff like background color in a * query selector is generally a bad practice. However I don't know what your intentions are. You should probably give the <body> element the background color styling so it doesn't interfere with other elements .
I'm trying to get a site to show and potentially sell my artwork, and need some help with a page header and menu (both in the same div), which at the top of the page are angled by 45° and are above the other elements (at z-index 2). This is fine at a scroll position of 0, but gets in the way when one scrolls down to the page's other text elements, and non-background images. I want to have these elements to be moved to 0 rotation, and fixed at the top of the page at any scroll position >300px, or even duplicate them and have one show and the other hide based upon this position. I can do the CSS part myself, but scripting is a bit beyond me.
I already have tried this (https://css-tricks.com/styling-based-on-scroll-position/ ) to change the CSS, but haven't had any luck getting it to do anything. The menu itself is shown/hidden through another piece of javascript that does work. Both the scripts I have tried, and the CSS are linked externally.
This is the current code I have:
html:
<div class="bgimg-1">
</div>
<div class="base">
<h2>Site Name</h2>
<div>
<h3>Menu</h3>
</div>
<ul class="menu" id="content">
<li>Home</li>
<li>Design Services</li>
<li>Artwork</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
The CSS is:
.base {
position: fixed;
top: 11rem;
left: -4rem;
width: 100%;
z-index: 2;
}
.base h2 {
width: 35%;
background: #000000;
padding: .25rem 1rem .25rem 3rem;
color: #FFFFFF;
transform: rotate(45deg);
font-family: novecento-sans-wide, sans-serif;
font-weight: 600;
}
.base h3 {
width: 20%;
transform: rotate(45deg);
background: #000000;
padding: .25rem 2rem .25rem 3rem;
margin-left: 3rem;
color: #FFFFFF;
font-family: novecento-sans-wide, sans-serif;
font-weight: 500;
}
.base a {
text-decoration: none;
color: #FFFFFF;
}
Use jQuery for the detection on 300px and adding a class. Just to make it funky for you I added a transition:all 1s;. Since you know your CSS, enjoy with a simply added class. Cheers!
$(document).scroll(function() {
if($(document).scrollTop() >= 300 ) {
$('.base h2').addClass('rotateback');
$('.base h3').addClass('rotateback');
} else {
$('.base h2').removeClass('rotateback');
$('.base h3').removeClass('rotateback');
}
});
body{
height:2000px;
}
.base {
position: fixed;
top: 11rem ; /* 11rem */
left: -4rem;
width: 100%;
z-index: 2;
}
.base h2 {
width: 35%;
background: #000000;
padding: .25rem 1rem .25rem 3rem;
color: #FFFFFF;
transform: rotate(45deg);
font-family: novecento-sans-wide, sans-serif;
font-weight: 600;
transition:all 1s;
}
.base h3 {
width: 20%;
transform: rotate(45deg);
background: #000000;
padding: .25rem 2rem .25rem 3rem;
margin-left: 3rem;
color: #FFFFFF;
font-family: novecento-sans-wide, sans-serif;
font-weight: 500;
transition:all 1s;
}
.base a {
text-decoration: none;
color: #FFFFFF;
}
.base h2.rotateback {
transform: rotate(0deg);
}
.base h3.rotateback {
transform: rotate(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bgimg-1">
</div>
<div class="base">
<h2>Site Name</h2>
<div>
<h3>Menu</h3>
</div>
<ul class="menu" id="content">
<li>Home</li>
<li>Design Services</li>
<li>Artwork</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I pieced together some code I found for a FAQ accordion on my site.
I am not sure how to make the title expand with 1 click, as it currently takes 2.
I would also like the icon to rotate upon expanding/collapsing.
It is currently only rotating on/off hover.
I am including a short example of what I currently have.
Any help would be much appreciated, thank you.
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active',
isActive = $answer.hasClass(actveClass);
$('.answer').slideUp().addClass(actveClass);
if (isActive) {
$answer.toggleClass(actveClass);
$answer.slideToggle();
}
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
You're sending contradicting orders to your function. Here $('.answer').slideUp().addClass(actveClass); you're sliding up all of the answers and adding the active class to all of them (I believe you wanted to remove it).
Then, you ask if the target answer has the active class (the answer is obviously yes, no matter what, because you have added it to all of the elements right before).
This conditional if (isActive) {, even if your previous code was correct, would be completely unnecessary. What you can do remove the active class from all of answers except the target one, and then toggle the clicked answer only, which you have already targeted here $answer = $(this).next().
So the working code would be:
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active';
$('.answer').not($answer).slideUp().removeClass(actveClass); /* remove instead of add and apply in every answer except the clicked one*/
/* remove unnecessary conditional */
$answer.toggleClass(actveClass);
$answer.slideToggle();
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
Update to have the icon working properly
Same method as for the .answer. You remove the active class from all the buttons except the clicked one, and then toggle the clicked button class.
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active';
$('.bracket-button').not($(this)).removeClass(actveClass);
$('.answer').not($answer).slideUp().removeClass(actveClass);
$(this).toggleClass(actveClass);
$answer.toggleClass(actveClass);
$answer.slideToggle();
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br
/>Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br
/>your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
.destination {
width: 100%;
height: 130vh;
background-color: #f8f8f8;
margin: 0 auto;
}
.destination-inner {
margin: 0 auto;
padding: 100px 0px 0 0;
}
.destination-inner h1 {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 29px;
color: #555555;
text-transform: uppercase;
text-align: center;
}
.destination-inner h1 span {
font-weight: 600;
}
.destination-inner h2 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 16px;
color: #555555;
text-transform: uppercase;
text-align: center;
padding-bottom: 25px;
}
.destination-inner h3 {
list-style: none;
color: #fff;
font-family: 'Roboto', sans-serif;
vertical-align: middle;
font-size: 28px;
font-weight: 300;
text-transform: uppercase;
line-height: 1.4;
padding-top: 80px;
}
.destination-inner p {
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
line-height: 1.7;
color: #555555;
text-align: center;
margin-bottom: 50px;
}
.destination-inner hr {
width: 14%;
color: #fe0103;
margin-top: 50px;
margin-bottom: 50px;
}
.destination-inner ul {
max-width:90%;
padding: 0px 30px;
margin: 0 auto;
text-align: center;
padding:10px 25px;
cursor: pointer;
list-style: none;
}
.destination-inner li {
background-color: #32374a;
display: inline-block;
width: 250px;
height: 320px;
cursor: pointer;
transition: all 0.3s ease 0s;
padding: 70px 40px;
margin-right: 15px;
list-style: none;
}
.destination-inner li a {
text-decoration: none;
}
.destination-inner li:hover {
background-color: #393F55;
transition: all 0.3s ease 0s;
}
<section class="destination" id="travels">
<div class="destination-inner">
<h2>STEP 01</h2>
<h1>Choose your <span>Destination</span></h1>
<hr>
<p>They are innovative and carefully researched and curated.<br> They guides are also hand picked, and are highly experienced, very often with a special expertise.<br> The vehicles are able to be adapted to more active days of touring.</p>
<ul data-grid="Grid 3">
<li>
<a href="#">
<h3>City & <br>Table Mountain</h3>
</a>
</li>
<li>
<a href="#">
<h3>The Cape <br>Peninsula</h3>
</a>
</li>
<li>
<a href="#">
<h3>The <br>Winelands</h3>
</a>
</li>
<li>
<a href="#">
<h3>The <br>Overberg</h3>
</a>
</li>
</ul>
</div>
</section>
I trust we are all good. I am trying to create a content sliding effect for the section of blocks(refer to img attached).
Is it possible to create something where, when a user clicks on any block out of the 4, a new section of 4 blocks slides in to replace the current block?
I'm still a baby when it comes to JavaScript and I have been looking for tuts but no luck. I'd really appreciate some help.
Thanks in advance.
I presume you are trying to achieve a wizard kind of feature here, like from step 1 to step 2 to step 3 and so on and show some results in the end. You may also want to go back and forth with these steps.
jQuery Smart Wizard - http://techlaboratory.net/jquery-smartwizard is all you need.
You can easily customize this plugin as per your need. For example, you can go the next step when user clicks on any of the four cards. All you have to do is to simply write this:
$('#smartwizard').smartWizard("next");
You can write this code when we click on any of the four cards. So you can provide same class names to all four cards and use above code on clicking.
For example:
$(".card").click(function() { $('#smartwizard').smartWizard("next"); });
This plugin will surely help you and will take most of the overhead, like going back one step and making changes.
If you need any help with the implementation, please reach out, however, the site has super helpful documentation.
Please note that there are plenty of other plugins also and we can also write this code on our own, but I really like this one.
Specifics: The animation you wanted to achieve here, like clicking on one card will bring 4 new cards will happen with ease here.
You just have to write the HTML as mentioned on the plugin site.
Best,
Sumit
I have a simple leaflet map with a GeoJSON point layer.
I want an infobox instead of the regular pop-up, so, in HTML, I have created the following:
<div id="panoutitlu" class="info-container" style="z-index: 601">
<div class="info-title">
<h1>Selectați ceva</h1>
</div>
<div class="info-body" id="corp">
<div class="info-content-container">
<div class="info-content" id="panoutext"></div>
</div>
</div>
</div>
When clicking on one of the points in the layer, the div named info-title gets populated with an attribute from the GeoJSON, as follows:
function onEachFeature(feature, layer) {
layer.on({
click: function populate() {
document.getElementById('panoutitlu').innerHTML = feature.properties.adresa;
});
The thing I can't get to work is how to expand the div when the info-title is clicked, similar to this map. I want to recreate the exact behaviour, including the smooth transition. That's why I took the CSS from it and changed a few sizes and fonts:
.info-title {
height: 80px;
font-family: 'Fira Sans Condensed';
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.info-content {
padding: 0 8% 24px 8%;
margin: 0 auto;
background: #385c54;
overflow-y: scroll;
font-family: 'Fira Sans Condensed';
font-size: 1rem;
line-height: 1.25em;
font-weight: 300;
}
.info-container {
position: absolute;
overflow-y: hidden;
bottom: 0;
right: 250px;
z-index: 1000;
background: #385c54;
cursor: pointer;
width: 300px;
height: 60vh;
color: #FFF;
font-family: 'Fira Sans Condensed';
font-size: 18px;
transition: all 0.4s ease-in-out;
transform: translateY(calc(100% - 80px));
}
.info-container.info-active {
transform: translateY(0);
}
.info-body {
margin-top: 80px;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
height: 80%;
}
In JavaScript, I tried adding an event listener:
document.getElementById('panoutitlu').addEventListener("click", toggle('info-active') );
but it didn't work.
Hopefully, somebody can help.
The solution was indeed an Event Listener:
document.getElementById('panoutitlu').addEventListener("click", function slide() {this.classList.toggle('info-active');}