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;
}
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 would like to add a tooltip inside a split screen. I have try many combination like this one, but all of them failed. My tooltip is always hidden behind the second "screen"
Here is my code so far
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow-y: auto;
overflow-x: scroll;
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
If you need to have scrolling inside the left column, your best bet is to find a way to have the tooltip exist outside the the element - not as a child, but as a sibling.
<body>
<tooltip></tooltip>
<left-column></left-column>
<right-column></right-column>
</body>
Change a-leftcolumn overflow to visible; The tooltip is hidden because of the overflow rules you set. Overflow generally hides stuff inside of the element unless you set it to visible, which is also the default btw so you can probably remove this rule entirely.
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow: visible; /* Change overflow to VISIBLE */
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
I want to change the position of my tooltip to cover the textfield to the left of the question mark.
In my code I have four question marks. To the left of the question marks there are four textfields. once the user hovers over a question mark, a tooltip should be placed over the text field.
How do I do this?
My code for the form >>
<h1>Your Name and Address</h1>
<form action="/">
<div class="nameDiv">
Name: <input type="textbox" name="firstname" title="name" id="name" required>
<div class="dotOne"> ?
<span class="nameHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="addressDiv">
Address: <input type="text" name="lastname" id="address">
<div class="dotTwo">?
<span class="addressHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="emailDiv">
Email:
<input type="text" name="Email" id="email">
<span class="dotThree">?
<span class="emailHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" id="number">
<span class="dotFour">?
<span class="numberHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
</form>
If you are looking for something like this, this would help. The tooltip you asked is positioned to the top of the text field. The tooltip color might be not good, but Hope it helps you.
#Name {background-color: grey;}
#Address {background-color: grey;}
* {box-sizing: border-box}
#save-btnOne{
cursor: pointer;
margin-top: 10px;
background-color: green;
color: white;
font-weight: bold;
height: 25px;
width: 80px;
}
.asterisk::after{
content: '*';
color: #EF5F5F;
float: right;
}
#save-btnTwo{
cursor: pointer;
margin-top: 10px;
background-color: green;
color: white;
font-weight: bold;
height: 25px;
width: 80px;
}
/* Set height of body and the document to 100% */
#container {
width: 400px;
height: 420px;
margin: 0;
font-family: Arial;
display: none;
position:absolute;
top:20px;
left: 400px;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Style tab links */
.tablink {
background-color: white;
color: black;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 200px;
}
.tablink:hover {
background-color: white;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
.nameHelp{
position: relative;
display: inline-block;
left: 25px;
}
.dotOne .nameHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotOne .nameHelp::after {
position: absolute;
}
.dotOne:hover .nameHelp {
visibility: visible;
}
.addressHelp{
position: relative;
display: inline-block;
left: -200px;
top:-80px;
}
.dotTwo .addressHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotTwo .addressHelp::after {
position: absolute;
}
.dotTwo:hover .addressHelp {
visibility: visible;
}
.emailHelp{
position: relative;
display: inline-block;
border: 1px black;
left: -200px;
top:-80px;
}
.dotThree .emailHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: relative;
display: inline-block;
}
.dotThree .emailHelp::after {
position: absolute;
}
.dotThree:hover .emailHelp {
visibility: visible;
}
.numberHelp{
position: relative;
display: inline-block;
left: 25px;
}
.dotFour .numberHelp {
visibility: hidden;
color: black;
z-index: 4;
transition: opacity 0.3s;
left: -200px;
top:-80px;
position: absolute;
display: inline-block;
}
.dotFour .numberHelp::after {
position: absolute;
}
.dotFour:hover .numberHelp {
visibility: visible;
}
.tooltip:after{
content:"";
width:10px;
height:10px;
position:absolute;
background-color:red;
left:50%;
transform:rotate(45deg);
top:60px;
}
.tooltip{
position:absolute;
width:150px;
color:white;
background-color:red;
border-radius:10px;
top:0px;
z-index:2;
}
.btn{
background-color: red;
color: white;
font-weight: bold;
height: 25px;
cursor: pointer;
}
#name{
width: 200px;
position: absolute;
left: 120px;
}
#NameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#NameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LastNameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#address{
width: 200px;
position: absolute;
left: 120px;
}
#email{
width: 200px;
position: absolute;
left: 120px;
}
#number{
width: 200px;
position: absolute;
left: 120px;
}
#TitleTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LastNameTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#AddressTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#EmailTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#NumberTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LineOneTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#LineTwoTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#SuburbTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#StateTransfer{
width: 200px;
position: absolute;
left: 150px;
}
#CountryTransfer{
width: 200px;
position: absolute;
left: 150px;
}
.name{
width: 200px;
position: absolute;
left: 150px;
}
.address{
width: 200px;
position: absolute;
left: 150px;
}
.LineOne{
width: 200px;
position: absolute;
left: 150px;
}
.email{
width: 200px;
position: absolute;
left: 150px;
}
.number{
width: 200px;
position: absolute;
left: 150px;
}
.LineDiv
{
padding-top: 5px;
padding-bottom: 5px;
}
.nameDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.nameDivOne{
padding-top: 5px;
padding-bottom: 5px;
}
.addressDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.emailDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.numberDiv{
padding-top: 5px;
padding-bottom: 5px;
}
.dotOne {
border-bottom: 1px dotted black;
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotTwo{
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotThree {
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
.dotFour {
text-align: center;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
color: white;
font-weight: bold;
position: absolute;
left: 355px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Your Name and Address</h1>
<form action="/">
<div class="nameDiv">
Name: <input type="textbox" name="firstname" title="name" id="name" required>
<div class="dotOne"> ?
<span class="tooltip nameHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="addressDiv">
Address: <input type="text" name="lastname" id="address">
<div class="dotTwo">?
<span class="tooltip addressHelp"> This is the correctly formatted name of the user entering the details </span>
</div>
</div>
<br>
<div class="emailDiv">
Email:
<input type="text" name="Email" id="email">
<span class="dotThree">?
<span class="tooltip emailHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" id="number">
<span class="dotFour">?
<span class="tooltip numberHelp"> This is the correctly formatted name of the user entering the details </span>
</span>
</div>
<br>
</form>
</body>
</html>
I have tried the below CSS changes.
The right: 105%; helps to align the tooltip to the left.
And the width: 250px; in the .numberHelp can be changed to fit over the textbox with a background-color recommended.
.numberHelp {
position: relative;
display: inline-block;
border: 1px black;
width: 250px;
}
.dotFour .numberHelp {
visibility: hidden;
color: black;
transition: opacity 0.3s;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
The full code is here - JS Fiddle
Similar changes can be made to other CSS attributes for other divs as well.
What you're asking is a bit difficult, since you want the tooltip to be exactly positioned over a text field. Either can vary in size depending on content, and position depending on the sizes of the screen or window. Not to mention styling choices and their effects.
I would suggest you instead use the placeholder attribute for the input tag:
<input type="textbox" name="firstname" title="name" id="name"
placeholder="User's name in correct format"
required>
Also, consider changing the content of the tooltip as it is a little large. A better tooltip is one that explains what the correct format for the name is, for example.
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
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.