GWT Window Redirection to Another Page - gwt

Hi I have this code in my Sencha gXt app which purpose is to change when user click on login button then show another page as follows:
String url = GWT.getHostPageBaseURL() + "MyApplicationFrame.html";
Window.Location.replace(url);
It's Redirecting but in MyApplicationFrame.html showing same login page. I have another class with frames. I want to show the control of that class.
MyApplicationFrame.html
enter code here
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="MyFirstGXT.css">
<link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="myfirstgxt/myfirstgxt.nocache.js"></script>
</head>
<body>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>

Related

(Email API-Dynamic Template) Why does HTML code in actual email look entirely different from preview mode?

I have added a code block on top of my dynamic email template (code given below). It looks perfect in Preview mode, but entirely different when actual email is sent
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: #000000;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<img src="http://cdn.mcauto-images-production.sendgrid.net/1714a3d54002df2a/a0f350e5-2a93-4de4-9d6b-a747ccb068a0/626x240.png" style="width:100%;">
<div class="centered">CA {{first_name}}</div>
</div>
</body>
</html>
What I am trying to achieve is some text in center of an image. Is there something wrong/missing in my code? Kindly guide me on this. Thanks!
Twilio SendGrid developer evangelist here.
That isn't working because position: absolute does not work in many email clients. This is also why it is important to test your emails in email clients after you have used preview mode.
Check out this article on faux absolute position and this article on overlays they should point you in the right direction to fix this up.

Unity webgl screen gets cut off inside of browser

well i've done the space shooter tutorial and run the compiled webgl app in a html file, but I noticed that the top screen area is cut off I can scroll down and see the rest of the game app, the bottom shows as expected and if I press the fullscreen button, obviously the game shows off entirely on the screen but I want to show the entire screen in the browser not in the fullscreen mode, another thing I noticed is that if i zoom out the page to 75%, the screen in the browser shows as expected but if I zoom in to 100%, for example, that's when the top screen area gets cut off, I was thinking of giving a default zoom via js or css, but someone recommended not to depend on that, so what can i do??? please help...
with 100% zoom
with 75% zoom
here is the code for the html file:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | SpaceShooter</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 600px; height: 900px;"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">SpaceShooter</div>
</div>
</div>
</body>
</html>

Front end stack for a webapp featuring 'drag n drop'

I am returning to web development after many years. I did web development before jQuery came along.
Now I see a lot of frameworks to choose from. I see web frameworks (aurelia, ember etc) and then web design frameworks (bootstrap, foundation etc).
My task at hand is too narrow down the technology options for a web app which will provide a certain drag and drop user interface to build workflows.
For drag n drop I have seen, not used, dragulla and interact.js
But not having a hands on experience I am in a confused state. The only certain thing at the moment is the backend which is going to be Django.
Can you please provide some guidance here? My main concern is the ability of doing a smooth drag and drop experience. I would also like to save the state of the flow which is designed by dropping the objects on the canvas, to keep the visual representation of the workflow.
Cheers
A simple and basic drag and drop functionality is provided by jquery ui draggable.
You can see how simple it is to implement:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
} );
</script>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</body>
</html>

TypeError: $(...).perfectScrollbar is not a function

I am trying to createa "Perfect Scrollbar" using this:
https://noraesae.github.io/perfect-scrollbar/
With the most simple possible code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="/css/perfect-scrollbar.css" />
<script src="/js/perfect-scrollbar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery.");
$('#msgid').perfectScrollbar();
});
</script>
<div id="msgid"></div>
And I have the followin error:
TypeError: $(...).perfectScrollbar is not a function
Of course every js/css is pointing to the right direction, if needed you can see it live here:
http://florida.red111.net/a.html
Looks like jQuery is not recognizing the library,
Any ideas?
Thanks in advance.
You might not have the jQuery enabled version. This code worked for me:
<title>Test</title>
<!-- META -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SCRIPTS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/js/min/perfect-scrollbar.jquery.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
console.log('HELLO!');
$('.id-parent').perfectScrollbar();
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/css/perfect-scrollbar.min.css" />
<style type="text/css">
.id-parent {
position: relative;
overflow: auto;
height: 200px;
}
.id-child {
height: 1000px;
}
</style>
</head>
<div class="id-parent">
<div class="id-child">
<h1>Content goes here</h1></div>
</div>
I was also having the same issue. I was calling the perfectScrollbar function before it's declaration. Changing the order worked for me.
I had the same issue. I was using perfect-scrollbar.jquery.js with jQuery 1.6.1. After updating jQuery to 2.1.4, the error disappeared and everything worked as expected!
Try updating jQuery, it solved the problem in my case.
Just update your perfect scrollbar on 0.5.2 version.
It's work for me.

iPhone jQuery mobile+ PhoneGap in XCode.. with multiple html files for multiple views/pages

Till now I am developed an app with jquery mobile in phonegap.
It has multiple views/pages.
how to load multiple pages using jQuery mobile
The following snippets show how you can load different page:
Go to Page2 <!-- for page2 in same html -->
Go to Page2 <!-- redirect to different html -->
or
$.mobile.changePage("#page2"); // for page2 in same html
$.mobile.changePage("page2.html"); // to go to different html file
I have a sample Android Phonegap application in Github which contains two html files with two pages and shows connects them together.
Although it is using Android but the /www file structure will remain same for iOS XCode project also. So you can copy the folder and run it same in xcode. I have tested the setup on XCode with Cordova 1.7.1.
you should add all javascripts and css files in the first page that is loaded first;;
ex: my app the first page is index.html;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<!--
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
</head>
<body>
<div data-role="page" id="indexPage" >
<div data-role="header">
<a href="#" id="btnExit" data-role="button" data-inline="true" data-icon="back" >Exit</a>
<h1>Sample App</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/cordova-1.7.0rc1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</script>
<script type="text/javascript" src="controllers/firstpage.js" ></script>
<script type="text/javascript" src="controllers/secondpage.js" ></script>
</body>
</html>
and fisrtpage should like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div data-role="page" id="firstpage" >
<div data-role="header" data-inline="true">
<a href="#" data-role="button" data-inline="true" id="btnLogOut" data-icon="back" >Log out</a>
</div>
<div data-role="content" data-content-theme="a" style="width:97%;">
the first page
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul style='background-color:#313439'>
</ul>
</div>
</div>
</div>
</body>
</html>
And firstpage.cs
$( document ).delegate("#firstpage" ,"pageinit", function() {
/// add your code here
});