How can I add placeholder text when the editor is empty?
It should go away as soon as typing starts.
You can add a listener for the input event and add a div with text when needed like this:
var editor = ace.edit("editor", {
theme: "ace/theme/chaos"
})
function update() {
var shouldShow = !editor.session.getValue().length;
var node = editor.renderer.emptyMessageNode;
if (!shouldShow && node) {
editor.renderer.scroller.removeChild(editor.renderer.emptyMessageNode);
editor.renderer.emptyMessageNode = null;
} else if (shouldShow && !node) {
node = editor.renderer.emptyMessageNode = document.createElement("div");
node.textContent = "placeholder"
node.className = "ace_emptyMessage"
node.style.padding = "0 9px"
node.style.position = "absolute"
node.style.zIndex = 9
node.style.opacity = 0.5
editor.renderer.scroller.appendChild(node);
}
}
editor.on("input", update);
setTimeout(update, 100);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<style>
#editor { position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
</style>
</head>
<body>
<div id="editor"></div>
</body>
</html>
You can use placeholder: "Your Placeholder Text" option to put placeholder in your Ace Editor.
var editor = ace.edit("editor");
editor.setOptions({
mode: "ace/mode/css",
theme: "ace/theme/cobalt",
placeholder: "Enter CSS Code",
})
#editor {
position: relative;
min-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/theme-cobalt.min.js"></script>
<div id="editor"></div>
Related
Is there a simple way to create pdfs with multiple pages per sheet using PuppeteerSharp (as per the option available when you print a pdf from Chrome) e.g. 1 / 2 / 4 / 6 / 9 / 16 pages per sheet?
There is a trick that I created where the viewport is set to a certain width and height, and then the container div of the page is set to the "contained" height after trial and error.
pdf generation function
public async Task<byte[]> GeneratePDF(string html)
{
var browser = await GetBrowserAsync();
var page = await browser.NewPageAsync();
// Here, we sit the viewport height to match a div height in html
await page.SetViewportAsync(new ViewPortOptions{Width = 720, Height = 1280 });
await page.SetContentAsync(html);
var data = await page.PdfDataAsync(new PdfOptions
{
PrintBackground = true,
Format = PaperFormat.A4,
DisplayHeaderFooter = false,
MarginOptions = new MarginOptions
{
Top = "60px",
Right = "40px",
Bottom = "60px",
Left = "40px"
}
});
return data;
}
private async Task<IBrowser> GetBrowserAsync()
{
var browserOptions = new BrowserFetcherOptions{ Path = AppContext.BaseDirectory };
using var browserFetcher = new BrowserFetcher(browserOptions);
await browserFetcher.DownloadAsync(BrowserFetcher.DefaultChromiumRevision);
string[] args = {"--no-sandbox"};
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = true,
Args = args
});
return browser;
}
Razor page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test Page</title>
<style>
:root {
--primary-color: #ffffff;
--accent-color: #f2f2f2;
--secondary-color: #5f7cb3;
--text-color: #000;
}
body {
font-family: Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
color: var(--secondary-color);
}
.page-height {
min-height: 870px; /*trial and error*/
height: 870px;
max-height: 870px;
padding: 30px 0;
}
</style>
</head>
<body>
<div class="page-height" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="data:image/png;base64,BASE64_HERE" alt="logo.png" style="width: auto; height: 80px; padding: 20px 0;"/>
<h2 style="color: var(--text-color);">Title Here/h2>
<h3>Subtitle Here</h3>
</div>
<div class="page-height">
<p>Content of the first page.</p>
</div>
<div class="page-height">
<p>Content of the second page. Etc...</p>
</div>
</body>
</html>
This should do the trick.
I have to load Libre Barcode 128 font family in to fabric canvas. But Barcode doesn't view on canvas. How to set Libre Barcode 128 font family in fabric js canvas?
var text;
var canvas;
document.addEventListener("DOMContentLoaded", function() {
canvas = new fabric.Canvas('c');
setTimeout(function() {
text = new fabric.Text("Text", {
fontSize: 70,
left: 100,
top: 0,
fill: '#sew3435'
});
canvas.add(text).setActiveObject(text);
canvas.getActiveObject().set("fontFamily", 'Libre Barcode 128');
canvas.renderAll();
}, 1000)
});
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<script src="html2canvas.js"></script>
<style>
.ss {
font-family: 'Libre Barcode 39 Text';
font-size: 48px;
}
</style>
</head>
<body>
<div class="ss">Making the Web Beautiful!</div>
<canvas id="c" width=500 height=250></canvas>
</body>
</html>
The actual font is a 3-of-9 font, not 128 (though they are treated the same way) and the name should be (as defined in the CSS):
.set("fontFamily", "'Libre Barcode 39 Text'");
You might have to "preuse" the font on an DOM element before it will be picked up by the canvas.
Update: seems as FabricJS uses incoming string as-is so the inner quotes must be added also there due to the spaces in the font family name (included here for completeness).
Fiddle example
var text;
var canvas;
document.addEventListener("DOMContentLoaded", function() {
canvas = new fabric.Canvas('c');
setTimeout(function() {
text = new fabric.Text("Text", {
fontSize: 70,
left: 100,
top: 0,
fill: '#f00'
});
canvas.add(text).setActiveObject(text);
canvas.getActiveObject().set("fontFamily", "'Libre Barcode 39 Text'");
canvas.renderAll();
}, 500)
});
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text"
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
</head>
<body>
<canvas id="c" width=500 height=250></canvas>
</body>
</html>
We have to set font family name with in single quotes like " 'Libre Barcode 39 Text' ", Finally it works for me.
I have created a historical bar chart using nvd3 js. I want to get the value of corresponding x-axis label when a bar is clicked. How to get value of corresponding x-axis label on click event of rectangular bars in nvd3.js historical chart?
My current code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body class='with-3d-shadow with-transitions'>
<svg id="test1"></svg>
<script>
var chart;
nv.addGraph(function() {
chart = nv.models.historicalBarChart();
chart
.margin({left: 100, bottom: 100})
.useInteractiveGuideline(true)
.duration(250)
;
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'));
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#test1')
.datum(sinData())
.transition()
.call(chart);
var rectArray=d3.select('g.nv-bars').selectAll('rect').on('click',function(d,i){alert(d+i)});
nv.utils.windowResize(chart.update);
return chart;
});
//Simple test data generators
function sinAndCos() {
var sin = [],
cos = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i*2, y: Math.sin(i/10)});
cos.push({x: i, y: .5 * Math.cos(i/10)});
}
return [
{values: sin, key: "Sine Wave", color: "#ff7f0e"},
{values: cos, key: "Cosine Wave", color: "#2ca02c"}
];
}
function sinData() {
var sin = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10) * Math.random() * 100});
}
return [{
values: sin,
key: "Sine Wave",
color: "#ff7f0e"
}];
}
</script>
</body>
</html>
The documentation says the default value of observeChanges is false. But it seems to be setting the value to true. Is the default value applicable only when the sort plugin is disabled?
We are the noticing the rendering is invoked multiple times due to this and are wondering if it can be set to false explicitly.
Here is the jsfiddle:
$(document).ready(function() {
var container = document.getElementById('basic_example');
var data = function() {
return Handsontable.helper.createSpreadsheetData(10, 10);
};
var hot = new Handsontable(container, {
data: data(),
colHeaders: true,
rowHeaders: true,
stretchH: 'all',
columnSorting: true,
contextMenu: true
});
if (container.clientHeight < 500) {
container.height = container.clientHeight;
hot.updateSettings({
height: container.clientHeigh
});
hot.render();
}
setTimeout(function() {
var output = document.getElementById('output').innerHTML = hot.getSettings().observeChanges;
}, 1000);
});
</style> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="http://handsontable.com//styles/main.css" rel="stylesheet"> <link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet"> <script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.js"></script> <style type="text/css"> body {
background: white;
margin: 20px;
}
h2 {
margin: 20px 0;
}
div#basic_example {
border: 5px solid #ccc;
}
<span>Default value for observe changes</span>
<div id="basic_example"></div>
<span id="output">Output</span>
Click here for jsfiddle: http://jsfiddle.net/mpusarla/nva6b8e8/1/
Below is my code. All JS files are loading properly and no JS error but Google Map is not getting displayed in browser. I checked on all browser but nothing worked for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%#page
language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%
String contextPath = request.getContextPath();
%>
<html>
<head>
<title>home</title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="<%=contextPath%>/script/jquery.ui.map.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#map_canvas').gmap().bind('init', function (ev, map) {
$('#map_canvas').gmap('addMarker', { 'position': '57.7973333,12.0502107', 'bounds': true }).click(function () {
$('#map_canvas').gmap('openInfoWindow', { 'content': 'Hello World!' }, this);
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<form:form method="post" id="searchTweetForm" action="home.do">
<div id="map_canvas"/>
</form:form>
</body>
</html>
Your css is incorrect, the map doesn't have a size. The map is :
<div id="map_canvas"/>
Change:
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
To:
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
width : 100%;
}
</style>
(or change the div to match that used in the css).
working example