I'm beginner in web development and I don't understand why there is white space here (check screen capture), I would remove them...
PS:I use electron framework to make an desktop app
* {
border: 2px solid black;
}
#Icon {
height: 30px;
width: 30px;
}
.Minimize {
height: 30px;
width: 30px;
}
.Close {
height: 30px;
width: 30px;
}
#Triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #20272F;
margin: auto;
}
#Titre {
vertical-align: middle;
text-align: center;
}
<header>
<img id="Icon" src="Images/icon.png">
<input type="image" class="Minimize" src="Images/minimize_window_96px.png"></input>
<input type="image" class="Close" src="Images/close_window_96px.png"></input>
</header>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<h1 id="Titre">Triangle des equations</h1>
<div id="Triangle"></div>
<div id="PartiEquation"></div>
<script src="code.js"></script>
</body>
You can reset browser margin by use :
* { margin:0; padding:0; box-sizing:border-box; }
Try This...
* {
border: 2px solid black;
margin:0;
}
#Icon {
height: 30px;
width: 30px;
}
.Minimize {
height: 30px;
width: 30px;
}
.Close {
height: 30px;
width: 30px;
}
#Triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #20272F;
margin: auto;
}
#Titre {
vertical-align: middle;
text-align: center;
}
<header>
<img id="Icon" src="Images/icon.png">
<input type="image" class="Minimize" src="Images/minimize_window_96px.png"></input>
<input type="image" class="Close" src="Images/close_window_96px.png"></input>
</header>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<h1 id="Titre">Triangle des equations</h1>
<div id="Triangle"></div>
<div id="PartiEquation"></div>
<script src="code.js"></script>
</body>
Every element has certain rules applied by default by browsers. Try using a css reset script in order to "equalize" them.
This one for example.
https://meyerweb.com/eric/tools/css/reset/
My strong advice is to use:
header img,
header input {
float: left;
}
This will fix the box model problems and you will avoid generic selector like "*" which has performance implications!
Related
When writing something in “input” it’s real-time visible in div. It’s necessary that when B button is pressed the selected text in div turns bold and then it becomes unbold when pressed again. But I don't need any library or framework. I need to use only JavaScript. I tried getSelection methods and execCommand but they did not help․
const textArea = document.getElementById("textArea");
const input = document.getElementById("input");
const bold = document.getElementById("bold");
let span = document.createElement("span");
input.addEventListener("input", e => {
span.textContent = e.target.value;
textArea.appendChild(span);
});
#textArea {
width: 360px;
height: 350px;
padding: 5px;
font-size: 15pt;
word-wrap: break-word;
overflow: scroll;
border: 2px solid #ccc;
}
button {
width: 150px;
height: 50px;
border: none;
cursor: pointer;
}
.inputDiv {
margin-top: 5px;
}
#input {
width: 370px;
height: 50px;
border: none;
outline: none;
background-color: #ccc;
font-size: 15pt;
}
#workspace button {
width: 50px;
margin: 5px auto;
background-color: #d9d9d9;
}
#workspace button:hover {
width: 50px;
margin: 5px auto;
background-color: #999999;
}
<!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>Document</title>
</head>
<body>
<div class="myDiv">
<div id="workspace">
<button id="bold">B</button>
<div id="textArea"></div>
</div>
<div class="inputDiv">
<input type="text" name="text" id="input" placeholder="type something...">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I want to add new text node and a new li element but the result is a new li empty tag and a new separated string.
The string should be inside the created li tag.
Maybe my question is easy to answer but I really still don't understand how can the a new string can be added inside a tag since they are separately inserted into the DOM.
Inspecting results
any ideas ?
The source code is below
function Adding(){
let li = document.createElement('li')
let inputValue = document.getElementById('text').value;
let t = document.createTextNode(inputValue);
document.getElementById('list').appendChild(li);
document.getElementById('list').appendChild(t);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', Adding)
body {
background-color: aliceblue;
}
h1{
display: block;
margin: 10% auto 0 auto;
width: 300px;
color: #96e5ff;
}
.title{
display: block;
}
.form{
display: block;
}
input{
display: block;
margin: 10px auto 0 auto;
width: 300px;
padding: 10px;
border-radius: 10px;
border: 1px #d6eeff solid;
}
button{
display: block;
margin: 10px auto 0 auto;
width: 300px;
border-radius: 20px;
border: none;
padding: 10px;
background-color: snow;
border: solid 1px #d6eeff;
}
#list{
padding: 150px;
height: 300px;
max-width: 300px !important;
background-color: snow;
border-radius: 10px;
border: #d6eeff solid 1px;
display: block;
margin: 5px auto 0 auto
}
li{
list-style-type: none;
background-color: grey;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<div class="title">
<h1>TODO List using JS</h1>
</div>
<div class="form">
<input id="text" placeholder="Add something" type="text">
<button id="btn">Submit</button>
</div>
<ul id="list">
<li></li>
</ul>
</body>
<script src="app.js"></script>
</html>
There's no need to create a textNode. Just set the innerText property on the <li> element you created, and append the <li> to the <ul> element.
function Adding(){
let li = document.createElement('li')
li.innerText = document.getElementById('text').value;
document.getElementById('list').appendChild(li);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', Adding)
body {
background-color: aliceblue;
}
h1{
display: block;
margin: 10% auto 0 auto;
width: 300px;
color: #96e5ff;
}
.title{
display: block;
}
.form{
display: block;
}
input{
display: block;
margin: 10px auto 0 auto;
width: 300px;
padding: 10px;
border-radius: 10px;
border: 1px #d6eeff solid;
}
button{
display: block;
margin: 10px auto 0 auto;
width: 300px;
border-radius: 20px;
border: none;
padding: 10px;
background-color: snow;
border: solid 1px #d6eeff;
}
#list{
padding: 150px;
height: 300px;
max-width: 300px !important;
background-color: snow;
border-radius: 10px;
border: #d6eeff solid 1px;
display: block;
margin: 5px auto 0 auto
}
li{
list-style-type: none;
background-color: grey;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<div class="title">
<h1>TODO List using JS</h1>
</div>
<div class="form">
<input id="text" placeholder="Add something" type="text">
<button id="btn">Submit</button>
</div>
<ul id="list">
<li></li>
</ul>
</body>
<script src="app.js"></script>
</html>
You just need to modify your Javascript code in this way:
function Adding(){
let ul = document.getElementById("list");
let li = document.createElement("li");
let inputValue = document.getElementById('text').value;
li.appendChild(document.createTextNode(inputValue));
ul.appendChild(li);
}
Hi I am trying to have 20 customize audio players though I could only make the first one work. As soon as I copy and paste the new audio in html it does not start playing. I am not sure if the only way is by giving a unique id to each audio or if there is a way to avoid doing that by changing the javascript code.
thanks!!!
it is also online here http://musictext.yt/audio/audio.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>
<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>
<div id="barra">
<div id="progreso">
</div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
JS
function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load', iniciar, false);
CSS
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;
}
nav{
margin: 1px 0px;
}
.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
#botones{
background-color: black;
width: 100px;
height: 20px;
}
#barra{
position: relative;
width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}
I am working on project like floor plan. The project is working 100% with JQuery but know i wanted to integrate with angularjs, for that i need to convert jquery functions to angularjs directive.
below i have posted my jquery code please can anyone help me to convert.
Thanks in advance...
.JS
$(document).ready(function(){
//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',
//When first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv"+counter).addClass(itemDragged);
}
}
});
});
function readURL(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
$('#frame').css('background-image', 'url(' + getImagePath + ')');
}
.CSS
body {
text-align: center;
z-index: 1;
}
#wrapper {
text-align: left;
width: 720px;
margin-left: auto;
margin-right: auto;
}
#options{
width: 700px;
height: 90px;
border: 1px solid black;
}
#frame{
margin-top: 25px;
width: 700px;
height: 550px;
background-image: url('');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid black;
margin-left: 0px;
position: relative;
z-index: 10;
}
#tbldevs{
border:1px solid black;
width:80%;
margin-left:50px;
margin-top:10px;
}
#tbldevs th{
text-align:center;
height:50px;
width:50px;
}
#tbldevs td{
height:50px;
}
#drag1 {
margin-left: 15px;
margin-top: 15px;
/* background-image: url("../images/cf_32x32.png"); */
width: 32px;
height: 32px;
border: 2px solid black;
border-radius: 50%;
float: left;
z-index: 25;
}
#drag2 {
margin-left: 79px;
margin-top: 15px;
/* background-image: url("../images/cf_32x32.png"); */
width: 60px;
height: 32px;
border: 2px solid black;
z-index: 25;
}
.ui-draggable-helperMoving {
border: 1px dotted #000;
padding: 6px;
background: #fff;
font-size: 1.2em;
width:100px;
height:100px;
}
.ui-draggable-helperStoped {
border: 1px solid #000;
width:5px;
height:5px;
}
/* classes for dragged stuff */
.dragged1 {
position: fixed;
/* background-image: url("../images/cf_32x32.png"); */
width: 32px;
height: 32px;
border: 2px solid black;
border-radius: 50%;
}
.dragged2 {
position: fixed;
/* background-image: url("../images/cf_32x32.png"); */
width: 60px;
height: 32px;
border: 2px solid black;
}
/*.dragged3 {
position:absolute;
background-image: url("../images/fla_32x32.png");
width:32px;
height:32px;
}
.dragged4 {
position:absolute;
background-image: url("../images/flex_32x32.png");
width:32px;
height:32px;
}
.dragged5 {
position:absolute;
background-image: url("../images/pdf_32x32.png");
width:32px;
height:32px;
}
.dragged6 {
position:absolute;
background-image: url("../images/ps_32x32.png");
width:32px;
height:32px;
}
#element{
border:1px solid red
}*/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<title>Where have I been? - Demo</title>
<meta name="description" content="Where have I been?" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />
<script src="js/script.js"></script>
</head>
<body>
<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id="wrapper">
<div id="options">
<div id="drag1" class="drag"></div> <!-- end of drag1 -->
<div id="drag2" class="drag"></div> <!-- end of drag2 -->
</div><!-- end of options -->
<div id="frame">
</div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>
Every part of the following code player works fine expect the CSS part of it.
It can display HTML and JS without problem. I've tried to fix it but I couldn't. even Chrome console is not pointing to any error. I think the problem is here:
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
And here is all of the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sadegh's code player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#menubar {
width: 100%;
height: 40px;
background-color: #6C4141;
}
#logo {
padding: 10px 0 0 15px;
font-weight: bold;
font-size: 1.15em;
float: left;
color: white;
text-shadow: 1px 1px 3px gray;
}
#button {
float: right;
padding: 5px 20px 0 0;
}
#runButton {
font-size: 1.15em;
font-weight: bold;
height: 30px;
width: 60px;
border-radius: 4px;
color: #875D5D;
border: 1px solid #8E7272;
background-color: white;
text-shadow: 1px 1px black;
}
#runButton:hover {
background-color: #8E7272;
color: white;
border: 1px solid white;
}
#toggles {
width: 400px;
margin: 0px auto;
height: 100%;
}
#toggles ul {
list-style-type: none;
}
.toggleLi {
display: inline-block;
padding: 7px 5px 5px 5px;
border: 1px solid white;
border-radius: 5px 5px 0 0;
background-color: #8E7272;
height:30px;
margin-top: 10px;
width: 95px;
text-align: center;
border-bottom: 0;
color: white;
font-weight: bold;
}
.selected {
background-color: white;
color: #875D5D;
border: 1px solid gray;
}
.clear {
clear: both;
}
.codeContainer {
width: 25%;
float:left;
height: 100%;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px ridge #875D5D;
padding: 15px;
font-family: Console, Lucida, monospace;
font-size: 18px;
}
.codeLable {
position: absolute; top: 10px; right: 10px;
border-bottom: 1px solid #875D5D;
padding: 0 2px 2px 2px;
}
#resultFrame {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menubar">
<div id="logo">Code Player</div>
<div id="button">
<button type="button" id="runButton">Run</button>
</div>
<div id="toggles">
<ul>
<li class="toggleLi selected">HTML</li>
<li class="toggleLi selected">CSS</li>
<li class="toggleLi selected">JS</li>
<li class="toggleLi selected">Result</li>
</ul>
</div>
<div class="clear"></div>
<!-- html container -->
<div class="codeContainer" id="HTMLContainer">
<div class="codeLable">HTML</div>
<textarea name="textarea" id="html">Some text</textarea>
</div>
<!-- css container -->
<div class="codeContainer" id="CSSContainer">
<div class="codeLable">CSS</div>
<textarea name="textarea" id="css">body {
background-color: red;
}
</textarea>
</div>
<!-- javascript container -->
<div class="codeContainer" id="JSContainer">
<div class="codeLable">JavaScript</div>
<textarea name="textarea" id="js">alert('Thatsit')</textarea>
</div>
<!-- result iframe -->
<div class="codeContainer" id="ResultContainer">
<div class="codeLable">Result</div>
<iframe id="resultFrame"></iframe>
</div>
</div><!-- end of #menubar -->
</div><!-- end of page wrapper -->
<script type="text/javascript">
var windowHeight = $(window).height();
var menubarHeight = $("#menubar").height();
var codeContainerHeight = windowHeight - menubarHeight;
$(".codeContainer").height(codeContainerHeight + "px");
$(".toggleLi").click(function(){
$(this).toggleClass("selected");
var activeDiv = $(this).html();
$("#"+activeDiv+"Container").toggle();
var showingDivs = $(".codeContainer").filter(function() {
return $(this).css("display") !== "none";
}).length;
var width = 100 / showingDivs;
$(".codeContainer").css("width",width + "%");
});
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
</script>
</body>
</html>
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
The $("#html").val() will return only text not include tags,so when user input something in <textarea name="textarea" id="html">Some text</textarea>
you need to wrap into a tag,for example:user input(Some text),wrap to <p>Some text</p>or wrap inside a body tag.Hope this help you.