We Keep Coding

Button not showing in Plone, onclick also not working

I am editing a plone page to open an Excel document on a specific sheet. I created two buttons to see if either would appear as actual buttons and use the JS function I reference. With this code the exact part of the page looks like the image below.
Why is only text showing instead of the button and why is the onclick attribute not working?
Note: I have changed to links to the spreadsheet for posting it on here but the link has been tested on other webpages
<script type="text/javascript">
function Open_Excel_File(path,sheet)
{
fso = new ActiveXObject("Scripting.FileSystemObject");
if (!fso.FileExists(path))
alert("Cannot open file.\nFile '" + path + "' doesn't exist.");
else
{
var myApp = new ActiveXObject("Excel.Application");
if (myApp != null)
{
myApp.visible = true;
Book = myApp.workbooks.open(path);
var excel_sheet = Book.Worksheets(sheet).Activate;
myApp.range(f_range).Select;
}
else {
alert ("Cannot open Excel application");
}
}
}
</script>
<div>
<button onclick='Open_Excel_File("file://///fs-01\Departments\Underwriting\Statistical%20Data%20and%20Medical%20Information\Statistics\Cancers\Cancer%20Statistics%\Cancer%20Statistics%.xlsx", "Vulvar Ca");'>Open File</button>
<input type="button" onclick="Open_Excel_File('file://///fs-01\deps\uw\stat%20Data%20and%20Medical%20Information\Statistics\Cancers\Cancer%20Statistics%202018\Cancer%20Statistics%.xlsx', 'VCA');'>OPEN FILE</input>
</div>

your onclick value is not a function, it is the result of a function call. Try to change that to onclick="Open_Excel_File"; You'll have to provide the file path at some point
Accessing file system from browser is super restricted for security matters, the only way I see fit is to have a file input and using what user provides

Also Plone filter out a bounce of potential "nasty" tags through a specific configurable tool.
It seems to me that you have injected the in the source HTML of a Page (document) type.
If so, you will see in your browser that in, the page source code, the script tag has been totally stripped away.
So,
a correct way to inject some js in your page, is to load it as portal_javascript resource (plone<=4) or in resource_registry (plone>=5).
tha nasty way is to access, in the ZMI, at https://yourseite:8080/Plone/portal_transforms/safe_html/ and configure it to accept script tags inside a document (all document in your site actually).
If this answer does not satisfy you try to ask in the official community:
http://community.plone.org
hth,
alessandro

Print a screenshot from web page

I'm creating a web page and I need to make a button that prints a selected area. After several searches everything led me to implement html2canvas.
I installed it with
npm install html2canvas in the command prompt. In the official html2canvas website they mention
import html2canvas from 'html2canvas'; that I suppose I need to add in the top of my aspx file(?)
So far I've coded this code portion:
function getScreenshot() {
alert("bob");
html2canvas(document.body, {
onrendered: function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$('#test').html('<img src="' + canvasImg + '" alt="">');
}
});
var printContent = document.getElementById("row");
var printWindow = window.open("", "");
printWindow.document.write(printContent.innerHTML);
printWindow.document.write("<script src=\'http://code.jquery.com/jquery-1.10.1.min.js\'><\/script>");
printWindow.document.write("<script>$(window).load(function(){ print(); close(); });<\/script>");
printWindow.document.close();
};
<div id="test" class="body-content animated fadeIn">
<a href="javascript:getScreenshot()">
<img src="Images/printer.png" width="40" height="40" align="right">
</a>
</div>
The issue is when I click the button, no window opens for printing. The button works for sure because I get the alert window.
What am I missing for this to work? Can be a installation procedure? Can be bad attributes implementation?

Working fiddle: fiddle.
I would recommend opening a new html page where you include the element you're trying to print, along with a button "Print This Page" as is showed in the example below. And once user clicks on that button, thats when the browser's print page opens up.
This is the working function, all you need to do is call this function on click from your website's page, and change YOUR_ELEMENT to your container's id (#row in you case).
<script type="text/javascript">
function OpenPrintPage() {
var OriginalContent = document.getElementById('YOUR_ELEMENT').innerHTML;
var PrintWindow = window.open("","PrinterFriendlyPage","scrollbars=yes,status=yes,toolbar=yes,menubar=yes,resizable=yes,height=510,width=750");
PrintWindow.document.write( '<html><head><title>' + document.title +'</title></head><body><div id="' + 'content' + '">' + '</div><a class="printbtn" href="javascript:window.print()">Print This Page</a> </body></html>');
PrintWindow.document.close();
PrintWindow.document.getElementById('content').innerHTML += OriginalContent;
}
</script>

First make sure that you're including your script file correctly. There should be a <script> tag that includes a web-compatible version of your library. Most instructions that use npm install ...; import ... assume that you are using a web bundler like webpack or rollup to make a single bundled JavaScript file, or are using the new es6 module importer. That doesn't look like what you're doing here.
Instead, you can include a prebuilt version of html2canvas, like from https://html2canvas.hertzen.com/dist/html2canvas.js or https://unpkg.com/html2canvas#1.0.0-alpha.12/dist/html2canvas.js.
<script src="https://unpkg.com/html2canvas#1.0.0-alpha.12/dist/html2canvas.js"></script>
You can see a working example here: http://jsfiddle.net/u8Lz32k0/7/

Have you loaded the script in your web page? Can you post the beginning of your HTML file where you show all your imports?

Detect if browser disables images

I need to detect if the browser disables images on the current page. Is this possible with JavaScript (jQuery/Modernizr)?
Problem: The project uses image sprites for icons and displays them like <i class="icon-user"></i>. The app is partially used by mobile users and some of them disable images if they're surfing with edge. As a result some buttons disappear.
The only thing I need is to display something (a gray square, circle…) if images are blocked. Via CSS class on the <html> element or so (class="no-images" e.g.). Writing alternative text between <i>…</i> is unhappily no option.
Thanks for your thoughts! I hope it exists a simple solution.

You can use the following script:
function noimage()
{
if ((document.getElementById('flag').offsetWidth==1
&& document.getElementById('flag').readyState=='complete')
||(document.getElementById('flag').offsetWidth==1
&& document.getElementById('flag').readyState==undefined))
{
var objHead = document.getElementsByTagName('head');
var objCSS = objHead[0].appendChild(document.createElement('link'));
objCSS.rel = 'stylesheet';
objCSS.href = 'alt.css';
objCSS.type = 'text/css';
}
}
And you need the following html markup:
<body onload="noimage();">
<img id="flag" src="clear.gif" alt="">
Just add it to the body. What this does is check the offsetWidth property to look for a 1x1 pixel image at the top of the browser. If it returns true it means that images are enabled.
If you need more info go here.

How can I transform a google chart graph to an image and save her?

First, sorry if my english isn't really good,
I have some google charts (using the API) and I want to transform them to images.
For do that, I use this code :
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});
chart.draw(dataAge, optionsAge);
And the problem is that I have to place a div
<div id='chart_div'></div>
for seeing my image.
My question is how can I save that image on my server? Of course, after I had save her I want to use her for make a PDF document using a jsp file and a xsl and delete the image.

write javascript method that you have to be called on click of a button (or on any event).Inside the javascript method use jquery get or post method and send the image data to server. Image data can be initialized to a global variable and later send using calling the method

Recently i read all those questions about save google chart to image files on the disk but no one solution give me what i need. So i started to try with a kind of programs that simulate web browser and the result is perfect what i need.
This is what solved the question to me:
1) create a page with all you need, your google chart running, using your server-side language or not to create the final code and all other stuff.
2) download phantomjs (freeware), this is the webbrowser emulator.
3) phantomjs use a script that tell what it will do, the perfect script for this case is:
save.js
var page = require('webpage').create();
page.viewportSize = { width: 360, height: 150 };
page.open('http://your-webserver.com/yourgooglechart.html', function() {
page.render('image_to_save.png');
phantom.exit();
});
notice the viewportSize is the virtual size of your browser view.
4) run C:\blabla\phantomjs.exe save.js
worked like a charm
5) in my case, i schedule it to run every 5 minutes and consume this image in other place of my solution.

This type of code has incomptibilidades with IE and Firefox, it works fine with Chrome and Opera.
I could not find a solution to this Code specifically, but I use another method, which was compatible with all browsers.
For this I think on the main page container with an image inside a DIV and the occult
<div style="display:none;">
<img id="chartImg" />
</div>
Position the image that is generated with the API at the URL:
google.visualization.events.addListener(chart, 'ready', function () {
var imgUri = chart.getImageURI();
// do something with the image URI, like:
document.getElementById('chartImg').src = imgUri;
});
Then through openWin function, I think a pop and write within this image, a graphic, which can be copied on the derecgo botonn mouse and save it as PNG.
function openWin() {
var divText = document.getElementById("chartImg").outerHTML;
var myWindow = window.open('', '', 'width=500,height=500');
var doc = myWindow.document;
doc.write('<img' + ' id="graficar" ' +' />');
doc.write(divText);
doc.write("<p>This is 'myWindow'</p>");
doc.close();
}
In jsFiddle ahy an example to modify.
http://jsfiddle.net/rdmghzhm/7/

How can I let users customize background images?

Many sites these days have 'theming' functionality, when user is able to customize the pages' look. Sometimes it's only a fixed set of themes, but sometimes people are free to choose any style they want - for example, they can set up any color of the pages' background.
I want to go a step further - and let them choose the background image as well. The flow is very simple: user uploads a file (via <input type="file" />), then this file becomes a background image - but only for this user.
I can't find anything about this functionality online, though, and I have no clue about what to do.
Something else I was thinking was that, if a user selects a background, maybe I could use HTML5 localstorage to make that background come up every-time that visitor visits the page.

Here's a proof of concept (mostly based on the code given at MDN FileReader doc page + this answer):
HTML:
<input id="test" type="file" onchange="loadImageFile(this)" />
JS: no wrap (head) mode
$(switchBackground);
var oFReader = new FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent) {
localStorage.setItem('b', oFREvent.target.result);
switchBackground();
};
function switchBackground() {
var backgroundImage = localStorage.getItem('b');
if (backgroundImage) {
$('body').css('background-image', 'url(' + backgroundImage + ')');
}
}
function loadImageFile(testEl) {
if (! testEl.files.length) { return; }
var oFile = testEl.files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
And here's a working demo, checked in latest Firefox and Chrome versions. Looks to work OK, at least. )

here's a quick solution to this problem.
custom-background.js is a lightweight jQuery plugin to allow users change the website’s default background and saves the background selected to local storage. This plugin can easily be added to any website or web app without any compromise on website's performance.
you can download it from here and check the code
https://github.com/CybrSys/custom-background.js