HTML Widgets

I'm having difficulty in understanding how to use the html widget. I've just uploaded a website - http://www.stelphins.co.uk - and want to monitor the number of hits etc on Google Analytics. Google Analytics has provided me with the relevant html code which I have copied, then clicked on the html widget in iWeb, pasted the coding into the box which appears, and then clicked 'apply'.
My queries are two fold - firstly, is there anyway of telling whether the coding has worked or will I just have to wait until Google Analytics becomes active?
Secondly, when I clicked on the html widget, it placed the box in the centre of the page. As it's normal to put the coding towards the top of the page, how do I get it to do this. At the moment I've just put the coding on the 'Home' and 'About Us' pages.

It will be listed as that as you have placed the code for your site in an html snippet, so it might well be listed as widget.
The other way that I add Google analytics to my own site is to use iWebSEO and you can add tags as well, but you do need to do this post publishing - so publish your site from iWeb to a local folder and open your site with iWebSEO and add it all - add in the code and iWebSEO places it automatically. You do have to re-do this every time you alter your site and it means that you need to use iWebSEO to upload or something like Cyberduck to upload too, but it does not take long.

Similar Messages

How do I reset the furthest page read in iBooks from an HTML Widget?

Our training department just got a bunch of iPads and I'm writing some custom HTML widgets for iBooks for them for testing, in-class activities, etc.
On the last page I have a link to clear all the forms and return to the first page. Like this: <a href="ibooks:///#page(1)">Click here</a>
That all works fine but the next time the book is opened it auto-syncs to the FURTHEST page read (the last page with the test on it) instead of the LAST page read (the first page- from the link mentioned above).
Basically we want the link to reset the furthest page read to the first page of the book when they finish the test so that the next person to use the iPad goes to page one automatically.
Does anyone have an idea of how to do something like completely clear the iBook cache?
Much obliged!

This was hand-coded HTML, CSS, jQuery/Javascript with a PHP file on our server that processes answers and emails them to our training director.
I use Brackets exclusively for coding.
Hope this helps you.

Animated .gif not supported inside HTML widget ?

iBooks author reject my HTML widget when there is animated .gif inside,
are gif not supported ?
somebody can confirm ?
and whatthe workaround to have an animated picture inside my HTML Widget,
seems Animated png are not spported too ...
Thanks for reply
daxx

Seem to be unsupported, sorry.
See this thread:
Re: I can't seem to get my GIF files on iBook. Anyone else having this problem?
Try a simple movie in a media widget or keynote slideshow widget instead.

Why do I get a white screen in a HTML widget once it has loaded?

I have created some HTML which works fine in Safari but as soon as I make it a widget it loads fine with the Default image on screen and then it just goes white with nothing more than a x in the top left corner. Any ideas what I a might be doing wrong. I have an info.plist directing to the html, a Default.png which works as it appears as loading but the page just will not display.
Any ideas very welcome.
THanks

Without seeing exactly what you have, troubleshooting is difficult.
You could try here iBooks Author: About HTML widget creation for more guidance. I became unstuck once when I made some HTML in Dreamweaver, but forgot to set the Doctype as the HTML5 one.
You could also look at this https://github.com/TrevorBurnham/iBooks-HTML-Widget-Boilerplate

Html Widget Crashes. How to load only one html widget at a time?

I have a bunch of html widgets which are just tab navigators with html pages inside of them. I must have about 20 of them , mostly leading to google image searches for common searches I tend to do in my work. Instead of constantly searching for these things on google I just click on the tab with the google search for say..."tree images". Its very fast and effecient for me.
The problem is now I have so many that it crashes photoshop, or crashes adobe configurator most of the time if I try to open the panel file. Im guessing that the panel I made tries to load all 20 google image searches at once, instead of only loading the page I click on one at a time. Is there anyway to stop configurator from loading my html widgets that arent clicked on ?

Anyone?

The images in my html widget look blurry!

Hey there, I'm making some html widgets for my book using HYPE. When I insert this into the ibooks the program shows the preview image in crisp high quality but when I preview it on the iBook, the figure looks somewhat blurred. When I tap on the figure to enlarge it and make it interactive, everything looks fine and crisp, it's only the preview window before it's enlarged that doesn't looks so good. I even tried replacing the preview with a separate picture and previewing that but whatever I do, the preview just doesn't look sharp. Does anyone have any solutions I can try?
Thanks,
Caleb

Blurry preview icon for HTML widget
The best way to handle this issue is to make the preview icon transparent and place it over your own custom reference graphic on the page.
1- Place on the page the graphic you will be using as the reference icon for the widget
2- Place your widget on top of the custom graphic icon. Make sure it is in "Front". Also make the preview icon is as small as possible.
3- Click on the preview icon TWICE and make its transparency "0". If you only click the preview icon once the Transparency slider will not become active.
4- Now, when you preview the book, your Widget Link will open your custom HTML Widget and both will display at full resolution.
A bonus result of doing this... Since your link is transparent you can make it as large as needed to make it a large enough touch target.

Custom close / exit button in HTML widget

Hi,
how to set a custom close / exit button in a HTML widget for iBooks Author? I want to replace or hide the standard button in the top left corner.
I already tried some JavaScript but nothing seems to work so far. Where can this button be modified or disabled and how to create a custom one?
Best regards

Hi Ken,
thanks for your reply.
It's good to hear that this button can be changed.
It would be interesting to know how this can be achieved. Any hints?
Best regards

Need to wrap text around HTML widget

Hi,
I'm making a site with pages that contain lots of text and images to go along with the text next to it. The person hosting the site however says that all photos need to be linked through photobucket due to space,so I need to use HTML widgets for the photos, and i want it hosting on this site as opposed to .me. I know that you can wrap text around inserting images from your own computer and you can't wrap it around a widget, so at the moment i've inserted boxes into the text and put the widgets over the boxes but when viewed in a browser everything is out of place.
Is there any other solution? there really should be.
Cheers,
Tom

There is a way to lock the text so that it will appear the same in all browsers regardless of font or platform: apply a drop shadow with 6% opacity to the font which will convert it to an image. When you do you'll see this icon on the text box:
Click to view full size
To see the image indicator you'll have to select the checkbox "Show text imaging indicator" in iWeb's preferences:
Click to view full size
There is a downside to this in that having addition image files on the page can add to the loading time. That may or may not be an issue but if it is you can always remove the drop shadow.
NOTE: The text appears to be 13 pt Lucida Grande which is pretty small and difficult to read IMO. Using Times New Roman 14, a serf font, takes up about the same amount of room and, IMO, is much easier to read. Just a though.
Message was edited by: Old Toad

How to reset an iBooks Author Html Widget?

Hi folks!
I'm using with great pleasure Adobe Edge Animate 1.0 to make Html Widgets for Apple iBooks Author!
In a composition, I've defined this variable:
var track1 = new Audio();
        track1.src = "media/track1.m4a";
        track1.volume = 0.5;
and made it play:
track1.play();
All it works but...what if I want that - when I go out from the widget on iBooks on iPad - the track pauses?
I've coded this in my index.html file inside the widget:
    widget.pauseAudioVisual = function() {
// do this when closing Widget
$.Edge.getComposition(EDGE-114545384).getStage();
track1.pause();
widget.didEnterWidgetMode = function() {
// do this when entering widget
$.Edge.getComposition(EDGE-114545384).getStage();
track1.pause();
... but when I go out form widget the track still plays on....
Any hint?
Many thanks in advance!
Davide

I suspect the file is corrupted in some form.
Which could be a few keystrokes away from fixing or days of BS&T, sorry. There's no way to know, especially from here.
If you're handy with a text editor, crack into the xml and compare it to a behaving file to see if you can spot the issue(s). Or, do the same and carefully graft sections from it to a new file until you manage to manually rebuild.
In the end, tho, I think your time at this point is best spent simply redoing from scratch. If you have further questions, please start your own, unique thread so you can better track, close if solved, etc.
And again, to everyone....if your work has value, be sure to have a tested and reliable backup in place at all times.
Good luck.

How to use Dashcode to make HTML Widgets in iBooks Author?

I'm writing books on iBooks Author, and I got a problem:
I wanna add some HTML Widgets to my books, and I was told I should use Dashcode to make them. So I downloaded the Xcode, but I don't know how to open the Dashcode on my Mac. I really hope someone could give me some lessons, I would be very grateful!

Start here: iBooks Author: About HTML widget creation

Html widget for "ibooks author"

Hi,
I there a possibility to create a contact form in html to add to the html widget of "ibooks author" with an Adobe product?

Hi,
With Adobe FormsCentral, you can embed the HTML form into a HTML page.
Please check this document and see if the information/fuctionality described will work for you:
http://forums.adobe.com/docs/DOC-1991
Thanks,
Lucia

Refresh rate for scroll area in html widget (iBooks Author)

So, I am finding that within the html widget, the refresh rate of a scrolling area is lagging.
As someone scrolls, the scroll window is black before the content catches up and is viewable.
Any recommendations to fix this problem?

This is stripped down test code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=1024px" />
<title>Test Scrolling Area</title>
<style type="text/css">
 body { overflow: hidden; background: #000; margin: 0px;}
 #section { position: absolute; }
 .bkgrd { position: absolute; }
 .list { width: 348px; height: 471px; position: absolute; top: 108px; left: 8px; overflow: scroll; -webkit-overflow-scrolling: touch; }
 .fill { width: 348px; height: 471px; overflow-x: hidden; overflow-y: scroll; background: transparent; font-size: 1em; font-family: "Optima" sans-serif; color: white; }
 .fill p.lineup { font-weight: bold; color: #fff; margin: 0;}
 .fill .head { font-weight: bold; color: #d40000; }
 .fill .normal { font-weight: normal; color: #fff; margin: 0;}
 .fill .head { font-weight: bold; color: #d40000; }
 .fill .date { color: #d40000; }
 .fill .city { font-weight: bold; }
</style>
</head>
<body>
<div id="section">
 <div class="bkgrd">
 <img src="images/bgrd.jpg" width="1024px" height="auto" />
 </div>
 <div class="list">
 <div class="fill">
 June 
 00 City, ST Really Long Venue Name 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Really Long Venue Name 
 00 City, ST Really Long Venue Name 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Really Long Venue Name 
 
 June 
 00 City, ST Really Long Venue Name 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Really Long Venue Name 
 00 City, ST Really Long Venue Name 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Venue 
 00 City, ST Really Long Venue Name 
 
 
 </div>
 </div>
</div> 
</body>
</html>

What video format is supported when creating a HTML widget?

It doesn't support mp4, m4v amd mov. I tried video/mp4, video/m4v and video/quicktime, they don't work. Anything wrong with the following code. Pls help. Thanks.
<video id="sourcevid" autoplay="true" loop="true">
<source src="00048.mp4" type="video/mp4" />
</video>

Thanks for the tip, Rycankun. I just tried changing my m4v ext to mp4 and the video worked just great in an HTML widget with a HTML5 video tag. The video opens in a new page the same way any html widget does with the video centered on the page -- just what we were looking for.
I commented on your other post about HTML widget and left some additional info on encoding videos so I thought I'd paste that same info here as it's more relevant to this thread:
A few thoughts about encoding -- we started out using the documented Quicktime 10 > Export > Format iPod touch & iPhone 3GS but there's no control over the video/audio compression settings. We then went to Compressor and used a modified version of the SD or HD preset for Apple devices - had more control but still weren't able to get the files as small as we needed at the quality we desired. We finally have settled on using Handbrake to create our mp4 using the iPhone & iPod Touch preset and adjusting the Constant bitrate RF value and audio settings to get the quality we desired. The resulting mp4 is not directly useable in iBA but it's easy to convert the mp4 container to a m4v contrainer using Subler (for Mac) to transcode to Main @ 3.1 profile. Transcoding with Subler doesn't re-encode the video or audio - those tracks just pass through and Subler converts the movie container to the selected Main @ 3.1 profile. There's probably a way to create the m4v directly from Handbrake with Main @ 3.1 profile but so far the closest I've gotten is Baseline @ 3. Anybody have any thoughts on this?

Can a HTML Widget access the content of a iBook page?

I am writing a HTML Widget that will present more information about the content where it is located by accessing a database. To do so, it needs to access the content of the page where it located, or, at least, the page number. Is there a way to do this?
Sure I can 'hard code' the info in the widget's javascript and have one different widget per page/content, but that will be difficult to maintain and deploy.
Thanks in advance.

Hi KT!
Thanks for your help.
In the same line of thinking I would like to ask if it is posible to access, via javascript, the propeties of the widget so that, in thesis, use the description or title property to pass info to the script about content or page number.

Calling .jsx functions from .js files using HTML Widget

Hi there,
I'm using the HTML Widget in a panel to load an html file along with some javascript files. Is there a way to call .jsx Adobe functions from a .js file? I've successfully been able to call an alert() of a .jsx file from the html but have not been able to do anything further than that.
For example:
.js file:
var x = foo('bar');
alert(x);
.jsx file:
function foo(x) {
    alert('This works');
    var dir = $.fileName;
    alert('This doesn't work because of $.fileName');
    return 'Directory: ' + dir;}
So, ultimately I would like to have an HTML Widget in my panel, press a link that will call fiddle with the open document and layer, then return some values back to the HTML Widget's js file.
Thanks

To the client browser, JSP is just HTML. Adding JS makes it DHTML, which provides the kind of applet/web page interaction you were referring to in the first post. Note that the applet and JS are both being run 'client side', whereas the JSP is generated 'server side'.
A JSP environment can in some cases replace the JS (e.g. submit a form with values to the server, and use JSP to write the resulting applet page). This can be handy in the event that the end user does not have JS enabled, in that you can offer a 'pure HTML' solution. OTOH though, it is slower (requires a round trip to the server to do what the user asked for) and most users prefer the quicker 'click and see' philosophy of the Java/JS combo.
So, my advice to you is that JSP adds very little value, here.

Several html widgets I created contain the javascript libraries. Is there a way to create a common javascript library that can be accessed by all my widgets? I'm trying to reduce the size of the ibook I'mm creating.

Several html widgets I created contain the javascript libraries. Is there a way to create a common javascript library that can be accessed by all my widgets? I'm trying to reduce the size of the ibook I'm creating.

Seen this thread?
Can javascript libraries be shared across widgets?

HTML Widgets

Similar Messages

Maybe you are looking for