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

How to show multiple page `.tif` file on Internet Explorer?

My requirement is to show .tiff image on browser. So currently I'm showing tiff file on Internet Explore using img tag like below.
<img src="myTiff.tif" type="image/tiff" alt="My Tiff">
And it works perfect with the tif file having only single page. In case there would an multiple pages in .tif then the img tag only shows 1st image. User can not get option to view other image.
Sample tiff image
I already tried all the option suggested here
I'm using C# on server side & on front end using AngularJS. Any help would appreciated. Thanks :)
Edit
Would it be better way to go with AltraTiff plugin? I looks like working on Internet Explorer.

Content rendering is always browser's responsibility so you rely in its capabilities.
Maybe there is some plugin for some browser that supports multiple-page tiffs, but, if you can't control software installed in your clients, I think your best option would be to implement some pagination by separating pages server side.
You can achieve that easily with imagemagick.
The only drawback is that, if user try to download it, it will download only the single page he were currently viewing.
But yo can mitigate it by providing separate download link or, simply, linking full version to the displayed image. Example using jQuery:
<div id="tiffPager">
<a href="myTiff.tif">
<img width=200 height=200 data-pageCount=5 src="myTiff_page0.tif" alt="My Tiff">
</a>
<button class="pageBack"><<</button>
<button class="pageForward">>glt;</button>
</div>
<script>
$(function(){
var container = $("div#tiffPager");
var img = $("img", container);
var backBtn = $("button.pageBack", container);
var fwBtn = $("button.pageForward", container);
var pgCount = img.data("pageCount");
var currPage = 0;
backBtn.on("click", function(){
currPage = (currPage + 1) % pgCount; // Cycle though pages.
img.attr("src", "myTiff_page" + currPage + ".tif");
});
fwBtn.on("click", function(){
currPage = (currPage - 1) % pgCount; // Cycle though pages.
img.attr("src", "myTiff_page" + currPage + ".tif");
});
});
</script>

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

Ad-Gallery Loader.gif not showing?

I found this image gallery http://coffeescripter.com/code/ad-gallery/ but I am having trouble.
the loader.gif image is not showing up at all in IE9 just a red x. I am a newbie to javascript, this is at the top of the javascript file
(function($) {
$.fn.adGallery = function(options) {
var defaults = { loader_image: 'loader.gif',
the image is in the same directory as this javascript file so the path is ok.. also there is no mention of this loader.gif in the css file at all.
this is the my site, www.kayleighwhite.org/black_white.html

Usually the file doesn't exist in the location the link is pointing to
loader_image: 'loader.gif' means it is looking for the file in the top level of the site. So www.kayleighwhite.org/loader.gif.
There is also an error looking for the file at http://www.kayleighwhite.org/img/loader.gif
Use Google Chrome. Right click > inspect element, have a look around

the path ok?
have you ever tried chrome developer tools?
here's the screenshoot
as you can see there are some 404 status

open jquery.ad-gallery.js and add the absolute path of the loader.gif file. Eg:
var defaults = { loader_image: 'http://your_domain.com/ad_gallery/lib/loader.gif',

Instead of hacking the jquery.ad-gallery.js, specify the image location under options:
(function($) {
$.fn.adGallery = function(options) {
var defaults = { loader_image: 'location/to/the/image/loader.gif',

Manually trigger 'open file dialog' using plupload

I'm using plupload to client scaling of pictures before they are uploaded. I like the feature that it gracefully falls back to html4 if the user doesn't have flash, silverlight etc engines installed.
I want to be able to start the upload when the user clicks certain elements on the page and i want to handle the events (sometimes stopping a file dialog from opening). In fact i'd like to pop open the file dialog using javascript.
Ok, so HTML4 (or rather the browser, except chrome :P) won't let me do this, unless the user clicks a browse-button (or an overlay covering a browse-button), so when i get the fallback to HTML4 i'll accept that i can't do it, but most users will have flash or silverlight installed and they do not have this restriction. So my question is this:
How do i trigger the file open dialog in plupload (keeping in mind i only need the flash and silverlight engines to do this).

The former solutions not worked on iPhones with plupload 2.1.2.
The following code did the trick (jquery needed):
$("#id_of_the_second_button").click(function() {
$('div.moxie-shim input[type=file]').trigger('click');
});

Fallback runtimes will become irrelevant as times goes by. This means that sooner or later, we'll be all using HTML5 runtime. In case that you are using HTML5 runtime, but don't use pluploadQueue(), this will work as well:
// Set up and initialise uploader
var uploader = new plupload.Uploader({
'runtimes' : 'html5',
'browse_button' : 'id_of_the_first_button'
// Other options
});
uploader.init();
// Hook in the second button
plupload.addEvent(document.getElementById('id_of_the_second_button'), 'click', function(e) {
var input = document.getElementById(uploader.id + '_html5');
if (input && !input.disabled) {
input.click();
} // if
e.preventDefault();
});

If someone is searching for the HTML5 solution, here it is:
var up= $('#uploader').pluploadQueue();
if (up.features.triggerDialog) {
plupload.addEvent(document.getElementById('idOtherButton'), 'click', function(e) {
var input = document.getElementById(up.id + '_html5');
if (input && !input.disabled) { // for some reason FF (up to 8.0.1 so far) lets to click disabled input[type=file]
input.click();
}
e.preventDefault();
});
}

Ok. It doesn't seem possible to do this, so unless someone implements event handles for the silverlight and flash components i'm out of luck

I read your problem.
I found some articles that may help to figure this out. check them. It may help...!
01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e
02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript

#Per Hornshøj-Schierbeck
After uploader has been init. It take few time to render input file to select. So you need to wait like below:
this.uploader.init();
var task = new Ext.util.DelayedTask(function () {
var inputArray = $('div.moxie-shim input[type=file]');
var input = inputArray.length > 1 ? inputArray[inputArray.length - 1] :
inputArray[0];
$(input).trigger('click');
});
task.delay(100);
The code in javascript is similar. Worked for me with plupload 2.3.6
Hop this help!