I've found several resources that supposedly show one how to make a collapsible list in Google Sites, but nothing seems to work. I've tried inserting an HTML box into the site, as well as modifying the HTML source code. It seems like Google Sites is just stripping away any javascript. Is there a way around this, does Google have a feature to make this happen (that is not the list template, that will not do for my purposes)?
Here are the resources I've tried:
tutorials.seowebpower.com/google-sites-advanced/collapsible-table
sites.cognitivescience.co/knowledgebase/resources/using-google-sites/creating-information-rich-gsites-pages
How to create expandable FAQ page in HTML?
support.google.com/sites/search?q=list
I fiddled with one of the answers in the linked question and it seems to work for me now, giving two questions with hidden answers which toggle hide/show, you should be able to adjust that to be a folding list once the hide/show functionality is there.
This in an htmlbox
<script>
function toggleElement(myid)
{
if(document.getElementById(myid).style.display == 'none')
{
document.getElementById(myid).style.display = 'block';
}
else
{
document.getElementById(myid).style.display = 'none';
}
}
</script>
<hr>
<button id="q1">Is this question one?</button>
<div id="a1" style="display:none">
This is the first answer.
</div>
<script>
document.getElementById('q1').onclick=function(event) {toggleElement("a1"); };
</script>
<hr>
<button id="q2">Is this question two?</button>
<div id="a2" style="display:none">
This is the second answer.
</div>
<script>
document.getElementById('q2').onclick=function(event) {toggleElement("a2"); };
</script>
<hr>
see it in action at
https://sites.google.com/site/dpcarlisle/fold
(first click takes forever for things to load up here, not sure if google sites allows enough javascript to preload things, but after first use it works as expected)
The documentation provided in https://developers.google.com/apps-script/guides/html/ can help you.
After creating a normal JavaScript collapsible list the code has to be pasted in the Index.html file.
Once you have your Code.gs and Index.html files, publish the project: Publish → Deploy as Web app, and pick «Anyone, even anonymous».
Copy the «Current web app URL:» and embed it in your Google Sites page: Insert → Apps Script.
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- YOUR JAVASCRIPT CODE GOES HERE -->
</body>
</html>
Related
I wonder if it's possible to navigate to a web page via link and zoom in to be 150%?
The only thing I could think about is to rewrite the '.click()' function and change the css there such as '-moz-transform', maybe something like this:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="https://www.google.com/search?q=kobe&igu=1" id="myLink" ></a>
</body>
<script>
$('#myLink').click(function() { zoom_page() });
function zoom_page()
{
// DO SOMETHING HERE!!
}
function autoClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", autoClick);
</script>
</html>
but not sure how exactly to do it.
Anyone can help? Thanks!
Andy
Given your example uses the URL of a well-known public site which you, almost certainly. have no control over: You can't do that.
Any JavaScript you run will apply to the current page and not the next one you navigate to.
If you could run JavaScript on arbitrary third-party websites then there would be a major XSS problem everywhere.
If you had control over the destination page then you could modify it with server-side code or JS embedded in the destination page contingent on data passed from the previous page (e.g. via the URL's query string).
I have two JS functions I want to call, in a wordpress site, from an external .js file. When writing the functions, I called one from the HTML document's tag, but didn't think of how to actually apply this in WordPress.
I see several PlugIns for altering headers/footers, but am just wondering if there's an option for the . Below is a sample which shows JS being called from my tag.
<html>
<head>
<title>SO Question</title>
</head>
<body onload="destroyEarth()">
<h1>Article title</h1><br>
<p>Article text</p><br>
<script async src="extFile.js"></script>
<p>
<a href="#"" onclick="dscntFuniture();" id="FSP" name="FSP">
<img src="https://i.imgur.com/4LtRreH.png" id="RRU" name="RCU"/>
</a>
</p>
<p>....more article text</p>
</body>
</html>
I'd like to be able to call destroyEarth() and dscntFuniture(), from extFile.js, in a WP site. Ideally there'd be a Plugin or alternative way of writing the code so that I can implement this.
Edit:
<script async src="extFile.js">
$(document).onload(destroyEarth);
</script>
jQuery onload does it for you:
$(document).onload(destroyEarth);
There should not be a practical difference between document and body onload event. Both will be triggered when content is loaded.
UPDATED:
add the following code in either header or footer of your website. It does not depend on any library, thanks #Shilly:
<script>
document.addEventListener('DOMContentLoaded', destroyEarth );
</script>
If it does not work, look into developers console for js errors and post them here
I am creating a custom modal dialog pop up box in Google Sheets via an Apps Script that is running an onEdit trigger. The idea is, the user clicks on a checkbox in some cell in a column. The trigger detects this edit, and calls a function that utilizes Apps Script UI and HtmlService class. This creates a simple modal dialog box that is built using some html. In the html, I have a button that calls window.print(). However, by calling it, nothing happens. I think it's because of the Same Origin Policy issue. The Html Service is likely using another domain name to launch the dialog box that's different than docs.google.com. So, window calls are likely problematic. Is there another way around this? How does one create customized printing for Google Apps? I've seen some variations of creating a pdf on the fly and printing those, but this seems really inefficient for the end user.
When the checkbox is clicked, the following function is called:
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('html') ;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Print Receipt');
}
Here is the following html:
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" alt="Logo" width="100" height="100">
<h3>testing</h3>
<button onclick="print()">Print</button>
</body>
<script>
function print() {
window.print();
}
</script>
</html>');
You should consider renaming the print function to something else, say "printPage" else it may be invoking the native print API. Also, the extra parenthesis in the HTML maybe removed.
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" />
<h3>testing</h3>
<button onclick="printPage()">Print</button>
</body>
<script>
function printPage() {
window.print();
}
</script>
</html>
I am very new to Javascript (ok, I've done 'Hello World' alright =]) and my other web programming skills are very limited.
I am trying to implement jmHighlight into one of my already created webpages but found I can't even get it to work in a clean page of its own. I've obviously made a very rudimentary mistake somewhere but can't figure out where so I'm hoping someone can help.
Here's what I've tried which doesn't work:
<!DOCTYPE html>
<html>
<head>
<style>
.context {
font-size:14px;
font-family:verdana;
}
span.highlight {
background-color:#000000;
font-color:#ffffff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.jmHighlight.min.js"></script>
</head>
<body>
<p class="context">some text</p>
<input type="button" value="Try it" onclick="myFunc()">
<script>
function myFunc(){
jQuery(".context").jmHighlight("some");
alert("Done!");
}
</script>
</body>
</html>
The alert works so I think the basic code is ok, I think its more the syntax of the plugin I've gotten wrong. The author shows his work here: here on GitHub and altered his syntax in section 2 for a fixed keyword ('some') instead of using a text box for now. The include is in the same location as my page, but doesn't show in the debugger when I preview the page as loaded...
I have also tried lifting the code from his basic example Fiddle here but still can't get it to work. I've also had a look at other jmHighlight questions here on SO, but can't manipulate them to work for me.
If someone could kindly point me in the right direction, or supply me with a very simple but complete working example that I can dissect myself to figure out where I went wrong, I'd be very appreciative!
This code is working in Chrome, I have tried it and here is a fiddle which also shows it is working.
The only thing I think may not be right is your path to jmHighlight or the version of jmHighlight.
jmHighlight was also renamed to jquery.mark. Here is a rawgit URL pointing to the .min.js:
https://rawgit.com/julmot/jquery.mark/master/dist/jquery.mark.min.js
I'm just starting to use Google Apps Script's HTML service to create a UI. Starting out very basic and Google's documentation seems to be very incomplete (let me know if I missed something). I followed this example: https://developers.google.com/apps-script/guides/html/reference/run#withUserObject(Object) and got it to work, but I don't understand where the "this" came from (in the HTML code) and how the order of operations works there.
In order to wrap my mind around this, I'm trying to make something where I can put in text, push a button, and it will display the same text in all-caps. Here's what I've got so far:
Google Script:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function capitalize(input){
return input.toUpperCase();
}
</script>
</head>
<body>
Put some text here: <input type="text" name="words"><br>
<input name="button" type="button" value="CAPITALIZE" onclick="google.script.run
.withSuccessHandler(capitalize)
.withUserObject(words)"><br><br>
Here is your text:
</body>
</html>
Any help is GREATLY appreciated!
The documentation for .gs is actually really good. Don't go into any language's docs expecting "full explanations" for every use case though.
google.script.run is only needed when you want to pass data to a server-side .gs function ( as documented at the top of the page you linked to ).
What you're asking for seems to be all client-side manipulation though, with no need to pass data to a .gs function.
try these adjustments:
// get value of a text box and set it into html of a <span> element
function capitalize(){
document.getElementById('userInput').innerHTML =
document.getElementById("words").value.toUpperCase();
}
onclick="capitalize()"><br><br>
Here is your text:<span id="userInput"></span>