I'm trying to build an editor for my webapp which has an editable hierarchy and I'm thinking along the lines of some organizational chart visualization (or library) that has an open API to dynamically manipulate the hierarchy. My requirements are that it has to be offline so Google Visualization is out and I've spent some time tweaking with Basic Primitives to find out that it doesn't provide method calls as simple as "get selected item". I've spent a few days searching to no avail so it's quite frustrating. Does anyone know of any simple widgets or libraries out there I could use? Thanks!
Let me know if the following snippet will get you started. Just copy and paste it in HTML file
<html>
<head>
<title>GetOrgChart</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript' src="//www.getorgchart.com/GetOrgChart/getorgchart-1.1/getorgchart.js"></script>
<link rel="stylesheet" type="text/css" href="//www.getorgchart.com/GetOrgChart/getorgchart-1.1/getorgchart.css" />
<style type='text/css'>
html, body {margin: 0px;padding: 0px;height: 100%;overflow: hidden;}
#people {width: 100%;height: 100%;}
</style>
</head>
<body>
<table id="peopleTable" style="display: none;">
<tr>
<th>id</th>
<th>parent id</th>
<th>Name</th>
<th>Title</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td>Lesley Holmes</td>
<td>CEO</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>Colin Patricia</td>
<td>Manager</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>Derek Cork</td>
<td>Manager</td>
</tr>
</table>
<div id="people"></div>
<script type='text/javascript'>
$('#people').getOrgChart({
dataSource: document.getElementById("peopleTable")
});
</script>
</body>
</html>
Related
I am supposed to send out the newsletter for a local club. Formatting in HTML appears fine, but if user views the email in a web based client (e.g. yahoo, gmail, etc.), the image also appear separately as an attachment; even though I am using a URL to reference the image. How can I avoid having the image appear as an attachment? Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Club News</title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #FAFAFA;width: 100%;">
<center>
<table id="table1" style="background-color: #ffffff; border-bottom: 0px none; width: 600px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img style="position: relative; right: 0; bottom: 0;border: 0px none; line-height: 100%; outline: none; text-decoration: none; display: block; float: left;" title="Club1" src="http://www.clubswebsite.com/assets/img/clublogo.png" alt="logo" align="center"/>
</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
One solution you can use, if your image is relatively simple (such as clip-art or logo), is to convert the image to pure HTML. You can find tools that convert the bitmap to an HTML table, coloring the cells in the pixel's color. Some convertors (here's one that I wrote - source code here) apply RLE compression to make sure that HTML isn't too large.
Note, that even with RLE this greatly increases the image size (e.g., a 5kb PNG might grow to be 80kb HTML) but AFAIK, as long as you keep the e-mail size under ~120kb it displays well on all e-mail clients.
I am new to GWT and I am probably overlooking something simple. So what I am trying to do is in my html page I have created a layout for my page in the body tags:
<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">
<!-- Header row -->
<tr style="height: 25%;">
<td colspan="2" id="header"></td>
</tr>
<!-- Body row and left nav row -->
<tr style="height: 65%;">
<td id="leftnav"></td>
<td id="content"></td>
</tr>
<!-- Footer row -->
<tr style="height: 10%;">
<td colspan="2" id="footer"></td>
</tr>
</table
I have set Ids to everything so that I can get these items in the Entry point. So in my Entry point I try to populate these fields like this:
RootPanel.get("header").add(new Header());
RootPanel.get("leftnav").add(new NavigationMenu());
RootPanel.get("footer").add(new Footer());
However I have learned through debugging that the RootPanel.get("header") is returning null. I am sure the rest are returning null as well, it is just crashing before it gets there. To my understanding this is the right way to do things, however I must have missed something. Please let me know what I am doing wrong or if you need more info. Thanks
Usually using div tags will work better than other types of elements such as <td>. Like the comments say, you should try to just use one RootPanel and then add then create your layout with GWT panels.
A very good way to layout a page like an HTML page is by using UiBinder. You can write out the layout using and XML language very close to HTML and at the same time use all of the useful GWT widgets. It's very useful to use and learn if you'll be building apps with GWT.
Try to use div tags in HTML:
<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">
<!-- Header row -->
<tr style="height: 25%;">
<td colspan="2"><div id="header"></div></td>
</tr>
<!-- Body row and left nav row -->
<tr style="height: 65%;">
<td><div id="leftnav"></div></td>
<td><div id="content"></div></td>
</tr>
<!-- Footer row -->
<tr style="height: 10%;">
<td colspan="2"><div id="footer"></div></td>
</tr>
</table
I am developing a phonegap app for iOS. The main screen slides up when i double tap at the bottom of the screen. This only happens in the Portrait mode.
I have tried disabling the scroll.. but that hasn't worked. This is my html code :
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0 " />
<body>
<div class="mainScreenContent" align="center">
<table>
<form>
<tbody>
<tr >
<td>
<button type="submit" class="largeButton grayGradientEffect">Button 1</button>
</td>
</tr>
<tr>
<td >
<button type="submit" class="largeButton grayGradientEffect" onclick="">Button 2</button>
</td>
</tr>
</tbody>
</form>
</table>
</div>
</body>
Here are Screen Shots:
This is what the main screen looks like:
This is what it looks like after double tapping on the bottom:
Thanks everyone for your help.
If you are using jquery, intercept this event.
Solution by Johan Sundström below
https://gist.github.com/2047491
To use, add the above to your javascript. Then intercept on whichever element is appropriate.
e.g.
$("body").nodoubletapzoom();
Can you try adding the following to your meta viewport query?
user-scalable=0
I'll post an example and wanted to know what are the solutions for the
selenium IDE operate in "modal" windows without stop the script. I will
provide an online example and the script that I built: Detail does not
work ...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base"
href="http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/showModalDialog2.htm" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<td rowspan="1" colspan="3">New Test</td>
</tr>
</thead>
<tbody>
<!--//Open the application and wait to load the combobox-->
<tr>
<td>open</td>
<td>/workshop/samples/author/dhtml/refs/showModalDialog2.htm</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>name=oHeight</td>
<td></td>
</tr>
<!--//Insert height value and click "Push To Create" button-->
<tr>
<td>select</td>
<td>name=oHeight</td>
<td>label=250</td>
</tr>
<tr>
<td>click</td>
<td>css=input[type="button"]</td>
<td></td>
</tr>
<!--//Wait for the loading the modal page title and check the text -->
<tr>
<td>waitForElementPresent</td>
<td>//h1</td>
<td></td>
</tr>
<tr>
<td>verifyTextPresent</td>
<td>This is a modal dialog box. This page is not designed to do
anything except display the dialog box arguments.</td>
<td></td>
</tr>
<!--//close the screen and verify that the previous screen is loaded from the height field-->
<tr>
<td>close</td>
<td></td>
<td></td>
</tr>
<tr>
<td>selectWindow</td>
<td>null</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>name=oHeight</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Web applications don't actually have modal dialogs, with the exception of browser dialogs (e.g., "Save file as ...") and JavaScript's window.alert(), window.prompt(), and window.confirm(). Everything else is either a separate window (as in traditional web apps) or an overlay that blocks access to the elements behind it (as in modern, AJAXy, web apps).
In the case of a separate window, you need to waitForPopUp ...windowname... and then selectWindow ...windowname..., then selectWindow (without a name) to switch back.
In the case of an overlay, you can address it just like anything else in the page, but you may be surprised what the element locators may be (or maybe you won't be). Use Firefox's "XPather" or "Firebug" add-on to figure out the correct XPath expressions.
The following markup when viewed in Safari on Iphone and Ipad displays the body background color for 1 pixel between the two tables. What is this and how do I stop it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
background:#000;
}
table{
background:#ffffff;
width:50px;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>a</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>b</td>
</tr>
</table>
</body>
</html>
I've taken the liberty of dumping your markup to a file on my server:
Original markup
Alternative markup
There is no actual gap on my iPhone, but... the resizing algorithm does leave some space between the tables from time to time while zooming in/out.
This almost certainly has to do with some math not perfectly aligning to the pixel and getting rounded to match the nearest horizontal line. There is not much you can realy do about this, unless you resort to surrounding the tables with an inline-block that has the same background-color set like in the alternate file linked above.
On my iPhone the alternate version never displays any black lines between the tables. Be aware though that now the next element will be next to the inline-blocked div instead of underneath the tables. I'll leave solving that upto the reader. hint: css clear attribute.
Humm.. Have you updated Safari?
On Safari 5 I have no issue with this html...