I had designed a login pop up on my website.
It is properly aligned and displayed in laptop browser but in mobile, it is being displayed very small.I need help in adding some bootstrap tags by which it would be compatible with mobile browser too.
Below is the demonstration of the code snippet you can see working
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 1000);
}
#ac-wrapper {
position: fixed;
top: 90px;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(34,34,34,0.75);*/
background: rgba(255, 255, 255, .6);
/*rgba(255, 255, 255, .6)*/
z-index: 1001;
}
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
max-width: 350px;
width: 100% !important;
background-color: #eceff6;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
border:2px solid;
border-color:rgba(0,0,0,0.5);
}
#popupHeader
{
background-color:#3c5899;padding:12px;
margin-bottom:25px;
}
.loginmodal-container form{padding:35px;}
.loginmodal-container h1 {
text-align: center;
font-size: 1.2em;
margin:0px;
font-family: roboto;
color:#fff;
}
.loginmodal-container input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
width: 100%;
padding: 08px 16px;
margin: 2px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 06px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #5e75a7;
padding: 10px 0px;
font-family: roboto;
font-size: 14px;
margin-top:2px;
border-radius:4px;
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #6a8acf;
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
margin-bottom:50px;
}
.login-help a{display:block;text-align:center;}
<!DOCTYPE html>
<html>
<script src="JavaScript.js"></script>
<link href="StyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="https://mtbc.formstack.com/forms/js.php/90_day_review_form_copy"></script><noscript>Employee Self Evaluation form</noscript>
<div id="ac-wrapper">
<div id="popup">
<center>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="loginmodal-container">
<div class="row" id="popupHeader">
<div class="col-xs-12 text">
<img src="logo.png" width="80" height="30" align="center">
</div>
</div>
<div align="center">
<img src="https://scontent.fisb1-1.fna.fbcdn.net/v/t39.2080-6/c0.0.76.76/p75x75/851562_581386735219055_1520422143_n.png?oh=ac209d564ee1a2c80984e673d168272b&oe=5A134903" width="50" class="_3-q3 img">
<br/><br/>
<div style="opacity: 0.5;">Log in to your Facebook account <br> to access formstack</div>
</div>
<form>
<input type="text" name="user" id="UEmail" placeholder="Email address or phone number" required>
<input type="password" id="UPass" name="pass" placeholder="Password" required>
<input type="button" name="login" class="login loginmodal-submit" value="Login">
<font size="1.5px"><h1 align="center"> Create account</h1></font>
<br>
<font size="1.5px"><h1> Forgetten password?</h1></font>
</div>
</form>
</html>
Missing critical meta viewport tag:
<meta name="viewport" content="width=device-width">
See CSS Tricks: Responsive meta tag
Related
I have following code (html/css/javascript):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Calculate the hypotenuse of a triangle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="form">
<h2 class="form__title">Calculate the hypotenuse of a triangle</h2>
<div class="form__group">
<input type="number" step="any" name="a"class="form__input" placeholder=" ">
<label for="a" class="form__label">Width</label>
</div>
<div class="form__group">
<input type="number" step="any" name="b"class="form__input" placeholder=" ">
<label for="a" class="form__label">Height</label>
</div>
<p><input type="button" onclick="out.value=(Math.sqrt(Math.pow(parseFloat(a.value),2)+Math.pow(parseFloat(b.value),2))).toFixed(2),
outInch.value=((Math.sqrt(Math.pow(parseFloat(a.value),2)+Math.pow(parseFloat(b.value),2)))/2.54).toFixed(2)" value="Calculate" class="form__button"></p>
<p>Hypotenuse length: <output name="out">0</output> sm (<output name="outInch">0</output> inch)</p>
</form>
<canvas id="canvas_plot" width="300" height="408"></canvas>
<script src="./canvas.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
letter-spacing: 0.5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form {
width: 400px;
padding: 32px;
border-radius: 10px;
box-shadow: 0 4px 16px #ccc;
font-family: 'Montserrat', sans-serif;
}
.form__input,
.form__button {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
.form__title {
text-align: center;
margin: 0 0 32px 0;
font-weight: normal;
}
.form__group {
position: relative;
margin-bottom: 32px;
}
.form__label {
position: relative;
top: -30px;
z-index: -1;
color: #9e9e9e;
transition: 0.3s;
}
.form__input {
width: 100%;
padding: 0 0 10px 0;
border: none;
border-bottom: 1px solid #e0e0e0;
background-color: transparent;
outline: none;
transition: 0.3s;
}
.form__input:focus {
border-bottom: 1px solid #1a73a8;
}
.form__button {
padding: 10px 20px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #0071f0;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.form__button:hover {
background-color: rgba(0, 133, 240, 0.7);
}
.form__input:focus ~ .form__label,
.form__input:not(:placeholder-shown) ~ .form__label {
top: -48px;
font-size: 12px;
color: #e0e0e0;
}
#canvas_plot {
margin-left: 30px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: 0 4px 16px #ccc;
}
const canvasPlot = document.getElementById('canvas_plot')
const ctx = canvasPlot.getContext('2d')
ctx.moveTo(275,383)
ctx.lineTo(25,25)
ctx.stroke()
ctx.moveTo(275,25)
ctx.lineTo(25,383)
ctx.stroke()
How do I import to javascript these outputs <output name="out"></output> <output name="outInch"></output> from html, or firstly import to css and from css to javascript?
I need to draw on canvas triangle by using values from outputs after clicking the button "Calculate". If its impossible without plugins, please say what plugins I need to use
Hi Everyone!
I want to make an editor for my website with functions like working light/dark toggle button, Working editor that really shows the result and Syntax Hilighting. I have made the frame of the editor...
function compile(){
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function(){
code.open();
code.writeln(html.value+"<style>"+css.value+"<\/style>" + "<script>"+js.value+"<\/script>")
code.close();
}
}
compile();
* {
padding: 0;
margin: 0;
outline: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #444444;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
textarea ::-webkit-scrollbar {
width: 8px;
}
textarea ::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
textarea ::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
header#playground_header {
background: #1e1f26;
height: 65px;
}
header#playground_header > h1 {
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
line-height: 35px;
font-family: 'IBM Plex Sans', sens-serif;
}
iframe#code {
bottom: 0;
position: relative;
width: 100%;
height: 40vh;
border: unset;
background: #f2f4f6;
}
.prism-live {
min-height: 350px;
overflow-x: hidden;
width: 100%;
}
div#coding_area > div {
width: 100%;
border-left: 15px solid #555865;
}
div#coding_area > div:first-child {
border-left: none;
}
div#coding_area {
width: 100%;
height: calc(60vh - 60px);
min-height: 125px;
display: flex;
overflow: hidden;
border-bottom: 15px solid #555865;
}
textarea {
font-size: 15px;
color: #fff;
background: #000000;
}
div#code_output {
height: 100%;
}
<head>
<title>Coding Playground | #Programmer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div id="coding_playground_outer">
<header id="playground_header">
<h1>Coding Playground | #Programmer</h1>
</header>
<hr color="#fff">
<div class="page-wrap twilight">
<div class="boxes">
<div id="coding_area">
<textarea id="html" placeholder="HTML" class="prism-live language-html"></textarea>
<textarea id="css" placeholder="CSS" class="prism-live language-css"></textarea>
<textarea id="js" placeholder="JavaScript" class="prism-live language-js"></textarea>
</div>
<div id="code_output">
<iframe id="code"></iframe>
</div>
</div>
</div>
</div>
<body>
This code is 65% working as I imagined it. Just need a working toggle light/dark switch button now and a Syntax Hilight. Please help me as soon as possible...
Tried everything .. this just does not budge. This forum post is my last resort on this one. Its been 3 days messing around with a plethora of CSS setting combinations, checking JS for issues and just generally losing my hair.
Please help me with this .. I really dont want to have to give up this whole project because of one stupid line of code somewhere.
Problem: The popover box loads flush to the top of the screen, i've tried adding margins to every single container I can both in the bootstrap.css and removing/adding div elements to help resolve this .. and nothing !
HTML:
<div id="login-popover" role="dialog" aria-labelledby="myPopoverLabel" aria-hidden="true" style="display: none;">
<div class="loginpopover-container">
<h1>Login to Your Account</h1>
<br>
<form method="post" >
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" name="login" class="login loginpopover-submit" value="Login">
</form>
<div class="login-help"> RegisterForgot Password </div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2"> <?php echo $usernameErr; ?> <?php echo $passwordErr; ?> </div>
</div>
</div>
</div>
LOGINBOX.CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN POPOVER ******/
.loginpopover-container {
padding: 10px;
max-width: 300px;
width: 100% !important;
overflow: hidden;
font-family: roboto;
}
.loginpopover-container h1 {
text-align: center;
font-size: 1.8em;
font-family: roboto;
}
.loginpopover-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginpopover-container input[type=text], input[type=password] {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginpopover-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.login-popover {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginpopover-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
padding: 17px 0px;
font-family: roboto;
font-size: 14px;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.loginpopover-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.loginpopover-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
}
JAVASCRIPT:
<script>
$('[data-toggle=popover]').popover({
html: true,
content: function () {
var targetId = $(this).attr('data-target');
return $(targetId).html();
}
});
</script>
Just to say in my defense, the reason I am so annoyed is because I do everything possible on my end, so I dont have to push this to you guys. I exhaust every possible reason I can - this process however, seriously tests my patience.
Anyway, any help as always is appreciated. (sad whale face -_____-)
I'm trying to edit TextboxList JS plugin to support RTL language (played a bit with its css below). Now, seems like the cursor is running away after I type every word - how can I set the cursor to appear exactly after the term I've printed
/* TextboxList sample CSS */
ul.holder {
margin: 0;
border: 1px solid #999;
overflow: hidden;
height: auto !important;
height: 1%;
padding: 4px 5px 0;
}
*:first-child+html ul.holder {
padding-bottom: 2px;
}
* html ul.holder {
padding-bottom: 2px;
} /* ie7 and below */
ul.holder li {
float: right;
list-style-type: none;
margin: 0 5px 4px 0;
}
ul.holder li.bit-box, ul.holder li.bit-input input {
font: 11px "Lucida Grande", "Verdana";
}
ul.holder li.bit-box {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #CAD8F3;
background: #DEE7F8;
padding: 1px 5px 2px;
}
ul.holder li.bit-box-focus {
border-color: #598BEC;
background: #598BEC;
color: #fff;
}
ul.holder li.bit-input input {
width: 150px;
margin: 0;
border: none;
outline: 0;
padding: 3px 0 2px;
} /* no left/right padding here please */
ul.holder li.bit-input input.smallinput {
width: 20px;
}
/* Facebook demo CSS */
form, #add {
border: 1px solid #999;
width: 550px;
margin: 50px;
padding: 20px 30px 10px;
}
form ol {
font: 11px "Lucida Grande", "Verdana";
margin: 0;
padding: 0;
}
form ol li.input-text {
margin-bottom: 10px;
list-style-type: none;
border-bottom: 1px dotted #999;
padding-bottom: 10px;
}
form ol li.input-text label {
font-weight: bold;
cursor: pointer;
display: block;
font-size: 13px;
margin-bottom: 10px;
}
form ol li.input-text input {
width: 500px;
padding: 5px 5px 6px;
font: 11px "Lucida Grande", "Verdana";
border: 1px solid #999;
}
form ul.holder {
width: 500px;
}
#facebook-list ul.holder li.bit-box, #apple-list ul.holder li.bit-box {
padding-right: 15px;
position: relative;
}
#apple-list ul.holder li.bit-input {
margin: 0;
}
#apple-list ul.holder li.bit-input input.smallinput {
width: 5px;
}
ul.holder li.bit-hover {
background: #BBCEF1;
border: 1px solid #6D95E0;
}
ul.holder li.bit-box-focus {
border-color: #598BEC;
background: #598BEC;
color: #fff;
}
ul.holder li.bit-box a.closebutton {
position: absolute;
right: 4px;
top: 5px;
display: block;
width: 7px;
height: 7px;
font-size: 1px;
background: url('close.gif');
}
ul.holder li.bit-box a.closebutton:hover {
background-position: 7px;
}
ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover {
background-position: bottom;
}
/* Autocompleter */
#facebook-auto {
display: none;
position: absolute;
width: 512px;
background: #eee;
}
#facebook-auto .default {
padding: 5px 7px;
border: 1px solid #ccc;
border-width: 0 1px 1px;
}
#facebook-auto ul {
display: none;
margin: 0;
padding: 0;
}
#facebook-auto ul li {
padding: 5px 12px;
margin: 0;
list-style-type: none;
border: 1px solid #ccc;
border-width: 0 1px 1px;
font: 11px "Lucida Grande", "Verdana";
}
#facebook-auto ul li em {
font-weight: bold;
font-style: normal;
background: #ccc;
}
#facebook-auto ul li.auto-focus {
background: #4173CC;
color: #fff;
}
#facebook-auto ul li.auto-focus em {
background: none;
}
#demo ul.holder li.bit-input input {
padding: 2px 0 1px;
border: 1px solid #999;
}
#add a {
color: #666;
}
#add-test {
width: 100px;
padding: 2px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TextboxList + Autocomplete demo</title>
<link rel="stylesheet" href="~/Content/test.css" type="text/css" media="screen" title="Test Stylesheet" charset="utf-8" />
<script src="~/Scripts/mootools-beta-1.2b1.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="textboxlist.js" type="text/javascript" charset="utf-8"></script>-->
<script src="~/Scripts/textboxlist.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="test">
<h1>TextboxList + Autocomplete Demo</h1>
<p>See article page, Go to TextboxList article</p>
<form action="test_submit" method="get" accept-charset="utf-8">
<ol>
<li class="input-text">
<label>Simple input</label>
<input type="text" name="testinput" value="" id="testinput" />
</li>
<li id="facebook-list" class="input-text">
<label>FacebookList input</label>
<input type="text" value="" id="facebook-demo" />
<div id="facebook-auto">
<div class="default">Type the name of an argentine writer you like</div>
<ul class="feed">
<li>Jorge Luis Borges</li>
<li>Julio Cortazar</li>
</ul>
</div>
<!-- These two writers will be added when the control is loaded -->
</li>
</ol>
</form>
</body>
</html>
I have a search bar that usiing AJAX to bring up results, but the input box covers the first result rendering it unclickable (you can see it, you just can't click on it), I've tried everything but i cannot make it clickable. It's just the first one too, the rest you can click on.
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background:#ccc;
}
#display ul
{
z-index:200;
list-style: none;
margin-top:72px;
width: 330px;
}
#display li
{
z-index:200;
display: block;
padding: 4px;
background-color: #eee;
border-bottom: 1px solid #367;
}
#clear
{ clear:both; }
#search{
position:absolute;
}
a {
color: black;
text-decoration:none;
}
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
.form-wrapper {
width: 450px;
padding: 30px;
margin: 1px auto 1px auto;
position:absolute;
z-index:100;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
clear:both;
}
.form-wrapper input {
padding-left:10px;
width: 330px;
height: 40px;
padding: 0px 0px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left:10px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function fill(Value)
{
$('#name').val(Value);
$('#display').hide();
}
$(document).ready(function(){
/*
$("#search").click(function (){
$("#display").css('display' , 'none');
});
*/
$("#name").keyup(function() {
var name = $('#name').val();
if(name=="")
{
$("#display").html("");
}
else
{
$.ajax({
type: "POST",
url: "backend.php",
data: "name="+ name ,
success: function(html){
$("#display").html(html).show();
}
});
}
});
});
</script>
</head>
<body>
<div id="search">
<form method="post" action="searcher.php" class="form-wrapper cf">
<input type="text" placeholder="Search User Pages" name="name" id="name" autocomplete="off" required>
<button type="submit" name="submit" id="submit">Search</button>
</form>
<div id="display"></div>
</div>
</body>
</html>
Backend.php
<?php
include('connect.php');
if(isset($_POST['name']))
{
$name=trim($_POST['name']);
$query2=mysql_query("SELECT * FROM members WHERE username LIKE '%$name%' LIMIT 5");
echo "<ul>";
while($query3=mysql_fetch_array($query2))
{
?>
<a href='page.php?user=<?php echo $query3['username']; ?>'><li onclick='fill("<?php echo $query3['username']; ?>")'><?php echo $query3['username']; ?></li></a>
<?php
}
}
?>
</ul>
The problem is the padding of your form-wrapper element. It appears that the padding is covering the display div. I changed the CSS for .form-wrapper, replacing the padding to
.form-wrapper {
width: 450px;
padding-left: 30px;
padding-top:30px;
margin: 1px auto 1px auto;
position:absolute;
z-index:100;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
clear:both;
}
and it works.
Here is the JSFiddle: