How would I be able to vertically center the dialog box at its current scroll position of the window when either one of the "show dialog" buttons is clicked?
Example: When I click the bottom on locations 3. I'm trying to get the dialog box to be vertically centered at that current viewing window screen. And this should be the case for all buttons.
$('.show-dialog-btn').click(function() {
$('#dialog-box').addClass('display-dialog-box');
});
$('.close-dialog-btn').click(function() {
$('#dialog-box').removeClass('display-dialog-box');
});
.locations-container {
padding: 10px
}
.locations-container:not(last-of-type) {
margin-bottom: 100px
}
.locations-container:nth-child(3) {
background: #eee
}
#dialog-box {
top: 50%;
left: 50%;
z-index: 99;
display: none;
width: 220px;
color: #4a4a4a;
position: absolute;
border-radius: 10px;
background: #fff;
padding: 10px;
transform: translate(-50%, -50%);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 1px 5px 4px rgba(0, 0, 0, 0.1)
}
#dialog-box.display-dialog-box {
display: block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--- Locations 1 Div ---->
<div class="locations-container">
<h2>Locations 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p>
<button class="show-dialog-btn">Show Dialog</button>
</div>
<!--- Locations 2 Div ---->
<div class="locations-container">
<h2>Locations 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p>
<button class="show-dialog-btn">Show Dialog</button>
</div>
<!--- Locations 3 Div ---->
<div class="locations-container">
<h2>Locations 3</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p>
<button class="show-dialog-btn">Show Dialog</button>
</div>
<!--- Dialog Box ---->
<div id="dialog-box">
<h1>Dialog box</h1>
<p>Dialog box text</p>
<button class="close-dialog-btn">Close box </button>
</div>
Just replace position: absolute with fixed in #dialog-box:
$('.show-dialog-btn').click(function() {
$('#dialog-box').addClass('display-dialog-box');
$('body').addClass('disable-scroll');
});
$('.close-dialog-btn').click(function() {
$('#dialog-box').removeClass('display-dialog-box');
$('body').removeClass('disable-scroll');
});
.locations-container {
padding: 10px
}
.locations-container:not(last-of-type) {
margin-bottom: 100px
}
.locations-container:nth-child(3) {
background: #eee
}
#dialog-box {
top: 50%;
left: 50%;
z-index: 99;
display: none;
width: 220px;
color: #4a4a4a;
position: fixed;
border-radius: 10px;
background: #fff;
padding: 10px;
transform: translate(-50%, -50%);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 1px 5px 4px rgba(0, 0, 0, 0.1)
}
#dialog-box.display-dialog-box {
display: block
}
body.disable-scroll {
overflow: hidden !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--- Locations 1 Div ---->
<div class="locations-container">
<h2>Locations 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p>
<button class="show-dialog-btn">Show Dialog</button>
</div>
<!--- Locations 2 Div ---->
<div class="locations-container">
<h2>Locations 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p>
<button class="show-dialog-btn">Show Dialog</button>
</div>
<!--- Locations 3 Div ---->
<div class="locations-container">
<h2>Locations 3</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus aliquid quas, ut fugiat, ipsum, veniam aut fuga impedit sunt laboriosam praesentium ullam quisquam eos rem voluptas corporis vel hic natus!</p>
<button class="show-dialog-btn">Show Dialog</button>
</div>
<!--- Dialog Box ---->
<div id="dialog-box">
<h1>Dialog box</h1>
<p>Dialog box text</p>
<button class="close-dialog-btn">Close box </button>
</div>
Related
I have an api that will give a number of either 1-5 under "ratings" , i also have a list of 5 stars, depending on the rating these stars will either turn red or black on click of the button, red will be for each number in the Ratings . i.e a rating of 4 would turn 4 of the stars red and 1 black. so far i have the html and css created but when the button is pressed i recieve no data at all to test the button I added a basic alert and that worked. So far I have this:
DEMO:
$("#viewreview").click(function(){
$.ajax("api link").done(function(data){
$(".reviewblk").html('');
var htmlstr = '';
for(var i=0; i<data.length; i++){
var rating = parseInt(data[i]["rating"]);
var chk = ['', '', '', '', ''];
for(var j=0; j<rating && j<5;j++){
chk[j] = 'checked';
}
htmlstr += '<div class="preview"><img src="reviewicon1.jpg" alt="reviewpic" class="revImg" /><div class="stars"><p class="checked '+chk[0]+'"></p><p class="checked '+chk[1]+'"></p><p class="checked '+chk[2]+'"></p><p class="checked '+chk[3]+'"></p><p class="checked '+chk[4]+'"></p></div><h3 class="personName">'+data[i]["nickname"]+'</h3><div class="revtext"><p>'+data[i]["review"]+'</p></div></div><hr />';
}
$(".reviewblk").html(htmlstr);
});
})
.productreviews{ /*sets font*/
font-family: 'Roboto Condensed', sans-serif;
}
.preview{ /*sets padding for how the div is displayed*/
padding-left: 60px;
padding-top: 30px;
padding-bottom: 30px;
display: block;
position: relative;
}
.revImg{ /*gives images curved edges*/
border-radius: 10px;
display: inline;
}
.personName{ /*sets the person name so that it is to the right of the image and just below the stars*/
display: inline;
position: absolute;
padding-left: 30px;
padding-top: 20px;
width: 150px;
}
.stars{ /*sets stars elements to above name and to the right of the image*/
position: absolute;
width: 100px;
top: 30px;
left: 180px;
}
.revtext{ /* displays the text div so that it is to the right side of the preview box*/
display: inline;
width: 550px;
position: absolute;
right: 0;
font-size: 15px;
font-weight: 600;
top: 10px;
}
.revtext p{ /*i used word wrap to wrap the word onto the next line then used overflow to contain the overflowing text and then used text overflow so that any overflowing text would be shown as an ellipsis*/
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
}
.btnreview{ /* setting the padding for the buton aswell as the color so that the text is white and the button itself is red, aswell as giving it curved edges.*/
padding: 10px 25px;
background-color: #F0191C;
color: white;
border: none;
border-radius: 10px;
}
.btnreview:hover{ /*changing the button when hovering and changing the cursor to a pointer*/
background-color: #8a130b;
cursor: pointer;
}
.btnblk{/* padding the button inside its div*/
padding: 25px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="productreviews"> <!--list of product reviews-->
<hr />
<h1 id = "productreviewheader">Product Reviews <span class="checked">*****</span></h1>
<hr />
<div class="reviewblk">
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr />
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">***<span class="unchecked">**</span></p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">****<span class="unchecked">*</span></p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="preview">
<img src="images/robot-juice-images/reviewicon2.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">This juice just keeps me going..</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="reviewblk">
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="btnblk">
<button class="btnreview" id="viewreview">READ ALL REVIEWS</button>
</div>
</article>
Please consider the following.
$("#viewreview").click(function() {
$.ajax("api link").done(function(data) {
$(".reviewblk").html('');
var rating, preview, stars;
$.each(data, function(i, el) {
preview = $("<div>", {
class: "preview"
}).appendTo(".reviewblk");
$("<img>", {
src: "reviewicon1.jpg",
alt: "Review Icon",
class: "revImg"
}).appendTo(preview);
stars = $("<div>", {
class: "stars"
}).appendTo(preview);
rating = parseInt(el.rating);
for (var i = 1; i <= 5; i++) {
$("<p>", {
class: (i <= rating ? "checked" : "unchecked")
}).appendTo(stars);
}
$("<h3>", {
class: "personName"
}).html(el.nickname).appendTo(preview);
$("<div>", {
class: "revText"
}).html("<p>" + el.review + "</p>").appendTo(preview);
$("<hr>").appendTo(preview);
});
});
});
We can use jQuery to create the elements and append them as they are created. Using $.each(), we can itereate each of the items in data. WE also know there will be 5 'check' items, so we can simply create a small loop to create them. A number of them, equal to the rating will be "checked", so we can add a condition to check each one and mark it as needed.
For example, if the rating was 3, we would see:
<p class="checked"></p>
<p class="checked"></p>
<p class="checked"></p>
<p class="unchecked"></p>
<p class="unchecked"></p>
i will be 1 on the first iteration, and 1 is less than 3. On the 3rd loop, i will be 3 and will still meet the condition. When i is 4 or 5, it is no longer true so unchecked is supplied.
Just like this example build by tcoloredbox of latex.
My problems are:
how to make the title, the Loi image part, be adjusted by sentence length?
how to make the position of the title, still the Loi image part, has a changeable position? Can pure css work this out?
if I want the title sentence be changed when I click/hover the title, how should I do that?
Ok, I have relaize that the math equations are indeed a problem, here is a new post about the problem:
The new post.
Something like this?
https://codepen.io/seanstopnik/pen/f4482b76c1a6973f0f57b9f606c62e16
/* For demo only */
body {
padding: 60px;
}
/* Example */
.box {
position: relative;
border: 1px solid #000;
border-radius: 10px;
padding: 10px;
}
.box:not(:last-child) {
margin-bottom: 40px;
}
.box__title {
position: absolute;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 30px;
border-radius: 8px;
background-color: #000;
padding: 0 6px;
}
.box__title--top-left {
top: -52px;
left: 10px;
}
.box__title--top-right {
top: -52px;
right: 10px;
}
.box__title--bottom-left {
bottom: -52px;
left: 10px;
}
.box__title--bottom-right {
bottom: -52px;
right: 10px;
}
<div class="box">
<h6 class="box__title box__title--top-left">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--top-right">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--bottom-left">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--bottom-right">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
I have this test page.
As you can see from the demo, I want the menu bar with the links to disappear to the right when the burger icon is not toggled, but overflow: hidden; doesn't seem to work.
Also, I noticed that if I hide the menu on the LEFT, so with a negative value: transform: translatex(-120%); instead of: transform: translatex(120%); I don't have this problem even without specifying overflow: hidden;.
I also tried giving a width to the body, 'cause I thought "how can it know where to stop 'spilling' content if I don't tell it?", but quiz-show wrong answer sound. :)
What am I doing wrong?
(By the way, this is the first time posting a snippet with some JS inside! Feel powerful :) )
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
header {
margin-bottom: -180px;
}
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(120%);
transition: .5s;
overflow: hidden;
}
.nav1.active {
transform: translatex(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
overflow: hidden;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>
Check out this snippet:
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
header {
margin-bottom: -180px;
overflow-x: hidden;
}
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(120%);
transition: .5s;
}
.nav1.active {
transform: translatex(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
overflow: hidden;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
</body>
</html>
You need to understand that <header> is overflowing not <nav class="nav1" id="nav1">. Also overflow is happening horizontally only.
Inside CSS, you just need to remove overflow: hidden; from your .nav1 and add overflow-x: hidden; to your header.
im trying to make something like text rotator.
When i click on About tab i want to show only about info, when i click on projects i want to delete about text and replace it with project text and same with other depending which i actually press.
I can make it to appear one under another. But that's not what i want. Hope you guys understand what i want to do.
DON'T WRITE IT FOR ME! Just please tell me where i should look for it, should i use loop?
HTML:
<main>
<div class="menuContainer">
<ul>
<li class="about" id="about">
<h2>O mnie</h2>
</li>
<li class="projects" id="projects">
<h2>Projekty</h2>
</li>
<li class="empty">
<div class="circle"></div>
</li>
<li class="technology" id="technology">
<h2>Technologie</h2>
</li>
<li class="contact" id="contact">
<h2>Kontakt</h2>
</li>
</ul>
</div>
<div class="poleDoZmiany">
<p id="doZmiany" class="zmiana">
Welcome Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit culpa labore temporibus fugiat eum error hic illo perspiciatis dignissimos, corporis, aut sapiente sint numquam!
</p>
</div>
<p id="Tekst1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, natus nam! Excepturi ipsam voluptates magni odio adipisci, officia consequuntur praesentium eos cumque exercitationem soluta, eveniet dolor sed reiciendis asperiores modi pariatur placeat animi, debitis ratione. Hic illo incidunt, praesentium excepturi vero perspiciatis corrupti maxime accusamus, iusto repellendus quam id. </p>
<p id="Tekst2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus sint modi quisquam autem perferendis maxime impedit sed. Doloremque, reprehenderit neque perspiciatis facere quia saepe architecto odio aspernatur, voluptas nobis blanditiis, quisquam beatae?
</p>
<p id="Tekst3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, facilis. Deserunt, in.
</p>
<p id="Tekst4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure fugiat sequi accusantium inventore asperiores magnam impedit sit maiores praesentium! Ea exercitationem, veritatis placeat blanditiis vitae iste, cupiditate asperiores voluptate cumque quisquam ipsam repellat accusamus debitis omnis aliquid! Iste rerum consectetur impedit porro molestias numquam. Facere eveniet at dolorum deleniti! Facilis nisi ut beatae laudantium nulla culpa amet neque inventore at minus. Reiciendis distinctio ab voluptas! Earum excepturi corporis odit?
</p>
CSS:
main {
width: 80%;
position: absolute;
left: 10%;
top: 35vh;
background: white;
-webkit-box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
}
main p {
margin-top: 90px !important;
margin: 25px;
padding: 25px;
text-align: center;
}
.media {
text-align: center;
}
.media > img {
padding: 10px;
}
p {
display: none;
}
#doZmiany {
display: block;
}
JAVASCRIPT:
let tekst1 = document.getElementById('Tekst1');
let tekst2 = document.getElementById('Tekst2');
let tekst3 = document.getElementById('Tekst3');
let tekst4 = document.getElementById('Tekst4');
var zmiana = document.getElementById('doZmiany');
const oMnie = document.getElementById('about');
const projekty = document.getElementById('projects');
oMnie.addEventListener('click', function(){
tekst1.classList.add('zmiana');
})
projekty.addEventListener('click', function(){
tekst2.classList.add('zmiana');
})
You're almost there. Keep in mind, that you need to hide all the paragraphs you don't want to show with every click. So a loop is a good idea.
And then show the one and only.
Here is a code snippet that does something like that a little different from your approach in case you get stuck. Go on with your solution!
document.getElementById('tablist').addEventListener('click', function(e){
const tabs = ['tab1', 'tab2'];
const ti = tabs.indexOf(e.target.id);
if(ti !== false){
for(let i = 0; i < tabs.length; i += 1) {
if(ti !== i){
document.getElementById(tabs[i]+'Txt').style.display = 'none';
}
}
document.getElementById(tabs[ti]+'Txt').style.display = 'block';
}
});
.hiddenText {
display: none;
}
<ul id="tablist">
<li id="tab1">tab1</li>
<li id="tab2">tab2</li>
</ul>
<p id="tab1Txt" class="hiddenText">
This is tab1Txt.
</p>
<p id="tab2Txt" class="hiddenText">
This is tab2Txt.
</p>
For your tabs, add a class called tab and for all of your content paragraphs, give them a class of tab-content.
Then create a click event for the class of tab. In the click event get the ID of what is being clicked on and use that to determine the content to be shown. First, hide ALL of tab-content paragraphs, then only show the paragraph based on the passed ID.
Like facebook, when hover over the image of the friend it shows drop menu out side the left sidebar of friends,
I gave the drop menu position absolute with respective to the app itself (position: relative), but the problem is when scrolling down the menu appear below its anchor tag, how can I fix it ?
here is the sample of the code that I have,
can I implement this with pure css or I need JS ?
.App {
position: relative;
}
nav {
overflow: auto;
max-height: 700vh;
}
.dropMenu {
position: absolute;
}
<div className="App">
<nav>
<ul>
<li>
<a onClick={this.showDropMenu}> ... </a>
</li>
<div className="dropMenu"></div>
</ul>
</nav>
</div>
Use position: sticky;
.App{
position: sticky;
}
nav {
overflow: auto;
max-height: 700vh;
}
.dropMenu {
position: absolute;
}
This is the simplest way you can do it using only CSS. You may have to implement other behaviors if you want to have a fully functional dropdown-menu.
$(".nav li").on("mousemove", evt => {
const li = $(evt.target);
const dropdown = $(evt.target).find('.dropdown-menu');
let liTop = li.offset().top;
liTop = liTop < 0 ? liTop * -1 : liTop;
dropdown.css('top', liTop + li.height());
})
ul {
list-style: none;
overflow-y: auto;
height: 100px;
width: 400px;
}
ul li {
margin: 20px 0;
}
ul li:hover .dropdown-menu {
display: block;
}
ul li .dropdown-menu {
position: absolute;
display: none;
width: 300px;
background-color: #fff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
<li>
Lorem 1
<div class="dropdown-menu">
Lorem 1 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 2
<div class="dropdown-menu">
Lorem 2 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 3
<div class="dropdown-menu">
Lorem 3 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 4
<div class="dropdown-menu">
Lorem 4 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
<li>
Lorem 5
<div class="dropdown-menu">
Lorem 5 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
</div>
</li>
</ul>