Code editor response window - javascript

I am working on a site that is an online code editor. Users can load a page where they can type HTML code, which is then displayed (as web format) in a small frame that represents the compiled webpage.
The frame that the HTML is rendered in looks like this:
#responseWindow {
width: 100%;
height: 200px;
background-color: white;
margin-top: 30px;
margin-bottom: 30px;
overflow: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 10px;
}
The Javascript which transfers the code from the editor to the responseWindow looks like this:
editor.getSession().on('change', function() {
document.getElementById('responseWindow').innerHTML = editor.getValue();
});
Usually everything typed stays within that frame, but if the user gives a div fixed positioning, then the text does not stay within the frame and appears somewhere else on the page. For example:
<p style="top: 100px; right: 10px;">Hello world</p>
Then the text Hello World is not in the frame. My question is how can I make some type of independent space for the code to render in? How can I make my users code render in a box/frame so they can preview what it looks like?

Set #responseWindow to position: relative
Positioned elements are relative to their closest positioned ancestor. Right now your #responseWindow's position is static, which is not considered to be "positioned".

Related

Showing a document to write text on with javascript

I am attempting to design a very basic word processor. I want to have a "page" shown in the background (like you might see on Google Docs, or MS Word) that your text is written on.
How do I draw this page? Should it be an SVG? A stylized DIV? A big canvas? I am very new to designing using the DOM, so any help is appreciated.
Take a look at the contenteditable property here. This actually allows some elements content to be edited by the end user. For example, if I have
<div contenteditable="true">Hello!</div>
I can actually edit the text and change it as it fits my needs, right from the browser. This will come in handy when you try to implement features like bold or italic text, and a div element is also much easier to generally style than a huge textarea or input field.
As a notice, also don't forget about XSS.
You may be interested in the getting the page-like appearance at Google Docs. If so, then check out this really nice tutorial on building a collaborative text editor with Javascript. It's well written and introduces concepts gradually and even has a GitHub repo.
I streamlined the example into a single file HTML file that you can play with. This example also uses the contenteditable property mentioned in Armen's answer. By the way, the page-like effect is achieved via CSS which I've included within the HTML file using the <style> tag.
<html><head><style>
body { font-size: 14px; line-height: 20px; background: #e8e8e8; }
.ribbon { height: 200px; background: #3F51B5; }
.editor { width: 60%; padding: 40px 28px; min-height: 300px;
background: #fff; margin: 0 auto; position: relative;
top: -150px; font-size: 24px; }
</style>
<body>
<div class="ribbon"></div>
<div id="doc" class="editor" contenteditable="true"></div>
<script>document.getElementById('doc').focus();</script>
</head></body></html>
You can use a textarea element and set a specific height and width.
const bold = document.getElementById('bold');
const text = document.getElementById('text');
bold.addEventListener('click', () => {
if (text.style.fontWeight != 'bolder') {
text.style.fontWeight = 'bolder';
}
else {
text.style.fontWeight = 'normal';
}
});
textarea {
height: 500px;
width: 300px;
}
<button id="bold">bold</button>
<br>
<textarea id="text" placeholder="write text here!"></textarea>

Why does the on mouse in even gets triggered when the mouse is not in the button?

I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.
The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:
The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.

Fixed divs under the bootstrap fixed nav

I'd like to attach some fixed alerts underneath the navbar-fixed navigation bar in bootstrap. My best attempt to this point is to make a div positioned at 50px with position: fixed; and width: 100%, and to insert the alerts in this div. The problem is that this cuts off the top of my other content the same way that navbar-fixed cuts off content when one fails apply padding to the body element.
#Alerts
{
position: fixed;
width: 100%;
top: 50px;
}
.alert
{
top: 0px;
//position: fixed;
padding-left: 15px;
padding-right: 15px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 0px;
border-radius: 0px;
}
body {
padding-top: 50px; // to avoid 'underlapping' the navbar
}
Here's a link to a not-working example: http://www.bootply.com/pnEHtLhUBi
My best idea at the moment is to use JS to adjust the padding-top value on body as alerts are created/destroyed, but this is likely bad for maintenance/readability and I'd prefer to do something more declarative with css.
Any suggestions?
Looks like there won't be a way to do this without js.
Since if the alert is dynamic, meaning it only appears when its triggers via the alert method
$('#alert-danger').show('slow', function(){
$('body').addClass('moreMargin')
});
you can also remove the moreMargin class from the body when you hide the alert
What about putting it inside the same div as the nav. When they popup they will push down the other content?
Also, since these are alerts, won't the user already have seen the content that is being covered? If they want to see it again they can just close the alerts. Maybe I just misunderstood what you are going for?

Need to position html5 canvas within css div at bottom right

I am attempting to add a clock that uses HTML5 canvas to a div. The canvas tag has an ID so I have tried to apply the CSS tags position, bottom, right to the id. I can't seem to get the contents of the canvas tag to show up in the lower right corner of the parent DIV.
HTML
<div id="Header">
<canvas id="clock"></canvas>
</div>
CSS
#Header {
background-image: url(images/building.png);
background-color: #FFFFFF;
width: 780px;
height: 399px;
margin: 0;
padding: 0px 0 0 0;
position: relative;
}
#clock {
width: 780px;
height: 399px;
bottom: 1px;
right: 1px;
position: absolute;
}
I have tried all sorts of variations but no luck.
I have also tried removing all the properties for the id=clock and instead enclosing the canvas tag with a parent tag and applying the same properties. No luck.
When I create a div tag with the same CSS properties and remove the canvas tag and replace with just text, the text show up in the bottom right hand corner of the parent div as desired.
So, it seems something in the js code that's feeding the canvas tag is what's causing the positioning issue. Not sure.
Been at this for way too many hours banging my head on the keyboard, searching Google, trial and error etc.
Any help would be most appreciated.
If you need a look at the JS code that's generating the contents of the canvas tag, please let me know. I did not want to include it right off unless it's needed because I didn't want to clutter up the post any further.
Thanks!
Use text-align and padding-top. For example:
#Header {
border: 3px dotted red;
text-align: right;
padding-top: 200px;
}
#clock {
border: 1px solid black
}
<div id="Header">
<canvas id="clock"></canvas>
</div>

How to Implement Resizing in CSS / DOM

Context
On OSX, I notice that if I take my mouse cursor and drag it to the border (bottom, left, or right), the cursor changes to from regular pointer to resize cursor (<->) when:
I am inside the window, but within 4-5 pixels of the border
I am outside of the window, but within 4-5 pixels of the border
Question
Now, I note that in CSS/DOM, I have the "on mouse over" event -- how would I implement something like this in CSS / DOM / JavaScript?
Would the correct approach be:
create some type of "invisible border" that is not shown, and also not contribute to the window size?
do some type of complicated manual mouse tracking to know when I'm close to the border (since I also need to handle when the mouse cursor is outside of the border)
does CSS have some type of "mouse near border" rather than "on mouse over" event?
Thanks!
This is an approach I refined from one originally posted by undefined (another user) which was subsequently deleted for some reason. By no means should this be interpreted as a final approach, but it shows how you could create a bounding box with left/right/top/bottom handles, all added by CSS.
HTML
<div id='container' class='boundary top-bottom'>
<div class='boundary left-right'>
<div class='contents'></div>
</div>
</div>
CSS
#container {
width: 300px;
height: 300px;
margin: 50px;
}
.contents {
cursor: default;
background: green;
width: 100%;
height: 100%;
}
.boundary {
background: blue;
padding: 10px;
}
.boundary.top-bottom {
cursor: row-resize;
padding-left: 0;
padding-right: 0;
}
.boundary.left-right {
cursor: col-resize;
padding-bottom: 0;
padding-top: 0;
width: 280px;
height: 300px;
}
http://jsfiddle.net/userdude/V5h5F/1/
Handling something like needing a border and invisible overlaps would require some retooling, probably using something like Javascript and the internal boundary being the border; the complexity of doing that in pure CSS is problematic I think (undefined's answer handled this with positioned elements on the boundaries).

Categories