Widgets in iWeb - HTML widgets - code snippets
Here's another sort of experimental page that I've been messing about with in iWeb for a week or so. The original experimental page is located here. I already have a pop-up movable google search widget across the whole site - try clicking the Search link at the bottom of each page. I was wondering if I could extend this to other widgets over the web browser page.
View the source code of the page to see what is going on. I've tried to add comments to the code so you can see what I’ve done. I used MassReplaceIt to add the code the to published iWeb page.
Known Issues
There are some known issues - the page has been checked to work in Safari best. Most of the widgets will also work in Firefox except the world clock and the sliding tile game - I have chosen to replace the front of these widgets with dummy non-functioning faces. You can still move them around the page though! Internet Explorer doesn't like widgets, pngs, messes up CSS and other stuff, it was all I could do to get the pop-up google search widget working -so the page does not work in Internet Explorer. I've chosen to display a banner across the page if you use a browser that isn't Firefox or Safari.
Most of the widgets are taken from Apple Mac OS X's dashboard (see links below). A widget generally consist of a small folder of html and graphics, but when used in a web browser, they are fixed and not draggable about the page. Some also use custom calls that only work in Safari and OS X. To enable them to move, I've added a little 'click and drag' tab to some of the widgets. Because the pongclock's controls are the up and down arrow keys, playing it may cause the screen to move up and down - you can still play it if you persevere!
Widget settings and preferences are not saved. The asteroids widget will try to connect to a server for high score recording. To enable this. you need to click Settings in the Adobe Flash Player Security window that pops up.
Repeated refreshing of the page can sometimes cause the widgets to load incorrectly. Safari particularly seems to get its iframes mixed up at times. If this happens close the browser window and re-open the page. If that doesn’t work, quit the browser then re-open the page.
As a sort of counter-illustration of the dragging facility, I’ve fixed the position of two of the widgets, the Google Maps and the Matrix widget, so no, you can’t more them about the screen! You can however move the other widgets over and under them.
I haven’t added close buttons to the widgets - only the close button on the site-wide google search widget works (click the Search link in the footer as previously mentioned), but it would be simple enough to hide all widgets when the page loads and click a button to get them to display.
Disclaimer
Before I get all the adverse comments about hacking, sloppy programming, poor presentation, browser incompatibility and so on, just let me say I didn't know about what dashboard widgets actually were until a few weeks ago, never having needed to open one up to see what was inside. And I am still nowhere near to understanding any of the complex javascript that surrounds some of these widgets (see Cyclosaurus for all that ;-) ), nor any of the code that makes widgets draggable and flippable in OS X for that matter.
What I've put up on the page has been made using information gleaned from google searches and looking at the code itself, tweaking it and seeing what happens, within the limitations of my time, knowledge, patience and family commitments. So I apologise for the rough and ready hacked up appearance and the complete lack of browser cross-compatibility. And please also bear in mind this is just a fun page, it's not serious. During my experimentation and research, I designed a brand new widget myself to get the latest Apple stories from Digg.com. I really view it all as part of the fun and the learning experience that is iWeb! UPDATE Digg broke mine so I'm using their widget.
I have high hopes that Apple will allow users to integrate their own widgets into their own web pages in due course - it's only HTML and javascript after all. Anyway have fun! UPDATE iWeb 2.0 now allows users to enter HTML snippets directly into pages!
With thanks to the respective authors of all the widgets concerned. Click here to go the iWeb Widgets page now! UPDATE I have a new page available with more iWeb widgets here. This page should be available to more browsers as I have deliberately not used any Dashboard widgets. Check it out now!
Links
Got any comments or feedback or need help? Let me know!