Scrolling inside HTML widgets

Hey everyone,
After successfully making my HTML widgets large, I was wondering if there was any way to easily allow scrolling inside of them, like you would have in Safari. I am mostly using them as little views into other sites, so it would be great to be able to scroll around. In the present iteration I am incorporating a small Wolfram widget that lets students play with trigonometric functions, but the output gets cut off because the widget is too small. It'd be fine if the students could just scroll down, but I can't seem to be able to do that. Any suggestions?

OK, the solution by Tars Tarkis worked great- in iBooks Author. But the scrolling does not work correctly in iBooks. I was able to get horizontal scrolling to work, sort of. No vertical scrolling in iBooks, even though scrolling in both directions worked fine in Author.
I am trying to embed a Google Docs form. The embedding with a Dashcode widget works great, but the form is long enough that vertical scrolling will be necessary. Again, Tars' solution worked in Author, but not in iBooks.
Any other suggestions for making a HTML widget scroll correctly?

Similar Messages

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.

Mailto links inside html widget

Did anyone successfully inserted a mailto link inside an html widget?
I tried this <a href="mailto:[email protected]">Send mail</a> but nothing happens when I click it on the ipad, any idea ?
Thanks.

I looked inside a ibook author file after putting in a keynote with the mailto link that worked on the ipad. Inside the folder there is a *.JSON file that lists the mailto as follows:
"hyperlinks":[{"url":"mailto:put%2520email%2520here?subject=Notes"
ie- I left the email link as "put email here" and the slide is called Notes
I am not sure if the formatting of the mailto is also an issue or the fact that it is in a JSON..

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>

Html widget within the textfield

how can i insert a html widget ( in this case a soundcloud audioplayer) within the textfield, so that if i write a new post, the audioplayer moves along down with the text that i have written? does it make sense.

But when i move the text down the Soundcloud player does´nt move along
html snipet widget doesn't move along with the text box because you can't insert html snipet widget inside text box or other object, it just float on top of the text box.
however, you can move html snippet with javascript clonePosition method (it's part of Prototype.js)...
by insert a text box inside a text box as a placeholder then clonePosition clones the inside text box's position for html snippet. have a look (scroll down):
http://temp.cyclosaurus.com/revolving/TextWrapHTMLSnippet/ClonePosition.html
and here is without clonePosition:
http://temp.cyclosaurus.com/revolving/TextWrapHTMLSnippet/NotClonePosition.html
this method is very precise when you have a long text box (as in my example), because each browser has different way of rendering content and things will be out of wack (especailly with firefox).
note that my javascript won't move html snippet while in iweb, the result can only be seen in a browser after publishing.

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?

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.

IWeb HTML Widget Code

Hi, I have a couple of HTML widgets on my site (they are games) that aren't displaying correctly. My other HTML widgets work great but these don't. Here's a link to the games page where you can pick a game and diagnose my problem. http://imasterweb.net/Site/Games.html

This is the code:
<iframe height="XXXpx" allowTransparency="true" frameborder="0" scrolling="no" style="width:XXXpx;border:none" src="URL TO ITEM TO BE EMBEDDED"></iframe>
OT

HTML Widget zooming effect

Hi,
I am trying to make my HTML Widgets in my iBooks Author book to being fired up when user taps on a small button in the side of the book.
For that sake, I place my widget first, then I drag my small button graphic to the widget area so it becomes the poster image of it.
Problem is that when I test my book and I tap on the button, there's always a "zooming effect" of the button prior to execute the Widget itself, that enlarges the little png for a little while, so it shows the big pixel jagged image. I don't like this effect, is there any way to get rid of it?
Thank you,
Ignacio

I am just using finally this workaround:
1) Place the HTML widget as usual, but without poster image, nor Title, Background... so it is sort of a "transparent hot spot" in the book
2) I draw a figure with text inside, as a button, and organize it so it lies below this transparent widget
When I run the book in the iPad, I see a crisp, clear button that I cap tap and the Widget plays at full screen without that annoying jagged PNG zoomed in.
Same thing if you use an image button rather than a figure.
Greetings,
Ignacio

Do same files in html widgets get shared in a book?

If there are multiple html widgets inserted in iBooks and use the same underlying js/css files do they get shared somehow when published or does each widget gets it own copy? We are worried about the size as we will have multiple html widgets using the same underlying files.

Each carries own afaik.
Sames aren't linked to one source inside the xml (you can dig into the book file to see if you like) - if they did and you deleted the main, they'd all go south...ouch.

Background color in HTML widget is a totaly different color in IE than what

Background color in HTML widget is a totaly different color in IE than what is shown in safari. http://web.mac.com/bmoody/Royalfest/5k.html .The scrolling text background is beige in safari and Firefox but blue in IE6. Any insite to what I can change or what the issue is other than microsoft would be greatly appreatiated

Welcome to the Apple Discussions. Unfortunately this about says it all:
The scrolling text background is beige in safari and Firefox but blue in IE6.
You could try an image file of the color you want to have and see if it will be rendered any truer by IE. Be sure the file contains the sRGB color profile that most web sites use and it should render the same on all browsers except for possibly the brightness.
OT

Warning about drop-down html widget

There's a widget to add a drop-down menu on iWeb pages that's available on this site:
<http://allaboutiweb.com/index.php/2009/04/add-a-drop-down-menu-to-your-iweb-pag es/>
It works! However, you can't change the color (pale blue) or the text style (small sans serif). When I tried and couldn't, I decided to ditch the widget.
Then I found out that I COULDN'T DELETE THE DROP-DOWN widget. It seems to have latched on to a Statcounter html widget in a way that I can't see it in the Statcounter code.
When I publish the page, the part of the drop-down menu I see is whatever fits the width of the widget window for Statcounter.
(Think of a medicine cabinet with two sliding doors. You can see the inside of cabinet if the door's not closed. Now picture the inside of the cabinet as your drop-down menu and the doors as your page background. It's as if the widget box is an open door. You can make it small, but you still see part of the drop-down menu behind it.)
I finally hid the entire widget behind a shape with 100% color fill.
Does anyone have a more elegant solution to this problem? And is there a drop-down widget out there that will allow you to change its style? Thank you.

Let me show you what I mean. Here's the html for the statcounter widget from a page where there's no problem (I have only changed the security and project IDs).

<script type="text/javascript">
var sc_project=0000000;
var sc_invisible=1;
var sc_partition=58;
var scclickstat=1;
var sc_security="aaaaaaaa";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript></noscript>

Here's the code from the page where there is a problem.

<script type="text/javascript">
var sc_project=0000000;
var sc_invisible=1;
var sc_partition=58;
var scclickstat=1;
var sc_security="aaaaaaaa";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript></noscript>

See? Identical.
Now here's the html for the drop-down menu:
<FORM NAME="URLlist">
<SELECT NAME="droplist">
<OPTION SELECTED="SELECTED" VALUE=" ">Select a page.</OPTION>
<OPTION VALUE="http://www.thefirstURL.com">A Page Name</OPTION>
<OPTION VALUE="http://www.anotherURL.com">Another Page Name</OPTION>
<OPTION VALUE="http://www.anotherURL.com">Another Page name</OPTION>
</SELECT><INPUT TYPE="BUTTON" VALUE="Go!" ONCLICK="GotoURL(this.form)">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</FORM>
So then--How would you get rid of the drop-down html code when it isn't visible anywhere on your iWeb pages?

Get app.preferencesFolder, Folder.userData or similar in html widget (CS5)

I want to find the path to a writable location inside a html widget, preferrably the path pointed to by app.preferencesFolder or Folder.userData. The current user's home directory could also work.
Is there a way to communicate these paths back to the panel (without running as administrator)?
As a workaround, would it be possible to have Extension Manager write that path to a file in the assets folder (which would be readable from the panel...)?
Note: that my question is for Photoshop CS5. I know how to get return values with Configurator 4.
All ideas are welcome. Cheers.

I want to find the path to a writable location inside a html widget, preferrably the path pointed to by app.preferencesFolder or Folder.userData. The current user's home directory could also work.
Is there a way to communicate these paths back to the panel (without running as administrator)?
As a workaround, would it be possible to have Extension Manager write that path to a file in the assets folder (which would be readable from the panel...)?
Note: that my question is for Photoshop CS5. I know how to get return values with Configurator 4.
All ideas are welcome. Cheers.

Is it possible to link out to external URLs from within an HTML widget, and have them open in Safari?

I can add links within the iBook content, but if they're added inside an HTML widget, the new page loads *inside* the widget itself, with no ability to navigate back etc.
Is there any way to have external links inside an HTML widget open in Safari?
Thanks,
Mike

Those links need to be local the the book, sorry.
As always, feel free to use the 'Provide iBooks Author Feedback' menu item for features you'd like added in the future, etc.
http://www.apple.com/feedback/ibooks-author.html

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.

Scrolling inside HTML widgets

Similar Messages

Maybe you are looking for