I can't seem to able to figure this out using javascript, I want to dynamically add an 'ok' button to my custom alertbox but, it seems that when it is called, it does not appear. I am at a lost. I am unsure as to what I am doing wrong:
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
visibility: hidden;
}
#alertBox_container {
background: rgb(212,208,200);
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#alertBox_titlebar {
height: 22px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
font-weight: bold;
}
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top:27px;`
}
#alertBox_div_btn {
position: relative;
height: auto;
text-align: center;
border: none;
margin-top: 7px;
visibility: hidden;
}
#button_ok {
border: 1px solid rgb(88,88,88);
font-family: tahoma;
font-size: 8pt;
height: 22px;
width: 35px;
}
</style>
<script type="text/javascript">
//alertBox('text','ok')
function alertBox(text,x) {
if (x == 'ok') {
document.getElementById('alertBox_div_btn').innerHTML = '<input id="button_ok" type="button" value="OK" onclick="alertBox_hide()">'
}
document.getElementById('alertBox_text').innerHTML = text
document.getElementById('alertBox').style.visibility = 'visible'
}
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
</head>
<body onload="alertBox('this is a test','ok')">
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text">This is some sample text that will appear here</div>
<div id="alertBox_div_btn"></div>
</div>
</div>
</div>
</body>
</html>
Your css, specifically #alertBox_div_btn, is setting the visibility of the div that contains the button to hidden.
Related
I am using Concreate5 version 8.5.4 and PHP version 7.4 on my VPS.
I want to add a pop-up of notice to my users.
When I am adding this code in Global Region > HTML Block
then my site covered with black color and am not able to do anything.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
A simple pop-up!
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
Is there any mistake in this coding, as I am reviewing this code then I am not able to pin point the actual part of code.
Please review this code and help me fix it for fine working.
Thanks
I am making my own custom code editor. I started by modeling it off of this one by TutorialRepulblic:
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-inject-html-into-an-iframe-from-the-textarea
I didn't change the JS that takes the text from the text area and inserts it into an Iframe, I just added CSS and it broke. I have removed the CSS and it workes, but when I add it back it breaks. Can anyone help? I will include a code snippet below so you can see:
function updateIframe() {
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
body {
overflow: hidden;
}
.editor {
resize: none;
position: absolute;
top: 50px;
left: 0px;
width: 44%;
border: none;
background-color: #282c34;
height: 100%;
color: #fff;
font-size: 15px;
padding-left: 10px;
padding-right: 15px;
padding-top: 10px;
}
.run {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 150px;
background-color: #04aa6d;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.run:hover {
background-color: #fff;
color: #616161;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: #616161;
}
.result {
position: absolute;
right: 0px;
top: 0px;
width: 55%;
height: 100%;
border: none;
border-left: 15px solid #282c34;
}
<!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<iframe class="result" id="myframe"> RESULT HERE </iframe>
<textarea id="textarea" class="editor">
</textarea>
<div class="header">
<button class="run" onclick="updateIframe()">Run ⇛</button>
</div>
</body>
</html>
I am not great with jQuery, but I think I can understand how that code that inserts the text into the Iframe works, but I just don't understand how me adding CSS breaks it. Thanks!
the content is adding to the iframe body but the is hidden beneath header div
update the result css
.result {
position: absolute;
right: 0px;
top: 500px;
width: 55%;
height: 100%;
border: none;
color: black;
border-left: 15px solid #282c34;
}
My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>
In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
I am creating a Simon Says game that uses the flashing of colors as a memory game.
I want to overlay 4 circles on each of the four corners of a background square (the square will be transparent in the final version).
I have attached an image LINK TO IMAGE of what I would like it to look like and I've included the HTML and CSS.
.html {
color: grey;
}
#green {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: green;
border-color: black;
/*position: relative;*/
/*float: left;*/
}
#red {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: red;
border-color: black;
}
#yellow {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: gold;
border-color: black;
}
#blue {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: blue;
border-color: black;
}
#square {
width: 400px;
height: 400px;
background-color: purple;
position: relative;
text-align: center;
display: flex;
}
#display {
width: 400px;
height: 400px;
border-radius: 200px;
background-color: black;
position: relative;
text-align: center;
display: flex;
}
#controls {
margin: auto;
position: relative;
text-align: center;
}
#Highscore {
position: relative;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#Currentscore {
position: relative;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#startButton {
position: relative;
width: 60px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#powerLight {
background-color: red;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 5px auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simon Memory Game</title>
</head>
<body>
<div class="game">
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
<div id="square">
<div id="display">
<div id="controls">
<div id="Highscore">00</div>
<button class="button" id="startButton">START</button>
<div id="Currentscore">00</div>
<div id="powerLight"></div>
</div>
</div>
</div>
</div>
</body>
</html>
As has been suggested, you can use absolute positioning in order to achieve what you want.
I have moved the circle divs into the #square div, as to my understanding we want to position the circles within that div.
Then you can use left, right, top and bottom to position them, as I have done in the example below.
.html {
color: grey;
}
.game {
position: relative;
}
#green {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: green;
border-color: black;
position: absolute;
left: 0;
top: 0;
}
#red {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: red;
border-color: black;
position: absolute;
right: 0;
top: 0;
}
#yellow {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: gold;
border-color: black;
position: absolute;
left: 0;
bottom: 0;
}
#blue {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: blue;
border-color: black;
position: absolute;
right: 0;
bottom: 0;
}
#square {
width: 400px;
height: 400px;
background-color: purple;
position: relative;
text-align: center;
display: flex;
}
#display {
width: 400px;
height: 400px;
border-radius: 200px;
background-color: black;
position: relative;
text-align: center;
display: flex;
}
#controls {
margin: auto;
position: relative;
text-align: center;
}
#Highscore {
position: center;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#Currentscore {
position: center;
width: 30px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#startButton {
position: relative;
width: 60px;
height: 20px;
border-radius: 5px;
background-color: lightgrey;
text-align: center;
display: inline-block;
}
#powerLight {
background-color: red;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 5px auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simon Memory Game</title>
<link rel="stylesheet" href="assignment-02.css">
</head>
<body>
<div class="game">
<div id="square">
<div id="display">
<div id="controls">
<div id="Highscore">00</div>
<button class="button" id="startButton">START</button>
<div id="Currentscore">00</div>
<div id="powerLight"></div>
</div>
</div>
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
</div>
</div>
<script src="assignment-02.js"></script>
</body>
</html>
.multilinePhases {
display: flow-root;
}
.entityOverviewphase {
position: relative;
height: 30px;
}
.entityOverviewphaseleve {
/* margin-top: -12px; */
margin-right: 40px;
float: left;
height: 40px;
}
.entityOverviewphaseleveColor {
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 18px;
color: #aaa;
line-height: 22px;
text-align: center;
background: #ddd;
}
.entityOverviewphaseleveColor::after {
border-top: 2px solid #999;
content: "";
width: 40px;
display: block;
position: relative;
top: 10px;
left: 22px;
}
.entityOverviewphaseleve:last-child .entityOverviewphaseleveColor::after {
border-top: 0px solid #999;
content: "";
width: 40px;
height: 20px;
display: block;
position: relative;
top: 10px;
left: 22px;
}
<div class="container" style="padding: 20px;">
<div class="multilinePhases ng-scope">
<div class="entityOverviewphase">
<div class="entityOverviewphaseleve" ng-repeat="">
<div class="entityOverviewphaseleveColor" style="background-color: #b467e7;"></div>
</div>
</div>
</div>
</div>
enter image description here
enter image description here
Here is my HTML and CSS code, Please find the below screenshot for more information, I need code like the below images.
can anyone help me to fix this issue? thanks.