I have devloped a Google Spreadsheet Add On. I am trying to add Inline Installation option on my website. But my addon is being added as a Google Chrome Extension rather a normal add on installation.
Expected outcome: Installation of Add-On on user's account.
Here is gist of code:
<html>
<head>
<title>Inline Installtion</title>
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jjkkhnadaddgofdoapkbdemklgkcnmld">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="section">
<div class="row">
<div class="col-sm-2">
<div class="">
<h5 class=""></h5>
</div>
</div><!-- left div/column -->
<div class="col-sm-8 form_div">
<br>
<br>
<br>
<br>
<div class="form-group main_button">
<div class="col-lg-10 col-lg-offset-2">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="submit" class="btn btn-primary" id="install-button">Add to Chrome</button>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="">
<h5 class="center"></h5>
</div>
</div><!-- right div/column -->
</div><!-- row -->
</div><!-- section -->
</div><!-- container -->
<script>
$(document).ready(function() {
function successCallback(e)
{
console.log("Success");
console.log(e);
}
function failureCallback(e)
{
console.log("Failure");
console.log(e);
}
$("#install-button").click(function(event) {
chrome.webstore.install("https://chrome.google.com/webstore/detail/jjkkhnadaddgofdoapkbdemklgkcnmld", successCallback, failureCallback);
});
});
</script>
</body>
</html>
So my question is: Is it possible to do it? If yes, how do I enable inline installation for Google Spreadsheet AddOn?
Help is much appreciated. Thank You.
No, Google doesn't allow this to embed add-on in your website.
there is another way to show your Google Apps Add-on in your website.
Just show the Marketplace Links or Snapshots on the website like Survey Monkey did.
LINK
OR
Scrap the data from marketplace in the HTML format and show it on the website.
Follow the Publishing an Add-on which details the necessary steps to publish this as Add-on. Add-ons are cannot be found in Chrome Webstore as the webstore is for Apps and Extensions. Add-ons are harbored in Google Marketplace.
If you want to use it, just go to Google Marketplace and type the name of the Add-on you created. You will be asked to install it, allow permission and finally be able to use it. You can check if it's successfuly installed by checking the Add-ons menu button in the spreadsheet.
Related
Tried to create a test using HTMLUnit for Confluence and had to login. But getting error that 'Javascript load error'. I am quite new to HTMLUnit and have only basic knowledge.
Tried for Chrome, Firefox.
Code:
WebClient webClient = new WebClient(BrowserVersion.FIREFOX_38);
webClient.getOptions().setCssEnabled(true);
webClient.getOptions().setJavaScriptEnabled(true);
webClient.getOptions().setThrowExceptionOnScriptError(false);
HtmlPage page = webClient.getPage("https://<domain>.atlassian.net");
webClient.waitForBackgroundJavaScript(30000);
System.out.println(page.asXml());
Part of the HTML page parsed:
<div id="root">
<noscript>
<div class="scriptLoadError"><div class="container"><h1 class="logo">Atlassian</h1><div class="heading">JavaScript is disabled</div><div class="content"><p>You should enable JavaScript to work with this page.</p></div></div></div>
</noscript>
<div id="javaScriptLoadError" style="display: block;">
<div class="scriptLoadError">
<div class="container">
<h1 class="logo">
Atlassian
</h1>
<div class="heading">
JavaScript load error
</div>
<div class="content">
<p>
We tried to load scripts but something went wrong.
</p>
<p>
Please make sure that your network settings allow you to download scripts from the following domain:
</p>
<p>
<b>
https://aid-frontend.prod.atl-paas.net/atlassian-id/front-end/5.0.392
</b>
</p>
</div>
</div>
</div>
</div>
</div>
<script nonce="OtVvyH6YLHv/RlgULCwPrLjIMu8=">
//<![CDATA[
window.onload=function(){document.getElementById("javaScriptLoadError")&&(document.getElementById("javaScriptLoadError").style.display="block")}
//]]>
When I tried using Selenium, it worked fine from the same system.
It would be of great help if someone could help me.
I am building a simple static website. I am using Spring Boot, Thymeleaf Layout Dailect and Bootstrap 4. In my layout.html I have a row in which I have a content and a sidebar. I have 2 photos in my sidebar, in all of views they appear on the right side. However when I try to embed an iframe with a google map or with a facebook page the sidebar gets pushed down. I tried a few different things like changing the size of iframe to minimum etc. but I am unable to keep my sidebar on the right side. Please can anyone suggest a solution?
Below is my layout.html:
<body>
<div class="container-fluid" th:replace="fragments/navigation :: navigation"></div>
<div class="container-fluid" id="mainContent">
<div class="row">
<div class="col-md-8">
<div layout:fragment="content"></div>
</div>
<div class="col-md-4">
<div th:replace="fragments/sidebar :: sidebar"></div>
</div>
</div>
</div>
<div class="container-fluid" th:replace="fragments/footer :: footer"></div>
Below is my sidebar.html:
<body>
<div th:fragment="sidebar">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ai-ki-do.png" alt="Logo" style="width: 330px;"></img>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ueshiba-laughter.jpg" alt="Logo"
style="width: 330px;" ></img>
</div>
</div>
</div>
</div>
</body>
Below is my content:
<body>
<div layout:fragment="content">
<p>Thank you for your interest in Seishinkan. Please get in touch via our Facebook page. We look forward to hearing from you.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FSeishinkan-Aikido-Dojo-389984175129276%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" data-adapt-container-width="true"></iframe>
</div>
</body>
Normal sidebar's behaviour - a white picture 'Ai Ki Do' and a dark picture on the right side :
The sidebar pushed down after embedding the iframe:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="row">
<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<div>
another one
</div>
</div>
For some reason when I remove the col classes from the divs and keep them in a row, the two pieces don't go below each other
Have you tried inspecting the element and editing your css classes in the browser while in developer mode?
I had the same problem before and all I did was mess around with the code in the console until it eventually moved the way I wanted it to.
Placing a new row and column within:
<div layout:fragment="content"></div>
worked for me.
<div layout:fragment="content">
<div class="row">
<div id="dojo-page" class="col-md-12">
<div id="fb-frame" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="600" height="450"
frameborder="0" style="border: 0"
src="path-for-google-map-location"
allowfullscreen></iframe>
</div>
</div>
</div>
Environment:
XAMPP
Windows 10 home
Using:
Laravel 5.4
AdminLTE
Objective:
I'm trying to add CKEditor to my AdminLTE dashboard Page, but when I follow these steps it comes up in my page with no toolbar like this
Code:
<div class="box box-info">
<div class="box-header">
<h3 class="box-title">CK Editor
<small>Advanced and full of features</small>
</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<button type="button" class="btn btn-info btn-sm" data-widget="collapse" data-toggle="tooltip"
title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
title="Remove">
<i class="fa fa-times"></i></button>
</div>
<!-- /. tools -->
</div>
<!-- /.box-header -->
<div class="box-body pad">
<form>
<textarea id="editor1" name="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</div>
</div>
and the JS code:
<script>
$(function () {
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace('editor1')
//bootstrap WYSIHTML5 - text editor
//$('.textarea').wysihtml5()
})
</script>
The problem is in includes of css and js path. Also if you are added it both, then check it in browser using view page source and confirm it with perfect path includes or not!
If it's all done then make console in $(function () { and check if it called or not?
If you don't know how to add path for css and js in laravel, please refer below thing:
CSS path:
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/bootstrap3-wysihtml5.min.css') }}">
JS path:
<script type="text/javascript" src="{{ URL::to('js/bootstrap3-wysihtml5.all.min.js') }}"></script>
After including path, you need to add HTML and JS code for CkEditor as you used in your question!!
Hope this will fixed your issue!!
Here is my code. I build 20 questions dynamically. So I need to create a dialog for each of them. It's a mobile application, built using jquery mobile. So I prefer to use the jquery mobile dialog functionality.
I know for sure it can be done, just not sure how.
<div data-role="page" id="Survey">
<div class="quest">
#Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
Comments</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1>
Dialog</h1>
</div>
<div data-role="content">
<div class="center-wrap">
<textarea style="width: 320px" title="Comments">
</textarea><a data-rel="dialog" data-role="button">Save</a>
</div>
</div>
</div>
</div>
You cannot have a page nested in another page for it to work. Your 20 questions should each be setup as their own jQuery Mobile page elements.
<div data-role="page" id="Survey">
...
<a data-rel="dialog" href="question-dialog-1">Question 1</da>
</div>
<div data-role="page" id="question-dialog-1">
...
</div>
Here is a live example of it in action: http://jsfiddle.net/shanabus/ZfBvB/
That should solve what you are looking to do.
Here is the documentation on jQuery Mobile dialogs.
The following code snippet which includes an onClick event will
not work until I click reload on both the simulator and the phone.
The code is in an .erb file in an app model folder.
<section id="page1" data-role="page">
<header data-role="header">
<h1>CSS 3 Animations</h1>
</header>
<div data-role="content" class="content">
<p class="show-menu" onclick="ToggleText()">(Show/Hide) Menu</p>
<div class="sliding-menu slide out">Menu</div>
</div>
</section>
<script type="text/javascript">
function ToggleText() {
$(".sliding-menu").toggleClass("reverse out in");
}
</script>
I'm using rhomobile 3.2.1 with. Can someone explain why and what to do to
fix it?
Would something like this work?
http://jsfiddle.net/aJshm/3/
JS
$('.toggle-menu').click(function() {
$(".sliding-menu").toggleClass("reverse out in");
});
HTML
<section id="page1" data-role="page">
<header data-role="header">
<h1>CSS 3 Animations</h1>
</header>
<div data-role="content" class="content">
<p class="toggle-menu">(Show/Hide) Menu</p>
<div class="sliding-menu slide out">Menu</div>
</div>
</section>
Just a guess, try defining the function before it is invoked?