Make Selected part of text Bold/Unbold with JavaScript - javascript

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>

Related

Problem adding text inside tags using createTextNode and createElement in javascript

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);
}

Position a button next to a text in a created div

When I create an div I want to position my button to the right of the text. It works fine when i just put in some text like "PHP" but when write in a longer word like "Javascript" the button moves down so it is under the text. I have tried using float and display but it does not seem to work. Any ideas on how I can do this?
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
${$inputBox.val()}
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function () {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0, rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
/* Start of lägga till kompetens */
.newrect {
min-width: 105px;
max-width: 220px;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
}
.flexbox{
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea{
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div> <!-- Container for the boxes -->
The issue is due to the max-width you set in CSS on .newrect causing the content to overflow. Similarly, the margin-left and margin-right encroached in to the content so .hej occasionally overflowed due to that too.
To fix this, remove max-width from .newrect (or make it much bigger) and use padding to set the horizontal gutters for the content within the .newrect instead:
.newrect {
min-width: 105px;
padding; 0 5px 0 15px;
/* other rules ... */
}
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
${$inputBox.val()}
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function() {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function() {
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function() {
var minRows = this.getAttribute('data-min-rows') | 0,
rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
/* Start of lägga till kompetens */
.newrect {
min-width: 105px;
margin-top: 1%;
padding; 0 5px 0 15px;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
}
.flexbox {
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea {
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css">
<!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus>
<!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box">
<!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div>
<!-- Container for the boxes -->
I think it's gonna work for you
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
<span class="inputText">${$inputBox.val()}</span>
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function () {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
$inputBox.val('');
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0, rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
.newrect {
/* min-width: 105px; */
/* max-width: 220px; */
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
display: inline-block;
text-overflow:ellipsis;
white-space:nowrap;
line-height: 100%;
}
.flexbox{
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea{
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div> <!-- Container for the boxes -->
</body>
</html>

CSS styling space between tags

I want to make input tag(currently height=0) popup when I press the plus button,and remove it when I press it again.
How can I remove the gap between the "to do list" div and "dfsdfs" li without removing any html tags?
If I remove the input tag id = "searchBox" (currently height = 0) the problem get solved, but I need the input tag.
Just cant find the problem why I cant fit them whithout any space.
$("ul").on("click","span",function (){
$(this).parent().fadeOut(500,function () {
$(this).remove();
});
})
$("ul").on("click","li",function (){
$(this).toggleClass("lineThrough");
})
$("#plusBtn").on("click",function(){
})
$("#searchBox").on("keypress",function(k){
if(k.which == 13){
var newTodo = $("#searchBox").val();
var newTodo = "<li><span><i class='far fa-trash-alt'></i></span>"+newTodo+"</li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$(this).val("");
}
}
})
body{
background-image:linear-gradient(to right, #076585 ,#fff); ;
}
#table{
width: 350px;
margin: 100px auto;
box-shadow: 5px 5px 20px #79777767;
}
#todoTitle{
background: rgb(88, 88, 214);
height: 45px;
line-height: 50px;
padding-left: 10px;
color: whitesmoke;
font-size: 25px;
}
#plusBtn{
background: transparent;
border: 0;
color: white;
font-weight: bold;
font-size: 45px;
float: right;
line-height: 45px;
outline: none;
}
#searchBox{
width: 100%;
border: 0;
padding: 0;
height: 0;
font-size: 20px;
padding-left: 10px;
color: gray;
box-sizing: border-box;
}
#toDos{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
padding: 0;
width: 100%;
background: rgb(240, 240, 240);
box-sizing: border-box;
height: 45px;
line-height: 45px;
font-size: 25px;
color: gray;
}
li:nth-child(2n){
background: white;
}
.lineThrough{
text-decoration: line-through;
color: rgb(182, 179, 179);
}
span{
text-align: center;
color: white;
width: 0;
height: 45px;
display: inline-block;
background: rgb(248, 46, 46);
margin-right:12px;
border: 0;
opacity: 0;
}
li:hover span{
width: 45px;
transition:.2s linear ;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TO DO LIST</title>
<link rel="stylesheet" type="text/css" href="tdl_css.css">
<script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
<link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id = "table">
<div id = "todoTitle">TO-DO LIST
<button id= "plusBtn">+</button>
</div>
<input type="text" id = "searchBox" placeholder="Add New Todo"></input>
<ul id="toDos">
<li>dsfsdfs</li>
</ul>
</div>
<script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>
Instead of setting the input's width or height to 0, use display: none to remove it from the layout flow entirely.
Have you tried executing a script to manipulate the display:
if( element.style.display === 'block') {
document.getElementById("searchBox").style.display = 'none';
}
else {
document.getElementById("searchBox").style.display = 'block';
}

How I can remove this white spaces ? (html, css)

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!

how to add tipbox when mouse hover on the text

http://bowser.effectgames.com/~jhuckaby/zeroclipboard/multiple.html
is there a way to add a tipbox when the mouse hover on the copied text.the tip box say"the text has been copied" thank you.
HTML:code
<body>
<div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
</div>
</body>
yeah it is:
clip.addEventListener('complete', run_my_tipbox);
this will call the function run_my_tipbox when the text has been copied to the clipboard :)
so you will do something like that:
<script language="JavaScript">
var clip = null;
function run_my_tipbox(){ alert('Text has been copied to the clipboard!'); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('load', my_load);
clip.addEventListener('mouseOver', my_mouse_over);
clip.addEventListener('complete', run_my_tipbox);
clip.glue( 'd_clip_button' );
}
</script>
hopefully this makes it a bit more clear ;)
this is a fully working html file.. you can look what it does, it's pretty simple
<!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="de" lang="de">
<head>
<title>h4kr.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
<style type="text/css">
body {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.error-msg {
font-size: 12px;
margin: 10px;
padding: 10px;
color: #ffffff;
border: 1px solid #000000;
background-color: #990000;
font-weight: bold;
}
textarea {
width: 450px;
height: 200px;
border: 1px solid #669966;
padding: 5px;
}
#output {
height: 200px;
width: 99%;
border: 1px solid #669966;
padding: 5px;
overflow: auto;
}
#outputContent {
font-size: 13px;
}
button {
width: 450px;
height: 40px;
}
span.label {
width: 140px;
display: block;
float: left;
}
span.hidden {
display: none;
}
div#clipboardcontent{
display:none;
}
div#copyclipboardsuccess{
position: absolute;
top: 400px;
left: 20px;
border: 1px solid #000000;
background-color: #009900;
color: #ffffff;
font-weight: bold;
font-size: 18px;
padding: 20px;
width: 300px;
height: 60px;
text-align: center;
opacity: 0.5;
z-index: 9999;
}
div#errormsg{
position: absolute;
top: 150px;
left: 20px;
border: 1px solid #000000;
background-color: #990000;
color: #ffffff;
font-weight: bold;
font-size: 18px;
padding: 20px;
width: 300px;
height: 60px;
text-align: center;
opacity: 0.5;
z-index: 9999;
}
</style>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );
var clip = null;
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('load', function (client) {
});
clip.addEventListener('mouseOver', function (client) {
// update the text on mouse over
clip.setText( document.getElementById('clipboardcontent').innerHTML );
});
clip.addEventListener('onComplete', function (client) {
copyclipboardsuccess();
});
clip.glue( 'd_clip_button','d_clip_container');
}
function copyclipboardsuccess()
{
var o = document.getElementById('copyclipboardsuccess');
if(o.style.display == 'none')
{
o.style.display = 'block';
setTimeout(copyclipboardsuccess,1000);
}
else
{
o.style.display = 'none';
}
}
function errormsg()
{
var o = document.getElementById('errormsg');
if(o.style.display == 'none')
{
o.style.display = 'block';
setTimeout(errormsg,2500);
}
else
{
o.style.display = 'none';
}
}
</script>
</head>
<body onload="init();">
<h1>h4kr.com</h1><div id="errormsg" style="display:none">Error!</div><div id="copyclipboardsuccess" style="display:none">Copied to clipboard!</div><form id="form_cid" method="POST" target="output"><h2>Input</h2><textarea id="input_list" name="input_list"></textarea><br/><button type="submit" value="go">Go</button></form> <h2>Output</h2>
<iframe src="about:blank" name="output" id="output"></iframe>
<div id="d_clip_container" style="position:relative">
<button id="d_clip_button">Copy to clipboard</button>
</div>
<div id="clipboardcontent"></div>
</body>

Categories

Resources