WebProg3 provides you with three fundamental widgets: pictures, texts and hotspots. This minimal set is quite powerful, because you can use them to make other widgets fairly easily if you need them. It depends on your creativity. For the desktop specifically, not all traditional widgets are really necessary or even desirable nowadays, particularly for use in a browser. This includes those available in HTML. Take for example simple buttons, radio buttons, check boxes, labels, headings, and so on. Substitutes for these can be made in WP3 with no trouble at all, and what's more they can be tailored exactly according to your needs, which is often difficult or impossible in HTML. Full tailoring of them is simply not made to be available.

Of course, the widgets you require depend on your objectives as a programmer, either on a general level, or in relation to a specific task. I wouldn't claim for one minute that you can make absolutely anything you need using the basic widgets of WP3. You can't. Far from it. But if you need anything more sophisticated, WP3 scripts allow you to embed elements from external sources using a text editor such as Sublime Text. This makes them incompatible with WebProg3 itself, but it really doesn't matter very much. WP3 has already done a lot of the basic work for you, and you can continue happily without it.

As an example of the above, I am about to introduce some foreign elements into this very page: a collection of iframes which are really independent little browsers. I'm going to show you a number of similar widgets made in WP3, but if I included them all on the same page, there would be a conflict of identifiers such as widget IDs and classes, etc. Of course, I could get around this by making all IDs and classes unique, but I don't want to do that, since it would obfuscate the really similar structure of the example scripts I am going to provide you with.

FRIENDIFIABLE SELECTION LISTS

Now down to business, which is the construction of SELECTION LISTS, enabling you to do away with items such as check boxes, option lists, and even menus to some degree. As you will see throughout all the examples given at this site, such lists pop up very frequently. I think that a few tips to help you make them yourself would be appreciated. In fact, you will find some widgets of this kind in the "Sample Products" section. Useful though they are, they do not permit FRIENDIFICATION. That's because they were made before I came up with the idea of friendification later on. The aim of this section is to put that right.

Here is another single-choice list, done more simply.

It is similar to the first one, but it changes the text colour only when selected.

This last single-choice list works a little differently.

The list itself is not a text, but an image in the background.

The items on it (lines) are highlighted using half-opacity (red) DIVs on top of it.

Now we come to the multiple-choice lists which are slightly more complex.

This first one is in the style of the first single-choice list, changing both the background colour and text colour of the DIVs when selected or deselected.

In HTML, multiple selection is normally achieved using the Ctrl and Shift keys on the keyboard.

Here in WP3, we do it in a way which is more straightforward.

Just click on a line to select it, and click on the same line again to remove the selection.

And finally, the version which changes the opacity of DIVs over a background image.

Here's the simple version.

ABOUT THE MAKING OF THIS WEBPAGE

As I said, I wanted to make thiis page with iframes in it.

I was able to do it entirely in WP3 by creating the iframes "on the fly" in JQuery.

If you are interested, here's the basic coding showing how it was done, which is more or less self-explanatory, I think:

The coding shown above is not a text, it's a picture. Why's that? If it was a text, then you could copy parts of it if you wanted, right?

The reason is one that has plagued me throughout the making of this website. Firefox, and probably other browsers too, cut corners in order to increase the speed of processing. Consequently, the browser goes rushing through the script, and if it finds anything that looks like HTML or Javascript coding, it executes it! The fact that the coding is properly contained within what is defined clearly as a TEXT can be totally ignored, and it ends up making a mess of everything.

This does not happen always, but it happens often enough to make your life a misery. So you have been warned. If you try to do something similar, it is best to avoid putting HTML/Javascript coding inside texts. It's a pity, but there you are.

The widgets above work perfectly well in Firefox. I checked that well before uploading them.

However, I tried them in Google Chrome afterwards and was taken by surprise. For some reason, it doesn't like the first and third multiple choice widgets, even when running them independently offline:

What? I'm totally lost. I tried removing the BLUR function, but got the same result.

Nothing could be more innocent than these selection widgets.

And it's strange that Chrome only complains about 2 of them, the first and third multiple choice widgets.

If ever I work out what is going on, I'll let you know, OK?

Or perhaps you have some idea. If so, please let me know. Thanks.

Another lesson learned!

A perfect example of how Artificial Intelligence (AI) is not always very "intelligent" at all, and can lead you up the garden path!

By experimentation, I finally discovered that the problem was really rather simple (and I shouldn't have made such a silly mistake!). It's this:

Firefox understands "background" in the CSS to mean BACKGROUND COLOUR ("background-color").

Chrome distinguishes between "background" and "background-color":

"background" will give you something like "rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box".

"background-color" will give you something like "rgb(255, 255, 255)".

You can take it that the scripts offered above have now been corrected, and that they should work equally in both Firefox and Google Chrome.