Disappearing button in HTML

Disappearing button in HTML - javascript

I wrote a simple input field with a button in it. Code is as given below.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
As you can see, when I click in input field, button disappears. When I click outside that form, it reappears. But I don't want it to disappear when clicked on input field. How can I do that?

Set z-index: 1 on #srch-term element

use z-index while focus
input:focus ~ .btn-primary {
z-index: 100;
}
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
input:focus ~ .btn-primary {
z-index: 100;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>

Change the z-index in the .add-on button CSS rule to 3.
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 3;
font-size: 14px;
padding: 5px;
}

Just give a higher value to the z-index of your button. Probably the input highlight that places a div upon it
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 5;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>

You should set position: relative to the button
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: relative;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>

As others are saying, the input field covers the button when it is focused.
Try to set a permanent z-index on your input and button and make the z-index for button higher than the input's.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
z-index: 1020;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
z-index: 1021;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>

Problem goes away if i add z-index: 1 to input and z-index: 3 to button. Can't figure out why but z-index: 2 on button doesen't seem to work.

simply add z-index to input. the value is more than -1 and less than the button z-index
/* Style the search field */
.add-on input {
width: 100%;
border-radius: 0;
z-index: 0
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}

Solution 1 - Change z-index: 2 to z-index: 3 in .add-on button, but if your content increase the search button will overlap with content.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 3;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
Solution 2 - Remove position: absolute, top: 2px, right: 3px, z-index: 2 from .add-on button and update height: 33px; to height: 38px; in .add-on button, it'll display search next to input field and it'll not overlap content.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
border-radius: 0;
height: 38px;
width: 60px;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>

Related

Sign up modal limit

I have integrated a sign up modal on a bootstrap website and would like to limit the number of impressions to visitors seeing it twice per session instead of on every page and also hiding it once a visitor has subscribed. The modal appears after 5 seconds of opening a web-page and only closes once a user clicks the close button.
//Modal
$(document).ready(function () {
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(5000).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(6000).fadeIn(400);
//Hide dialogue and background when the user clicks the close button
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog() {
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
html {
background-color: #333;
}
h2 {
text-align: center;
}
/****Modal*****/
/*Default Modal Styles*/
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0,
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*MailChimp Signup Form*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #97c1c0;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #333;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #333;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #97c1c0;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
<html lang="en">
<head>
<title>HOME</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>This a demo page</h2>
<!---Sign Up Modal---->
<div id="bkgOverlay" class="backgroundOverlay" style="display: block;"></div>
<div id="delayedPopup" class="delayedPopupWindow" style="display: block;">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #333; font-weight: bold;">Save!</span></h2>
<p>Sign up today and be the first to know about our SPECIALS!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="PLEASE INPUT THE MAILCHIMP CODE" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div> <!---End of Sign Up Modal-->
<!------JS----->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>

Use the jquery-cookie plugin by carhartl.
Check for cookie before showing the modal. If it's present, don't display it. If it's not, store a new cookie and display modal.
$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
$('#bkgOverlay').modal('show');
}
});

Making a div element show using jquery doesnot last long

Here i have a jquery function that displays the #showhide div element after successful login but the #showhide displays for a second or two and disappears from the screen Could some one tell me why is this happening! please!
I have posted the entire code! cause some people might ask for it! if its confusing just check in css I have #showhide as display:none and im trying to make it show again in Jquery after authenticating but its not showing for more than 2 seconds thats the only problem in this code
myfunction = function() {
$('#text-hide').show();
}
myfunction2 = function() {
$('#photo-hide').show();
}
validate_logincredentials = function() {
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
var atposition = email.indexOf("#");
var dotposition = email.lastIndexOf(".");
if (atposition < 1 || (dotposition - atposition < 2))
/* if user gives email which starts with # or if there is no words inbetween (#) and (.) */
{
alert("Please enter correct email ID");
} else if (pass.length < 8) {
alert("Incorrect password");
} else if (email !== "faizalsharn#yahoo.com" && pass !== "faizalwddm12") {
alert("incorrect credentials")
} else {
alert(email);
alert(pass);
alert("User login Successfull");
$('#login-form').hide();
$('#showhide').show();
}
}
#showhide {
transition-delay: 3s;
display: none;
}
html, body {
margin: 0%;
padding: 0%;
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 5%;
background-color: black;
color: white;
float: left;
}
header h3 {
margin: 5%;
font-family: Georgia, 'Times New Roman', Times, serif;
float: left;
position: relative;
margin-top: .5%;
margin-right: 2%;
}
header h3:hover {
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px red;
}
header p:hover {
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#logo {
width: 3%;
height: 100%;
margin-left: 1%;
display: inline;
float: left;
margin-right: -5%;
}
#icons * {
color: white;
display: inline;
float: left;
margin: .5% 2% 0% 2%;
padding: 0% 2% 0% 2%;
}
#icons p {
margin-left: 50% !important;
margin-top: -25% !important;
}
nav {
width: 17%;
height: 90%;
float: left;
float: left;
}
nav img {
position: relative;
width: 50%;
height: 15%;
margin-left: 5%;
margin-top: 3%;
margin-bottom: 5%;
float: left;
}
#text-hide {
display: none;
}
#photo-hide {
display: none;
}
#text-hide span {
padding: 5%;
margin-left: 5%;
}
#photo-hide img {
width: 37%;
padding: 5%;
margin: -5%;
float: left;
margin-right: 0%;
margin-bottom: 2%;
margin-top: 5%;
margin-left: 1%;
}
#profileinfo i {
margin-top: 1%;
padding: 6%;
display: inline;
margin-left: -1%;
width: 50%;
height: 50%;
float: left;
margin-right: -30%;
}
#profileinfo h4 {
display: inline;
margin-right: -10%;
font-size: 80%;
margin-left: -10%;
float: left;
margin-top: 8%;
}
#profileinfo img {
width: 40%;
height: 40%;
float: left;
}
aside {
float: right;
width: 17%;
height: 90%;
}
aside h2 {
margin-left: 5%;
}
aside h3 {
margin-left: 10%;
}
aside img {
width: 50%;
height: 50%;
float: left;
margin-left: 10%;
}
aside p {
float: left;
margin-left: 5%;
}
main {
width: 66%;
height: 90%;
float: left;
position: relative;
}
#status {
border: 1px solid gray !important;
width: 80%;
height: 5%;
margin-left: 3%;
}
#content {
margin-top: 5%;
margin-left: 1%;
}
#content img {
width: 7%;
}
#content h4 {
display: inline;
}
footer {
bottom: 0px;
width: 100%;
height: 5%;
float: left;
background-color: black;
color: white;
padding-top: 1%;
}
#ad {
margin-left: 23%;
margin-right: 0%;
}
.fa-audio-description {
margin-top: .25%;
}
.button {
background-color: white;
/* background color of the button */
border: none;
/* no border for the button */
padding: 8px 16px 8px 16px;
/*distance between element's content and its borders. top right bottom left */
text-align: center;
display: inline-block;
font-size: 16px;
/* font size inside button */
margin: 16px 4px 12px 8px;
/*create space around elements by outer border */
transition-duration: 0.4s;
/* defines the speed of the transfomation effect */
cursor: pointer;
/*cursor changes to pointer shape when its on top of the button */
box-shadow: 0 9px #999;
/* TO GIVE SHADOW TO THE BUTTON */
color: black;
/* text of the font inside the button which says "green blue etc */
}
.button:active {
transform: translateY(4px);
/* TO GIVE THE BUTTON PRESSED FEEL TO THE USER i.e it makes the button move y-axis (or move down) by 4px */
}
.button1 {
border: 2px solid #4CAF50;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button1:hover {
background-color: #4CAF50;
/* WHEN WE HOVER BG COLOR OF BUTTON CHANGES TO #4CAF50 ( WHICH IS GREEN) */
}
.button2 {
border: 2px solid #f44336;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
/*defines space in between dashes in the stroke.*/
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button2:hover {
background-color: #f44336;
}
.button3 {
border: 2px solid #008CBA;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button3:hover {
background-color: #008CBA;
}
#profileinfo h4:hover {
color: rgba(5, 5, 5, 0.3);
font-style: italic;
/*font changes to italic, if you want to change it to bold change the command to "font-weight:bold;"*/
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#profileinfo h3:hover {
color: rgba(224, 19, 19, 0.3);
font-style: italic;
/*font changes to italic, if you want to change it to bold change the command to "font-weight:bold;"*/
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#text-hide span:hover {
color: rgba(0, 0, 0, 0.3);
font-style: italic;
text-shadow: 4px 4px 8px blue;
}
#content p:hover {
color: rgba(0, 0, 0, 0.3);
TEXT-TRANSFORM: capitalize;
text-shadow: 4px 4px 8px blue;
}
#photo-hide img:hover {
display: inline-block;
margin-right: 2px;
/* left and right margin of flex elements inside this element container */
margin-left: 2px;
animation: roll 3s infinite;
transform: rotate(30deg);
text-indent: 25px;
}
#keyframes roll {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#logo:hover {
animation: roll 3s infinite;
transform: rotate(30deg);
}
/*larger screen computers*/
#media screen and (min-width:1620px)
/*for screen width 1600 and above */
{
/*need to increase the image and font sizes*/
body {
font-size: 150%;
}
.button {
padding: 16px 32px 16px 32px;
margin: 32px 8px 24px 32px;
box-shadow: 0 12px #999;
}
#status {
font-size: 140%;
}
#photo-hide img {
width: 50%;
height: 50%;
margin-top: 1%;
}
aside img {
width: 70%;
height: 70%;
}
#profileinfo img {
width: 50%;
height: 50%;
}
#content img {
width: 10%;
}
#profileinfo i {
margin-right: -35%;
}
#profileinfo h4 {
display: inline;
margin-right: -10%;
font-size: 80%;
margin-left: -10%;
float: left;
margin-top: 8%;
}
#status {
height: 4%;
}
}
/*tablet*/
#media screen and (max-width:960px)
/* for screen size 960 and below */
{
header {
width: 40%;
height: 50%;
float: left;
overflow: auto;
}
header h3 {
margin: 2.5%;
margin-top: .25%;
margin-bottom: 25%;
}
/**/
#icons i {
padding: 45%;
margin-left: -25%;
}
#icons p {
margin-left: -50%;
font-size: 55%;
padding-right: 20%;
}
#icons i:hover {
text-shadow: 4px 4px 8px blue;
}
#status {
height: 3%;
}
main {
width: 100%;
}
nav {
width: 60%;
height: 50%;
float: left;
}
#profileinfo img {
width: 30% !important;
height: auto;
}
aside {
width: 100%;
}
footer {
width: 100%;
height: 10%;
float: left;
bottom: 0px;
}
body {
font-size: 100%;
}
.button {
padding: 4px 8px 4px 8px;
font-size: 8px;
margin: 30px 2px 6px 4px;
box-shadow: 0 4px #999;
}
#status {
font-size: 70%;
}
#photo-hide img {
width: 25%;
height: 20%;
margin-top: -4%;
margin-right: 10%;
}
aside img {
width: 20%;
height: 20%;
}
/**/
#profileinfo img {
width: 20%;
height: 15%;
}
#content img {
width: 20%;
}
#profileinfo i {
margin-right: -18%;
margin-bottom: -10%;
}
#profileinfo h4 {
display: inline;
margin-right: -40%;
font-size: 50%;
margin-left: -30%;
float: left;
margin-top: 8.5%;
}
#tomove {
margin-top: 50%;
margin-left: -65%;
}
#text-hide span {
font-size: 70%;
margin-right: 10%;
}
#logo {
width: 25%;
height: 10%;
margin: 10%;
}
aside h3 {
margin-left: 5%;
padding: 5%;
margin-top: 10%;
}
.fa-audio-description {
margin-top: 2%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>facechat</title>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="form.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel='stylesheet'>
<!-- for boot strap icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="login-form">
<!-- gives the toggle effect between login and register -->
<input type="radio" checked id="login" name="switch" class="hide">
<input type="radio" id="signup" name="switch" class="hide">
<!-- bootstrap icons that does not require download or install-->
<div>
<ul class="form-header">
<li><label for="login"><i class="fa fa-unlink"></i> LOGIN</label></li>
<li><label for="signup"><i class="fa fa-credit-card"></i> REGISTER</label></li>
</ul>
</div>
<div class="section-out">
<section class="login-section">
<div class="login">
<form action="">
<!-- on login i have to put the url of the backend class to handle it -->
<ul class="ul-list">
<li><input type="email" required class="input" placeholder="Email ID" id="email" /><span class="icon"><i class="fa fa-user-secret" style="font-size:20px"></i></span></li>
<li><input type="password" required class="input" placeholder="Password" id="pass" /><span class="icon"><i class="fa fa-lock" style="font-size:20px"></i></span></li>
<li><span class="remember"><input type="checkbox" id="check"> <label for="check">Remember Me</label></span><span class="remember">Forgot Password</span></li>
<!-- on forgot password i have to put the url of the backend class to handle it -->
<li><input type="submit" value="SIGN IN" class="btn" onclick="validate_logincredentials()" /></li>
</ul>
</form>
</div>
</section>
<section class="signup-section">
<div class="login">
<form action="">
<!-- on registration i have to put the url of the backend class to handle it -->
<ul class="ul-list">
<li><input type="text" required class="input" placeholder="Your Name" id="R_name" /><span class="icon"><i class="fa fa-user" style="font-size:20px"></i></span></li>
<li><input type="number" required class="input" placeholder="Your Number (no plus or minus signs)" id="R_number" pattern="('^\\d+$')" title="Must contain only numbers" required/><span class="icon"><i class="fa fa-mobile-phone" style="font-size:25px"></i></span></li>
<li><input type="email" required class="input" placeholder="Your Email" id="R_email" /><span class="icon"><i class="fa fa-envelope" style="font-size:15px"></i></span></li>
<li><input type="password" placeholder="Password" required class="input" id="R_pass" pattern="(?=.*?[0-9]).{8,}" title="Must contain at least one number and at least 8 or more characters" required/><span class="icon"><i class="fa fa-lock" style="font-size:20px" ></i></span></li>
<li><input type="password" placeholder="Retype Password" required class="input" id="Rc_pass" pattern="(?=.*?[0-9]).{8,}" title="Must contain at least one number and at least 8 or more characters" required/><span class="icon"><i class="fa fa-lock" style="font-size:20px" ></i></span></li>
<li><input type="checkbox" id="check1"> <label for="check1">I accept terms and conditions</label></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
</ul>
</form>
</div>
</section>
</div>
</div>
<div id="showhide">
<header>
<img id="logo" src="images/Captureimg.PNG" alt="logo">
<h3>Blake wood</h3>
<div id="icons">
<a href="#"><i class="fa fa-home"></i>
<p>Home</p></a>
<a href="#"><i class="fa fa-globe"></i>
<p>News</p></a>
<a href="#"> <i class="fa fa-envelope"></i>
<p>Message</p></a>
<a href="#"> <i class="fa fa-bell"></i>
<p>Notification</p></a>
</div>
</header>
<nav>
<div id="profileinfo">
<img src="images/blake.jpg" alt="profilepic" />
<i class="fa fa-suitcase"></i>
<h4>Designer-UI</h4>
<i class="fa fa-home"></i>
<h4>Ontario-CA</h4>
<i class="fa fa-birthday-cake"></i>
<h4>July-26-1991</h4>
</div>
<div id="friends">
<button id="tomove" class="button button3" onclick="myfunction()"><i class="fa fa-users fa-fw"></i> My Friends</button>
<div id="text-hide">
<span>Gafur</span><span>Vinoth</span></br><span>Azeek</span><span>Azad</span>
</div>
</div>
<div id="photos">
<button class="button button3" onclick="myfunction2()"> <i class="fa fa-circle-o-notch fa-fw"></i> Photos</button>
<div id="photo-hide">
<img src="images/slider_1.png" alt="my photo1">
<img src="images/slider-2.png" alt="my photo2">
<img src="images/slider-3.png" alt="my photo3">
<img src="images/silder-4.png" alt="my photo4">
</div>
</div>
</nav>
<main>
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider_1.png" alt="sliderimage1" />
</li>
<li>
<img src="images/slider-2.png" alt="sliderimage2" />
</li>
<li>
<img src="images/slider-3.png" alt="sliderimage3" />
</li>
<li>
<img src="images/silder-4.png" alt="sliderimage4" />
</li>
</ul>
</div>
<input type="text" id="status" contenteditable="true" value="Good Morning!" />
<button class="button button3"><i class="fa fa-pencil"></i>Post</button>
<div id="content">
<img src="images/carlos.jpg" alt="Avatar">
<h4>Carlos</h4> <span>(17 min ago)</span>
<p>The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it :)
</p>
<button class="button button3"><i class="fa fa-thumbs-up"></i> Like</button>
<button class="button button3"><i class="fa fa-comment"></i> Comment</button>
</div>
</main>
<aside>
<div>
<h2>Friend Requests</h2>
<h3>Carlos</h3>
<img src="images/carlos.jpg" alt="Avatar">
<button class="button button1"><i class="fa fa-check"></i>Accept</button>
<button class="button button2">Decline<i class="fa fa-remove"></i></button>
<br></br>
<h3>Cathrine</h3>
<img src="images/cathrine.png" alt="Avatar">
<button class="button button1"><i class="fa fa-check"></i>Accept</button>
<button class="button button2">Decline<i class="fa fa-remove"></i></button></br>
</div>
</aside>
<footer>
<i id="ad" class="fa fa-audio-description"></i><span> If you like my work on photoshop css,js,jquery and wish to hire me part time, contact me # faizalsharn#yahoo.com <i class="fa fa-hand-peace-o"></i></span>
</footer>
</div>
</body>
</html>

because you are not going to server you don't need submit button. so if you need input type="submit" then you need to retrun false from every function here you are trying to validate.
else change these lines...
<li><input type="submit" value="SIGN IN" class="btn" onclick="validate_logincredentials()"/></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
to this.
<li><input type="button" value="SIGN IN" class="btn" onclick="validate_logincredentials()"/></li>
<li><input type="button" value="SIGN UP" class="btn" onclick="validate2()"></li>
everything will be fine.

Fa Icon for html input

I was creating a chat system and I was noticing the text overlapps my icon how can i prevent that from happening i want it to go to the next line before hitting the icon.
Thanks in advance.
.message_box {
position: absolute;
top: 93%;
resize: none;
left: 25%;
width: 70%;
padding-left: 20px;
border-radius: 5px;
}
.fa-paper-plane-o {
position: absolute;
top: 95%;
left: 92%;
}
<textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
<i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i>

I suggest you to wrap everything inside a div that you make absolute and then manage the content inside it by using normal flow. You can then apply padding to both side of textarea and use negative margin on icon for the overlap:
.message {
position: absolute;
bottom: 0;
left: 25%;
right: 0;
}
.message_box {
resize: none;
padding: 0 25px;
width: 90%;
border-radius: 5px;
box-sizing: border-box;
}
.fa-paper-plane-o {
position:absolute;
margin-left: -30px;
margin-top: 5px;
vertical-align: top;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<div class="message">
<textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
<i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i>
</div>

No make any sense that you used position: absolute, but anyway, you can do a trick, wrap your textarea and icon with a div then use float to make both element side by side.
.message_box {
resize: none;
border: none;
width: 92%;
outline: none;
height: 100%;
display: block;
float: left;
}
#Wrapper {
position: relative;
width: 70%;
border: 1px solid #bfbfbf;
border-radius: 5px;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}
#Wrapper span {
display: block;
float: right;
width: 7%;
text-align: center;
position: relative;
top: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="Wrapper">
<textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
<span><i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i></span>
</div>

Make inputfield clickable everywhere inside button-div

I´m implementing a FileUpload and have created <div> with bootstrap button class to make it look better.
But since I did this the input is just clickable at a specific position (above 'aufnehmen').
Can someone tell me how to make the Window open when clicking anywhere on the div?
Here is a fiddle that demonstrates my problem.
.btn-lg{
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)"
value="">
</div>

You can use label instead of div to wrap file input.
<label for="cameraImg">
.btn-lg {
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="cameraImg" class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value="">
</label>

You got a bunch of answers to your problem quickly, but I think it is also important to show you how we found out what the problem is in such a short time, that is, how to debug such problems generally.
If you inspect the element(s) in your developer console and hover over it in the code, you can see the outlines highlighted.
That way, you can see that the input element itself is not as high as the button and that's why any click outside of that area didn't trigger the input's click event.
From that point on, you could have come up with your own solution (setting height: 100% as some answers suggested, or also top: 0; right: 0; bottom: 0; left: 0, etc.).

You can fix this by setting height: 100% on the input:
.btn-lg {
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
border: 1px solid #C00;
height: 100%; /* add this rule */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value="">
</div>

Set width:100%; height:100%; for input.upload it works... check below snippet
.btn-lg{
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
width:100%;
height:100%;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)"
value="">
</div>

You can add:
.fileUpload input.upload {
width: 100%;
height: 100%;
}

Change css to make black

I have fileupload control on my page and I have wrapped it around with fake button.Now I want to change the color of button to black.I tried various way but could not achieve. Here is my button and css:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<div class="col-xs-4">
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload" style="background-color: black" />
</div>
</div>
Please help.

For it to work, you have to put style="background-color: black" to div.fileUpload instead of input#fileUpload.
Code:
<div class="col-xs-4">
<div class="fileUpload btn btn-primary" style="background-color: black">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
Snippet:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="col-xs-4">
<div class="fileUpload btn btn-primary" style="background-color: black;border:0;">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload" />
</div>
</div>

bootstrap buttons has gradient background-image: linear-gradient... because for changes bg color u must set background-image: none and add tag name
to get a higher priority than bootstrap styles, than add background-color, sorry for my bad english.
div.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
background-color: black;
background-image: none;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<!-- Свіжа збірка мінімізованих CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Додаткові теми -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<div class="col-xs-4">
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>

I can see you are using Bootstrap buttons (btn btn-primary), in order to change the button background color or hover color. You can right click the button then go to inspect element in your browser. Look in the inspector you will realize bootstrap has some classes that style the button as follows:
Overwrite this in your custom css to style the Bootstrap Button Background Colour
.btn-primary {
color: #fff;
background-color: #000;
border-color: #2e6da4;
}
Overwrite this class to style the Bootstrap Hover Button Attributes
.btn:hover, .btn:focus, .btn.focus {
color: #333;
text-decoration: none;
}

We Keep Coding

JavaScript is the programming language of the Web.

Disappearing button in HTML - javascript

Set z-index: 1 on #srch-term element

Change the z-index in the .add-on button CSS rule to 3. .add-on button { position: absolute; border-radius: 0; top: 2px; right: 3px; height: 33px; width: 60px; z-index: 3; font-size: 14px; padding: 5px; }

Problem goes away if i add z-index: 1 to input and z-index: 3 to button. Can't figure out why but z-index: 2 on button doesen't seem to work.

Related

Sign up modal limit

Making a div element show using jquery doesnot last long

Fa Icon for html input

Make inputfield clickable everywhere inside button-div

Change css to make black

Categories

Resources