I have successfully created an Ace editor before, but recently I am making a website called CodeProjects, and I want to put an Ace editor in. Whenever I try, it only shows the text function foo(items) {
var x = "All this is syntax highlighted";
return x;
}. On the page http://ace.c9.io/#nav=embedding&api=ace, it says you only need the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
but when I try to embed it (or even just make the editor, not the site), again, it only shows function foo(items) { var x = "All this is syntax highlighted"; return x; }
Any suggestions?
it also says to copy files into your project. If you don't want to do that, include script from cdn
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"
type="text/javascript" charset="utf-8"></script>
see http://jsbin.com/ojijeb/165/edit
You need to put the content outside of the editor div [or fetch the content on page load using AJAX]. Either way, you then load the content into the editor with JavaScript: editor.setValue("hello world");.
To set the height of the editor, you resize the div it lives in, then call the editor's resize method.
var div = document.getElementById('editor');
div.style.height = some_multiple_of_the_line_height_for_tidiness;
editor.resize();
In my experience, you need to change div to pre. Just using pre instead of div in following way should solve your problem.
<pre id="editor" >
</pre>
Related
I've made a toy example (counter) and I wanted to display the output on an html page.
I found that the javascript code only works when div is "declared" before javascript code.
I thought the order of calling the div doesn't matter.
here is the simple code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random Variable 3</title>
</head>
<body>
<!-- div here (before js code) is working -->
<div id="content2display1"; style="text-align: center; font-size: 80px;"></div>
<script>
let x = 0;
function getRandom1() {
x = x + 1
document.getElementById('content2display1').innerHTML = x; // content2display che viene mandato a html
console.log("x: ", x)
// return rv_i;
};
getRandom1();
setInterval("getRandom1();", 1000);
</script>
<!-- div here is not working... -->
<!-- <div id="content2display1"; style="text-align: center; font-size: 80px;"></div> -->
</body>
</html>
Why the code doesn't work when div is after the javscript code?
If you put your script before the div declaration, the div itself doesn't exist yet in the DOM and your "document.getElementById" returns null.
If you want to put your script before, you should wrap your script body into a DOMContentLoaded listener:
document.addEventListener('DOMContentLoaded', () => {
//your script here
});
Doing so, the script waits for the entire DOM to be loaded before to be executed.
ive looked at other answers and none of them seemed to work which is why i decided to re-ask the question and show you guy my code so you can help me so here it is :
function searchForm() {
var body = document.getElementsByTagName('body')[0]
var search = document.getElementById('GIF-search').value;
var content = document.getElementById('content')
var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=api");
xhr.done(function(data) {
var image = data;
var GIF = image['data'][0]['embed_url'];
var GIF_image = document.createElement('img');
GIF_image.setAttribute('src', GIF);
GIF_image.setAttribue('id', 'GIF');
content.appendChild(GIF_image)
});
}
var searchGIF = document.getElementById('search_GIF')
searchGIF.addEventListener('click', searchForm, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GIF viewer</title>
<style type="text/css">
#content {
width: 100%
}
img {
width: 250px;
height: 250px
}
</style>
</head>
<body>
<div id="Search">
<input type="text" name="" id="GIF-search">
<button id="search_GIF">Search GIFs</button>
</div>
<div id="content"></div>
<script src="jquery-3.2.1.js"></script>
<script src="GIFsearch.js"></script>
</body>
</html>
my problem here is that im getting a blank image on my site can anyone explain why this is happening and how i can fix it so it will actually show the GIF?
btw i know in the $.get("http://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=api"); the apikey in not valid (this is on purpose);
Couple of things:
There was no jQuery in jsfiddle. Make sure you have it in your code.
Make https:// api call if your page is using https:// protocol.
setAttribute when you are setting id has got a typo. Look carefully.
URL you are getting at image['data'][0]['embed_url'] is not a image url but a webpage url. Try console log it and see. So you cant really set it as a src of some img tag. Find the correct image url and then proceed.
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
Hi I'm using this: http://galleria.io/ to create a popup image slider.
Basically I want it to appear fixed over my page only after the user clicks a link to open it (it will not open another page). If I use "display: none" it will load in the background slowing everything down as it will contain HD images.
Right now I am trying this:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<style>
.galleria {
width: 700px;
height: 400px;
background: #000
}
</style>
<script>
</script>
</head>
<body>
Click me to load images
<script>
function showGallery() {
var content = "<div class=\'galleria\'><img data-src=\'photo1.jpg\'><img data-src=\'photo2.jpg\'><img data-src=\'photo3.jpg\'></div>";
var hello = "hello world";
console.log("hi it's working");
$('body').append(hello);
}
$('#imageshow').click(function() {
showGallery();
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
});
</script>
</body>
</html>
This the documentation for Galleria:
http://galleria.io/docs/getting_started/beginners_guide/
I had a real good look at this and even downloaded the galleria.js for it. Coming to the simple conclusion that your code is likely to only miss a document ready statement :
<script>
$(document).ready(function() {
function showGallery() {
var content = "<div class=\'galleria\'><img data-src=\'photo1.jpg\'><img data-src=\'photo2.jpg\'><img data-src=\'photo3.jpg\'></div>";
var hello = "hello world";
console.log("hi it's working");
$('body').append(hello);
}
$('#imageshow').click(function() {
showGallery();
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
});
});
</script>
I'm trying to activate a CSS transition with Javascript through DOM when a div object is clicked. I avoided jQuery and used JS on purpose in order to learn DOM (this is actually my first experiment with it).
I implemented a standard solution: getting the elements' ListNode from the HTML document, then changing the className of the desired object. Yet, it does not seem to work properly
(I'm obviously using Firefox).
Thank you in advance.
Here are the files.
<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>
<body>
<div class = "image" onclick = "foo()"></div>
</body>
</html>
style.css
.transition {
-moz-transition: 2s width;
width: 150px;
height: 100px;
}
.image {
-moz-transition: 2s width;
width: 100px;
height: 100px;
background-color: black;
}
script.js
function foo() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
EDIT: Edited the code in order to make immediately visible the working solution.
You're using getElementsByName, but you don't have an element with a name of image, instead you have an element with a class of image. You probably intended to use document.getElementsByClassName('image'). On a side note, the structure of your html page is incomplete, you need a <head> and <body> section, also your <html> opening tag is in the wrong place.
<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>
<body>
<div class = "image" onclick = "foo()"></div>
</body>
</html>
Try this in your javascript logic:
function foo() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
As Stencil mentioned everything should be inside HTML Tag.Similar kind of width animation could be easily achieved using jQUery
$('.image').animate({width: 250}, 500 );