I have a issue that my scroll bar does not appear when more elements are added to the page. I also have a modal that overlays the entire page when you click on an item.
However, the modal does not appear if I change the position: fixed to something else in the CSS.
So my question is, how do I make it so that the scroll bar appears and the modal still overlays correctly?
Here are some images:
Elements with no scroll bar
Modal overlay
Elements with scroll bar, but no modal
App.css:
.page-container {
height: 100%;
width: 100%;
position: fixed;
z-index: 0;
}
.modify-modal-container {
height: 100%;
width: 100%;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0, 0.5);
z-index: 1;
}
.modify-modal-container-hide {
display: none;
}
Index.css:
body, html, #root, .App {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: white;
}
As you can see with the above pictures, I can get the scroll bar to appear. But when trying to click on an item to open the modal, it does not appear / open.
Any help is appreciated, thank you!
Changing .page-container{} position to absolute and changing .modify-modal-container{} position to fixed.
This fixed my issue!
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 have a pop up modal when the page loads. There are two ways: changing in CSS the opacity to 1 or with jQuery.
.popupmodal{
display: block;
line-height: 250%;
font-size: 2.5vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 1;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.popupmodal:target{
opacity: 1;
pointer-events: auto;
}
.popupmodal > div{
height: auto;
width: 50%;
position: relative;
margin: 10% auto;
padding: 3% 2% 3% 2%;
background: #fff;
border-radius: 1%;
}
.popup-modal-quest > div{
background-color: transparent;
margin: 1% auto;
height: 60vh;
}
}
<!-- just to be sure the modal is working -->
<!-- You have a new quest. Click here to see. -->
<p>TRY TO SELECT THIS TEXT</p>
<div id="quest-modal" class="popupmodal popup-modal-quest">
<div class="modal-quest">
<img src="img/wooden-warning.png">
<div class="btns-quest">
<input type="button" value="Accept quest" class="btn-quest">
<input type="button" value="Do not accept quest" class="btn-quest">
</div>
</div>
</div>
Both ways make the modal appear when the document loads. However, I can not interact with the inputs inside it. When I click on the button, all the modal and its content become like static.
I started learning JS and jQuery recently, so I would like to know if the solution needs some code of these.
The pointer-events:none setting in your CSS is doing exactly what it's supposed to do - - make it so the mouse pointer does not interact with anything. So, remove that.
Also, the vendor prefixed CSS is not needed as CSS transitions have been standard for almost a decade now.
.popupmodal{
display: block;
line-height: 250%;
font-size: 2.5vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 1;
transition: opacity 400ms ease-in;
}
.popupmodal:target{
opacity: 1;
pointer-events: auto;
}
.popupmodal > div{
height: auto;
width: 50%;
position: relative;
margin: 10% auto;
padding: 3% 2% 3% 2%;
background: #fff;
border-radius: 1%;
}
.popup-modal-quest > div{
background-color: transparent;
margin: 1% auto;
height: 60vh;
}
}
<!-- just to be sure the modal is working -->
<!-- You have a new quest. Click here to see. -->
<p>TRY TO SELECT THIS TEXT</p>
<div id="quest-modal" class="popupmodal popup-modal-quest">
<div class="modal-quest">
<img src="img/wooden-warning.png">
<div class="btns-quest">
<input type="button" value="Accept quest" class="btn-quest">
<input type="button" value="Do not accept quest" class="btn-quest">
</div>
</div>
</div>
Remove pointer-events: none; from .popupmodal{}
Add some javascript code to do some stuff when you click the button. Also add id="" to each button.
const acceptBtn = document.getElementById("acceptBtn");
const doNotAcceptBtn = document.getElementById("doNotAcceptBtn");
acceptBtn.addEventListener('click', () => {
/*
when accept button is clicked, do some stuff
*/
});
doNotAcceptBtn.addEventListener('click', () => {
/*
when doNotAcceptBtn is clicked, do some stuff
*/
});
I tried coding it myself based on research on the internet. I was able to get it fixed at the bottom. When clicking, it does slide out the menu; but it slides out downwards when it should have pushed the tab upwards to display the menu. If I use negative margin and simply change bottom: -150 to bottom: 0px on click, it does produce the desired behavior by sliding it up from past the bottom of the window and it displays correctly. But it means the menu is pushing the page past the bottom of the page rather than simply being hidden. So when it's "hidden", one can simply scroll down and see the full menu which shouldn't be the case.
So rather than using bottom to manipulate it, I tried using $(this).show("slide"). The menu came out looking distorted thanks to using the sliding animation.
Here's the snippet:
var supTabState = false;
$("#dccontainer").css('bottom', '-150px');
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
supTabState = !supTabState;
if (supTabState) {
// $("#dccontainer").css('bottom', '0px');
$(this).show("slide", {
direction: "down"
}, 1000);
} else {
// $("#dccontainer").css('bottom', '-150px');
$(this).show("slide", {
direction: "up"
}, 1000);
}
});
#dccontainer {
position: absolute;
bottom: 0;
width: 300px;
left: 50%;
height: 200px;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I've tried various techniques. I've tried toggling with CSS alone using CSS animation and toggleClass, I've tried using slide, and I've tried using slideToggle. I also tried using display: block; instead of using flexbox. Both had the same effect. Researching the internet yielded several possible solutions (which I've tried, but all came out with the same result), and those usually weren't based on an element being fixed at bottom of window. The only one that came closest to what I was looking for was this:
http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html
But strangely, when I attempted to use the same code that used, nothing happened. Clicking did not bring up the menu. I'm at a loss at this point. Where am I going wrong?
This is my latest attempt (using above code): https://codepen.io/doncullen/pen/JjdrxzY
To answer your question Where am I going wrong: you're specifying a fixed height of 200px on #dccontainer. Specifying a fixed height to the container renders the jQuery's slideToggle useless. jQuery's slideToggle animates the height of the given element, and in your case, you're animating #dcsupportcontainer. Even though you're animating the height of #dcsupportcontainer to 0px using slideToggle, the whole support block will still remain 200px in height. This causes makes the whole block not to move down when the #dcsupportcontainer is gone. You can, of course, manually calculate and assign the new bottom value to #dccontainer, but that's a real hassle and really unintuitive.
Not wanting to calculate the bottom value myself, I will not set a height to #dccontainer and just let its height be. It will set its height to all its children's requirements (the default value is auto). Furthermore, instead of using fixed, you used absolute. You should use fixed here as you want the support block to always be visible (even when the user scrolls down); this means that you should position it based on your viewport and not an element (read more about positioning here). I also did minor adjustments on your CSS styles so that it's a tad more concise. One last thing, I suggest that you revisit flexbox here and here to utilise it better.
Here's a working solution:
// First time accessing, hide the support buttons section
$('#dcsupportcontainer').hide()
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500)
});
* {
box-sizing: border-box;
margin: 0;
}
body {
min-width: 100vw;
min-height: 100vh;
}
#dccontainer {
position: fixed;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 50vw;
min-width: 200px;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}
#dccontainer * {
padding: 7px 20px;
text-align: center;
}
#dcsupporttab {
font-weight: bold;
border-radius: 5px 5px 0 0;
background: #121212;
color: #ffffffee;
cursor: pointer;
}
#dcsupportcontainer {
border: 1px solid #121212;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
Just take the fixed height from your main container #dccontainer, and everything will be fine. You should also remove a few lines of your javascript code to fix everything. That fixed height of dccontainer makes the whole nav to stand 200px up from the bottom of your page and that makes you use more jQuery to fix it at the bottom. Remember that the bottom: 0px will set the bottom of your element at the 0px bottom of its container.
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
});
#dccontainer {
position: absolute;
bottom: 0px;
width: 300px;
left: 50%;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I have a 3 panel image section (section 1, 2 and 3) - on hover over section 1 for example, I would like for the original bg to fade out while a new bg fades in while simultaneously growing to the full length of the section "overlapping" the other sections. Once this section is full width I would like to be able to hover over section two and the same process occur without having to actually move the mouse out of the section area first.
I have managed to get to a point where the section expands and the image changes over, however, once say section 1 is expanded - it occupies the full width of the section so hovering over section 2 does not trigger the hover animation for section 2. Instead I have to move the mouse so that it is outside of the section and re-enter over section 2 to begin that animation.
Its probably easier to see so attached is a jsfiddle in addition to the code below.
https://jsfiddle.net/tr5km94w/1/
<div class="panel-test-background">
<div class="panel-test-one"></div>
<div class="panel-test-two"></div>
<div class="panel-test-three"></div>
</div>
<div class="panel-container">
<div class="panel-one">
<div class="panel-text-one">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.01</h1>
<br />
</div>
</div>
</div>
<div class="panel-two">
<div class="panel-text-two">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.02</h1>
</div>
</div>
</div>
<div class="panel-three">
<div class="panel-text-three">
<div class="text-top">
<h3>section</h3>
<br />
<h1>Section Title No.03</h1>
</div>
</div>
</div>
</div>
<style>
.panel-container {
width: 100%;
height: 75vh;
display: flex;
}
.panel-one {
flex-grow: 1;
height: 75vh;
position: relative;
pointer-events: none;
}
.panel-two {
flex-grow: 1;
height: 75vh;
position: relative;
pointer-events: none;
left: 6px;
}
.panel-three {
flex-grow: 1;
height: 75vh;
position: relative;
pointer-events: none;
}
.panel-text-one {
flex-grow: 1;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
pointer-events: none;
}
.panel-text-two {
flex-grow: 1;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
pointer-events: none;
}
.panel-text-three {
flex-grow: 1;
height: 75vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
pointer-events: none;
}
.panel-text-one h3 {
font-family: "Arial", sans-serif;
font-size: 1.5rem;
color: white;
}
.panel-text-one h1 {
font-family: "Arial", sans-serif;
font-size: 2rem;
color: white;
}
.panel-text-one span {
color: white;
}
.panel-text-two h3 {
font-family: "Arial", sans-serif;
font-size: 1.5rem;
color: white;
}
.panel-text-two h1 {
font-family: "Arial", sans-serif;
font-size: 2rem;
color: white;
}
.panel-text-two span {
color: white;
}
.panel-text-three h3 {
font-family: "Arial", sans-serif;
font-size: 1.5rem;
color: white;
}
.panel-text-three h1 {
font-family: "Arial", sans-serif;
font-size: 2rem;
color: white;
}
.panel-text-three span {
color: white;
}
.panel-test-background {
width: 100%;
height: 75vh;
position: absolute;
display: flex;
}
.panel-test-one {
flex-grow: 1;
height: 75vh;
background: red;
width: 0%;
transition: width 0.5s;
}
.panel-test-one:hover {
width: 100%;
transition: width 0.5s;
background: blue;
}
.panel-test-two {
flex-grow: 1;
height: 75vh;
background: green;
width: 0%;
transition: width 0.5s;
}
.panel-test-two:hover {
width: 100%;
transition: width 0.5s;
background: yellow;
}
.panel-test-three {
flex-grow: 1;
height: 75vh;
background: purple;
width: 0%;
transition: width 0.5s;
}
.panel-test-three:hover {
width: 100%;
transition: width 0.5s;
background: pink;
}
</style>
The issue I am having then I guess is that because whichever section you initially hover over takes up the full width of the container so that when section 1 is expanded, although I am hovered over section 2 or 3 it is still technically section 1 since it is full-width. Is there anyway around this so that I can trigger the other animations when I hover over the respective sections? Any help is greatly appreciated.
Thank you
edit: for a bit of clarification of what an ideal end would like look, I was inspired by the image section on basicagency.com near the end of the homepage.
One thing I did notice is that with the initial it appears that there are only 3 's and there should be 4 's before the next section begins. This may be helpful to try.
I was alerted to a behavior I am not sure how to prevent in a hidden div, which appears once a polygon is clicked in this fiddle --
http://jsfiddle.net/mkhines/pTgxa/
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: auto;
position: fixed;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
height: 300px;
overflow: scroll;
overflow-y: auto;
word-wrap: normal;
max-width: 45%;
}
.info h4 {
margin: 0 0 5px;
color: #2b4eb6;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
}
th {
text-align: left;
vertical-align: top;
}
The desired behavior is that I don't want the background map (#map) to scroll when the user is perusing the results (#info) of their click with the vertical scroll bar in the div.
Any thoughts on a CSS solution for this? It only seems to show itself in Firefox. Essentially, when scrolling down, the map also moves behind it.
Thank you!
Megan
You need to disable scrolling when the popup is displayed
info.update(html);
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
I added a resetMapControls function that is triggered when clicking on the "Reset Selection" button. This will enable scrolling again on close.
function resetMapControls(){
map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
}
Checkout the following : http://jsfiddle.net/pTgxa/16/
More details on disabling scrolling below
https://www.mapbox.com/mapbox.js/example/v1.0.0/disable-zooming-panning/