Hidden Things Appear when click elemet - javascript, css - javascript

I have a problem on learning the web.
When I click on the text, the hidden element be appear.
But there are several texts.
I used Javascript getElementsByClassName and it doesn't work.
i am doing web like probot.io (discord bot web commands)
i am not good at javascript :(
What should I do?
pls Help me (T_T)
// ??
#import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&family=IBM+Plex+Sans+Thai+Looped:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Heebo:wght#700&family=Roboto:ital,wght#1,700&display=swap');
body {font-family: 'IBM Plex Sans Thai Looped', sans-serif; background-color: #36393F;}
.nav {
background-color: black;
padding: 7px;
font-family: 'Amatic SC', cursive;
}
#pagetitle {color: white; text-align: center; font-size: 30px;}
.heading {
/* text-align: center; */
background-color: #202225;
color: white;
margin: 30px;
margin-left: 30%;
margin-right: 30%;
padding: 20px;
border-left: 4px solid red;
}
.click,
a {
cursor: pointer
}
.cmlistname {
display: inline;
font-family: 'Heebo', sans-serif;
font-size: 24px;
}
.inline {
display: inline;
font-family: 'Roboto', sans-serif;
font-size: 17px;
}
.rtl .panel-body-rtl {
direction: rtl;
text-align: right;
}
.helpcommandHead {
color: #ccc;
font-weight: 700;
font-size: 15px
}
.helpcommandContent {
font-family: 'Roboto', sans-serif;
margin-left: 15px;
white-space: pre
}
.hide {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Command Lists</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css\commandlist.css">
<script src="js\commandscripts.js"></script>
</head>
<body>
<div class="nav">
<div id="pagetitle">Command List</div>
</div>
<div class="heading">
<div class="click">
<div>
<h6 class="cmlistname">?help</h6>
<p class="inline"> -content</p>
</div>
</div>
<div class="panel-body panel-body-rtl hide">
<h3 class="helpcommandHead">Usage:</h3>
<p class="helpcommandContent">#moveme [channel or user]</p>
<p class="helpcommandHead">예시:</p><p class="helpcommandContent">#moveme general
#moveme #Dramex</p>
</div>
</div>
</body>
</html>


you can add this code in your javascript file as the function called getElementsByClassName returns an array of elements and since we have a single element with class "click", i accessed it by [0] .
document.getElementsByClassName("click")[0].addEventListener("click",
unhide);
function unhide(){
document.getElementsByClassName("panel-body")
[0].classList.toggle("hide");
}


maybe like this you want. i add class on "click" event. & using css i show hidden content.
jQuery(document).ready(function($) {
jQuery('.click').click(function(event) {
jQuery('.panel-body').toggleClass('show-content');
});
});
body {font-family: 'IBM Plex Sans Thai Looped', sans-serif; background-color: #36393F;}
.nav {
background-color: black;
padding: 7px;
font-family: 'Amatic SC', cursive;
}
#pagetitle {color: white; text-align: center; font-size: 30px;}
.heading {
/* text-align: center; */
background-color: #202225;
color: white;
margin: 30px;
margin-left: 30%;
margin-right: 30%;
padding: 20px;
border-left: 4px solid red;
}
.click,
a {
cursor: pointer
}
.cmlistname {
display: inline;
font-family: 'Heebo', sans-serif;
font-size: 24px;
}
.inline {
display: inline;
font-family: 'Roboto', sans-serif;
font-size: 17px;
}
.rtl .panel-body-rtl {
direction: rtl;
text-align: right;
}
.helpcommandHead {
color: #ccc;
font-weight: 700;
font-size: 15px
}
.helpcommandContent {
font-family: 'Roboto', sans-serif;
margin-left: 15px;
white-space: pre
}
.hide {
display: none;
}
.panel-body.show-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="nav">
<div id="pagetitle">Command List</div>
</div>
<div class="heading">
<div class="click">
<div>
<h6 class="cmlistname">?help</h6>
<p class="inline"> -content</p>
</div>
</div>
<div class="panel-body panel-body-rtl hide">
<h3 class="helpcommandHead">Usage:</h3>
<p class="helpcommandContent">#moveme [channel or user]</p>
<p class="helpcommandHead">예시:</p><p class="helpcommandContent">#moveme general
#moveme #Dramex</p>
</div>
</div>
</body>
</html>

Related

How can I use HTML, CSS, or JS to make an element active by default?

I would like for <li>Home</li> to be automatically active when a user arrives at my page.
Is there any way to use css, html, or js to set a link to active by default when the user initially arrives at the site? That way, the :active style will visually indicate the location of the nav bar.
Also, once the user clicks on another list item, <li>Home</li> should no longer be active until clicked again.
Thanks, everyone.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li>Home</li>
<li>Slices</li>
<li>Team</li>
<!-- <li>Locations</li> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice#bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>
Here is the CSS
/* Global settings */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}

You can .focus the element.
const anchor = document.querySelector('a[href="#"]')
anchor.focus()
/* Global settings */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li>Home</li>
<li>Slices</li>
<li>Team</li>
<!-- <li>Locations</li> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice#bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>

Add an id to your object, es "homeLink":
<li>Home</li>
.
window.addEventListener('load', (event) => {
document.getElementById("homeLink").focus();
});

FIRST METHOD:
You can just simply make an ID and tabindex="0" attribute for the element:
<li>Home</li>
And then focus it with JS:
document.getElementById("focusTime").focus();
SECOND METHOD:
You can just simply make an :active CSS pseudo-class by default only in JS!:
document.getElementById("focusTime").active();
And then it'll simply make the element "clicked" by JS!
THIRD METHOD:
document.getElementById("focusTime").click()
SAME AS THE SECOND METHOD
I hope very much this helps!

Uncaught (in promise) TypeError: data.forEach is not a function at `displayResult`

In my JavaScript code, I keep getting the error message:
Uncaught (in promise) TypeError: data.forEach is not a function
I'm trying to build a github user finder and I'm using this api https://api.github.com/users/. I'm new in this field, please help me to solve the problem.
const searchUser = () => {
const searchField = document.getElementById('seacrh-field');
const searchText = searchField.value;
console.log(searchText);
searchField.value = '';;
const url = `https://api.github.com/users/${searchText}`
fetch(url)
.then(res => res.json())
.then(data => displayResult(data));
}
const displayResult = data => {
const showResult = document.getElementById('displayResult');
showResult.innerHTML = '';
data.forEach(profile => {
const div = document.createElement('div');
div.classList.add('display-result');
div.innerHTML = `
<div class="img">
<img src="${profile.avatar_url}" alt="avatar">
</div>
<div class="details">
<div class="info">
<h3>Name: ${profile.name}</h3>
<p>username:${profile.login}</p>
<p>bio:${profile.name}</p>
<p>Created:${profile.created_at}</p>
<p>total-repo:${profile.public_repos}</p>
<p>followers:${profile.followers}</p>
<p>following: ${profile.following}</p>
</div>
</div>
`;
showResult.appendChild(div);
})
}
#import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
#import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
*{
margin: 0;
padding: 0;
}
body{
background-color: blueviolet;
}
.logo{
text-align: center;
font-family: 'Pacifico', cursive;
}
.logo img{
width: 65px;
}
.searchresult{
display: flex;
justify-content: center;
margin-top: 10px;
}
.searchinput{
padding: 20px;
width: 45%;
margin-right: 5px;
outline: none;
border:2px solid blue;
border-radius: 10px;
font-size: 1rem;
font-weight: bold;
}
.searchbutton{
background-color: black;
padding: 20px;
margin-right: 5px;
outline: none;
border:2px solid blue;
border-radius: 10px;
color: white;
font-size: 1rem;
font-weight: bold;
}
.display-result{
/* background-color: tomato; */
margin-top: 10px;
display: flex;
justify-content: center;
}
.img{
width: 28%;
background-color: white;
}
.img img{
width: 100%;
}
.details{
background: #000;
width: 30%;
color: white;
}
.details .info{
font-family: 'Hina Mincho', serif;
text-align: left;
margin-top: 30px;
margin-left: 10px;
font-size: 2rem;
line-height: 40px;
}
footer{
margin-top: 20px;
text-align: center;
font-size: 1.2rem;
background: #000;
height: 3vh;
padding: 10px;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Github Profile</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<section>
<div class="logo">
<img src="img/git.png" alt="logo">
<h3>Search Github</h3>
</div>
</section>
</header>
<main>
<section>
<div class="searchresult">
<input id="seacrh-field" type="text" class="searchinput" placeholder="Search a github profile">
<button class="searchbutton" onclick="searchUser()">Search User</button>
</div>
</section>
<section>
<div id="displayResult">
<!-- <div class="display-result">
<div class="img">
<img src="img/git.png" alt="">
</div>
<div class="details">
<div class="info">
<h3>Name: Hasibul Polok</h3>
<p>username: hasibulpolok</p>
<p>bio: love to learning #progremming lover</p>
<p>total-repo: 37</p>
<p>follower: 5</p>
<p>following: 13</p>
<p>tags: tag1, tag2, tag3</p>
</div>
</div>
</div> -->
</div>
</section>
</main>
<footer>
<p>©Hasibul Polok 2021 -
<script type="text/javascript">var year = new Date(); document.write(year.getFullYear());</script>
</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>

First, you must check what is the value of the response.
Trying out
https://api.github.com/users/1
we can see the result is json:
and forEach function is designed to work with arrays, which means you cannot use it with json output.
Edit: in your code, get rid of data.forEach part and use the object's values directly, as you are doing with ${profile.avatar_url}.

How to open en close menu using javascript?

Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>

You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.

div gap at top of page?

I have a clearfix in my style.css and everything worked fine on other projects. All of a sudden there is a gap appearing in my browser, causing the div container move approx. 20px down, and I don't know what I do wrong here?
My code runs good in JS Fiddle I think. Therefore I put a picture in it where you can see the not wanted 20px "top - margin". What might be causing this?
Edit
I've found the issue. it was the h1 tag. If you replace h1 in both, html and css, with the p tag, it works perfectly fine after setting the p margin to 0. But why is this?
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway:300,400,500,700" rel="stylesheet">
<!--CSS-Font : font-family: 'Lobster', cursive;
font-family: 'Raleway', sans-serif; -->
<title>Appearence</title>
</head>
<div class="container">
<body>
<div class="main-header background-color clearfix">
<header id="main-header-top" class=" ">
<div class="logo-title ">
<h1>Operation<span>Mars</span>.com</h1>
</div>
</header>
</div>
</body>
<!--body-end-->
<footer>
</footer>
</div>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
}
body {
margin: 0;
padding: 0;
}
html,
body{
position:relative;
}
.main-header{
width: 100%;
height: 100px;
}
.background-color{
background-color: black;
}
.logo-title {
width: 400px;
height: auto;
left: 50%;
position: relative;
margin-left: -200px;
}
.logo-title a{
text-align: center;
text-decoration: none;
}
.logo-title a h1{
font-size: 60px;
text-decoration: none;
color: white;
font-family: 'Lobster', cursive;
}
.logo-title a h1 span{
color:#ff7256;
font-family: 'Lobster', cursive;
font-size: 70px;
}
/*clearfix*/
.clearfix:before,
.clearfix:after { /*Inhalt hinzufügen*/
content: "";
display: table;
}
.clearfix:after {
clear:both;
}

try this.
* {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
}
body {
margin: 0;
padding: 0;
}
html,
body{
position:relative;
}
.main-header{
width: 100%;
height: 100px;
}
.background-color{
background-color: black;
}
.logo-title {
width: 100%;
height: auto;
}
.logo-title a{
text-align: center;
text-decoration: none;
left: 50%;
position: absolute;
transform:translateX(-50%);
}
.logo-title a h1{
font-size: 60px;
text-decoration: none;
color: white;
font-family: 'Lobster', cursive;
}
.logo-title a h1 span{
color:#ff7256;
font-family: 'Lobster', cursive;
font-size: 70px;
}
/*clearfix*/
.clearfix:before,
.clearfix:after { /*Inhalt hinzufügen*/
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway:300,400,500,700" rel="stylesheet">
<!--CSS-Font : font-family: 'Lobster', cursive;
font-family: 'Raleway', sans-serif; -->
<title>Appearence</title>
</head>
<div class="container">
<body>
<div class="main-header background-color clearfix">
<header id="main-header-top" class=" ">
<div class="logo-title ">
<h1>Operation<span>Mars</span>.com</h1>
</div>
</header>
</div>
</body>
<!--body-end-->
<footer>
</footer>
</div>
</html>

jQuery mobile won't work on Google Chrome

So, I can run this on Firefox and it works just fine. But when running this on Chrome, I'm getting a loading icon which keeps just 'loading'.
Like this: http://prntscr.com/8erab4
On Firefox the result is just great, example: http://weveloped.com/app
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>HorizonApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="custom.css" />
</head>
<body>
<!--Welcoming Page-->
<div data-role="page" id="homepage">
<div data-role="header" class="header">
<i class="fa fa-bars left"></i>
<h1>Horizon GPD</h1>
<i class="fa fa-home right"></i>
</div>
<div data-role="main" class="ui-content">
<div data-role="panel" data-position="left" data-display="overlay" id="panel">
<div class="sideMenu">
<ul>
<li class="navTitle">Tijden</li>
<li>van 09:00 tot 11:00</li>
<li>van 11:30 tot 13:00</li>
<li>van 13:30 tot 15:00</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
body {
font-family: 'Open Sans', sans serif;
}
/* Header */
.header {
height: 40px;
border: none;
}
.ui-page .ui-header {
background-color: #013378;
color: #FFF;
text-shadow: none;
}
.header a i {
font-size: 24px;
color: #FC7C00;
margin-top: 5px;
}
.header a i.left {
margin-left: 5px;
}
.header a i.right {
margin-right: 5px;
}
.header a:hover > i {
color: #FFF;
}
/* Side Menu */
.sideMenu, .sideMenu ul {
padding: 0; margin: 0;
text-shadow: none;
}
.sideMenu ul {
list-style-type: none;
position: relative;
}
.sideMenu ul li.navTitle {
height: 40px; line-height: 40px;
background-color: #FC7C00;
color: #FFF;
font-weight:700;
text-align: center;
}
.sideMenu ul li {
display: block;
}
.sideMenu ul li a {
height: 40px; line-height: 40px;
padding-left: 10px;
color: #222;
text-decoration: none;
display: block;
}
.sideMenu ul li a:hover {
color: #FFF;
background-color: rgba(1, 51, 120, 0.8);
}
.ui-panel-inner {
padding: 0; margin: 0;
}

Install WampServer on your computer, copy the folder of your project in c:\wamp\www\ , turn on the local server and run your jQuery Mobile page (localhost/folder-of-your-project/jquery-mobile-page).
You need a local server to run any jquery mobile page in Chrome
Regards

Categories

Resources