issue with jquery popup responsive - javascript

I have a login popup.
I'm starting with jquery and I've looked quite manuals, and not just got the way to make my popup becomes responsive. Here I leave the code popup to see if you can lend a hand as I have one week looking, tasting and ... nothing :(
//scriptLogin.js archive
$(document).ready(function() {
$('a.login-window').click(function() {
//cojemos los valores de las variables desde el link
var loginBox = $(this).attr('href');
//creamos el popup
$(loginBox).fadeIn(300);
//establecemos el padding + border (css)
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//añadimos la capa mask al body(para hacer fondo semi negro al abrirse el popup)
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
//cuando clikemos el icono X se cerrara el popup
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
/*LOGIN*/
#media only screen and (max-width: 600px) {
.login-popup{
width:100%;
}
}
#login-box{
width:600px;
height:auto;
}
.login-popup{
display:none;
background:#2c3338;
padding:10px;
border:2px solid #000;
float:left;
font-size:1.2em;
position:fixed;
top:40%;
left:50%;
z-index:99999;
color:#606468;
font-family:'Calibri';
line-height:1.5em;
}
#signin{
width:auto;
height:auto;
margin:3% 0 0 25%;
}
#fondoLogin{
background-color:#2c3338;
color:#606468;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
}
#signin span{
background-color:#363b41;
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
color:#606468;
display:block;
float:left;
height:50px;
line-height:50px;
text-align:center;
width:50px;
}
#signin input{
height:50px;
}
#signin input{
background-color:#3b4148;
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
color:#606468;
margin:0 0 2% 5%;
padding:0 16px;
width:198px;
}
#signin input:focus{
border:2px solid #785da1;
outline:none;
box-shadow:0 0 10px #785da1;
}
#signin input[type="submit"]{
width:280px;
height:55px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#624291;
color:#eee;
font-weight:bold;
margin:2% 0 2% 2%;
}
#signin input[type="submit"]:hover{
background-color:#7842A6;
}
#signin a{
color:#eee;
text-decoration:none;
}
#signin a:hover{
text-decoration:underline;
}
#signin p{
width:300px;
height:auto;
}
#signin input{
border:none;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
padding:0;
-webkit-appearance:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
<title>...</title>
</head>
<body>
<div>
<header>
<nav role="navigation" class="noround navbar-inverse">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"> Barra de navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left" style="margin:10px 0 10px 0">
<img src="fotos/logoH.png" />
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Registrate <span class="fa fa-user-plus" style="font-size:16px; margin-top:5px"></span></li>
<li> Identificate <span class="fa fa-user" style="font-size:16px; margin-top:5px"></span><span class="caret"></span></li>
<div id="login-box" class="login-popup">
<img src="fotos/x.png" style="width:30px; height:30px" class="btn_close" title="Cerrar Ventana" />
<form action="action.php?accion=login" method="post" class="form" id="signin">
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-user"></span>
<input type="text" placeholder="ejemplo#ejemplo.com" name="emailLog" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-lock"></span>
<input type="password" placeholder="contraseña" name="passwd" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p>Has olvidado la contraseña?</p>
<p style="height:70px;"><input type="submit" class="btn" id="enviar" value="ENTRAR" /></p>
</div>
</form>
<p style="margin:2% 0 0 25%">No eres miembro? Registrate Ahora <span class="fa fa-arrow-right"></span></p>
</div>
</li>
</ul>
</div>
</nav>
</header>
[...more code that isn't important..]
</div>
<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scriptLogin.js"></script>
</body>
</html>


if you are using bootstrap , Bootstrap also give responsive pop , Look here
http://getbootstrap.com/javascript/
if you want our custom code for responsive pop , Look here , I have write simple code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.pop_div{ display:none;}
.overrelay{ display:none;}
.pop_div {
position: relative;
margin: 0 auto;
width: 38%;
padding: 20px;
background: rgba(247, 247, 95, 0.42);
border: 1px solid #ccc;
z-index: 12;
}
.close_pop {
float: right;
background: #f00;
padding: 7px;
border: hidden;
height: 20px;
width: 20px;
line-height: 9px;
border-radius: 10px;
text-align: center;
color: #fff;
}
.overrelay {
position: absolute;
top: 0px;
background: rgba(255, 0, 0, 0.25);
right: 0px;
bottom: 0px;
left: 0px;
z-index: 10;
}
</style>
</head>
<body>
<div class="responsive_pop">Click me for Responsive POP </div>
<!---------/// POP HERE ------->
<div class="pop_div">
<div class="close_pop">X</div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="overrelay"></div>
<!--------/// POP HERE --------->
</body>
<script>
$('.responsive_pop').click(function(){
$('.pop_div').show(500);
$('.overrelay').show(500);
});
$('.close_pop').click(function(){
$('.pop_div').hide(500);
$('.overrelay').hide(500);
});
</script>
</html>


#media only screen and (max-width: 600px) {
.login-popup{
width:100%;
left: 0;
}
}
and put it bottom of css file

Related

How do I format chat app to show ellipses for the side bar, and keep each div highlighted after being clicked?

I'm building an HTML chat app template, and I ran into two major issues when trying to complete it.
The chat names on the side are not showing ellipses despite me using text-overflow: ellipse;
When anyone of the chats are clicked, I would like them to stay on an active color until I click on another one, but I'm not sure how to go about it.
Here's my HTML and CSS:
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active{
background-color:rgb(122, 184, 235);
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!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="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
What should I do? Thanks.

You probably have to use javascript to achieve this. The default functioning for the :active state is to snap back to the :hover state as soon as you click and release the mouse button.
.sidebar > .group-chats > div:active {
background-color: red;
}
If you remove the :hover state you'll make it stay red, but it's as far as I am concerned impossible to keep :active as long as :hover immediately takes over once the click is finished.
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active,
.sidebar > .group-chats > div:focus {
background-color: red;
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!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="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
Edit: Forgot your ellipsis question. For this to work your element has to have a width. However, I am not able to solve it, your markup and css are confusing and adding width to what I think is the correct element doesn't work.
Edit 2: You could try a JS solution like this to make the active background color stick when you click the chat room divs. I have simplified. You can change this to use the container class that you already have and just add a unique class to all the divs inside of it that you want to make work with this JS:
const container = document.querySelector('.container')
const activeState = (e) => {
document.querySelectorAll('.active-color').forEach(link => link.classList.remove('clicked-color'))
if (e.target.className.toLowerCase() === 'active-color' )
e.target.classList.add('clicked-color')
}
container.addEventListener('click', (e) => {
activeState(e)
})
div.active-color {
padding: 2rem;
width: 300px;
background: #ddd;
margin: 1rem 0;
border-radius: 6px;
}
div.active-color:hover,
div.active-color:focus {
background: purple;
cursor: pointer;
}
div.active-color:active {
background: red;
}
div.active-color.clicked-color {
background: red;
}
<div class="container">
<div class="active-color">DIV 1</div>
<div class="active-color">DIV 2</div>
<div class="active-color">DIV 3</div>
<div class="active-color">DIV 4</div>
</div>

Add a fontAwesom icon into an input

I encountered a little problem. I wanted to put 2 fontAwesome icons in my login page like what i did in this picture :
but... That was berfore I check W3C. Apparently we can not use placeholder in a lot of input. So what I did is use some easy vanilla JS to get my boxes ID and add to them a placeholder.
But, font-family : "fontAwesome" doesn't works anymore on those placeHolder, I tried tu put my js into some variable to style them but it doesn't works either. So what's the common solution to this problem ?
Put an image instead ?
Here's a part of my code :
let x = document.getElementById("mdp2").placeholder = " Mot de passe...";
let y = document.getElementById("username").placeholder= "&#xf007 Nom d'utilisateur ou e-mail...";
* {
padding: 0;
margin: 0;
text-decoration: none;
font-family: "Play", sans-serif;
box-sizing: border-box;
}
h1,
h2 {
font-family: "Varela Round", Arial, Helvetica, sans-serif;
}
.compte {
position: relative;
width: 100%;
height: 1500px;
overflow: hidden;
background : orange;
}
.compte > .video-bg {
z-index: -10;
position: absolute;
min-width: 100%;
min-height: 100%;
}
.contenu {
position: relative;
padding: 50px;
text-align: center;
margin: 0 auto;
color: white;
}
.log {
height: 50vh;
}
.contenu-cont {
margin: 250px auto;
}
.contenu-cont > h1 {
font-size: 60px;
color: orangered;
}
.contenu-cont > span {
letter-spacing: 5px;
font-size: 20px;
}
.box-log {
position: relative;
margin: -140px auto;
width: 100%;
}
.log > h2 {
margin: 0 0 25px 0;
font-size: 36px;
}
.input-box {
margin: 15px 0;
display: flex;
justify-content: center;
}
.user-box {
border-radius: 25px;
padding: 15px;
width: 400px;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.267);
color: white;
}
.user-box::placeholder {
color: white;
font-family: "jura", fontAwesome;
padding: 0 0 0 5px;
}
#mdp2::placeholder{
font-family: "jura", fontAwesome;
padding: 0 0 0 5px;
}
.btn-sign {
background: orangered;
outline: none;
width: 180px;
padding: 13px;
border-radius: 35px;
border: none;
color: white;
cursor: pointer;
transition: 0.5s;
}
.btn-sign:hover {
opacity: 0.8;
}
.ou {
font-weight: 500;
}
.oup {
font-weight: bolder;
color: rgba(255, 0, 0, 0.829);
font-size: 22px;
}
.subm {
color: blue;
}
#media screen and (max-width: 540px) {
.contenu-cont > h1 {
font-size: 40px;
padding: 0;
}
.contenu-cont > span {
letter-spacing: 5px;
font-size: 15px;
}
.log > h2 {
font-size: 20px;
}
}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>PharmaTech</title>
<meta name="description de la page" content="A compléter pour le referencement"><!--Description du site, apparait notamment dans la description google-->
<meta charset="utf-8">
<meta name="robots" content="index, follow, aussi pour le referencement"><!--index du site, apparait notamment dans la description google-->
<link rel="icon" href="image/Phoenix-detoure.png"><!--Icone de l'onglet de site-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--toujours afficher l'entiereté de la page peu importe la largeur-->
<link href="https://fonts.googleapis.com/css2?family=Play:wght#400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jura:wght#700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<link rel="stylesheet" href="compte.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">
<script src="https://kit.fontawesome.com/3b3be1baf7.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar">
<div class="logo"></div>
<span class="hamburger"><label id="hamburger">☰</label></span>
<span class="cross"><label id="cross">✖</label></span>
<ul>
<li id="home"><span> <i class="fas fa-home" style="padding-right: 10px;"></i></span> Index </li>
<li id="Shop"> <span><i class="fas fa-store-alt" style="padding-right: 15px;"></i></span>Boutique
<ul class="dropdown" role="menu">
<li> Nanites</li>
<li> Assistances</li>
<li> Prothèses</li>
<li> Organes</li>
</ul>
</li>
<li id="compte"><span><i class="fas fa-user" style="padding-right: 10px;"></i></span> Compte
<ul class="dropdown" role="menu">
<li>Se connecter</li>
<li>S'inscrire</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Recherche...">
<button class="loupe"><i class="fas fa-search"></i></button>
</div>
</nav>
</header>
<div class="compte">
<video autoplay loop muted class="video-bg">
<source src="videos/back3.mp4" type="video/mp4">
</video>
<div class="form">
<div class="contenu">
<div class="contenu-cont">
<h1>PharmaTech</h1>
<span>From chance to choice</span>
</div>
<div class="box-log">
<div class="log">
<h2>Se connecter</h2>
<form>
<div class="input-box">
<input class="user-box" type="username" name="username" id="username" >
</div>
<div class="input-box">
<input class="user-box" type="password" name="password" id="mdp2" required>
</div>
<div class="button-co">
<button type="submit" class="btn-sign">Se connecter</button>
</div>
<hr style="width:280px; margin: 20px auto;">
<p class="ou"> Pas encore inscrit ? S'inscrire</p>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-container">
<div class="left-content">
<div class="up">
<div class="theme">A propos de nous</div>
<p>
Leader dans les domaines de la bio-ingénierie, pharmaceutique et assistance en tous genres,
nous mettons notre savoir-faire à votre service depuis plus de 150 ans.
</p>
</div>
<div class="low">
<div class="theme">Nous contacter</div>
<div class="tel">
<span>✆</span> +356 053 356 152
</div>
<div class="mail">
<span>✉</span> abc#pharmatech.com
</div>
</div>
</div>
<div class="middle-content">
<div class="theme">Nos services </div>
<div> Nous trouver</div>
<div> En savoir plus</div>
<hr>
<div> Rapport</div>
<div> Powerpoint</div>
</div>
<div class="right-content">
<div class="theme">Subscribe us</div>
<form action="#">
<input type="text" name="email" placeholder="Entrer votre adresse mail" required>
<input type="submit" name="envois" value="Envoyer" class="subm">
<div class="reseaux">
<img src="image/facebook.ico" alt="Logo de facebook">
<img src="image/twitter.ico" alt="Logo de twitter">
<img src="image/whatsapp.ico" alt="Logo de whatsapp">
<img src="image/instagram.ico" alt="Logo d'instagram'">
</div>
</form>
</div>
</div>
</footer>
<div class="bas">
<p>Copyright © 2020 <span>PharmaTech</span> by Alexandre Novais & Nhat Linh Nguyen</p>
</div>
<script>
window.addEventListener('scroll', function (e) {
// Setup the new requestAnimationFrame()
let timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
let nav = document.querySelector('nav'); /*Selection de la class voulus grace à query*/
if (document.querySelector('header').getBoundingClientRect().top !== 0) {
nav.classList.add('scroll');
} else {
nav.classList.remove('scroll');
}
});
}, false);
</script>
<script>
let hamburger = document.querySelector(".hamburger");
let cross = document.querySelector(".cross");
let ul = document.querySelector("ul");
hamburger.onclick = () =>{
hamburger.style.opacity = 0;
hamburger.style.visibility = "hidden";
cross.style.opacity = 1;
cross.style.visibility = "visible";
ul.style.top = "80px";
}
cross.onclick = () =>{
hamburger.style.opacity = 1;
hamburger.style.visibility = "visible";
cross.style.opacity = 0;
cross.style.visibility = "hidden";
ul.style.top = "-600px";
}
</script>
<script src="JS/placeholder2.js"></script>
</body>
</html>
codepen
Thank you again!

let inputContainer = document.querySelector('.input');
let placeholderEl = inputContainer.querySelector('.placeholder');
let inputEl = inputContainer.querySelector('input');
inputEl.addEventListener('focus', () => {
placeholderEl.style.display = 'none';
inputEl.focus();
});
inputEl.addEventListener('blur', () => {
if (inputEl.value.trim().length === 0) {
placeholderEl.style.display = 'block';
}
});
placeholderEl.addEventListener('click', () => {
placeholderEl.style.display = 'none';
inputEl.focus();
});
.input {
position: relative;
}
.input .placeholder {
position: absolute;
top: 8px;
left: 10px;
color: #444;
}
input {
outline: none;
border: 1px solid #CCC;
border-radius: 17px;
padding: 10px;
height: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<div class="input">
<div class="placeholder"><i class="fa fa-user"></i> Username</div>
<input type="text" />
</div>

You can add your own CSS to do this. Here is the demo :)
IDEA: Idea is to set a wrapper div around your input and icon. Set a border on wrapper and set border:none and outline:none; on input.
.search{
display:inline-flex;
border:1px solid #777;
padding:5px 10px;
border-radius:1rem;
}
.search input{
border:none;
outline:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<div class="search">
<i class="fas fa-search"></i>
<input type="text" placeholder="Recherche...">
</div>

My responsive navigator bar not working

Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>

You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

Leave open pop-up window when jumping Error

The situation is that I have a bootstrap modal where I have a form to login, if the user is inactive or password was incorrect, jump a mistake, but when you click to log in if you get this error window isn't open for show it, and so the user isn't aware of the passing.
I would like to know how can I do that when I skip the error I open the modal to display it.
nav ul{
list-style:none;
margin:2em 0;
}
nav li{
margin-right:2em;
display:inline-block;
}
.modal-body, .modal-header{
background:#2c3338;
color:#606468;
}
#signin{
width:auto;
height:auto;
}
#signin span{
background-color:#363b41;
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
color:#606468;
display:block;
float:left;
height:50px;
line-height:50px;
text-align:center;
width:50px;
}
#signin input{
height:50px;
}
#signin input{
background-color:#3b4148;
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
color:#606468;
margin:0 0 2% 5%;
padding:0 16px;
width:198px;
}
#signin input:focus{
border:2px solid #785da1;
outline:none;
box-shadow:0 0 10px #785da1;
}
#signin input[type="submit"]{
width:280px;
height:55px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#624291;
color:#eee;
font-weight:bold;
margin:2% 0 2% 2%;
}
#signin input[type="submit"]:hover{
background-color:#7842A6;
}
#signin a{
color:#eee;
text-decoration:none;
}
#signin a:hover{
text-decoration:underline;
}
#signin p{
width:300px;
height:auto;
}
#signin input{
border:none;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
padding:0;
-webkit-appearance:none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
<title>SSSS!</title>
</head>
<body>
<?php
include 'fn.php';
iniciarSesion();
$msg = "";
if(isset($_GET['miss']))
{
if($_GET['miss']=="1")
{
$msg= '<p class="text-danger text-center small" style="margin-bottom: 0;"> No existe este usuario con esta contraseña.. </p>';
}
elseif($_GET['miss']=="2")
{
$msg= '<p class="text-danger text-center small" style="margin-bottom: 0;"> Este usuario esta inactivo. </p>';
}
}
?>
<div>
<header>
<nav role="navigation" class="noround navbar-inverse">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"> Barra de navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left" style="margin:10px 0 10px 0">
<img src="fotos/logoH.png" />
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Registrate <span class="fa fa-user-plus" style="font-size:16px; margin-top:5px"></span></li>
<li> Identificate <span class="fa fa-user" style="font-size:16px; margin-top:5px"></span><span class="caret"></span></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="modal fade" id="modalLogin" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times white"></i></button>
</div>
<div class="modal-body text-center">
<?php echo $msg; ?>
<form action="action.php?action=login" method="post" class="form" id="signin">
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-user"></span>
<input type="text" placeholder="ejemplo#ejemplo.com" name="emailLog" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-lock"></span>
<input type="password" placeholder="contraseña" name="passwd" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p class="text-center">Has olvidado la contraseña?</p>
<p style="height:70px;"><input type="submit" class="btn" id="enviar" value="ENTRAR" /></p>
</div>
</form>
<p>No eres miembro? Registrate Ahora <span class="fa fa-arrow-right"></span></p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't need to put my "action.php", i know php and I have it right, when I process the form if it has an error is spent by the URL via GET, I need to know how to make the window opens to display the error
THANK YOU VERY MUCH TO ALL :)

Positioning text and the form on the parallel to each other (side by side) - HTML

I am trying to position a form and some paragraph texts on the left side by side so they are parallel to each other how ever I dont understand how I can do this
Currently I am trying to float the form to the right, however the social Icons then move from the bottom and position on the left of the screen
I want to position the ids: "myForm" and class "info" side by side
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arshdeep Soni</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
body {
background-color: black;
background-image: url();
color:white;
font-family: sans-serif;
}
#name {
color:white;
font-family: coolvetica;
font-size: 50px;
text-align: center;
padding-top: 60px;
letter-spacing: 6px;
font-weight: bolder;
text-transform: uppercase;
}
#magician {
color:white;
font-family: raleway;
font-size: 25px;
letter-spacing: 11px;
margin-top: 2%;
text-align: center;
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -o-linear-gradient(left, #ccc, #ffffff, #ccc);
width:50%;
max-width: 100%;
}
#info {
}
#info h2 {
color:white;
font-family: Baron neue;
font-size: 30px;
padding: 30px 0px 0px 10px;
margin-right: 50%;
}
#info p {
font-family: sans-serif;
font-size: 15px;
padding-top: 10px;
padding-left: 10px;
margin-right: 50%;
}
#contact {
padding-left: 10px;
line-height: 1.7em;
margin-right: 50%;
}
#myForm {
top:0;
float:right;
}
</style>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li>HOME</li>
<li><a href=#>VIDEOS</a></li>
<li><a href=#>IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li class="current">ENQUIRIES</li>
</ul>
</div>
<h1 id="name">Arshdeep Soni</h1>
<p id="magician">Magician</p>
<hr>
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
</div>
<div class="main">
</div>
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</body>
</html>

You should move "myForm" outside of the "info" div like this
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
</div>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
And your CSS for those elements should look like this
#myForm {
display:inline-block;
}
#info {
width: 50%; // Adjust to your liking
float:left;
}
https://jsfiddle.net/srf9w1w3/

You colud use box model in css to do that, please check the code below in the snippet
#media (min-width: 500px) {
.row:after {
content: " ";
display: table;
clear: both;
}
.column-half {
float: left;
width: 50%;
padding: 0 20px;
box-sizing: border-box;
border:solid 1px #ccc;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.dcenter {
display:block;
text-align:center;
padding:5px;
}
<div class="row">
<div class="column-half">
HTML INFO HERE
</div>
<div class="column-half">
FORM CODE HERE
</div>
</div>
<div class="clearfix"></div>
<div class="dcenter">icons here</div>

Categories

Resources