Those of you who are familiar with JQuery will know that coding is normally inserted in a Javascript function that is fired as soon as the web page is "ready" or fully loaded:

The normal procedure is to create the HTML widgets you need (pictures, texts and hotspots), and then, by reference to their IDs and/or classes, program their interaction with the user. You can also make changes to the appearance of the widgets if you wish.

The place where you do your coding in webProg3 is in the Code Editor which is simply opened by clicking on the "Code" button at the top of the screen:

Note the red "Exit" button which appears at the bottom of the screen. Use this when you have finished typing up your coding. You can, of course, open up the Code Editor at any time, do some more editing, and then close it again. None of the code you type is actioned in any way until you do a "preview" (see the next button along the top) to test the execution, or save the entire web page script for subsequent running in a browser. By the way, the scripts you produce in webProg3 should work in ANY browser, but of course this depends on exactly what JQuery/Javascript coding you include. Not ALL coding works exactly the same across browsers, and you will need to test the performance of your scripts in each browser you are targetting.

Another little thing. If you decide to remove ALL your coding from the editor, please leave its "bare bones" as you see them in the screenshot above, otherwise things might not work quite as they should. In a future version of WP3, it would be a good idea to make this "Document Ready" function impossible to remove completely, but for now it needs your cooperation.

We could leave it at that, but since we are on the subject of coding, it might be useful to see a real-world example of how a small browser app can be produced using webProg3.

What follows is a quick walkthrough showing how we can produce a simple drop-down menu in WP3 together with the JS/JQ coding required. The idea is that the user clicks on the heading "Fish Menu" and then chooses the single fish of his preference from the list which appears.

First of all, click HERE to see a demo of the proposed "Fish Menu" app.

Click HERE if you wish to download the script.

Create the menu title first. Use a text widget. In the Rich Text Editor, use the Ubuntu font, 24px, with centre alignment and padding at the top as appropriate. Give it a thin solid border in black. You can leave the green canvas as it is.

Change its ID to "heading".

Below the heading, create 10 more text boxes without border.

After creating the first one (with no text in it), you can then produce the other 9 by cloning. However, be careful to give the first one a class of "fish" so that when it is cloned, ALL 10 items belong to the "fish" class.

Then quickly edit all 10 individually to insert the names of the fish.

That's it. The graphical part of our app is ready. Just click on the "Code" button at the top of the screen to call the Editor.

Here's the code we are going to insert:

$("#heading").css("cursor","pointer"); //To show that it is clickable, mouse cursor shows hand with pointing finger when moved over it
$(".fish").css("cursor","pointer"); //As above, for all items in the menu list

$(".fish").css("visibility","hidden"); //Hide all menu items

//////////////////////////////////////////////////////
$("#heading").mouseup(function(){ //If the heading is clicked, ............
$(".fish").css("visibility","visible"); //........ show all menu items (fish)
});
//////////////////////////////////////////////////////
$(".fish").mouseup(function(){ //If a menu item is clicked .........
$(".fish").css("background-color","rgb(0, 202, 86)"); //........ set the backgrounds of all menu list items to green
$(this).css("background-color","yellow"); //Set the background of the menu item that was clicked to yellow
itemClicked = $(this).text(); //Get the text of the menu item that was clicked (a fish)
alert(itemClicked); //Inform the choice of fish that was made
$(".fish").css("visibility","hidden"); //Close (hide) the fish list
});
//////////////////////////////////////////////////////
});
</script>

After clicking on the red "Exit" button at the bottom of the screen, you can "Preview" its performance (see the next button along the top).

When you are satisfied that the app is working correctly, you can then proceed to "Save" the script as an HTML file on your computer, and subsequently open it up in various browsers to prove its versatility.