I would like to increase the font size of the paragraph as well as the font size of the number in the button.
I copied and pasted my sizer function from StackOverflow (a few alterations) and thought it would work and still can't get it to work. Can someone help?
Since I've spent so much time on just the first part, as a beginner programmer, I'm wondering what I am missing. Does anyone have any ideas from my code or their experience as to what I might be missing?
Thanks as always.
<html>
<button onclick='incrementer(); sizer()' id='count' value=0 />0</button>
<p id='test'>a</p>
<script>
clicks = 0
incrementer = function () {
clicks += 1
click = document.querySelector("#count").textContent = clicks;
click.innerHTML = document.getElementById("count").value = document.getElementById('test');
}
sizer = function changeFontSize() {
div = document.getElementById("test");
currentFont = div.style.fontSize.replace("pt", "");
div.style.fontSize = parseInt(currentFont) + parseInt(clicks) + "pt";
}
</script>
</html>
Some things here:
I woudn't append two functions to your onclick here. Just append one and call your second function from the first one that gets fired via onclick. That looks a lot more tidy
Don't forget to put var before every variable, without it's not valid JavaScript
I didn't quite understand what you tried with your currentFont variable, so I removed it. It's not necessary and causes the script to not working correctly
<html>
<button onclick='incrementer()' id='count' value=0 />0</button>
<p id='test'>a</p>
<script>
var clicks = 0;
var incrementer = function() {
clicks += 1;
var click = document.querySelector("#count").textContent = clicks;
click.innerHTML = document.getElementById("count").value = document.getElementById('test');
sizer();
}
var sizer = function changeFontSize() {
var div = document.getElementById("test");
div.style.fontSize = parseInt(clicks) + "pt";
}
</script>
</html>
Here's a from-scratch version that does what you're asking for. I'll point out a few things that I did to help you out.
https://codepen.io/anon/pen/VBPpZL?editors=1010
<html>
<body>
<button id="count">0</button>
<p id="test">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>
JS:
window.addEventListener('load', () => {
const button = document.querySelector('#count');
const paragraph = document.querySelector('#test');
const startingFontSize = window.getComputedStyle(document.body, null)
.getPropertyValue('font-size')
.slice(0, 2) * 1;
let clicks = 0;
button.addEventListener('click', () => {
clicks++;
// this is a template literal
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
const fontSize = `${startingFontSize + clicks}px`;
button.innerHTML = clicks;
button.style.fontSize = fontSize;
paragraph.style.fontSize = fontSize;
});
});
The code runs when the page is loaded, so we attach an event listener on the window object listening for the load event.
We then store references to the button and the paragraph elements. These are const variables because their values won't change. This also limits their scope to the containing function.
We get the initial font size for the body element, because in this example we aren't explicitly setting a base font in css so we're just using the one for the document. getComputedStyle is a somewhat expensive operation, and in this case we only need to get it in the beginning because it won't change, so we also store it as a const. The value is returned as a string like "16px" but we need the number, hence the slice and multiplying by one to cast the string into a number. parseInt would also do the same thing.
Notice that clicks is defined with let. This means that the variable can be changed. var still works of course, but in modern practices its best to use const and let when declaring variables. This is partly because it forces you to think about what kind of data you're working with.
We add an event listener to the button element and listen for the click event. First, we increment the clicks variable. Then we declare fontSize using a template literal which adds our new clicks count to the startingFontSize and "px" to get a string.
Finally, the innerHTML value of the button element is updated. Then we update the fontStyle property for both elements.
The issue here is that there is no initial value for the fontSize of your <p> tag so div.style.fontSize returns an empty string.
You can use window.getComputedStyle instead of div.style.fontSize and you will get the current fontSize.
There is already a post explaining this method
https://stackoverflow.com/a/15195345/7190518
You don't have an initial font-size style on your <p> tag, so it div.style.fontSize is always empty. Also, best practice is to always use var when introducing new variables in javascript.
One good trick to help debugging things like these is to use console.log() at various points, and see whats coming out in your browser console. I used console.log(div.style.fontSize) and the answer became clear.
Working below after adding <p style='font-size:12px'>a</p>:
<html>
<button style='font-size:12px;' onclick='incrementer(); sizer()' id='count' value=0 />0</button>
<p id='test' style='font-size:12px;'>a</p>
<script>
var clicks = 0
incrementer = function () {
clicks += 1
click = document.querySelector("#count").textContent = clicks;
click.innerHTML = document.getElementById("count").value = document.getElementById('test');
}
var sizer = function changeFontSize() {
var div = document.getElementById("test");
var btn = document.getElementById("count");
var newSize = parseInt(div.style.fontSize.replace("pt", "")) + parseInt(clicks);
div.style.fontSize = newSize + "pt";
btn.style.fontSize = newSize + "pt";
}
</script>
</html>
I don't understand the logic of this solution, but you can simplify it avoiding to use a lot of var (anyway always prefer let or const if you don't need to change), using a single function and writing less code.
function increment(e){
const ctrl = document.getElementById('test');
let current = parseInt(e.dataset.size);
current += 1;
e.innerHTML = current;
e.dataset.size = current;
ctrl.style.fontSize = current + 'pt';
}
<button onclick="increment(this);" data-size="20">20</button>
<p id='test' style="font-size:20pt;">A</p>
I was trying to build an Oracle Apex 5.1 app with new mobile theme which has a collapsable dynamic content region.
Behind this region there's a pl/sql code that prints out a chart codelet into the HTML body which consists of a "host" div and a JS script block that generates the chart (AnyChart 7.14.4) into it.
Everything works fine on the first page visit but when I press a region button (in an another, static region) which submits the page via dynamic action, the chart's completely gone (although the div stays spanned to its original size).
Do you have any idea what's behind this symptom?
!UPDATE!
This JS function is generated by a page process (Pre-rendering/before regions):
function createChart() {
anychart.theme("darkEarth");
var dataSet = [
["2006.10.17",212.82,22.58,3.10,2.79],
["2006.10.18",212.04,22.57,3.10,2.81],
["2006.10.19",208.46,22.40,3.06,2.78],
["2006.10.20",208.60,22.43,3.06,2.78],
["2006.10.23",210.47,22.56,3.08,2.81],
["2006.10.24",209.18,22.57,3.09,2.80],
["2006.10.25",208.00,22.50,3.08,2.78],
["2006.10.26",205.22,22.35,3.04,2.76],
["2006.10.27",204.89,22.26,3.04,2.76],
["2006.10.30",205.93,22.20,3.05,2.76],
["2006.10.31",204.41,22.00,3.03,2.75],
];
var seriesList = anychart.data.mapAsTable(dataSet);
var chart = anychart.line();
chart.crosshair().enabled(true).yLabel().enabled(false);
chart.crosshair().yStroke(null);
chart.tooltip().positionMode("point");
chart.yAxis().title("%");
var credits = chart.credits();
credits.enabled(false);
chart.animation(true);
chart.title().enabled(false);
chart.xAxis().labels().padding([5]);
var series_1 = chart.line(seriesList[0]);
series_1.name("HUF");
var series_2 = chart.line(seriesList[1]);
series_2.name("CZK");
var series_3 = chart.line(seriesList[2]);
series_3.name("PLN");
var series_4 = chart.line(seriesList[3]);
series_4.name("RON");
for (i = 0; i < chart.getSeriesCount(); i++)
{
chart.getSeriesAt(i).hoverMarkers().enabled(true).type("circle").size(4);
chart.getSeriesAt(i).tooltip().position("right").anchor("left").offsetX(5).offsetY(5);
}
chart.legend().enabled(true).fontSize(13);
chart.container("chartContainer");
chart.draw();
}
This is followed by a static region in position body2 with the following content:
<div id="chartContainer"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
createChart();
});
</script>
We are afraid that this issue goes beyond AnyChart area responsibility. Also, we've never met a similar problem. We would recommend you to forward this query to Oracle tech support.
I did a test page here: https://apex.oracle.com/pls/apex/f?p=145797:18
Login on: https://apex.oracle.com/pls/apex/f?p=4550
workspace: stackquestions
login: test
pwd: test
app: 145797
page: 18
In this page I have a process on "Pre-Rendering" > "Before Regions"
begin
htp.p(
'<script>
function createChart() {
anychart.theme("darkEarth");
var dataSet = [
["2006.10.17",212.82,22.58,3.10,2.79],
["2006.10.18",212.04,22.57,3.10,2.81],
["2006.10.19",208.46,22.40,3.06,2.78],
["2006.10.20",208.60,22.43,3.06,2.78],
["2006.10.23",210.47,22.56,3.08,2.81],
["2006.10.24",209.18,22.57,3.09,2.80],
["2006.10.25",208.00,22.50,3.08,2.78],
["2006.10.26",205.22,22.35,3.04,2.76],
["2006.10.27",204.89,22.26,3.04,2.76],
["2006.10.30",205.93,22.20,3.05,2.76],
["2006.10.31",204.41,22.00,3.03,2.75],
];
var seriesList = anychart.data.mapAsTable(dataSet);
var chart = anychart.line();
chart.crosshair().enabled(true).yLabel().enabled(false);
chart.crosshair().yStroke(null);
chart.tooltip().positionMode("point");
chart.yAxis().title("%");
var credits = chart.credits();
credits.enabled(false);
chart.animation(true);
chart.title().enabled(false);
chart.xAxis().labels().padding([5]);
var series_1 = chart.line(seriesList[0]);
series_1.name("HUF");
var series_2 = chart.line(seriesList[1]);
series_2.name("CZK");
var series_3 = chart.line(seriesList[2]);
series_3.name("PLN");
var series_4 = chart.line(seriesList[3]);
series_4.name("RON");
/*for (i = 0; i < chart.getSeriesCount(); i++)
{
chart.getSeriesAt(i).hoverMarkers().enabled(true).type("circle").size(4);
chart.getSeriesAt(i).tooltip().position("right").anchor("left").offsetX(5).offsetY(5);
}*/
chart.legend().enabled(true).fontSize(13);
chart.container("chartContainer");
chart.draw();
}</script>'
);
end
I put the files .js on "HTML Header"
And the HTML on the source of a region
Could you replicate your problem in this page?
When I double click the node text editing is going some where, instead of the node. The below is the code and I don't know what is happening. I'm using AJAX to get the mxGraph XML from server side.
Edited source code as per comments
// Creates the div for the graph
mxEvent.disableContextMenu(container);
document.body.appendChild(container);
var xmlDocument = mxUtils.parseXml(xml);
var decoder = new mxCodec(xmlDocument);
var node = xmlDocument.documentElement;
container.innerHTML = '';
graph = new mxGraph(container);
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
graph.setHtmlLabels(true);
graph.setPanning(true);
graph.setTooltips(true);
graph.setConnectable(true);
// Changes the default style for edges "in-place"
var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
decoder.decode(node, graph.getModel());
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
var parent = graph.getDefaultParent();
layout.execute(parent);
Adding following piece of code during initialization helped me
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
I'm attempting to create a word cloud that will be generated AFTER a user's input.
The majority of word cloud-related projects seem to link back to D3js (this repo in particular https://github.com/jasondavies/d3-cloud)
While I can get the word cloud to function using the following
<div id="chart"></div>
<script>
var text_string = "blah";
drawWordCloud(text_string);
function drawWordCloud(text_string){
var stopWords = ["blah blah blah"];
var word_count = {};
var words = ...
}
var svg_location = "#chart";
var width = $(document).width();
var height = $(document).height();
var fill = d3.scale.category20();
var word_entries = d3.entries(word_count);
var xScale = ...;
d3.layout.cloud().size([width, height])
....;
function draw(words) {
...
d3.layout.cloud().stop();
}
</script>
I'm still facing two issues with this:
It only seems to work if it's directly in my index.html doc, not in a separate .js sheet.
It only works if I include the <div id="chart"> in my HTML doc, which I don't want to do initially (additional HTML is added once a user enters an input and the JS runs though addHTML += '<div id="chart">...</div>', which is what I'd like to do with the wordcloud - for it to be generated (based on the user's input) and only show up after the user has input and clicked a button, like the rest of the document is.
I am an absolute beginner with JavaScript scripting for InDesign.
I create an object like this:
var rectbox = doc.pages.item(0).rectangles.add({geometricBounds:[20,20,70,120]});
var image = rectbox.place(File('/path/image.pdf'));
and now I simply want to add a black drop shadow.
Can someone help me?
It seems to me impossible to find some example about. It is incredible...
Many thanks!
Roberto
Here are some examples howto implement a shadow.
http://forums.adobe.com/thread/778309
http://www.adobe.com/content/dam/Adobe/en/devnet/indesign/sdk/cs6/scripting/InDesign_ScriptingGuide_JS.pdf (page 57).
Try this:
var rectbox = doc.pages.item(0).rectangles.add({geometricBounds:[20,20,70,120]});
var image = rectbox.place(File('/path/image.pdf'));
var myFillTransparencySettings1 = rectbox.fillTransparencySettings;
myFillTransparencySettings1.dropShadowSettings.mode = ShadowMode.drop;
myFillTransparencySettings1.dropShadowSettings.angle = 90;
myFillTransparencySettings1.dropShadowSettings.xOffset = 0;
myFillTransparencySettings1.dropShadowSettings.yOffset = 0;
myFillTransparencySettings1.dropShadowSettings.size = 6;
Ok, here is the solution: if my box contains a filling color, ok, it works; but, if the box contains an image or something else, then I need to use transparencySettings instead of fillTransparencySettings:
var myTransparencySettings = rectbox.transparencySettings;
Then
var rectbox = doc.pages.item(0).rectangles.add({geometricBounds:[20,20,70,120]});
var image = rectbox.place(File('/path/image.pdf'));
var myTS = rectbox.transparencySettings;
myTS.dropShadowSettings.mode = ShadowMode.drop;
...
works perfectly!
Many thanks to Johan, however!