I'm creating a website, and when adding a background image to my CSS there appears to be a random white vertical line on the left side of the screen. I've checked this in both Chrome and Safari browsers. Would anyone be able to help fix this and also explain how it originated?
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The white line is because of the blockquote element, you can disable the white border by adding
blockquote {
border-left: none;
}
If I understand, it's the default border on blockquote from bootstrap. Just set border-left: none on an element you want to disable that. In this case, blockquote.construction
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You are getting the unwanted border from Blockquote tag.
In your Css for of Blockquote class replace with below:
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
Note : Also I observed the white border is present in the slogan blockquote as well. The reason it is not visible as the background color there is white. But if you will inspect the element, you will see it there.
I will recommend to add a common class to all blockquote with
border-left: none;
Related
There is a page Site view. There is a code (I want to center the image <img class="youtube__icon-play" src="../img/Vector.png">)
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
height: 100%;
}
.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
/*margin-right: 10%;*/
}
.content {
width: 100%;
}
.cardexample {
width: 100%;
}
.mobileimage img{
max-width: 100%;
height: auto;
}
.mobiles {
max-width: 100%;
}
.content__title {
font-family: TTNorms-Medium;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21.6px;
margin: 0.3% 15px 0 15px;
}
.crashvideo {
width: 115px;
height: 30px;
border-radius: 4px;
margin-top: 15px;
background-color: #5f3ec0;
color: #ffffff;
}
.youtube__icon-play {
margin-left: 30.5px;
margin-top: 20.5px;
align: center;
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content">
<div class="cardexample">
<div class="mobileimage">
<img class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
<span class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<img class="youtube__icon-play" src="../img/Vector.png">
</span>
</span>
</div>
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
It is displayed as in the picture below (I want to center the image <img class="youtube__icon-play" src="../img/Vector.png">)
Youtube icon
How to achieve the display as on the 1st link? (I want to center the button)
Your images are not showing so its hard to tell exactly.. but to center the icon in line with the button inside video_icon try this
.video__icon {
display: flex;
align-items: center;
}
Consider changing from:
.youtube__icon-play {
margin-left: 30.5px;
margin-top: 20.5px;
align: center;
}
To:
.youtube__icon-play {
margin-left: auto;
margin-right: auto;
margin-top: 20.5px;
width: 50%;
align: center;
}
I'm trying to implement something as simple as a scrollspy in Bootstrap 4 for my portfolio and it's driving me to despair. I've read the official documentation, I've done my research, and I can't get it to work. No error in console.
Added data-spy = "scroll" data-target = ". Navbar" data-offset = "50" to the body and the anchors of the navigation links are the same as the section ids.
It also added the popper, jquery and other scripts.
I have also tried implementing it with just JavaScript, without success.
I start to think that there is something else in my code that is interfering with this Bootstrap function, but I can't find it. If anyone can take a look at the code and tell me what I'm doing wrong, I appreciate it.
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="I'm a developer and audiovisual producer. Here I show my evolution, my work and my passion.">
<meta name="author" content="Pablo Herrero">
<title>Pablo Herrero | Developer | pabloherrero.me</title>
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>
<!-- Touch icons -->
</head>
<body id="top" data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#top">
<div id="h" class="align-self-center">H</div>
</a>
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<header id="header">
<div class="container d-flex">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id= "headerPhoto">
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<h1>Pablo Herrero</h1>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<h2>lore ipsum</h2>
</div>
</div>
</div>
</header>
<!-- About -->
<section id="about">
<div class="container d-flex">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
<h2>Hi! I'm a developer and audiovisual producer.</h2>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
<p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio, JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="works">
<div class="container d-flex">
</div>
</section>
<!-- Contact -->
<section id="contact">
<div class="container d-flex">
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container-fluid">
<div class="row d-flex ">
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<small id="copy">© 2020 Pablo Herrero</small>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<div id="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-dev"></i>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap js -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Popper.js -->
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<!-- Portfolio script -->
<script src="js/app.js"></script>
</body>
</html>
CSS:
/* Fonts */
#font-face {
font-family: 'fira_coderegular';
src: url('fonts/firacode-regular-webfont.woff2') format('woff2'),
url('fonts/firacode-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codebold';
src: url('fonts/firacode-bold-webfont.woff2') format('woff2'),
url('fonts/firacode-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codemedium';
src: url('fonts/firacode-medium-webfont.woff2') format('woff2'),
url('fonts/firacode-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* General */
body {
position: relative;
font-family: 'fira_coderegular';
letter-spacing: normal;
overflow-y: scroll;
background-color:#ffffff;
}
body::-webkit-scrollbar {
display: none;
}
/* Navbar */
#navbar {
min-height: 56px;
background-color: transparent;
border-bottom: none;
}
#navbar .navbar-toggler {
color: #000000;
}
#navbar .navbar-toggler:focus {
outline: none;
}
#h {
font-size: 25px;
font-family: 'fira_codebold';
text-align: center;
color: #000000;
outline: none;
}
#navbar .nav-link {
font-size: 14px;
font-family: 'fira_codemedium';
padding: 1rem 1.5rem;
text-align: center;
color:#ffffff;
background-color: #000000;
outline: none;
}
#navbar .nav-link:hover {
color: #bd93f9;
outline: none;
}
#navbar .nav-link:active {
color: #50fa7b;
outline: none;
}
#navbar #h:hover {
color: #bd93f9;
outline: none;
}
#navbar #h:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#navbar .nav-link {
font-size: 14px;
padding: 0.5rem 1.5rem 0.5rem;
color:#000000;
background-color: transparent;
}
}
/* Header */
#header {
width: 100%;
height: 100vh;
}
#header .col-lg-12 {
text-align: center;
}
#header #headerPhoto {
margin: 100px 0px 0px 0px;
text-align: center;
max-width: 100%;
}
#header h1 {
margin: 50px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codebold';
font-size: 58px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
#header h2 {
margin: 15px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codemedium';
font-size: 24px;
letter-spacing: 0.05rem;
}
#media (min-width: 992px) {
#header #headerPhoto {
margin: 75px 0px 0px 0px;
max-width: 35%;
}
#header h1 {
margin: 25px 0px 0px 0px;
font-size: 64px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
}
/* About */
#about {
width: 100%;
height: 100vh;
}
#about .container {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
#about .row {
background-color: #000000;
padding: 100px 100px 100px 100px;
}
#about .col-lg-12 {
text-align: center;
align-items: center;
}
#about h2 {
width: 100%;
text-align: left;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 24px;
color: #ffffff;
letter-spacing: 0.05rem;
}
#about p {
width: 100%;
text-align: left;
font-family: 'fira_coderegular';
font-size: 14px;
color: #ffffff;
}
/* Recent works */
/* Contact */
/* Footer */
footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 5px;
background-color: transparent;
color: #000000;
text-align: center;
}
footer #social a{
font-size: 15px;
color: #000000;
}
footer #social i:hover{
color: #bd93f9;
}
footer #social i:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
footer #copy {
float: left;
}
footer #social a{
font-size: 20px;
float: right;
padding: 0.5rem 2rem 0.5rem 0rem;
}
}
It seems to be working fine, but the correct CSS selector for showing the active nav-link is...
#navbar .nav-link.active {
color: #50fa7b;
outline: none;
}
https://codeply.com/p/1hcQLKYm19
Also note, the sections need height (or a lot of content) to see the menu changing between each section.
Probably you have just forgotten to include bootstrap script like
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
if you want to do it with pure js just add event listener for the scroll event
window.addEventListener("load", function(){
window.addEventListener('scroll', function(e) {
// your handler
console.log(window.scrollY);
});
});
I recently made a simon game using JS,HTML5,CSS3 and Bootstrap v4.5.Now the issue occurs on phones i.e. when display of viewport is below 726px.While testing locally on Chrome developer tools the site looks the way I want the website to look.Below is the image on Chrome developer tools
https://www.flickr.com/photos/189671520#N03/50243919798/in/dateposted/
Below is the screenshot of the same page taken on actual pone https://www.flickr.com/photos/189671520#N03/50244763957/in/dateposted/
The key difference is on the edge of each color ,the border radius as well as the border color black is not being applied !. Looking forward for help.
the code for CSS is
body {
text-align: center;
font-family: "Press Start 2P", cursive;
background-color: #011f3f;
color: #fef2bf;
}
.btn {
margin: 3px 0px;
display: inline-block;
height: 210px;
width: 210px;
border: 10px solid black;
border-radius: 20%;
padding: 0px;
}
.btn-close:nth-child(odd) {
text-align: right;
}
.btn-close:nth-child(even) {
text-align: left;
}
.btn-close {
padding: 7px 10.5px;
}
footer {
font-size: 1rem;
margin: 0 0 1% 0;
}
.game-over {
background-color: red;
opacity: 0.8;
}
#level-title {
font-size: 2.85rem;
margin: 2% 5%;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
.simon-rules {
color: #fef2bf;
text-decoration: none;
}
.simon-rules:hover {
color: red;
text-decoration: none;
}
/*****************************************colors*****************************************/
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
#media (max-width: 726px) {
.btn {
margin: 0px;
height: 86px;
width: 86px;
border: 5px solid black;
}
.btn-close {
padding: 5px 2.5px;
}
footer {
margin-bottom: 5%;
}
#level-title {
height: 70px;
font-size: 1.85rem;
margin: 4% 5%;
}
}
the code in HTML is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Simon</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
</head>
<body>
<h1 id="level-title">Press Me To Start</h1>
<div class="container">
<div class="row">
<div class="col-6 btn-close">
<div type="button" id="green" class="btn green"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="red" class="btn red"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="yellow" class="btn yellow"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
</div>
<footer class="fixed-bottom">
<a
href="https://www.youtube.com/watch?v=1Yqj76Q4jJ4"
class="simon-rules"
target="_blank"
>What is Simon Game?</a
><br />
© Yash Salvi
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
If possible can anyone also help me know that on phone when user clicks on my "Press me to Start" i.e. on "h1" then I have used "h1" as a button and assigned the onclick function to it.Now the problem is that when user taps say on the "Press" it gets copied and browser asks if I want to do google search of the clicked word.
I want this "click to google search on any word" disabled.
[Text](https://raxy45.github.io/SIMON_GAME/) Link to github page
i am designing an interface or an controller and i need to make it accessible to various languages. The interface is safed locally on the device it self.
I managed to translate the first couple of pages and made it work like i wanted it. except of one Issue:
so if you are on page one and set the language to english, it changes page one to english. If you are going to the next page which has an english translation it is back in the default language and you need to click english again.
is there a way to fix that within the function i used?
here is a fiddle so you can have a look at my code:
https://jsfiddle.net/v29Lfar6/
if i need to provide anything else or clarify the problem in more depth just let me know. Thank you in advance![JsFiddle
.container_buttonp1{
text-align: center;
margin-left: -20px;
margin-right: -20px;
}
.button{
display:inline-block;
background-color: #f4f4f4;
color: #105ea6;
border-radius: 8px;
padding: 5px 2,5px;
width: 100px;
text-align: center;
font-size: 12px;
border: 2px grey solid;
text-decoration: none;
margin: 0 20px;
}
.button:hover{
border: 2px grey solid;
padding: 5px 2,5px;
width: 100px;
background-color: #105ea6;
color: #f4f4f4;
border-radius: 8px;
}
footer {
position: absolute;
height: 10%;
width: 100%;
background-color: #f4f4f4;
}
p.copyright{
position: absolute;
width: 100%;
color: #105ea6;
line-height: 30px;
font-size: 1.0em;
text-align: center;
bottom:0;
}
.form{
text-align: center;
}
.nav{
height: 40px;
background-color: #105ea6;
height: 100px;
width: 100px;
}
nav ul{
color: #105ea6;
list-style: none;
text-align: center;
font-size: 25px;
}
nav ul li a{
color: #105ea6;
display:inline-block;
text-decoration: none;
text-align: center;
border: 2px grey solid;
width: 250px;
padding: 20px;
border-radius: 8px;
cursor: pointer;
}
nav ul li a:hover{
border: 2px grey solid;
padding: 20px;
width: 250px;
background-color: #105ea6;
color: #f4f4f4;
border-radius: 8px;
}
.header_navbar{
font-size: x-large;
text-align: center;
padding-left: 40px;
}
<!DOCTYPE html>
<html lang="de">
<div id="content">
<img src="IMAGES_AYNU/elsner_logo1.svg" width="150" height="150"/>
</div>
<br>
<br>
<br>
<br>
<body>
<head>
<script src="https://kit.fontawesome.com/9cef10a72a.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hauptmenü</title>
<link rel="stylesheet" type="text/css" href="CSS_AYNU/AYNU.Style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var arrLang = {
'en': {
'wateringzones': 'Wateringzones',
'sensors': 'Sensors',
'back': 'Back',
'mainmenue': 'Main menu',
'help': 'Help'
},
'de': {
'wateringzones': 'Bewässerungszonen',
'sensors': 'Sensoren',
'back': 'Zurück',
'mainmenue':'Hauptmenü',
'help': 'Hilfe'
}
};
// Process translation
$(function() {
$('.translate').click(function() {
var lang = $(this).attr('id');
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('key')]);
});
});
});
</script>
</head>
<div class="header_navbar">
<header>
<button id="en" class="translate">English</button>
<button id="de" class="translate">Deutsch</button>
<br>
<h1><span class="lang" key="mainmenue">Hauptmenü</span> <i class="fas fa-bars"></i></h1>
</header>
</div>
<br>
<div class="navebar">
<nav>
<ul>
<li class="navbar"><a class="lang" href="AYNU_WATERINGZONES.html" key="wateringzones">Bewässerungszonen</a></li>
<br>
<li class="navbar"><a class="lang" href="AYNU_SENSORS.html" key="sensors">Sensoren</a></li>
<br>
<li class="navbar"><a class="lang" href="AYNU.Structure.html" key="back">Zurück</a></li>
</ul>
</nav>
</div>
<br>
<br>
</body>
</html>
I am learning (just began) jQuery and now I want to make a menu like on this site
I mean, I want the menu to slide down out of the viewport to the header, just like in template in the link.
I tried to look at jQuery API documentation, some videos on YT about menus etc, but I did not find anything relevant.
Can anyone please learn me, how to do this?
Thank you very much
PS: I just have this:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
Use translateY(); css class and jQuery to toggle classes.
This code snippet should get you where you need to be! It will need a bit of editing to fit your needs.
I've added a div called .offsite-canvas that houses your "offscreen" container. When you press the menu toggle button, jQuery toggles a class that puts the offscreen container in view for the user.
$( ".menu-toggle" ).click(function() {
$(".offsite-canvas").toggleClass("open");
});
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}
.offsite-canvas.open {
position: relative;
transform: translateY(0);
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="offsite-canvas">
<ul class="offcanvas">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
I would suggest if you want to make a nav menu that comes onto the screen when a button is clicked, create the menus as normal, and then place it off the screen on either the left or the right by using translateX() in css.
From that point on, when the button is clicked, Toggle a class that would translate the menu one the x axis so that it is visible.