Hi all
First, I would like to thank all of you for taking time off to read my post. I am currently having problems to deploy my Web application on the Opera browser. Just a brief background of what I am working on:
The menu comprises of menu titles and menu items, made up of ul and li tags. All navigation of the menu can only be accomplished using the arrow keys at the keyboard. As the menu's HTML is dynamically generated from a server-side logic (JavaBean), the format for the menu titles and items should be standardised as I mentioned below. Each menu title or menu item can be either of the following: i) Image only, ii) Text only iii) Image and Text. To avoid any confusion, I would quote an example for each of the points I mentioned earlier.
i) Image only: Under the menu title Internet, the menu item Favourites is an example of Image only as it is displayed as an image only in the Web browser.
<li><img src="images/Favourites.png" width="70px" height="70px"/></li>
ii) Text only: Under the menu title Meal Selection, the menu item Normal is an example of Text only as it is displayed as text only in the Web browser.
<li id="mealnormal"><span>Normal</span>
iii) Image and Text: Under the menu title Videos on Demand, the menu item Spiderman 2 is an example of Image and Text as it is displayed as both an image and text in the Web browser.
<li><span>SPM</span><img src="images/SPM.png" width="70px" height="70px"/></li>
I have thought of using arrays to store the URL of the page the menu items (examples include SPM, TLS) as they are intended to lead to another Web page with the videos. Only menu items should thus have a URL property to contain the URL of the Web page it is intended to forward the user to when the right arrow navigation key at the keyboard is pressed on the selection. Perhaps something like this: window.location = menu[index].url.
As I test with the embedded Opera browser (which renders links incorrectly when I use anchor tags for links). Therefore, I think I am a roadblock as I am trying to provide a navigation indicator (=>) to have a right arrow to appear (similar to what I did when the user has to go through from one main menu to multiple branching sub menus) and to store the URL for the menu items but I do not know how to accomplish that.
There are also a couple of other things which I am also stuck:
a) Alignment of the menus and the images.
My intention was to allow the main menu to be centered based on the width of the Web browser. A menu title (e.g. Internet) which has an image and text should have the image alignment in sync with the alignment of the text (dependent on the text's length, which may vary). The alignment for the images at the sub menu which come with the text (e.g. Breakfast under Normal) are weird. Is it possible to align the arrow key to be at the right of the menu item but the center of the menu item selected.
b) Selection of menu titles and menu items.
Currently, it is not clear to the user when any selection is made. In any case, for text: the text colour and the background of the text should change (e.g. from Internet to Internet) and for image: the size of the image should magnify from 70px to perhaps 140px (currently testing with the setAttribute() method and the other helper functions I created) to indicate a user's selection. However, the functions which I wrote in the script does not seem to be working, but there are no errors and indication. How do you think it can be solved?
P.S. Any form of assistance is greatly appreciated. Thanks a lot!
Rgds
Nedave
