I created a basic HTML5 page with some canvas drawing and third party meter gauge.
The page works well in browser.
I created a Windows 7 gadget out of it like given here: http://blog.brandoncopley.com/?p=69
But the gadget shows only white color.
It seems like no javascript s getting executed or canvas drawing is done.
I have tried following option to resolve the issue: http://www.sevenforums.com/tutorials/140358-gadgets-not-displaying-correctly-windows-7-fix.html
The Reset_gadgets.bat file also did not help.
All other gadgets are working good.
The gadget.xml looks like below:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>simple</name>
<version>1.0.0.0</version>
<author name="MaxRecursion">
<info url="maxrecursion.wordpress.com" />
<logo src="logo.png"/>
</author>
<copyright>© MaxRecursion.</copyright>
<description>This is a simple gadget.</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="index.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
I am new with the Windows 7 gadgets, what can be the issue.
Gadgets run on IE7, so they don't support canvas. Excanvas (http://excanvas.sourceforge.net/) seems to work fine, and it's very easy to use. Just download the .js, put it in a folder with your gadget, and call it from the html before you use anything canvas related. That's it, it works its magic by itself, and the canvas tag will work the way it's supposed to.
Related
I am trying to adapt and port an old project to PhoneGap.
So far, the project works properly under Android browsers but it doesn't with PhoneGap since it doesn't adapt the content to fit the whole screen. It always leave a blank space and that's not what I would want. PhoneGap doesn't seem to pay attention to my viewport property in the metatag I am using.
I have been doing some tests to find out the problem without any kind of result.
For example, the following test just contains two files: index.html and config.xml
It contains a DIV that is 276 pixels width and I would want PhoneGap to make it fit the whole page as the Android browsers do.
By the way, I am using PhoneGap Build web site to build this test online.
Here is the content of the index.html file (I am not using DOCTYPE to make it simpler but even using it won't work properly):
<html>
<head>
<meta name="viewport" content="width=276, user-scalable=yes" />
<title>Title</title>
</head>
<body>
<div style="width:276px; background-color:orange;">I want to make this div fit to the page</div>
</body>
</html>
And this is the content of the config.xml file (note the preference EnableViewportScale set to "true", but even being set to "yes" won't work):
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
versionCode="10"
version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>PhoneGap Example</name>
<description>
An example for phonegap build docs.
</description>
<author href="https://build.phonegap.com" email="support#phonegap.com">
Hardeep Shoker
</author>
<preference name="EnableViewportScale" value="true" />
</widget>
So that is. Is there anything that I am doing wrong? How can I archieve what I am trying to do? I am sure it should have a pretty simple solution but I can't find it right now.
Thank you very much in advance and sorry about my English, it's not my native language.
Cheers,
Joan
Try
<meta name="viewport" content="width=276, user-scalable=1" />
or
If you add the following lines to your onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
or
try using iScroll 4 (http://cubiq.org/iscroll-4)
Pinch / Zoom
I almost gave up, when I stumbled upon this post:
http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html
Basicly I modified my default AndroidManifest.xml entry from:
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
to
<uses-sdk android:minSdkVersion="7" />
You may play with the version a lil bit. Just don't target version 19 I guess. Plus you may add
target-densitydpi=device-dpi
target-densitydpi=medium-dpi
...
To your meta viewport tag, depending on what you're trying to do.
EDIT:
Ok, here's an exploanation: http://developer.android.com/guide/webapps/migrating.html
Since Android 4.4 (KitKat), WebView has changed with new one based on chromium. By having target version below 19, webview is set in quirks mode.
Note: If your targetSdkVersion is set to "18" or lower, WebView
operates in "quirks mode" in order to avoid some of the behavior
changes described below, as closely as possible—while still providing
your app the performance and web standards upgrades. Beware, though,
that single and narrow column layouts and default zoom levels are not
supported at all on Android 4.4, and there may be other behavioral
differences that have not been identified, so be sure to test your app
on Android 4.4 or higher even if you keep your targetSdkVersion set to
"18" or lower.
PP: Using LG L70 phone.
I have created one html5 game.
As per bb10 webworks guidelines I have made config.xml file.
my game is working fine in ripple emulator .But when i tested it in BB10 Dev Alpha Simulator only black screen appears..
what is issue??
I have uploaded my code here.
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.5" id="mani" xml:lang="en">
<author href="http://www.example.com/"
rim:copyright="Copyright 1998-2012 My Corp">My Corp</author>
<name>mani</name>
<icon src="logo.png"/>
<content src="index.html"/>
<feature id="blackberry.identity" required="true" version="1.0.0.0"/>
</widget>
And I added script tag in index.html file.
Rest thing is untouched.
index.html
<script src="local:///chrome/webworks.js" type="text/javascript"></script>
If you are getting a black screen, then I expect there is a runtime error that has prevented your game from starting and/or
Here are instructions on how to use remote-web inspector. I recommend connecting, opening the console panel and reloading your app. It should tell you right away if there is an error:
https://developer.blackberry.com/html5/documentation/web_inspector_overview_1553586_11.html
Do you have any remote content being used in your app? If so, I suspect the application does not have permission to access that content as I don't see any <access> elements in your config.xml. Make sure you properly whitelist all remote URLs: https://developer.blackberry.com/html5/documentation/access_element_834677_11.html
I want to use HTML5 <video> tag inside a JSF/Facelets page. I tried the following, but it does not work.
<h:body>
Hello from Facelets
<br />
<section id="reproductor">
<video src='http://minkbooks.com/content/trailer.mp4' >
</video>
</section>
<h:link outcome="welcomePrimefaces" value="Primefaces welcome page" />
</h:body>
JSF is in the context of this question merely a HTML code generator. So, JSF is actually completely irrelevant in the concrete problem. You would have had exactly the same problem when using e.g. JSP, ASP, PHP etc to produce HTML code, or even when using a static HTML file.
Coming back to your concrete problem, provided that your browser supports the HTML5 tags in question, then your concrete problem is simply caused because you're trying to stream a video cross-domain. This is not supported by <video> nor <audio> tag. You need to provide the video file from your own domain (i.e. put the file in the very same webapp as where your JSF file is).
Assuming that you've put a copy of the video file in the same folder as the JSF file, this should do:
<video src="trailer.mp4" />
In addition of #BalusC response above, dont forget to map the file type for your static content in the deployment descriptor (web.xml). Here are the lines:
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.mp4</url-pattern>
</servlet-mapping>
I am writing a simple HTML file. I would like to embed an XML in it. I do this using iFrames. In IE9 the XML is formatted (though it shows activeX warnings). If I run the same code in IE10 I do NOT see the formatting at all. I see only the XML content. However if I open the XML separately I am able to see the formatting.
How do I get the formatting in IE10 inside iframe? Thanks in advance.
Here is my HTML code
<html>
<head>
<title>Test Code</title>
</head>
<body>
<iframe src="sample.xml"></iframe>
</body>
</html>
And my sample.xml is
<?xml version="1.0" encoding="utf-8" ?>
<test>asd</test>
--
Update: Switching the browser to IE8 Standards mode works.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Is this the only solution or is there an IE10 based better solution for this?
We just had this problem, and found a bunch of questions like this with no answers! Finally we found the answer from Microsoft here: System working as designed :-(
From our friends at Microsoft:
As of IE9, IE has had native support for rendering XML content
including XHTML and SVG. To avoid conflicts with this native support,
the auto-generated tree view for XML was scoped to only apply to
top-level documents. Thus, when XML content is hosted inside an
IFRAME, a tree view will not automatically be generated by default.
However, when the browser is running in Compatibility View, IE tries
to more closely emulate the behavior of previous releases, which is
why the tree view is still displayed under these circumstances.
A php file can read the xml file then compile the xml coloring and output the html code, maybe.
I want to display EXCEL sheet embedded in IE with plain HTML. I have gone through other questions on stackoverflow but could not find any useful one.
Here is my html file
<html>
<body>
<object width = 900 height = 500 id = "excel" data="Issues Identified.xlsx" classid = "clsid:0002E55a-0000-0000-C000-000000000046" VIEWASTEXT >
<param name="DisplayTitleBar" value=true />
<param name="DataType" value="CSVURL"/>
<param name="AutoFit" value="0"/>
<param name="DisplayColHeaders" value="1"/>
<param name="DisplayGridlines" value="1"/>
<param name="DisplayHorizontalScrollBar" value="1"/>
<param name="DisplayRowHeaders" value="1"/>
<param name="DisplayTitleBar" value="1"/>
<param name="DisplayToolbar" value="1"/>
<param name="DisplayVerticalScrollBar" value="1"/>
<param name="EnableAutoCalculate" value="0"/>
<param name="EnableEvents" value="0"/>
<param name="MoveAfterReturn" value="1"/>
<param name="MoveAfterReturnDirection" value="0"/>
<param name="RightToLeft" value="0"/>
</object>
</body>
</html>
Unfortunately I do not have control on the excel files that are generated. If I would have control on the excel files I could have have saved them as web pages and included in the browser. Now I doubt if by any way through above code I can embed excel sheet directly in the web browser. There are many links on web but found not find one which directly loads a excel sheet in to the browser. The ones that are there are using javascript to generate graphs and all instead of displaying an excel sheet which is already present.
When I try to load the excel sheet through above code. I get the following screen
When I use IFRAME the excel sheet is not shown as embedded file but prompting to download or open. I want it to open embedded in the internet explorer.
Any help much appreciated.
Thanks
Depending on if you want it to automatically update or not, you can just save the excel spreadsheet as a PDF then embed the PDF as an object -
It appears you don't have a PDF plugin for this browser, but you can
click here to
download the PDF file.
It's the best way I have found for uploading.
You can upload it into Google Docs, and embed the Google Spreadsheet as detailed here: http://support.google.com/docs/bin/answer.py?hl=en&answer=55244
Upload your file to Skydrive and then right click and select "Embed". They will provide iframe snippet which you can paste in your html. This works flawlessly.
Source: Office.com
Like you, I cannot get MS Office Web Components to work. I would not consider Google Docs since Google seems to think they own anything that passes through their hands. I have tried MS Publish Objects but the quality of the generated html/css is truely awful.
The secret of converting an Excel worksheet to html that will display correctly on a smartphone is to create clean, lean html/css.
The structure of the HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
HEAD
</head>
<body>
BODY
</body>
</html>
There are useful html elements that can replace "HEAD" but it is not clear to me how you would generate them from an Excel worksheet. They would need to be added separately.
The obvious output for a worksheet or a range is an html table so the following assumes BODY will be replaced by an html table.
The structure of an html table is:
<table TABLE-ATTRIBUTES>
<tr TABLE-ROW-ATTRIBUTES>
<td TABLE-CELL-ATTRIBUTES>CELL-VALUE</td>
More <td>...</td> elements as necessary
</tr>
More <tr>...</tr> as necessary
</table>
Include as few TABLE-ATTRIBUTES, TABLE-ROW-ATTRIBUTES and TABLE-CELL-ATTRIBUTES as possible. Do not set column widths in pixels. Use css attributes rather than html attributes.
A table attribute worth considering is style = "border-collapse: collapse;". The default is separate with a gap around each cell. With collapse the cells touch as they do with Excel.
Three table attribute worth considering are style="background-color:aliceblue;", style="color:#0000FF;" and style="text-align:right;". With the first, you can specify the background colour to be any of the fifty or so named html colours. With the second, you can specify the font colour to be any of 256*256*256 colours. With the third you can right-align numeric values.
The above covers only a fraction of the formatting information that could be converted from Excel to html/css. I am developing an add-in that will convert as much Excel formatting as possible but I hope the above helps anyone with simple requirements.
Office 365 and OneDrive offer an embed feature. You can then include via IFrame.
I found that setting the iframe height and width to 100% works best. That way on ipad or any device for that matter it fits the screen.
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="embed url" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
You can use iPushPull to push live data direct from an Excel session to the web where you can display it in an IFRAME (or using a WordPress plugin, if applicable). The data in the frame will update whenever the data on the sheet updates.
The iPush(...) in-cell function pushes data from Excel to the web.
This support page describes how to embed your Excel data in your website.
Disclaimer - I work for iPushPull.
Note that Office Web Components are dead, see does-office-xp-web-components-compatable-with-windows-7. OWC was discontinued from XP onward for security reasons.
Since then, and only recently, Microsoft pushes Excel Web App as alternative (a poor alternative IMHO)
As a side note: Microsoft also deprecated the other way round, i.e. embedding the webbrowser control into an excel sheet, see adding-web-browser-control-to-excel-2013.
As an alternative Microsoft offers Office Apps (a very limited alternative with respect to interfacing Excel and IE)
Maybe you might try the web to send the file with proper Content-Type header and with the header like this:
Content-Disposition: inline; filename="xxx.xxx"
Here is a discussion about these headers: How to force files to open in browser instead of download (pdf)?
Or just search on google for content-disposition.
If you are making a link <a href='file.htm'>link name</a> or place an iframe tag, it will show the excel data on web but you can't make changes to it.
Every time you make changes in the Excel sheet you have to save again with the same name so it will replace file, and will show the result. The <a> tag file name extension should be .htm
from here you can easily convert your excelsheet data into the html view
Try this it will work...
<iframe src="Tmp.XLS" width="100%" height="500"></iframe>
But you can not save changes that you have done...It is used only for displaying purpose..