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>
Related
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...
I have a website that I am making with a friend and there is a problem where, when a dropdown tab is being slideToggle()'d with jquery, it moves the html div below it, and I just want it to overlap it, is there an easy way to do it?
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'/>
<link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Architects+Daughter|Coda|Indie+Flower|Shadows+Into+Light|Special+Elite" rel="stylesheet">
<title>ALFEX Inc.</title>
</head>
<body>
<div class='content'>
<div class='header'>
<h1>ALFEX INCORPORATED</h1>
<ul class='tabsbar'>
<a class='link' href='alfex.html'><li class='tab'>Home</li></a>
<div class='link'><li class='tab' id='gam'>Gags & Memes</li></div>
<div class='link'><li class='tab' id='crew'>The Crew</li></div>
<a class='link' href='alfex-codex.html'><li class='tab'>The Codex</li></a>
<a class='link' href='alfex-minigames.html'><li class='tab'>Minigames</li></a>
</ul>
</div>
<div class='panel-gam'>
<ul class='panel-list'>
<a class='p-link' href='alfex-gagsandmemes-doggo.html'><li class='p-tab'>Doggo Memes</li></a>
<a class='p-link' href='alfex-gagsandmemes-dad.html'><li class='p-tab'>Dad Jokes</li></a>
<a class='p-link' href='alfex-gagsandmemes-pun.html'><li class='p-tab'>Puns</li></a>
</ul>
</div>
<div class='panel-crew'>
<ul class='panel-list'>
<a class='p-link' href='alfex-alfie.html'><li class='p-tab'>Alfie</li></a>
<a class='p-link' href='alfex-alex.html'><li class='p-tab'>Alex</li></a>
</ul>
</div>
<div class='main'>
<h2>Welcome to the Alfex Inc. website</h2>
<h3>for all your cousin needs xD.</h3>
<div class='olexparent'>
<iframe class='olexvideo' width="560" height="315" src="https://www.youtube.com/embed/aa6IGzjY_kI?list=PLsCWhnzJYhqRCjHKprzyP7vQBJexv6OOZ" frameborder="0" allowfullscreen align="right"></iframe>
</div>
<p class="intro"></p>
</div>
</div>
</body>
</html>
Here is my JavaScript Code:
$(document).ready(function() {
$('.content').hide();
$('.content').fadeIn(800);
$('#gam').click(function() {
$('.panel-crew').slideUp(0);
$('.panel-gam').slideToggle();
});
$('#crew').click(function() {
$('.panel-gam').slideUp(0);
$('.panel-crew').slideToggle();
});
});
If needed, here is my CSS:
/* * {
border-style: solid;
border-width: 0.5px;
border-color: #fff;
box-sizing: border-box;
} */
body {
margin: 0px;
padding: 0px;
background-image: url('http://images.naldzgraphics.net/2012/08/4-lined.jpg');
background-repeat: repeat-y;
background-size: 100%;
}
.tabsbar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #525c68;
}
.tab {
padding: 18px 0px 18px 0px;
float: left;
max-width: 20%;
min-width: 20%;
display: block;
text-align: center;
background-color: #525c68;
color: #5dbace;
}
.header {
display: block;
background-color: #525c68;
}
.link{
text-decoration: none;
background-color: #525c68;
color: #7bcadb;
font-family: 'Special Elite', 'Coda', sans-serif;
}
h1 {
color: #ffffff;
font-family: sans-serif;
font-size: 550%;
display: block;
background-color: #525c68;
margin: 0px;
text-align: center;
padding: 10px;
}
p {
font-family: 'Annie Use Your Telescope', 'Indie Flower', 'Shadows Into Light', 'Architects Daughter', cursive;
font-size: 24px;
}
h2 {
font-size: 30px;
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-bottom: 10px;
}
.main {
background-color: #d8d8d8;
max-width: 80%;
margin: 0px 10% 180px 10%;
padding: 80px 80px 100px 80px;
}
h3, .minigames-subheading, .minigames-subheading2, .alfie-subheading {
opacity: 0.5;
padding: 5px 0px 0px 0px;
position: relative;
bottom: 20px;
font-style: italic;
font-family: 'Coda', sans-serif;
margin-right: 50%;
font-size: 26px;
}
.olexvideo {
max-width: 100%;
position: relative;
bottom: 59px;
max-width: 52%;
}
.panel-gam {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 20%;
}
.panel-crew {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 40%;
}
.p-link {
text-decoration: none;
color: #ffffff;
font-family: 'Special Elite', 'Coda', sans-serif;
padding: 0px 20px 20px 20px;
}
.panel-list {
padding: 0px 40px 10px 40px;
list-style-type: none;
}
a.p-link:hover {
color: #d8d8d8;
}
h4 {
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
font-size: 20px;
border-bottom-style: solid;
border-bottom-color: #737373;
border-bottom-width: 2px;
padding-bottom: 5px;
}
.rockpaperscissors {
border-style: solid;
border-width: 5px;
border-radius: 10px;
margin: 20px 0px 10px 0px;
padding: 20px 20px 60px 20px;
background: #a6a6a6;
border-color: #a6a6a6;
min-height: 300px;
}
button {
border-style: outset;
border-color: #4f5864;
background-color: #525c68;
color: #7bcadb;
padding: 40px;
border-radius: 5px;
font-family: 'Special Elite', 'Coda', sans-serif;
width: 33%;
font-size: 28px;
}
button:hover {
border-style: inset;
border-color: #73c6d9;
background-color: #7bcadb;
color: #ffffff;
}
.result {
font-family: 'Special Elite', 'Coda', sans-serif;
font-size: 50px;
}
.reset {
position: relative;
top: 20px;
width: 100%;
}
li.tab:hover {
background-color: #7bcadb;
color: #ffffff;
}
.specialised-memes {
border: none;
padding: 20px 5px 20px 5px;
font-family:
width: 100%;
height: 1000px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
}
.page-feed {
position: relative;
bottom: 1000px;
max-width: 45%;
overflow: scroll;
}
img {
width: 100%;
padding: 20px 0px 20px 0px;
}
.left-side {
width: 520px;
}
.fb-picture {
position: relative;
bottom: 393px;
background-color: #a6a6a6;
border-radius: 10px;
}
.embed {
border-radius: 50px;
padding: 50px;
background-color: #a6a6a6;
width: 50%;
}
.intro {
margin-left: 20px;
}
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;
}
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:
i have a problem :
there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .
photo on this code:
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.gif" style="width: 21px;" />
<span id="mes">$count</span>
</a>
the full code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: auto;
top: -34px;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display: none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg {
padding: 10px;
margin: 5px 5px 5px 5px;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body {
border-top: 1px solid #D1D8E7;
color: #808080;
}
.egg_Message {
font-size: 13px !important;
font-weight: normal;
overflow: hidden;
}
h3 {
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
.comment_ui {
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
padding: 6px 4px 3px 6px;
width: 331px;
cursor: pointer;
white-space: pre-line;
}
.comment_ui:hover {
background-color: #F7F7F7;
}
.comment_actual_text img {
margin: 0px 0px 0px 7px;
}
.dddd {
background-color: #f2f2f2;
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
margin-bottom: 2px;
padding: 6px 4px 3px 6px;
width: 331px;
}
.comment_text {
border-radius: 2px 2px 2px 2px;
padding: 2px 0 4px;
color: #333333;
}
.comment_actual_text {
display: inline;
padding-left: .4em;
}
ol {
list-style: none;
margin: 0 auto;
width: 500px;
margin-top: 20px;
}
#mes {
padding: 0px 3px;
border-radius: 3px 3px 3px 3px;
background-color: rgb(240, 61, 37);
background-color: #FF00CC;
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer {
background-image: url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 276px;
}
.clean {
display: none
}
.textlink {
display: block;
width: 140px;
}
</style>
<span id="menu">
<ul>
<li>
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer">
<img src="alert/top.png" />
</div>
<div id="view_comments"></div>
$all
<if condition="$count_all > 0 ">
<div class="bbbbbbb" id="view">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
view all
</div>
</div>
</if>
</li>
</ul>
</li>
</ul>
</span>
Thank you very much !
Instead of the :hover pseudo-class, use the :active pseudo-class.
So the CSS block would look like this:
a:active {
color: black;
}
For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active
Toggle with only CSS is a little bit tricky, but here is one way of doing it:
Demo: http://jsfiddle.net/DerekL/R5Bm5/
<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>
.more{
height: 0px;
overflow: hidden;
}
#control:checked ~ .more{
/*Do whatever you want here*/
height: 20px;
}
#control{
display: none;
}
#toggle{
color: blue;
text-decoration: underline;
cursor: pointer;
}
Of course, you can always toggle with JavaScript:
$("#toggle").click(function(){
$(".more").toggle();
});
A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/