I use JavaScript to dynamically create a line. Then I do not know how to place two balls on the 1/3 of length to the beginning and 1/3 of length to the end. Please see the picture below. I want two balls showing up when I press enter in the input box. I tried to use append but clearly this did not work. The code below is the html, css, js code. Hope someone could help me out. Thank you in advance.
html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">
</div>
<div id = "user">
<input type="text" id="input"><br><br>
</div>
</body>
</html>
css:
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
display: block;
margin-right: 20px;
}
#output {
width: 300px;
height: 200px;
position:absolute;
float:left;
}
.line {
width: 125px;
height: 80px;
float:left;
margin-right: 20px;
}
#user {
position:relative;
z-index:99;
top:50px;
}
#ball{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
js:
$(document).ready(function() {
make();
$("#input").keyup(function(event){
if(event.keyCode == 13){
//$('#hr1').css("border-bottom-color", "red");
/*how to put the ball on the line*/
}
});
});
function make() {
var one = document.createElement('div');
one.className = "line";
var hr = document.createElement('hr');
hr.className = "deco";
hr.id = "hr" + 1;
one.append(hr);
$('#output').append(one);
}
Just modified your code as per requirement.
No need of div with class line.
If you want balls to be appended from js, you can include them in js.
I Hope this helps you.
$(document).ready(function() {
make();
$("#input").keyup(function(event){
if(event.keyCode == 13){
$('#hr1').css("border-bottom-color", "red");
$('.ball').css("display", "inline-block");
}
});
});
function make() {
var hr = document.createElement('hr');
hr.className = "deco";
hr.id = "hr" + 1;
$('#output').prepend(hr);
}
.deco {
border-bottom: 1px solid black;
width: 100%;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
display: block;
margin-right: 20px;
}
#output {
position: relative;
width: 125px;
}
#user {
position:relative;
z-index:99;
top:50px;
}
.ball{
display: none;
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
position: absolute;
top: -5px;
z-index: 100;
}
.first-ball {
left: calc(33.3% - 10px);
}
.second-ball {
right: calc(33.3% - 10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id = "output">
<div class="ball first-ball"></div>
<div class="ball second-ball"></div>
</div>
<div id = "user">
<input type="text" id="input"><br><br>
</div>
Related
Code is very basic as I'm only a beginner. Can't understand what I'm to do within my function to preform this.Not sure if I need to use a loop to preform this or can I can do this with just the onclick and a function to pass the parameter to? Not sure if the array is needed or not? Thought I'd have to have some sort of an index to refer to for the function to know which shape the circle is to change to
<html lang="en">
<head>
<script>
function changeShape(){
array for the shapes
var shapes = new Array;
shapes["circle"] = "circle";
shapes["square"] = "square";
shapes["triangle"] = "triangle";
shapes["parall"] = "parall";
shapes["trap"] = "trap";
document.getElementById("shape1").className=="circle";
}
}
</script>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="shape1" class = "circle" onclick="changeShape('shape1')"></div>
<br>
<div id="shape2" class="square" onclick="changeShape('shape2')"></div>
<br>
<div id="shape3" class="oval" onclick="changeShape('shape3')"></div>
<br>
<div id="shape4" class="rectangle" onclick="changeShape('shape4')"></div>
<br>
<div id="shape5" class="triangle" onclick="changeShape('shape5')"></div>
<br>
<div id="shape6" class="parall" onclick="changeShape('shape6')"></div>
<br>
<div id="shape7" class="trap" onclick="changeShape('shape7')"></div>
<br>
</body>
<style>
*{
padding:0;
margin: 0;
box-sizing: border-box;
}
.circle{
width:200px;
height: 200px;
border-radius: 50%;
background: red;
}
.square{
width:200px;
height: 200px;
background: orange;
}
.oval{
padding: 5%;
width:300px;
height: 100px;
border-radius: 45%;
background: yellow;
}
.rectangle{
width:350px;
height: 150px;
background: green;
}
.triangle{
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
.parall {
width: 100px;
height: 50px;
transform: skew(20deg);
background: #555;
}
.trap {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
</style>
</html>```
Use this changeShape function instead:
function changeShape(shape){
var shapes={"shape1":"circle","shape2":"sqare","shape3":"oval","shape4":"rectangle","shape5":"triangle","shape6":"parall","shape7":"trap"};
var element=document.getElementById(shape);
if (element.className=="circle"){
element.className=shapes[shape];
}
else{
element.className="circle";
}
}
I have a problem creating a small dialogue box to show when I've clicked the picture. Now my popup content just shows below the picture. Below is my coding:
function showpopup() {
document.getElementById("popupwindow").classList.toggle("hidden");
}
<style>
.hidden {display:none}
</style>
<span class="profile"><img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" style="margin-top: 30px;" onclick="showpopup()"></img></span>
<div id="popupwindow" class="hidden">
<p style="color:black;">LMS short explanation</p>
</div>
Actually, I want the result like below the picture, the popup content can show in the small dialog box.
Hope someone can guide me on how to solve it. Thanks.
Refer this:
function showpopup() {
let tooltip = document.getElementById("tooltiptext");
let visible = tooltip.style.display;
if (visible == "none") {
document.getElementById("tooltiptext").style.display = "block";
} else {
document.getElementById("tooltiptext").style.display = "none";
}
}
img {
cursor: pointer;
margin-top: 30px;
}
.tooltip {
display: block;
background: black;
border-radius: 5px;
max-width: 300px;
width: 300px;
position: absolute;
padding: 12px 18px;
font-family: open-sans-regular, sans-serif;
font-size: 14px;
color: white;
line-height: 22px;
box-sizing: border-box;
z-index: 1000;
outline: none;
}
.tooltip.bottom .arrow {
top: 0;
left: 50%;
border-top: none;
border-bottom: 10px solid black;
}
.tooltip .arrow {
width: 0;
height: 0;
position: absolute;
left: 50%;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #43b02a;
margin-top: -10px;
margin-left: -10px;
}
<img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" onclick="showpopup()"></img>
<div id="tooltiptext" class="bottom tooltip" style="display: none;">
<div class="arrow">
</div>
LMS short explanation
</div>
You need to define the css for pop-ups.
position, top, left, z-index, background color, width, height and so on.
you can follow this link
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip.tooltiptext {
visibility: visible;
}
.hidden{
display: none;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip" onClick="showpopup()">Hover over me
<span id="popupwindow" class="tooltiptext">Tooltip text</span>
</div>
<script>
function showpopup() {
document.getElementById("popupwindow").classList.toggle("hidden");
}
</script>
</body>
</html>
function showpopup() {
let popup = document.getElementById("popupwindow");
let display = popup.style.display;
if (display == "none") {
popup.style.display = "inline-block";
} else {
popup.style.display = "none";
}
}
<style>
#popupwindow {
position: relative;
display: none;
width: 200px;
z-index: 99;
top: -90px;
left: -150px;
border: 3px solid red;
}
.profile {
display: inline-block;
border: 5px solid red;
}
</style>
<div>
<span class="profile"><img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" style="margin-top: 30px;" onclick="showpopup()"></img></span>
<div id="popupwindow" class="hidden">
<p style="color:black;">LMS short explanation</p>
</div>
</div>
I'm having trouble with the snippets editor so i can't post it properly.
but , here is the codepen regarding your code.
you must enclose all html in a div and the change the postion relative to it.
for the popup , you have to style it with borders,margin,background,etc.
If anyone can correct it then please make the snippet above working.
I want to create divs that stand side by side with and each one fill 25% of the screen in height and width. My script creates divs with 25% height and width, but they stay one below the other. My script is:
function createDiv() {
var div_created = document.createElement("div");
div_created.setAttribute("class", "div1");
document.body.appendChild(div_created);
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="estilo_segundo.css">
<body>
<button onclick="createDiv()">Click</button>
</body>
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float:left;
}
Add html,body style & inside div1 add float:left;
html,body
{
width: 100%;
height: 100%;
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float:left;
}
Live Demo Here
Snippet Example
function createDiv() {
var div_created = document.createElement("div");
div_created.setAttribute("class", "div1");
document.body.append(div_created);
}
html,
body {
width: 100%;
height: 100%;
}
.div1 {
width: 50%;
height: 50%;
background-color: #000000;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button onclick="createDiv()">Click</button>
</body>
You could use the display: table; in a wrapper div and simplify your JS:
<html><head>
<script type="text/javascript">
function createDiv() {
document.getElementById('div1').innerHTML += '<div></div>';
}
</script>
<style type="text/css">
#div1 {
width: 100%;
height: 100%;
display: table;
background-color: #000000;
}
#div1 div {
display: table-cell;
border: 1px solid green; /* green for display */
}
</style>
</head><body>
<button onclick="createDiv()">Click</button>
<div id="div1" name="div1"></div>
</body></html>
This adds an inner 'cell' to the div1 wrapper div. Since the wrapper takes up the display height/width, each inner div has an 'auto' width to it (as a table <td> would).
I'm trying to make a simple blog like site for practice with a menu on the side that can be hidden or shown. I'm trying to make this happen with native Javascript in an external Javascript file. My problem is that my events are being triggered as soon as the site is loaded, or they aren't triggered at all. I'm sure I've made some beginners mistake. Here's my code:
Javascript:
var shower = document.getElementById('showmenu');
var hider = document.getElementById('site');
function hideshow() {
shower.onclick = function() {
document.getElementById('site').style.width="84%";
document.getElementById('menu').style.display="block";
document.getElementById('showmenu').style.display="none";
}
hider.onclick = function() {
document.getElementById('menu').style.display="none";
document.getElementById('site').style.width="100%";
document.getElementById('showmenu').style.display="block";
}
}
window.onload = function() {
hideshow();
}
HTML:
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title> Javascript Menu Test 2.0</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="menu">
<aside>
<ul>
<li><input type="text"></li>
<li>Vel Purus</li>
<li>Dolor Sit</li>
<li>Lorem Ipsum</li>
</ul>
</aside>
</div>
<div id="site">
<div id="bannerImage">
<input type="button" value="M" id="showmenu">
<img src="banner.jpg">
</div>
<div id="article">
<h1> Header</h1>
<!--text goes here-->
</div>
</div>
</div>
</div>
<script type="text/javascript" src="menuhider.js"></script>
</body>
</html>
CSS:
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
#wrapper {
height: 100%;
height: 100%;
}
#menu {
display: none;
position: fixed;
height: 100%;
width: 16%;
background-color: #131313;
float: left;
color: white;
font-family: 'arial', sans-serif;
}
#menu li {
margin-top: 8%;
margin-left: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
#menu li:hover {
cursor: pointer;
background-color: #424242;
}
#menu input {
border: none;
outline: none;
}
#site {
height: 100%;
width: 100%;
background-color: white;
float: right;
}
#site img {
position: relative;
z-index: 0;
width: 100%;
height: 10%;
}
#showmenu {
position: absolute;
position: fixed;
z-index: 1;
border: none;
width: 5%;
height: 5%;
margin-left: 1%;
background-color: #131313;
color: white;
outline: none;
}
#showmenu:hover {
cursor: pointer;
background-color: #424242;
}
#text {
width: 85%;
margin-left: 5%;
font-size: 1.2em;
}
There is no reason to use window.onload when the scrpt is included at the bottom. Remove that and just include the functions.
Another problem is you have two click events nested.
So they both are going to be triggered. You need to cancel the inner click so it does not propagate to the parent.
(function(){
var shower = document.getElementById('showmenu');
var hider = document.getElementById('site');
hider.onclick = function() {
document.getElementById('menu').style.display="none";
document.getElementById('site').style.width="100%";
document.getElementById('showmenu').style.display="block";
}
shower.onclick = function (e) {
document.getElementById('site').style.width="84%";
document.getElementById('menu').style.display="block";
document.getElementById('showmenu').style.display="none";
if (!e) {
e = window.event;
}
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
return false;
}
})();
This is my HTML and CSS. I have no embedded Javascript. I do however reference a Javascript file. What is the simplest Javascript to just have an X and 'O' appear when I click on a box?
<html>
<head>
<title>First Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="script.js"></script>
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div class="Row1">
<div id="cell1"></div>
<div id="cell2"></div>
<div id="cell3"></div>
</div>
<div class="Row2">
<div id="cell4"></div>
<div id="cell5"></div>
<div id="cell6"></div>
</div>
<div class="Row3">
<div id="cell7"></div>
<div id="cell8"></div>
<div id="cell9"></div>
</div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
</body>
</html>
This is my CSS
h1 {
text-align: center;
}
body {
background-image: url("http://www.staceybess.com/gfx/bg-chalkboard.jpg");
background-size: cover;
}
#chalk {
position: absolute;
z-index: -1;
}
.gameboard {
width: 328px;
height:318px;
z-index: 1;
margin-top: 75px;
}
.wrapper {
width: 330px;
margin:0 auto;
}
.button {
background-color:white;
width: 160px;
margin:0 auto;
}
button {
float: left;
}
.row1, .row2, .row3 {
clear:both;
}
#cell1,#cell2,#cell4,#cell5 {
border-right: 8px solid white;
border-bottom: 8px solid white;
border-style: eraser;
}
#cell3,#cell6{
border-bottom: 8px solid white;
}
#cell7 {
border-right: 8px solid white;
}
#cell9 {
border-left: 8px solid white;
}
#cell1 {
width:100px;
height:100px;
float: left;
}
#cell2 {
width:100px;
height:100px;
float: left;
}
#cell3 {
width:100px;
height:100px;
float: left;
}
#cell4 {
width:100px;
height:100px;
float: left;
}
#cell5 {
width:100px;
height:100px;
float: left;
}
#cell6 {
width:100px;
height:100px;
float: left;
}
#cell7 {
width:100px;
height:100px;
float: left;
}
#cell8 {
width:100px;
height:100px;
float: left;
}
#cell9 {
width:100px;
height:100px;
float: left;
}
First of all, do not use different class for each row if not needed.
Use row and cell everywhere.
Include jquery.js via the link in head.
Then
$(document).ready(function(){
$(".gameboard").find(".cell").click(function(){
console.log("Clicked");
});
});
Ok now it say 'clicked'.
Let's make adding 'X' or 'O'.
$(document).ready(function(){
var tour = 0;
$(".gameboard").find(".cell").click(function(){
if(tour%2==0){
$(this).text("O");
} else {
$(this).text("X");
}
i++;
});
});
Now we must not override previous value.
$(document).ready(function(){
var tour = 0;
$(".gameboard").find(".cell").click(function(){
if($this.text() != ""){ return; }
if(tour%2==0){
$(this).text("O");
} else {
$(this).text("X");
}
i++;
});
});