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...
Related
I am playing around with a little project as I am learning JS and I made a plate calculator.
Long story short, you enter your name and every letter costs 5 dollars, so your name's length * 5 dollars = cost of the plate. (little project seen on "Javascript & Jquery" book by Jon Duckett).
As said in the title, I can't seem to get the input's value lenght. When I click on calculate button I get 'Your plate costs NaN dollars'.
I'm pretty sure I'm doing something stupidly obvious, but can't figure out what. .length seemed like the most logical option to me.
Also, why in the event listener for the refresh button, when I tried writing personName = '' didn't work, but when I wrote document.querySelector('.input').value = ''; worked? Why it didn't accept the variable declared at the beggining?
Here the JS code
let personName = document.querySelector('.input').value;
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
cost.innerText = personName.lenght * 5;
yourPlate.classList.add('show')
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
})
And HERE the snippet
let personName = document.querySelector('.input').value;
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
cost.innerText = personName.lenght * 5;
yourPlate.classList.add('show')
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: verdana;
}
body {
background: url('utah2.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-blend-mode: darken;
}
.body {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(20,0,0,.5);
}
.container {
height: 55vh;
min-width: 90vw;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding-top: 20px;
background: url('utah.jpg');
background-size: cover;
background-position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
box-shadow: 3px 3px 10px black;
}
.calculate {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding-bottom: 20px;
width: 100%;
}
.yourplate {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.4em;
position: absolute;
top: 43%;
display: none;
}
.yourplate.show {
display: block;
}
.cost {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.8em;
}
h1 {
border-bottom: 1px solid black;
}
h3 {
position: relative;
top:-25px;
}
.input {
outline: none;
border: none;
border-radius: 5px;
height: 2em;
width: 70%;
}
.button {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
}
.refresh {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
position: relative;
top: 20px;
background: lightgreen;
}
.button:active {
transform: scale(.95);
background: rgba(0,147,255,0.5);
outline: none;
}
.dot1, .dot2, .dot3, .dot4 {
width: 15px;
height: 15px;
background: radial-gradient(rgba(150,150,150,.7), rgba(50,50,50));
border-radius: 50%;
position: absolute;
box-shadow: 1px 1px 5px black, 0 0 10px rgb(183, 65, 14);
}
.dot1 {
top: 20px;
left: 20px;
}
.dot2 {
bottom: 20px;
right: 20px;
}
.dot3 {
bottom: 20px;
left: 20px;
}
.dot4 {
top: 20px;
right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Plate Cost</title>
</head>
<body>
<div class="body"></div>
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<h1>PLATE CALCULATOR</h1>
<h3>Enter your name and calculate the cost</h3>
<p class="yourplate">Your plate costs <span class="cost"></span> dollars</p>
<div class="calculate">
<input type="text" class="input"><br>
<button type="submit" class="button">Calculate</button>
<button class="refresh">Refresh</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
There are a couple of problems with your code.
You need to wait for the DOM ready event. That is the point when you can start to query the DOM.
You are querying the personName value on the start of your script (so it's always empty), but in fact you should do it when you click the button.
You had a typo in code (length not lenght)
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
let personName = document.querySelector('.input');
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
cost.innerText = personName.value.length * 5;
yourPlate.classList.add('show')
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
})
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: verdana;
}
body {
background: url('utah2.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-blend-mode: darken;
}
.body {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(20,0,0,.5);
}
.container {
height: 55vh;
min-width: 90vw;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding-top: 20px;
background: url('utah.jpg');
background-size: cover;
background-position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
box-shadow: 3px 3px 10px black;
}
.calculate {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding-bottom: 20px;
width: 100%;
}
.yourplate {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.4em;
position: absolute;
top: 43%;
display: none;
}
.yourplate.show {
display: block;
}
.cost {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.8em;
}
h1 {
border-bottom: 1px solid black;
}
h3 {
position: relative;
top:-25px;
}
.input {
outline: none;
border: none;
border-radius: 5px;
height: 2em;
width: 70%;
}
.button {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
}
.refresh {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
position: relative;
top: 20px;
background: lightgreen;
}
.button:active {
transform: scale(.95);
background: rgba(0,147,255,0.5);
outline: none;
}
.dot1, .dot2, .dot3, .dot4 {
width: 15px;
height: 15px;
background: radial-gradient(rgba(150,150,150,.7), rgba(50,50,50));
border-radius: 50%;
position: absolute;
box-shadow: 1px 1px 5px black, 0 0 10px rgb(183, 65, 14);
}
.dot1 {
top: 20px;
left: 20px;
}
.dot2 {
bottom: 20px;
right: 20px;
}
.dot3 {
bottom: 20px;
left: 20px;
}
.dot4 {
top: 20px;
right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Plate Cost</title>
</head>
<body>
<div class="body"></div>
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<h1>PLATE CALCULATOR</h1>
<h3>Enter your name and calculate the cost</h3>
<p class="yourplate">Your plate costs <span class="cost"></span> dollars</p>
<div class="calculate">
<input type="text" class="input"><br>
<button type="submit" class="button">Calculate</button>
<button class="refresh">Refresh</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Just need some minor changes to your addEventListener. Your personName.length had spelling issues :
btn.addEventListener('click', () => {
cost.innerText = personName.length * 5;
yourPlate.classList.add('show');
});
Also it is better for long term to try to name all of your functions so that maintaining the code will be easier later on :
const calculatePrice = () => {
cost.innerText = personName.length * 5;
yourPlate.classList.add('show');
}
btn.addEventListener('click',calculatePrice, false);
I also assumed that you have already added the jQuery library to your project.
You shloud place this:
let personName = document.querySelector('.input').value;
in your Method:
btn.addEventListener('click', () => {
Because else it will be executed on site load (where it will be empty)
EDIT
When sorting an item in a sortable list, the item jumps from its center position in the browser to the far left while sorting/dragging.
Hit add task twice, and then sort an item into new position and you'll see what I'm talking about.
$(document).ready(function() {
$(function() {
$('#sortable').sortable();
$('#sortable').disableSelection();
});
$(document).ready(function() {
$('#add').on('click', () => {
$('.ul').append(
'<div class="divvy">' +
'<input type="text" class="inputty"/><button class="remove" id="deletestyle" style="float: right;"> X </button>' +
'<div class="detailcontainer" style="float: left;" > <p>▼</p></div><div class="panel">' +
'<form class="form-inline"><p>Details</p><br><textarea name="details" rows="6" cols="15">' +
'</textarea><p>Due Date</p><input type="date" name="date" style="margin-bottom: 25px; width: 127px;"></form></div></div>');
});
$('.ul').on('click', '.detailcontainer', function() {
$(this).closest('.divvy').find('.panel').toggle();
});
});
$('.panel').hide();
$('.optionBox').on('click', '.remove', function() {
$(this).parent().fadeOut(400, function() {
$(this).remove();
});
});
});
.panel {
display: none;
}
.center {
text-align: center;
margin-top: 58px;
}
.center div {
margin: 0 auto;
}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
#deletestyle {
background: #f04d25;
border: solid 1px white;
color: white;
font-weight: 700;
height: 45px;
width: 10%;
border-radius: 0px;
}
.divvy {
border: solid 1px black;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
position: relative;
min-width: 325px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.divvy:hover {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
min-width: 325px;
margin: 0 auto;
}
.divvy:active {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
-webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
min-width: 325px;
margin: 0 auto;
}
.inputty {
width: 75%;
height: 45px;
font-size: 22px;
font-family: 'work sans';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="center">
<div class="optionBox" style="position: relative;">
<button class="addtask" id="add" class="center">＋ ADD TASK</button>
<div id="sortable" class="ul" class="center"></div>
</div>
</div>
(fiddle)
You could simply add to your .divvy class :
.divvy {
top:0;
right:0;
left:0;
}
$(document).ready(function() {
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
$(document).ready(function() {
$('#add').on('click', () => {
$('.ul').append(
'<div class="divvy">' +
'<input type="text" class="inputty"/><button class="remove" id="deletestyle" style="float: right;"> X </button>' +
'<div class="detailcontainer" style="float: left;" > <p>▼</p></div><div class="panel">' +
'<form class="form-inline"><p>Details</p><br><textarea name="details" rows="6" cols="15">' +
'</textarea><p>Due Date</p><input type="date" name="date" style="margin-bottom: 25px; width: 127px;"></form></div></div>');
});
$('.ul').on('click', '.detailcontainer', function() {
$(this).closest('.divvy').find('.panel').toggle();
});
});
$('.panel').hide();
$('.optionBox').on('click', '.remove', function() {
$(this).parent().fadeOut(400, function() {
$(this).remove();
});
});
});
.panel {
display: none;
}
.center {
text-align: center;
margin-top: 58px;
}
.center div {
margin: 0 auto;
}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
#deletestyle {
background: #f04d25;
border: solid 1px white;
color: white;
font-weight: 700;
height: 45px;
width: 10%;
border-radius: 0px;
}
.divvy {
border: solid 1px black;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
position: relative;
min-width: 325px;
margin-left: auto;
margin-right: auto;
overflow: auto;
top: 0;
right: 0;
left: 0;
}
.divvy:hover {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
min-width: 325px;
margin: 0 auto;
}
.divvy:active {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
-webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
min-width: 325px;
margin: 0 auto;
}
.inputty {
width: 75%;
height: 45px;
font-size: 22px;
font-family: 'work sans';
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="java4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="center">
<div class="optionBox" style="position: relative;">
<button class="addtask" id="add" class="center">＋ ADD TASK</button>
<div id="sortable" class="ul" class="center">
</div>
</div><br>
</div>
</body>
</html>
Specifying a width for #sortable seems to solve the issue:
#sortable {
width: 380px;
}
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'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'm working on a mobile web application and I have a problem with the Android soft keyboard when an input field is focused.
When I focus the input field, the soft keyboard appears. On Windows Phone (tested on 7.8) the whole page, so the entire DOM goes up to make room for the softkeyboard. With Android (and also on Google Chrome) some elements stay where they are, and others go up when the soft keyboard is openend. How can I get the whole DOM, or actually, the hole body of the page to go up to make room for the soft keyboard on Android (I haven't tested this on iOS yet).
Here are a few screenshots on Android when the keyboard is opened:
Here is what the page looks like when it's normal:
And this is what it looks like when the soft keyboard is opened:
How can I get this effect?:
Here's my source code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="robots" content="noindex" />
<!-- CSS -->
<style>
#charset "UTF-8";
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
input, textarea, button {
outline: none;
}
#appMain {
position: absolute;
width: 100%;
max-width: 640px;
height: 100%;
background: url(static/img/static/main_bg.fw.png) no-repeat;
background-size: cover;
}
#appHeader {
position: absolute;
margin: 0;
width: 100%;
height: 50px;
background: #007EA8;
}
#headerUnderline {
position: absolute;
margin-top: 50px;
width: 100%;
height: 5px;
background: #CCC;
}
#headerLogo {
position: absolute;
left: -50px;
width: 125px;
height: 72px;
background: url(static/img/static/sprite.fw.png);
background-position: 0 0;
}
#mainLogo {
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-top: 100px;
}
#mainSlogan {
width: 100%;
text-align: center;
font: 20px sans-serif;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
#facebook {
margin: 0;
padding-left: 30px;
float: left;
width: 50%;
height: 100%;
font: 14px sans-serif;
color: #FFF;
background: #003A75;
border: 0;
text-shadow: 1px 1px 1px #000;
}
#signIn {
margin: 0;
float: right;
width: 50%;
height: 100%;
font: 14px sans-serif;
color: #FFF;
background: #007900;
border: 0;
text-shadow: 1px 1px 1px #000;
}
#facebookLogo {
position: absolute;
left: 4%;
top: 10px;
width: 16px;
height: 30px;
background: url(static/img/static/sprite.fw.png);
background-position: -160px -30px;
}
#fieldHolder {
position: absolute;
width: 100%;
bottom: 100px;
}
.accountField {
margin-bottom: -2px;
padding-left: 5px;
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font: 14px sans-serif;
color: #333;
}
.accountField:focus {
background: #FFF;
}
.accountField::-webkit-input-placeholder {
color: #FFF;
}
.accountField2::-moz-placeholder { /* Firefox 19+ */
color: #FFF;
}
.accountField:-ms-input-placeholder {
color: #FFF;
}
#subFooter {
position: absolute;
bottom: 65px;
width: 100%;
}
#signUpButton {
margin-left: 10px;
float: left;
background: none;
border: 0;
font: 14px sans-serif;
color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
#forgotButton {
margin-right: 10px;
float: right;
background: none;
border: 0;
font: 14px sans-serif;
color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
</style>
<!-- JS -->
<script src="static/js/includes/jquery_m.js"></script>
<script src="static/js/includes/jquery.js"></script>
</head>
<body>
<div id="appMain">
<div id="appHeader">
<div id="headerUnderline"></div>
<div id="headerLogo"></div>
</div>
<img id="mainLogo" src="static/img/static/main_logo.fw.png" alt="Welcome to Scrapll!" />
<h1 id="mainSlogan">The Private Social Network<h1>
<form action="login.php" method="post">
<div id="fieldHolder">
<input type="email" class="accountField" name="email" placeholder="Email Address" />
<input type="password" class="accountField" name="password" placeholder="Password" />
</div>
<div id="subFooter">
Sign Up
Forgot password
</div>
<div id="footer">
<input type="submit" id="signIn" value="Sign In" />
</form>
<button type="button" id="facebook">Login with Facebook</button>
<div id="facebookLogo"></div>
</div>
</div>
</body>
</html>