I have a UiApp script that display images in flextable; I have assigned mousedown handler to the images so that when it is clicked I want it to open a templated HTML page (in a new window). I wrote the following code; it gets executed but it doesnt return anything.
What should I do to get the Item Detail page containing the image loaded from the imageurl assigned to be opened in a new window?
Here's my script and html code:
var page = HtmlService.createTemplateFromFile("Item Detail");
var image = productDetails[i].imageurl;
page.imageurl = image;
Logger.log(productDetails[i].imageurl);
return page.evaluate();
<img src=<?=imageurl ?> alt="click for more info" height="100%" width="100%">
So suppose you want to make a clickable image. And you want this image to open in a new window when you click on it.
var anchor = app.createAnchor("<img src='URL_TO_IMAGE' />",
true,
ScriptApp.getService().getUrl()+"?detailPage="+SOME_ID)
.setTarget("_blank");
Then when you click on that link, your script will be opened in another window. And also, a GET parameter will be passed along with it. So in your doGet(e) function, you could handle whether to display the main UiApp or an Html detail page.
function doGet(e) {
if (e.parameter.detailPage) {
//show the detail page
} else {
//show the normal UiApp
}
}
Read the top part of this other answer to get a better idea of how GET parameters work with GAS.
You will want to surround the <img> with a <a> tag.
<img ... >
Related
I wanted to take an image from one HTML file and when the user clicks a button, that image moves to a standard cell of a different HTML file.
To move an element between pages, if both pages are on the same domain, you can get the HTML of the element, put it in localStorage, then delete the element. On the other page, poll the localStorage for changes, the parse the element and use it in the DOM.
I wrote a set of functions to do that. On the sending page use this code. Call the function moveElement with the element you want to move to the other page.
const page="Your Page Name";
function moveElement(element){
const prefix="_elementmover_"+page+"_";
localStorage.setItem(prefix+"htmlToMove",element.outerHTML);
localStorage.setItem(prefix+"changedHtmlToMove",localStorage.getItem(prefix+"changedHtmlToMove")*1+1);
image.remove()
}
On the receiving page, use this code. The function receivedElement will be called wth the element.
const page="Your Page Name";
function receivedElement(element){
// Do whatever you want with the element here.
}
(()=>{
const prefix="_elementmover_"+page+"_";
let getChangeNum=()=>localStorage.getItem(prefix+"changedHtmlToMove")*1;
let oldChangeNum=getChangeNum();
let checkForChanges=()=>{
let newChangeNum=getChangeNum();
if(oldChangeNum!=newChangeNum){
let element=new DOMParser().parseFromString(localStorage.getItem(prefix+"htmlToMove"),"text/html").querySelector("html>body>*");
receivedElement(element)
}
oldChangeNum=newChangeNum
setTimeout(checkForChanges,100);
}
checkForChanges();
})();
Please note that the page variable should be unique on each set of pages it is on, but both pages must have the same value for it to work properly.
I'm using a basic Wordpress (or Google Sites) page to randomly redirect to one of three URLs. I'm not sure how to do this in HTML. The idea is to have a big button in the middle of the page which, on click, will send you to one of three links randomly. Any advice would be appreciated.
You couldn't do that only with html, you will need to do that with javascript.
You must store the links in an array and on click on the button call a function that randomly choose a link and go to it.
In the example below I only display the chosen link so you can click how many time you want to see the link change. Remove the line that do that and uncomment the line that make the redirection work.
var locations = ['https://google.com', 'https://stackoverflow.com', 'https://bing.com'];
document.getElementById("redirectButton").onclick = function () {
var link = locations[Math.floor(Math.random() * locations.length)];
// Remove this line
document.querySelector('.link').innerText = link;
// Uncomment this line
// location.href = link;
};
<button id="redirectButton">Random redirection</button>
<!-- You don't need that --> <p class="link"></p> <!-- Remove it on your site-->
I basically have small images in a table that I'd like to enlarge on mouse click. I'd like the enlarged image to appear on the center of the page. On mouse click again to remove the enlarged image. I was able to do this on Excel using a VB script that I found, but had no luck in Google Sheets. Is there a way to assign this sort of script to each image?
Similarly to this http://imgur.com/ETyflIS
Kind Regards,
Alex
You can have google chrome add-on:
Docs Image Zoomer
Test Here: Example
You can assign scripts to images but there's no way (that I can see) for the script to figure out which image is being clicked. Also the script can insert a new image but this one won't have a script assigned to it so we can't make it disappear on click.
I suppose you could assign a script that would open up the image using the HTML service like this:
Enlarge Picture on Click
But you would need to either make a separate function for each image, so it can load the source into the HTML, or identify which image is clicked somehow (I'll have a think but I don't think this can be done).
Edit: Script below. First image should run popUp1 and second image should run popUp2. There might be a more elegant solution for supplying the HTML with the different image URL but this works.
code.gs
function onOpen() {
var ui = SpreadsheetApp.getUi();
// Or DocumentApp or FormApp.
ui.createMenu('Actions')
.addItem('Authorise', 'Auth')
.addToUi();
}
function Auth() {
SpreadsheetApp.getActiveSpreadsheet();
}
function popUp1() {
var html = HtmlService.createHtmlOutputFromFile('index1')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
html.setHeight(400);
html.setWidth(600);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Image');
}
function popUp2() {
var html = HtmlService.createHtmlOutputFromFile('index2')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
html.setHeight(400);
html.setWidth(600);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Image');
}
index1.html
<form>
<div id="closeDiv"><font face="arial" size="1">Click the image to close...</font></div>
<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg" alt="DJ BBQ" style="width:540px;height:303px;" onClick="closeImage()">
</form>
<script type="text/javascript">
function closeImage() {
google.script.host.close();
}
</script>
index2.html
<form>
<div id="closeDiv"><font face="arial" size="1">Click the image to close...</font></div>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="DJ BBQ" style="width:540px;height:303px;" onClick="closeImage()">
</form>
<script type="text/javascript">
function closeImage() {
google.script.host.close();
}
</script>
One working with the latest version of Google Docs, in a very effective way, also allowing to download images is: Google Docs Image Zoom
Not sure if this is what you were looking for, nor if you found another solution, but if you go to insert/drawing you can paste there your full size image, insert it and then resize it within the cell.
If you double click the image, the full size drawing will pop up.
However this only works as an editor. not viewer nor commenter.
Also, you have to click Save and close in order to go back. Neither ESC nor clicking outside closes the drawing editor.
Example: https://docs.google.com/spreadsheets/d/1KDcRQngFy1zRUrD6v2FYH-YPBivZGiUlSKt_PhjeZqU/edit#gid=0
Hope it might be helpful.
Enrique
I want users to input some url in a text field from a popup, and then, when submit the popup the parent page auto refresh and shows the url they have insert, with hyperlink to the site.
I have now set a scrypt to store the form in a cookie, that computer can read everytime users come back to the site.
You can see my work in: http://www.resmasecamadas.com/test
You can achieve it using JS. you dont need to use cookies at all!
Observe this sample code.
//On click of this button new Popup will be opened!
<button onclick="myFunction();">Open popup</button>
<script>
function myFunction() {
var popup = window.open("", "popup", "width=200, height=100");
popup.document.write("<input type='text' name='text' id='text'><button onclick='window.opener.passFunction(text.value);'>click</button>");
}
function passFunction(x){
document.write(x);
}
</script>
You can send data from pop up window using window.opener.someFunction(parameters)here "someFunction" is a function in parent window!
In my application I use a javascript function to set the src tag of an Iframe:
function loadDocument(id, doc) {
$("#DocumentContent").show();
$("#ButtonBox").show();
// Clear dynamic menu items
$("#DynamicMenuContent").html("");
$("#PageContent").html("");
// Load document in frame
$("#iframeDocument").attr("src", 'ViewDoc.aspx?id=' + id + '&doc=' + doc + '');
// Load menu items
$("#DynamicMenuContent").load("ShowButtons.aspx");
// Set document title
$("#documentTitle").load("GetDocumentInfo.aspx?p=title");
}
When I open Fiddler and debug this page, I notice that the 'ViewDoc.aspx' page is called twice.
When I put an alert() in the loadDocument function, I get only one alert message. In my viewdoc.aspx page there are no refresh or redirect statements or other statements that refreshes the page.
Is it possible this has something to do with browser? Is this default browser behavior?
the issue is pretty old, but....
do you have two elements with id=DynamicMenuContent ?
if there's one in the source page and one in the iframe, they may both be selected by $("#DynamicMenuContent").load...
if this is true and one is a div and the other a span, you could change it to $("div#DynamicMenuContent").load()...
hth