I've created a widget in GWT and I would like to be able to give users a small snippet of HTML that they can embed in their website so my widget will be rendered there.
I don't believe an iframe would be appropriate as one requirement is that clicking any links on my widget should take the user to my website (not just change the content of the iframe).
Any help would be greatly appreciated.
P.S. I tried embedding the following, but no luck:
< script src="http://embeddedapptest.appspot.com/embeddedapp/embeddedapp.nocache.js" >< /script >
< div id="foo" / >
It is possible. The snippet will need to be like
<script src="yourmodule.nocache.js"></script>
<div id="foo"/>
Then in your entry point do this:
RootPanel root = RootPanel.get("foo");
// add your things here. root.add(...);
You will need to be careful not to step on the outer page's styling and vice versa but compiled CSS should go a long way to helping that.
This is the technique used to embed an APIs Explorer in Google APIs documentation.
I don't think it's possible to do it now. But in the future you can use Web Components to do that.
But there's the possibility to export a GWT/Java API using gwt-exporter. That makes it possible to automatically create a JavaScript API. gwtchismes uses this to export a JavaScript version of GWT widgets. You can find a tutorial about it in their wiki.
In NetBeans GWT project
mycss.css:
body, html,div.wrap-frame{
margin: 0;
padding: 0;
widht: 100%;
height: 100%;}body{
background: white;
}
.row1or3 {
width: 100%;
height: 10%;
background: blue;
text-align: center;
}
.row2{
width: 100%;
height: 80%;
background: yellow;
text-align: center;
display:flex;
}
.wrapper{
width:100%;
height: 100%;
}
.box{
float:left;
height: 100%;
}
.box:nth-child(1){
width:25%;
background-color:red;
}
.box:nth-child(2){
width:50%;
background-color:green;
}
.box:nth-child(3){
width:25%;
background-color:yellow;
}
welcomeGWT.html
<html>
<head>
<script id=ft type="text/javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
<meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div class="row1or3"> Row1
</div>
<div class="row2">
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box" id="mydiv">
</div>
<div class="box">
Right Side Menu
</div>
</div>
</div>
<div class="row1or3">
Row3
</div>
</body>
MainEntryPoint.java
public class MainEntryPoint implements EntryPoint {
/**
* Creates a new instance of MainEntryPoint
*/
public MainEntryPoint() {
}
/**
* The entry point method, called automatically by loading a module that
* declares an implementing class as an entry-point
*/
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
label.setVisible(!label.isVisible());
}
});
RootPanel root = RootPanel.get("mydiv");
root.add(button);
root.add(label);
}
}
Now you can name any div element of any html page as id=mydiv and add the compiled GWT jscript.
I have tested.
Related
This is my first post on SO and my first time making a Chrome Extension. I've read alot of documentation, but I am still unsure how to get this to work. Below are my html and js files. I want to be able to type something in the source box and have the have the word print out in the results area in real time. I have tested this code on my local host so i know it works, but for some reason it is acting up as a chrome extension.
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<textarea id="source"></textarea>
<div id="result">
</div>
</body>
</html>
Here's the js:
function main() {
document.getElementById('source').keydown(function() {
var source = document.getElementById('source').value;
var outputValue = source.replace(/command/gi, "⌘")
.replace(/tab/gi, "⇥")
.replace(/return/gi, "⏎")
.replace(/option/gi, "⌥")
.replace(/control/gi, "⌃")
.replace(/esc/gi, "⎋")
.replace(/left/gi, "←")
.replace(/down/gi, "↓")
.replace(/up/gi, "↑")
.replace(/right/gi, "→")
.replace(/shift/gi, "⇧")
.replace(/eject/gi, "⏏")
.replace(/caps\s\(lock\)/gi, "⇪")
.replace(/save/gi, "⌘ + S")
.replace(/print/gi, "⌘ + P")
.replace(/find/gi, "⌘ + F");
document.getElementById("result").innerHTML = outputValue;
}
}
1) What wOxxOm said in the comment: element.keydown(function() { ... }) does not exist. This definitely comes from some jQuery code - you could use that if you add it to your extension, or you could use addEventListener.
2) You declare a function main(), but nothing ever calls it. A good place to call it would be a DOMContentLoaded event listener on document:
document.addEventListener("DOMContentLoaded", main);
function main() {
/* ... */
}
Been trying to find out how to do this the best way but haven't found any answers, don't know if I suck at searching or no-one has asked the question. Probably the first one, but anyway.
I'm wondering what the best way is to add an element to the top of the DOM (so that it is on top of everything else) in AngularJS?
My solution to this problem now is to show a modal with the loading spinner in it but I think this is an ugly solution as it shouldn't be that hard to add my own div-element to the DOM that are showing the spinner.
This is the code I have in my modal right now:
<div class="modal-body" style="text-align: center;">
<i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
So you can understand why I think it's unnecessary and ugly to have it in a modal. I've been reading about directives but not really sure how it would look like and how I would show it where I want it to be shown.
I just created something just like this for a project of mine. You can make a div and set the size to 100% of the screen. Set some variable on it so that it shows only when the data is loading.
I used the following CSS for mine:
#overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
z-index:10000;
text-align: center;
vertical-align: middle;
}
Its important to make a large z-index so that it shows on top of everything, and I used a semi-transparent overlay. You can style however you'd like.
And html like the following:
<div id="overlay" data-loading>
<i class="icon-spinner icon-do-spin" ></i>
</div>
FYI - 'icon-do-spin' is a cool class provided by FontAwesome to animate the spinner icon that you are using, and 'data-loading' is a directive I used to check for when all http pending requests are completed. You could just use something like ng-show/ng-hide/ng-if to show or hide the loading div.
In Angular, in order to work with DOM, you need a directive. And to control loader, you need a service. Here is a very simple demo for you. The principle is: directive watches for state change in service and draws "loader" if service says that loader shoud be presented:
index.html
<!DOCTYPE html>
<html data-ng-app="Demo">
<head>
<script data-require="angular.js#1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="LoaderController as ctrl">
<div data-loader class="loader" data-ng-class="{'visible':Loader.visible}"></div>
<button data-ng-click="ctrl.show(true)">Loader</button>
</body>
</html>
script.js
(function() {
'use strict';
angular.module('Demo', []);
angular.module('Demo').directive('loader', [function(){
return {
'restrict' : 'A',
'controller' : ['$scope', 'Loader', function($scope, Loader){
$scope.Loader = Loader;
}]
}
}]);
angular.module('Demo').factory('Loader', [function(){
var instance = {}
instance.show = function(on){
instance.visible = on;
}
return instance;
}]);
angular.module('Demo').controller('LoaderController', ['$timeout', 'Loader', function($timeout, Loader){
this.show = function(){
Loader.show(true);
$timeout(function(){
Loader.show(false);
}, 5000)
}
}]);
})();
style.css
html, body {
margin: 0;
padding: 0;
}
.loader {
opacity: .5;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.5);
display: none;
}
.loader.visible {
display: block;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a very simple website with some menu tabs (i.e. Home, About Me etc.) and few paragraphs. I added click function inside my .JS file so that the clicking on tab can navigate to the desired paragraph (or page). But it's not working.
I should refernce to this post as I posted back.
[NOTE: I have apache running in my computer and xwamp is installed. I have jquery source added into my file and they are accurately saved in correct path or file. Besides I have Bootstrap installed, though I didn't necessarily need to set path for any file to it.]
My code:
main.php:
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main_interaction.js"></script>
<div class="row">
<div id="header" class="col-xs-12">
<h1>Welcome to my green world!</h1>
</div>
<div class="col-xs-4">
<ul>
<li id="home">HOME</li>
<li id="gallery">GALLERY</li>
<li id="about">ABOUT ME</li>
<li id="contact">CONTACT ME</li>
<li id="diary">MY DIARY</li>
<li id="blog">BLOG</li>
</ul>
</div>
<div class="col-xs-8 home">
<p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
</div>
<div class="col-xs-8 gallery hidden">
<p>This is the gallery.</p>
</div>
<div class="col-xs-8 about hidden">
<p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
</div>
<div class="col-xs-8 contact hidden">
<p>Contact me here.</p>
</div>
<div class="col-xs-8 diary hidden">
<p>My diary will be here.</p>
</div>
<div class="col-xs-8 blog hidden">
<p>Blog posts appear here.</p>
</div>
<div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>
.JS:
$("li").on('click', function () {
$(".col-xs-8").addClass("hidden");
$("." + $(this).attr("id")).removeClass("hidden");
});
.CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
margin: 0;
}
#header {
background-color: mediumturquoise;
text-align: center;
padding: 20px;
border: 4px solid crimson;
}
.col-xs-8 {
text-align: center;
font-family:'Verdana';
color: mediumblue;
font-size: 13pt;
}
.col-xs-4{
border: 4px solid crimson;
background-color: yellow;
line-height: 40pt;
font-family:'Tahoma';
font-size: 15pt;
font-weight: bold;
margin: 0;
padding: 0;
}
.col-xs-4 ul {
list-style-type: none;
}
#footer {
background-color: gray;
border: 2px solid green;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
li:hover {
cursor: pointer;
text-decoration: underline;
}
You're including (and thus executing) the JavaScript before the elements exist on the page. HTML/JavaScript is processed in the order in which is exists in the DOM. So when this runs:
$("li")
the parser is only at the top of the HTML body and hasn't loaded any li elements into the DOM yet. Thus, that selector doesn't find anything.
Either put the JavaScript at the end of the DOM or wrap it in a document ready handler:
$(function () {
$("li").on('click', function () {
// etc.
});
});
(or both)
on not support from jquery 1.9, try live
$("li").live("click",function(){});
I looked at your code and was wondering if replacing
$("li").on('click', function () {
with
$("li").click(function() {
would solve the issue. I've used jquery for a while but have never used ".on" but my onclicks work fine. Hope this helps!
I just started making my first website, and this is the first REAL problem that I have run into. I'm trying to make "Sign in" and "Sign up" buttons that automatically change their text if the user is logged in. To do it, I'm using Javascript to read the localStorage username value, check if it equals null, and then set both button's .innerHTML based on that. The problem? My Javascript won't run. Here's the HTML/Javascript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phyre-Home</title>
<link href="Phyre-Home.css" rel="stylesheet">
<script language="javascript">
page.onload function{
var profile = document.getElementById("Profile");
var signout = document.getElementById("SignUpOut");
var username = localStorage.getItem('phyreUsername');
if(username == null) {
profile.innerHTML = "Sign in";
signout.innerHTML = "Sign up";
}else{
profile.innerHTML = username;
signout.innerHTML = "Sign out";
}
}
</script>
</head>
<body>
<header>
<img src="PhyreSiteHeader.bmp" alt="Phyre">
<button id="SignUpOut"></button>
<button id="Profile"></button>
<h1 style="display:none">Fire</h1>
<script language="javascript">
</script>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li>Profile</li>
<li>Games</li>
<li>Chat</li>
<li>Videos</li>
</ul>
</nav>
<aside>
<h1><b>Page Nav</b><br></h1>
<p><i>This page does not have its own, separate navigation section. Sorry.</i></p>
<h1><b>Ads</b><br></h1>
</aside>
<article>
</article>
</body>
</html>
...And here's the CSS, just in case it matters:
article, aside, figure, figcaption, footer, header, main, nav, section, summary {
display:block;
}
header:img{
max-width:90%;
}
body{
background-color:rgb(75, 75, 75);
margin:0px;
font-family:times new roman, serif;
}
header{
width:100%;
float:top;
}
#SignUpOut{
position:absolute;
top:0%;
right:0%;
}
#Profile{
position:absolute;
top:0%;
right:7.5em;
}
h1{
text-align:center;
font-family:AR BLANCA, times new roman, serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
li{
float:left;
width:20%;
font-size:large;
text-align:center;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:2px;
margin-bottom:0.5%;
}
aside{
float:left;
width:20%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
margin-right:0.5%;
}
article{
float:right;
width:79.5%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
}
The culprit is the first Javascript section. Please help if you can, I'm pretty new to HTML5, CSS3, and Javascript.
P.S. I don't have a domain or anything yet, so none of the links are valid.
As far as I know, there's no such thing as page, you probably want window
window.onload = function() {...
or just drop the onload handler and move the script to the bottom, right before </body>
The main issue is that page is not a JavaScript variable.
You could do something like
function myLoadFunction() {
...
}
then
<body onload="myLoadFunction()">
...
</body>
Alternatively you can use window.onload
window.onload = function () {
...
};
I have made you a completely working example here, that does everything you are asking, you may simply click this link to see it in action. You may click the second link in order to see the code and dissect it a bit.
Working Sample (with username)
Just click the link to see it work.
Working Sample (without username)
Just click the link to see it work.
Working Sample (Code)
Just click the link, then click Run with JS to see it work.
Now that I have shown you a completely working solution, allow me to explain why it works.
You do not appear to be using any sort of external library, this means that there is really nothing running overhead to try and help manage when these events fire and such.
You did not declare any kind of id on the elements you were trying to fetch
To demonstrate this, I cite your original code;
var profile = document.getElementById("Profile");
Which was assumed to be functioning on the following <a> tag.
<li>Profile</li>
The problem here is that document.getElementById actually needs an id to get by. This is remedied by ammending the <a> tag with an id, like this.
<li><a id="Profile" href="www.phyregaming.com/profile">Profile</a></li>
The next part of the problem is that you needed this code to run only after the page had loaded. But because you're running just normal javascript, it will run in the order it is seen - unless wrapped inside of a function. Because page.onload is not a valid function, your javascript simply threw an error, and since page.onload is not a real function, it didn't quite understand what its own problem was, so it didn't give you any really useful information.
I fixed this by first wrapping your code in a function, like this.
<script type="text/javascript">
function ready() {
// your javascript code here
}
</script>
What this meant is that when the page hit that part, it created the function, but it did not run it.
Then you needed to run the function, but only once the other parts of the page were ready. We did this using the onload attribute of the <body> tag, like this;
<body onload="ready()">
And that is really all there is to it! From there it was just a matter of assigning the id attributes where needed, and doing a little bit of housekeeping to the HTML and CSS.
I made some changes to help your sample run a bit better, most noticed is that I removed this part of your CSS
#Profile { position: absolute; top: 0%; right: 7.5em; }
I am not sure if you need it to be positioned like that, but from what it looked like, you wanted to make sure that the Profile section is also where the user finds the Login and Logout buttons. I accommodated by moving the <li> that contained those elements to the last ones in the list, this will ensure they are always rendered in the upper right part of the page, for this example.
The first one is just a sample showing how to run the code when the page is loaded. The second shows where you would put your actual code, but I do not know what your specific javascript is aiming to accomplish, so I commented it out.
Here is the complete working code.
You can remove the line localStorage.setItem("phyreUsername", "Ciel"); or comment it out, to see how the behavior changes based on whether or not a username is found.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript">
function ready(){
// comment this line out to test different behaviors
localStorage.setItem("phyreUsername", "Ciel");
var username = localStorage.getItem("phyreUsername");
var profile = document.getElementById("SignIn");
var signout = document.getElementById("SignUpOut");
if (username == null) {
profile.innerHTML = "Sign in";
signout.innerHTML = "Sign up";
} else {
profile.innerHTML = username;
signout.innerHTML = "Sign out";
}
}
</script>
</head>
<body onload="ready()">
<nav>
<ul>
<li><b>Home</b></li>
<li>Games</li>
<li>Chat</li>
<li>Videos</li>
<li>
Sign In
Sign Up
</li>
</ul>
</nav>
<aside>
<h1>
<b>Page Nav</b>
</h1>
<p style="font-style: italic">This page does not have its own, separate navigation section. Sorry.</p>
<h1>Ads</h1>
</aside>
</body>
</html>
CSS
article, aside, figure, figcaption, footer, header, main, nav, section, summary {
display:block;
}
body {
margin: 0;
}
nav {
width: 100%;
margin: 0;
padding: 0;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
float: left;
width: 20%;
font-size: large;
text-align: center;
border: solid rgb(187,15,23) 2px;
margin-bottom: 0.5%;
box-sizing: border-box;
background: rgb(255, 0, 0);
}
body {
background-color:rgb(75, 75, 75);
margin:0px;
font-family:times new roman, serif;
}
header {
width:100%;
float:top;
}
h1 {
font-weight: bold;
}
aside {
float:left;
width:20%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
margin-right:0.5%;
}
article {
float:right;
width:79.5%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
}
I hope that this gives you enough information to really start making some headway. If you have further questions, please ask.
Is there a more elegant way of creating a JavaScript popup?
<head>
<script>
function myPopup() { window.open( "http://www.google.com", "myWindow", "status=1, height=300, width=300, resizable=0" )
}
</script>
</head>
<body>
<input type="button" onClick="myPopup()" value="popup">
</body>
jQuery UI has a great modal dialog plugin that is easy to use.
<head>
<script>
function myPopup(){
window.open("http://www.google.com", "myWindow",
"status=1,
height=300,
width=300,
resizable=0"
);
}
</script>
</head>
<body>
<input type="button" onclick="myPopup()" value="popup" />
</body>
The simplest, pure html/css.
Using the details element toggling capabilities, and the selector details[open]:
details > p {
padding: 0.5rem;
background: lightcoral;
margin: 0;
display: flex;
flex-direction: column;
}
details[open] {
position: fixed;
width: 33%;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
outline: 10px #000000d4 solid;
transition: all 2s linear
}
details[open] summary::after {
content: '❌';
float: right;
}
<details>
<summary>Project</summary>
<p>Save project<button>Save to file</button></p>
<p>Publish<button>POST</button></p>
<p>Update<button>Update</button></p>
</details>
<details>
<summary>Another Popup</summary>
<p>Powered by html<input></p>
</details>
Depends what you're trying to achieve... you could look at Modal Dialogue forms.
jQuery does this http://jqueryui.com/demos/dialog/ for examples.
That is how I open a modalDialog
function showModalDialog() {
window.showModalDialog('HizmetSuresiUzatma.aspx',
'',
'resizable: no;
scroll: No;
dialogWidth:640px;
dialogHeight:350px');
}
after a button click on a page called HizmetListesi.aspx.I write the JS code on that aspx file then call it with
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "hizmetYenileTahsilat", "showModalDialog()", true);
on aspx.cs file.
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.