HTML input covering A attribute

HTML input covering A attribute - javascript

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:

Related

webpage is not auto fit in mobile browser

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

How to make dropdown menu

I find this dropdown menu on internet.The problem is dropdown is always open and it doesnt work.When i paste all default code from http://codepen.io/Jeplaa/pen/IzAvx
it doesn't work.Please can you help me.How i can make when user click button it show dropdown menu and stay until user click on button again.
I include 2 scripts
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="assets/js/menu.js"></script>
Also the the code of dropdown menu:
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Replace this line:
$( ".cog, .admin-text" ).on( "click", function()
With this line:
$( ".admin-panel" ).on( "click", function()
... and it will work.
You can check it on Codepen: http://codepen.io/catalin586/pen/LRbELV
You may also want to add a display none by default to your menu:
.menu {display: none;}

you use in JQ
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
.cog and .admin-text do not exist in your HTML . i guess you want your .menu to appear ( fadeIn ) after you click the .arrow or on the text with class ".user_text"
also you say that the .menu always appears, ofcourse that happens if you don't hide it. in this example i've hidden it by setting {display:none} in CSS
see code below
let me know if this is what you want.
$(".down,.user_text").click(function(){
$(".menu").fadeToggle( "fast" );
})
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
.menu { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics
Settings
Logout
</div>
</div>
</div>

.down & .user_text
Try it:
$( ".down, .user_text" ).on( "click", function() {
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img">
<b class="user_text">Curtis Jackson</b>
</div>
<span class="down">
<img src="http://i.imgur.com/bLXw2RL.png">
</span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Remove the .cog and change .admin-text to .admin-panel
$( ".cog, .admin-text" ).on( "click", function()
to
$( ".admin-panel" ).on( "click", function()
Hope it helps!
$( ".admin-panel" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

You are not having any elements with classes either cog or admin-text. You are using onclick on these. The codePen example which you have provided contains an element with admin-text class

you can use fadeIn and fadeOut in jquery
see the documentation in jquery

Add class to jQuery Highlight Effect in tag-it.js

I want to add a class in tag-it.js so the Highlight Effect affects my whole element.
Tag-it is a jQuery UI plugin which uses the Highlight Effect when you try to enter the same tag twice. It works fine, but to get a square on front of the tags I changed the style of my tags with something like this:
ul.tagit li.tagit-choice:before {
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
border-color:transparent #6e92c7 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
Now the Highlight Effect affects online the body of my tags. So I tried to find the position in the tag-it.js where the highlight effect is initialized and I found these lines:
if (!this.options.allowDuplicates && !this._isNew(value)) {
var existingTag = this._findTagByLabel(value);
if (this._trigger('onTagExists', null, {
existingTag: existingTag,
duringInitialization: duringInitialization
}) !== false) {
if (this._effectExists('highlight')) {
existingTag.effect('highlight', {color:"#ff6666"});
}
}
return false;
}
I've tried to change it but unfortunately nothing I've tried worked :( Here one of my attempts:
if (!this.options.allowDuplicates && !this._isNew(value)) {
var existingTag = this._findTagByLabel(value);
// my added line
var existingTagbefore = this._findTagByLabel('ul.tagit li.tagit-choice:before');
if (this._trigger('onTagExists', null, {
existingTag: existingTag,
duringInitialization: duringInitialization
}) !== false) {
if (this._effectExists('highlight')) {
existingTag.effect('highlight', {color:"#ff6666"});
// my added line
existingTagbefore.effect('highligh', {color:"#ff6666"});
}
}
return false;
}
Here is a working example: (Try to write e.g. 2 x PHP | Enter = delimiter)
$(function() {
var availableTags = [
"SEO", "PHP", "MySQL",
];
//-------------------------------
// Allow spaces without quotes.
//-------------------------------
$('#allowSpacesTags').tagit({
allowSpaces: true,
fieldName: 'tags[]',
autocomplete: {
source: availableTags,
}
});
});
ul.tagit {
padding: 1px 5px 1px 5px;
line-height: 1em;
overflow: auto;
margin-left: inherit; /* usually we don't want the regular ul margins. */
margin-right: inherit;
background: inherit;
border:solid #C6C6C6 1px;
background-color: #FFF;
}
ul.tagit li {
display: block;
float: left;
margin: 4px 10px 4px 13px;
}
ul.tagit li.tagit-choice {
position: relative;
line-height: inherit;
height: 20px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
background:#6e92c7;
}
ul.tagit li.tagit-choice:before {
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #6e92c7 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
ul.tagit li.tagit-choice:after {
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
input.tagit-hidden-field {
display: none;
}
ul.tagit li.tagit-choice-read-only {
padding: .2em .5em .2em .5em;
}
ul.tagit li.tagit-choice-editable {
padding: 4px 25px 0 12px;
}
ul.tagit li.tagit-new {
padding: .25em 4px .25em 0;
}
ul.tagit li.tagit-choice a.tagit-label {
cursor: pointer;
text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-label:not(a) {
color:#fff;
font-size:13px;
line-height:16px;
font-weight: normal
}
ul.tagit li.tagit-choice a.tagit-close {
text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-close {
right: .4em;
top: 50%;
margin-top: -8px;
cursor: pointer;
position: absolute;
line-height: 12px;
}
ul.tagit li.tagit-choice .ui-icon {
display: none;
}
/* used for some custom themes that don't need image icons */
ul.tagit li.tagit-choice .tagit-close .text-icon {
display: inline;
font-family: sans-serif;
font-size: 13px;
color: #FFF;
}
ul.tagit li.tagit-choice input {
display: block;
float: left;
margin: 2px 5px 2px 0;
}
ul.tagit input[type="text"] {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
color: #333333;
background: none;
outline: none;
}
ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
background-color: #555;
}
ul.tagit li.tagit-choice:hover::before {
border-color:transparent #555 transparent transparent;
}
ul.tagit li.tagit-choice a.tagLabel:hover, ul.tagit li.tagit-choice a.tagit-close .text-icon:hover {
color: #F00;
}
.ui-widget {
font-size: 13px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tag-it! Example</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>
<form action="" method="POST">
<ul id="allowSpacesTags"></ul>
<input type="submit" />
</form>
Is someone able to help me? Thank you for reading.
Sincerely
Bazi

text sits lower in one div compared to the other

I have this JAVA script at the moment.
/* ******************************************************************** */
/* Generated by: http://csscreator.com */
/* ******************************************************************** */
html,
body {
margin: 0;
padding: 0;
text-align: center;
BACKGROUND: #fff;
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
}
a {
color: #fff;
text-decoration: none;
white-spaces: nobreak
}
li {
color: #fff;
}
body {
color: #BAC6DE
}
#pagewidth {
width: 1395px;
text-align: left;
margin: 0px auto;
}
#header {
position: relative;
height: 100px;
width: 1395px;
display: block;
overflow: none;
padding: 0px 0px 0px 0px;
}
#header h2 {
color: #fff;
padding: 0px 0px 0px 60px;
}
#header p {
color: #fff;
padding: 10px 0px 0px 60px;
}
#maincol {
background-color: #BAC6DE;
position: relative;
width: 1395px;
height: 800px;
padding: 0px 0px 0px 0px;
Margin: 0px 0px 0px 0px;
}
#widgetcontainer {
background-color: #00386B;
position: relative;
width: 1175px;
height: 100%;
Margin: 0px 0px 0px 0px;
Padding: 0px 0px 0px 10px;
Overflow: auto;
}
.widget {
background-color: #BAC6DE;
float: left;
width: 200px;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#result p {
color: #000;
}
#footer h2 {
color: fff;
padding: 0px 0px 0px 0px;
}
#footer p {
color: fff;
padding: 0px 50px 0px 60px;
font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive;
font-size: 120%;
margin-right: 2px;
margin-top: 8px;
}
/* ******************************************************************** */
/* Clearfix: http://csscreator.com/attributes/containedfloat.php */
/* ******************************************************************** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility;
hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* ******************************************************************** */
/* Styling for widgets hover */
/* ******************************************************************** */
.current {
color: #00386B;
display: block;
}
.imgHover {
display: inline;
position: relative;
}
.imgHover .hover {
display: none;
position: absolute;
z-index: 1;
}
.hover {
height: 575px;
width: 200px;
background: #BAC6DE;
}
.hover a {
display: block;
padding: 2px;
font-size: 80%;
padding-left: 5px;
}
.hover a:link {
/* Applies to all unvisited links */
text-decoration: none;
font-weight: none;
background-color: #BAC6DE;
color: #fff;
}
.hover a:hover {
/* Applies to links under the pointer */
text-decoration: none;
font-weight: bold;
background-color: #BAC6DE;
color: #fff;
}
.input {
border: 2px inset #fff;
background: #eee;
height: 30px;
margin-bottom: 40px;
}
.input:hover {
border: 2px solid #f00;
background: #ff6;
}
.button {
display: none;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br {
clear: left;
}
/* ******************************************************************** */
/* Styling for console panel */
/* ******************************************************************** */
a:focus {
outline: none;
}
a.trigger {
position: absolute;
background: #9E00F8 url(../images/plus.png) 6% 55% no-repeat;
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding: 4px 12px 6px 30px;
font-weight: bold;
z-index: 2;
}
a.trigger.left {
left: 0;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
a.trigger.right {
right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
a.trigger:hover {
background-color: #59B;
}
a.active.trigger {
background: #666 url(../images/minus.png) 6% 55% no-repeat;
}
.panel {
color: #CCC;
position: absolute;
display: none;
background: #9E00F8;
height: 800px;
width: 800px;
z-index: 1;
}
.panel.left {
left: 0;
padding: 26px 0px;
border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.panel p {
font-size: 11px;
}
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Hub Page</title>
<meta charset="utf-8" />
<meta generator="csscreator.com" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA==+/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slidePanel.min.js"></script>
<script>
$(function() {
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.1).end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// default settings
// $('.panel').slidePanel();
// custom settings
$('#panel2').slidePanel({
triggerName: '#trigger1',
triggerTopPos: '0px',
panelTopPos: '0px'
});
});
</script>
<SCRIPT LANGUAGE="JavaScript">
function ClipBoard() {
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
alert("Template Copied");
}
</SCRIPT>
<!-- Please link back to http://csscreator.com -->
<link rel="stylesheet" href="style/homepage.css" type="text/css" />
</head>
<body>
<div id="pagewidth">
<div id="header">
<IMG SRC="images/header.jpg" align=right>
</a>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<SPAN ID="copytext" STYLE="height:150;width:162;display:none;">
http://kana.ifdsgroup.co.uk/attachments/attach/uk/</SPAN>
</P>
</div>
<div id="wrapper" class="clearfix">
<div id="maincol">
<div class="widget">
<div class="hover">
<!----------START NAVIGATION PANEL----------->
TEAM HOME
KANA IQ
EMAIL DRAFT
TEAM DOCUMENTS
<!----------END NAVIGATION PANEL----------->
</div>
</div>
<div id="widgetcontainer">
<!----------Start Team Home Links----------->
<font size=5><strong><p>Bulletin Board. . .</p></strong></font>
<P>Please Enter Your First Bulletin Here . . .</P>
<!----------End Team Home Links----------->
</div>
<br clear=all>
</div>
</div>
</div>
</div>
</body>
</html>
Please can someone tell me why the text in the right hand DIV (Dark blue) is lower than the text in the left DIV (light blue)?
I have changed the padding, the margins but i cant get it to line up correctly.

You have to take note that browsers have their own pre-defiend styles for elements.
As "Bulletin Board..." is a p tag, browsers will add their own margins to that element. Most developers will use a reset stylesheet to avoid these issues. You could also just add margin: 0px; to the p tag and it would solve the issue.

<p> has a margin of 1em. Just inspect the the code using dev console.
p{
margin :0;
}
This will fix it. But please use normalize.css to fix browser specific default values.

Try this: your problem is margin of p tag. it have default margin. so, you can reset the margin of p tag by following code
Add p{margin:0;}code in css

This is because most browsers by default add some margins and paddings to the paragraph tags. You can either use a css reset file or just remove the margins yourself.
#widgetcontainer p{
margin: 0px;
}

JS AutoComplete Facebook Style (TextboxList) - control the cursor location

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>

Develop Reference

JavaScript is the programming language of the Web.

HTML input covering A attribute - javascript

Related

webpage is not auto fit in mobile browser

How to make dropdown menu

Add class to jQuery Highlight Effect in tag-it.js

text sits lower in one div compared to the other

JS AutoComplete Facebook Style (TextboxList) - control the cursor location

Categories

Resources