What I want is to close the search bar if I click anywhere but the search bar elements (input and submit button). What I made so far is use toggle to open and close it and this is working. But I couldn't find a way so far to close it if I click anywhere outside the div.
Codepen: https://codepen.io/hateusall/pen/abdedJE
HTML:
<header>
<div class="container-fluid">
<div class="navbarCustom pleft pright ">
<div class="navbar-brand">
<img src="./images/x.png" alt="x" class="header-logo">
</div>
<ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
<li class="dropdown " >Lorem Ipsum</li>
<li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
<li> Lorem Ipsum</li>
<li> <button class="btn-wpp"> Whatsapp </button></li>
<li class="position-relative wrapper-bar">
<div class="search-icon search-toggler">
<i class="fas fa-search search"></i></div>
<div class="search-wrapper" >
<form action="#" class="">
<input type="text" placeholder="Search" class="search-input" id="info">
<button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
</form>
</div>
</li>
</ul>
<div class="navbar-toggler text-white d-xl-none">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
</div>
</header>
const searchToggler = document.querySelector(".search-toggler");
const searchWrapper = document.querySelector(".search-wrapper");
searchToggler.addEventListener("click", function(e){
if ( !$(event.target).hasClass('search-toggler')) {
$(searchWrapper).toggleClass("search-wrapper-active");
close();
}
});
function close() {
if (!$(event.target).hasClass('search-wrapper-active')) {
$(document).click(function(e){
/* here i would remove active classes */
console.log("test")
})
}
}
}
DEMO
const $toggler = $(".search-toggler");
const $wrapper = $(".search-wrapper");
$toggler.on("click", function() {
$wrapper.toggleClass("search-wrapper-active");
});
$(document).on('click', function (e) {
if ($(".search-toggler, .search-wrapper").has(e.target).length === 0) {
$wrapper.removeClass("search-wrapper-active");
}
});
You can do it like this:
[...document.querySelectorAll('body')].forEach(el => {
//get all elements in body
el.addEventListener('click', event => {
//add addEventListener
if (event.target.className.includes("search") === false) {
//if clicked element does not have class search
searchWrapper.classList.remove("search-wrapper-active");
//remove search-wrapper-active class to close it
}
})
})
And that way you don't need anything else, just combine it together to close it and open (also benefit, using only JS):
const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
el.addEventListener('click', event => {
if (event.target.className.includes("search") === false) {
searchWrapper.classList.remove("search-wrapper-active");
} else {
searchWrapper.classList.toggle("search-wrapper-active");
}
})
})
Keep in mind now:
now you have event listener on all elements on page, if you need it for something else, just expand this to suit your needs, no need to add event listener click again anywhere.
const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
el.addEventListener('click', event => {
if (event.target.className.includes("search") === false) {
searchWrapper.classList.remove("search-wrapper-active");
} else {
searchWrapper.classList.toggle("search-wrapper-active");
}
})
})
html {
height: 100%;
}
body {
min-height: 100%;
}
.search {
cursor: pointer !important;
z-index: 99999;
position: relative;
}
.search-active {
cursor: pointer;
z-index: 99999;
transition: .4s all ease-in-out;
pointer-events: all !Important;
}
.search-input {
z-index: 99999;
}
.search-image {
cursor: pointer;
z-index: 99999;
}
.search-submit {
z-index: 99999999999999999999;
cursor: pointer !important;
position: relative;
pointer-events: all !Important;
}
.toggler-image {
z-index: 9999;
position: relative;
color: #000;
}
.search-input {
border-radius: .2rem;
padding-left: 16px;
z-index: 9;
position: relative;
transition: .3s ease-in-out all;
}
.search-toggler {
z-index: 99;
position: relative;
transition: .3s ease-in-out all;
}
.search-wrapper {
opacity: 0;
pointer-events: none;
transition: .3s ease-in-out all;
position: absolute;
}
.search-wrapper-active {
transform: translateY(35px);
pointer-events: all;
opacity: 1;
transition: .3s ease-in-out all;
}
.btn-search {
position: absolute;
left: 100%;
height: 45px;
width: 50px;
}
header {
background-color: #000;
width: 100vw;
padding: 32px 0px;
}
.pleft {
padding-left: 380px;
}
.custom-cont {
padding-left: 380px;
padding-right: 280px;
}
.pright {
padding-right: 280px;
}
.navbarCustom {
display: flex;
align-items: center;
justify-content: space-between;
}
header li {
color: #fff;
margin-right: 49px;
font-size: 16px;
font-family: var(--mbold);
cursor: pointer;
}
header li:hover {
color: #4aba58;
transition: .3s;
}
header ul {
margin-bottom: 0;
}
.btn-wpp {
background-color: #4aba58;
border: none;
padding: 17px 21px;
font-size: 16px;
color: #fff;
border-radius: .4rem;
transition: .4s;
}
.btn-wpp:hover {
filter: brightness(120%);
transition: .4s;
}
.cart-value {
background-color: var(--verdeClaro);
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 0;
right: 0;
text-align: center;
border-radius: 50%;
font-size: 13px;
transform: translate(80%, -80%);
}
.cart-value:hover {
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="wrapper">
<header>
<div class="container-fluid">
<div class="navbarCustom pleft pright ">
<div class="navbar-brand">
<img src="./images/x" alt="x" class="header-logo">
</div>
<ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
<li class="dropdown ">Lorem </li>
<li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
<li> Lorem </li>
<li> <button class="btn-wpp"> Whatsapp </button></li>
<li class="position-relative wrapper-bar">
<div class="search-icon search-toggler">
<i class="fas fa-search search">toggler</i> </div>
<div class="search-wrapper">
<form action="#" class="">
<input type="text" placeholder="Pesquisar" class="search-input" id="info">
<button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
</form>
</div>
</li>
<li class="cart position-relative">
<div class="cart-value">1</div>
<img src=".//images/carrinho.png" alt="">
</li>
</ul>
<div class="navbar-toggler text-white d-xl-none">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
</div>
</header>
<h1>TEST
<h1>
Related
i want to create a chat and i have been working on it.
here is the code below
<!DOCTYPE html>
<html>
<head>
<title>Aswin's Good Apps</title>
<!-- add icon link -->
<link rel = "icon" href =
"https://goodapps.w3spaces.com/AswinIcon.png"
type = "image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<style>
body{
background-color:pink;
color:purple;
font: 15px Arial, sans-serif;
}
#media screen and (max-width: 300px) {
body{
width: 100%;
}
}
.
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: purple;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.cancelbtn {
padding: 14px 20px;
background-color: #8B0000;
}
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
.signupbtn{
background-color:#013220;
}
.container {
padding: 20px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #0000ffff;
padding-top: 50px;
}
.modal-content {
background-color: #ff8c00;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
}
hr {
border: 1px solid blue;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: white;
}
.close:hover,
.close:focus {
color: purple;
cursor: pointer;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
a{
font-size:25px;
color:purple;
text-decoration:none;
font-size:50px;
}
h2{
font-size:50px;
background-color: pink;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loading {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
text-align: center;
color:green;
background-color:yellow;
top: calc(50% - 30px);
left: calc(50% - 45px);
text-align: center;
font-weight: bold;
}
div.sticky1 {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 130px;
height: 130px;
margin: -76px 0 0 -76px;
border: 16px solid greenyellow;
border-radius: 60%;
border-top: 16px solid yellow;
border-radius:60%;
border-bottom: 16px solid yellow;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
}
ul{
list-style: none;
}
p{
font-size: 25px;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="body">
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
document.getElementById('fail').style.display='none';
document.getElementById('goonthetrack').style.display='none';//
let messages = localStorage.getItem('message');
console.log(messages);
document.getElementById('result').innerHTML = messages;
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("loading").style.display="none";
}
//this will filter the results to which they have searched far
function searchresult(){
//this line tells the html tags we have used
var input, filter, ul, li, a, i, txtValue;
//this collects the inputs id
input = document.getElementById("mysearch");
//this tells about the filter
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function validate()
{
if( document.getElementById("text1").value == "aswin.arulvel#gmail.com"
&& document.getElementById("text2").value == "aswinwebsitepass" )
{
document.getElementById("p1").innerHTML = "Hello Aswin";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if( document.getElementById("text1").value == "sathya.arulvel#gmail.com"
&& document.getElementById("text2").value == "sathyasaccount01" )
{
document.getElementById("p1").innerHTML = "Hello Sathya!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "arulvel.kumarasamy#gmail.com"
&& document.getElementById("text2").value == "skar$SP50zxcvArulaccount")
{
document.getElementById("p1").innerHTML = "Hello Arulvel!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "mine#3478"
&& document.getElementById("text2").value == "mine#3478")
{
document.getElementById("p1").innerHTML = "Hello Shreyan!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("login1").style.display = "none" ;
document.getElementById("signup2").style.display = "none" ;
}
else
{
alert( "validation failed" );
document.getElementById("fail").style.display = "block" ;
}
}
function addmessaage()
{
let li = document.createElement("li");
let li2 = li.classname = "li2";
let textToChange = document.getElementById('chatmessage').value;
let t= document.createTextNode(textToChange);
li.appendChild(t);
document.getElementById('result').appendChild(li);
document.getElementById('chatmessage').value ="";
var multisave = document.getElementById('result').value;
for (i = 0 ; i < li2.length; i++) {
li2[i].onclick = function() {
var div = this.parentElement;
}
}
localStorage.setItem("message", textToChange);
}
</script>
<a href="goodapps.w3spaces.com/fractionscalc.html">We just put fraction calculer! Explore it!
<div class="container mt-3" style="background-color:pink; text-align:left;">
<div class="sticky">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<p id="p1">Not logged in</p>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" style="font-size:20px;"> <i class="fa fa-home"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="login1" data-toggle="tab" href="#login" style="font-size:20px;"><i class="fa fa-sign-in"></i>Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" id="signup2" data-toggle="tab" href="#menu3" style="font-size:20px;"> <i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" style="font-size:20px;"><i class="fa fa-database" aria-hidden="true"></i>Good Apps</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu4" style="font-size:20px;"><i class="fa fa-comment" aria-hidden="true"></i>Chat</a>
</li>
<iframe style="text-align:right;"width="145" height="102" src="https://goodapps.w3spaces.com/dateaswin.html" style="float:right; text-decoration: none; margin-right: 100px;">
</iframe>
</div>
</li>
</ul>
</div>
<!-- Tab panes -->
<div style="background-color:pink;"class="tab-content">
<div id="home" class="container tab-pane active"><br>
<i class="fa fa-home" style="font-size:50px;"></i><h3><i class="fa-duotone fa-house"></i>HOME</h3>
<img src="https://goodapps.w3spaces.com/AswinIcon.png"/ width="200" height="360px">
<p>Welcome to Aswin.</p>
<a class="nav-link" data-toggle="tab" href="#login" style="font-size:20px;">Login</a>
<a class="nav-link" data-toggle="tab" href="#menu3" style="font-size:20px;"> Sign Up</a>
</div>
<div id="login" class="container tab-pane fade"><br>
<i class="fa fa-sign-in" style="font-size:50px;"> </i></i><h3>Login</h3>
<p>Log in to save your work and have a more personalized experience.</p>
<form action="#home">
<input type="text" style = "width:15%;"class="form-control" placeholder="Username" id="text1" />
<input type="password" class="form-control" placeholder="Password" id="text2" style="width:15%;"/>
<input type="button" value="Login" class="btn btn-info" onclick="javascript:validate()" />
</form>
<div class="alert alert-danger" id="fail">
<p>Incorrect username or password.</p>
</div>
<div class="alert alert-success" id="goonthetrack">
<p>You have succesfuly logged in.</p>
</div>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Good Apps</h3>
<p>These are all good apps and have a lot of helpful info and all that stuff Items that are tagged "Under Development" are not finished and may have issues.</p>
<input type="search" id="mysearch" placeholder="Search Apps..." style="margin-top: 8px;
padding: 14px;
float: right; " onkeyup="searchresult()"
>
<ul id="myUL">
<li> Aswin's Tutorials</li>
<br>
<br>
<li>Aswin's Stories</li>
<br>
<br>
<li>Aswin's Sentences</li>
<br>
<br>
<li>Aswin's Games</li>
<br>
<br>
<li> Aswin's Calculater</li>
<br>
<br>
<li>Aswin's Writer</li>
<br>
<br>
<li>Aswin's Code Editor</li>
<br>
<br>
<li> Aswin's Dictonary</li>
<br>
<br>
<li> Aswin's Galaxy Director (under devolopment)
</li><br>
<br>
<li> Aswin's Star Collage(under devolopment)
</li><br>
<br>
<li> Aswin's Facts(under devolopment)</li>
</ul>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<i class="fa fa-user-plus" style="font-size:50px;" aria-hidden="true"></i><h3>Sign UP</h3>
<form action="#home">
<p>Enter your email:</p>
<input type="email" class="form-control" required>
<p>Set a password:</p>
<input type="password" class="form-control" required>
<p>Repeat Password:</p>
<input type="password" class="form-control" required>
<input type="checkbox" class="form-control" required style="text-align:left;" name="I agree to the terms of service." id="agree" value="I agree to the terms of service."/><p>By signing up, I agree to the terms of service.</p>
<input type="submit" class="form-control" value="Sign Up">
</form>
</div>
<div id="menu4" class="container tab-pane fade"><br>
<i class="fa fa-comment" style="font-size:50px;" aria-hidden="true"></i><h3>chat</h3>
<form action="#home">
<ul id="result" style="font-size:50px; display: inline-block;overflow:auto; height:150px;" class="form-control">
</ul>
<input type="text" id="chatmessage" class="form-control">
<input type="button" value="Send" onclick="addmessaage()" id="save" class="btn btn-success">
</form>
</div>
</div>
<div class="sticky">
</iframe>
</div>
</div>
</div>
<div id="loader"></div><p id="loading">Loading...</p>
</div>
</body>
</html>
i want to save the elements that the js has been created.
i want to use client-side javascript and use localstorage().
issue is i can't save multiple messages.
go to the chat section and make the snippet full screen
please help me
I have created a web portfolio for myself. Everything was fine while I was viewing it on my Desktop, but the issue happens when I view it on my phone.
a) The navbar collapses but it is not aligned properly.
b) There is some space on the right side of the viewport on my hero section. I am trying to understand the error but to no avail.
Link to portfolio: https://smammar.netlify.app/
HTML code
<header class="navigation fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand font-tertiary h3" href="index.html"><img src="images/logo2.png" alt="logo"
style="width: 130px; height: 130px;"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation" id="responsiveNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- hero area -->
<section class="hero-area bg-primary" id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-white font-tertiary">Hi! I’m <br> Syed Mohammad Ammar <br> Full-Stack Designer</h2>
</div>
</div>
</div>
<div class="layer" id="l2">
<img src="images/illustrations/dots-cyan.png" alt="bg-shape">
</div>
<div class="layer" id="l4">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<div class="layer" id="l6">
<img src="images/illustrations/dots-group-cyan.png" alt="illustrations" class="bg-shape-6">
</div>
<div class="layer" id="l9">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<!-- social icon -->
<ul class="list-unstyled ml-5 mt-3 position-relative zindex-1">
<li class="mb-3"><a class="text-white" href="https://twitter.com/SMAmmar5"><i class="fab fa-github"
id="socialIcons"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-twitter" id="socialIcons1"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-behance" id="socialIcons2"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-linkedin" id="socialIcons3"></i></i></a></li>
</ul>
<!-- /social icon -->
</section>
<!-- /hero area -->
<!-- about -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<p class="font-secondary paragraph-lg text-dark">I'm a full-stack designer based in Karachi, <span style="color: #228B22"> Pakistan </span> with
experience in delivering end-to-end UX/UI design to complete website for software products. I'm passionate about improving the
lives of others by creating human centric products.</p>
<a href="https://www.dropbox.com/.../syed%20mohammad%20ammar.pdf..." class="btn "
id="viewResume">View Resume</a>
</div>
</div>
</div>
</section>
CSS Code
.navigation {
padding: 40px 100px;
transition: .3s ease;
}
.navigation.nav-bg {
background-color: #000
;
padding: 0 70px;
}
#media (max-width: 600px) {
.navigation.nav-bg {
padding: 15px 20px;
}
}
#media (max-width: 600px) {
.navigation {
padding: 20px;
background: #000
;
}
}
.navbar .nav-item .nav-link {
font-family: "BwNistaInt-xBd";
text-transform: uppercase;
padding: 15px;
}
.navbar .nav-item.active {
font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover{
border-color: #ffa500;
color: #ffa500;
box-shadow: 0 0.5em 0.5em -0.5em #ffa500;
transition: all 0.2s;
cursor: pointer;
}
.hero-area {
padding: 300px 0 200px;
position: relative;
}
.hero-area h2 {
position: relative;
z-index: 2;
}
.layer {
position: absolute;
z-index: 1;
}
#l1 {
bottom: 0;
left: 0;
}
#l2 {
top: 190px;
left: -250px;
}
#l3 {
top: 200px;
left: 40%;
}
#l4 {
top: 200px;
right: 40%;
}
#l5 {
top: 100px;
right: -150px;
}
#l6 {
bottom: -20px;
left: 10%;
}
#l7 {
bottom: 100px;
left: 20%;
}
#l8 {
bottom: 160px;
right: 45%;
}
#l9 {
bottom: 100px;
right: -10px;
}
.layer-bg {
position: absolute;
bottom: 0;
left: 0;
}
Here's a quick fix. Try to add this into your css this will remove the spacing and improper alignments in responsive mode.
body, html {
overflow-x:hidden;
}
You can remove the header tag & it's class and then add 'fixed-top' class to the nav tag. That might solve the issue.
i have a button to open menu click the button it content show fast and background move slowly my html code here
function navOpen() {
let navi = document.getElementById("Nav");
if (getComputedStyle(navi, null).display === "none") {
navi.style.display = "block";
} else {
navi.style.display = "none";
}
}
.nav {
min-height: 1.125rem;
max-height: auto;
padding: 1rem;
margin-top: 2.5rem;
display: none;
animation: mymove 1s infinite;
background: rgb(167, 165, 165);
}
#keyframes mymove {
from {
height: 0;
}
to {
height: 3.125rem
}
}
<button class="navbutton" onclick="navOpen()">Menu</button>
<nav class="nav" id="Nav">
<div class="nav_cls" id="nav-btn-cls">
<a href="#" onclick="navigationClose()">
<img class="navigation__close_button" src="/images/close.svg" alt="close">
</a>
</div>
<ul class="nav_y">
<li>
<a class="navlinks" href="#">
<span>Home </span>
</a>
</li>
</ul>
</nav>
here i try to animate use css but the menu content show fast and the back ground color show shlowly and gerkking ,how to aminate menu open and close animation using css and javascript
Try this.
function navOpen() {
let navi = document.getElementById("Nav");
if (!navi.classList.contains("colps-active")) {
navi.classList.add("colps-active");
}
}
function navigationClose() {
let navicls = document.getElementById("Nav");
if (navicls.classList.contains("colps-active")) {
navicls.classList.remove("colps-active");
}
}
.colps {
transform-origin: top;
height: 0;
opacity: 0;
transform: scale(1, 0);
transition: 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.colps-active {
transform: scale(1, 1);
opacity: 1;
height: auto;
}
.nav {
padding: 1rem;
margin-top: 2.5rem;
background: rgb(167, 165, 165);
}
<button class="navbutton" onclick="navOpen()">Menu</button>
<nav class="nav colps" id="Nav">
<div class="nav_cls" id="nav-btn-cls">
<a href="#" onclick="navigationClose()">
<img class="navigation__close_button" src="/images/close.svg" alt="close">
</a>
</div>
<ul class="nav_y">
<li>
<a class="navlinks" href="#">
<span>Home </span>
</a>
</li>
</ul>
</nav>
The banner should stay close to the info buttons like in this example:
I want to move this "Ads by Google" label left away from the buttons.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
body {
margin: 100px;
}
.banner-buttons {
display: inline-block;
position: relative;
font-size: 14px;
width: 50px;
overflow: hidden;
}
.showme {
display: none;
font-size: 10px;
}
.infoLink:hover .showme {
display: inline-block;
float: left;
}
.closeBtn {
cursor: pointer;
display: inline-block;
}
i:hover {
color: #d075f4;
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
</div>
HTML code: Here is the html, you will find the two buttons and icons there. If there is something missing just ask and I will update the post.
Try changing your p to a div and moving it after the other stuff. Then adding CSS to move the ad part:
<div id="main">
<div class="nanoSaturnBanner">
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink"
href="https://support.google.com/adsense/#topic=3373519"
target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
<div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>
then add this to the new div class
float: right;
margin-right: 50%;
I am using a sidebar to have a list of URL links or buttons if you will but I also need some dropdown buttons/lists in there as well.
I am having an issue of having it look consistently alike and also fill the width of the container also as front end isn't my strongest suite am struggling to get it to look how I want.
You can see that the list within the sidebar is the full width across.....but the button isn't so I need to get it the whole way across and look consistent with the list or alternatively somehow throw a drop down menu on top of the list if required, I have tried to maniputlate it via using btn-block and width 100% to no joy
I need to have a separate buttons for the drop down button seen in example.
jQuery(function($) {
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
$('.list-group-item').attr('tabindex', '-1');
} else {
$('.list-group-item').attr('tabindex', '');
}
$('.row-offcanvas').toggleClass('active');
});
});
});
body {
padding-top: 50px;
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden;
/* Prevent scroll on narrow devices */
height: 100%;
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
background-color: transparent;
color: #999999;
}
.head {
background: #668B8B;
color: #000000;
}
.side-contain {
margin-top: 5px;
border: 2px solid #668B8B;
border-radius: 10px;
}
/*
* Off Canvas
* --------------------------------------------------
* Greater thav 768px shows the menu by default and also flips the semantics
* The issue is to show menu for large screens and to hide for small
* Also need to do something clever to turn off the tabs for when the navigation is hidden
* Otherwise keyboard users cannot find the focus point
* (For now I will ignore that for mobile users and also not worry about
* screen re-sizing popping the menu out.)
*/
#media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 25%;
}
.row-offcanvas-left {
left: 25%;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -25%;
/* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-left .sidebar-offcanvas {
left: -25%;
/* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-right.active {
right: 0;
/* 3 columns */
}
.row-offcanvas-left.active {
left: 0;
/* 3 columns */
}
.row-offcanvas-right.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}
.row-offcanvas-left.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}
.row-offcanvas .content {
width: 75%;
/* 9 columns */
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas.active .content {
width: 100%;
/* 12 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 25%;
/* 3 columns */
}
}
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -50%;
/* 6 columns */
}
.row-offcanvas-left .sidebar-offcanvas {
left: -50%;
/* 6 columns */
}
.row-offcanvas-right.active {
right: 50%;
/* 6 columns */
}
.row-offcanvas-left.active {
left: 50%;
/* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%;
/* 6 columns */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Test</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form action="/logoutadmin" class="navbar-form navbar-right">
<button class="btn btn-success" type="submit" id="user" onsubmit="return false">Log Out</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="side-contain">
<div class="panel-heading head" role="tab" id="headingOne">
<h2 class="panel-title">My Account</h2>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Dropdown</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
- Placeholder
- Placeholder
- Placeholder
- Placeholder
</div>
</div>
<!--/span-->
<div class="col-xs-12 col-sm-10 content">
<div>
<h1 class="main-head">Test</h1>
<p class="lead">Hallo
</div>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</body>
</html>
I have attached a JS fiddle also:
https://jsfiddle.net/z2a7jr68/1/
You can add : btn-group-justified class to btn-group and width : 90% to next button
<div class="btn-group btn-group-justified" role="group">
<button class="btn btn-default" type="button" style="
width: 90%;
">Dropdown</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>HTML</li>
<li><a `enter code here`href="#">CSS</a></li>
<li>JavaScript</li>
</ul>
</div>
Add following style to your drop down buttons.
<div class="btn-group" style="width:100%">
<button class="btn btn-default" type="button" style="width:80%">Dropdown</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:20%;">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" style="width:100%">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>