Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows and more...

Knowledge Base support case for AllWebMenus,  abstracted and stripped of all user’s private info.

Initial Email From: Kim
Initial Email Subject: How to access 2nd and 3rd level menu by using Tab key
Support Case Month: January 2013

Hi

I am using AllWebMenu V.5.3 Build#898, I built a CSS menu in order to meet the WCAG (Web accessibility) requirement, I tried to use the "Tab" key to access the menu, but can only access the first layer menu, unable to reach the submenus, I tried to use "<tabindex=x>" in the menu html file, but still no help, please suggest how to modify the menu so that I can access the submenu by using the "Tab" key.

Regards
Kim

Reply From: Likno Customer Support

Hello Kim,

Did you use the arrow keys after you entered the menu with the "Tab" key? The arrow keys should be the ones that let you navigate in submenus and all items.

Best Regards,
Aris Filokostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Kim

Hi Aris

Yes, it works fine by using "Tab" and then arrow to access the menu, but under the requirement of WCAG 2.0, I can only use "Tab" to access the menu, which is the requirement form our Government Standard, for example, the following CSS menu can be fully access by "Tab" key only

Any suggestion how to do like this? Thank you in advance.

Reply From: Likno Customer Support

Hello Kim,

Tomorrow the developer that is in charge of this feature will give me an answer and I will be able to give you an answer too if it is possible to develop the "Tab" functionality under the "Feature Rush" service. In this case, there is a small fee of around {PRICE REMOVED}so that we develop it IMMEDIATELY if you wish so.

What is the "Feature Rush" service:

We have a "feature rush" service which some users prefer to purchase so that they see a non-priority feature be implemented ASAP (gets first in the queue) and have it very soon inside the application.

This is how it works:

We split the cost of research & development required for the particular feature, and start researching it immediately (rather than later).

If we cannot find a solution to the problem/feature within 10 working days since purchase (for this particular feature), we will refund you the entire amount (full refund).

Let me know if you are interested in this.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Kim

Hi Aris

Thank you for your suggestion, we are really like to have this solution,  so we are interested in this “Feature Rush” Service, I am now going to process the payment, please check it later and I am looking forward for your good news, thanks for your help in advance.

Best Regards

Kim

Reply From: Likno Customer Support

Dear Kim,

We have just uploaded a new release (build 902.2) which supports fully browsing a menu using the “Tab” key.

Here is a screenshot of the new feature:

Can you please download and test this? Let me know if everything works as expected.

http://likno.com/download.html

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Knowledge Base support case for Likno Web Modal Windows Builder, abstracted and stripped of all user’s private info.

Initial Email From: Buddy
Initial Email Subject: modal window
Support Case Month: October 2012

Hi Kostas,

I have a modal window on the index page of {URL REMOVED} that I want to only open when the index page opens. But as you navigate through the site the page opens. I received this email from the company:" Also, the October Physical Therapy pop up box pops up several times as you maneuver through the website. Is there a way for it to only pop up upon initial entrance into the website?"

Is there any way I can make it only open when Index page opens or open only once when someone visits the site.

thanks,

Buddy

Reply From: Likno Customer Support

Dear Buddy,

I checked your site and only saw the modal in the first page! Did you fix the problem in the meantime?

If not, keep in mind that the modal will show only on those pages where you added its Linking Code. So if it shows in a page you did not want it to, check if you accidentally added the modal Linking Code there and remove it.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Buddy

Thanks for checking, no I have not fixed. If you go to {URL REMOVED}   , then locations {URL REMOVED} then sty. Francis rehabilitation center {URL REMOVED} the modal will open. I do have another modal window on that page that opens when you click on the one of the patients forms but it only opens on that link.

thanks,

Buddy

Reply From: Likno Customer Support

Dear Buddy,

I checked the “columbus” page and indeed the modal opens there, but you also have the Linking Code there.

Shall I assume you created two modal windows within the same project and you only want the second to work in this specific page?

If this is the case you have two ways to resolve this:

1) separate the modal windows into different projects.

OR

2) go to your first modal which opens on page load, and change it so that it does not open on page load. Then go to the page where you want it to load and add some JavaScript code to make it load there.

The first option is obviously the easy one. If for some reason you want to keep them in the same project and want to go with the second option, let me know if you need more help.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Buddy

I tried adding 

<script>var Modal_Window_2_open=octnatptday;</script> 

but it still opens on the st.francis page. If I make two projects it seems like the likno scripts will overwrite each other.

What should the javaScript be to only load octnatptday on the index page?

Thank you so much for the help. I really hate I had to bother you.

Buddy

Reply From: Likno Customer Support

Dear Buddy,

Do not worry, we are here to help!

When you create multiple projects (in any Likno product) all you have to make sure is that each has a different “compile name”:

Now for the single project solution, first you have to make sure that the modal window will NOT open “on page load” by unchecking the related option. Then you will add the following code in the page where you DO want it to load:

<script>

    function load_my_modal() {

        if (typeof(Modal_Window_1)=="undefined") setTimeout(load_my_modal,200);

        else Modal_Window_1();

    }

</script>

In the above code you need to substitute the “Modal_Window_1” in both places with the actual name of the modal window you want to open on page load.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Buddy

You are a genius and mighty nice to me. I can be a little slow so please be patient. I have made the changes and recompiled several times but the modal window does not open at all now. I inserted this code: modal wdw named hprcnatptm. I am sure I've done something dumb, but I can't figure it out.

thanks again for all the help.

<script>

    function load_my_modal() {

        if (typeof(hprcnatptm)=="undefined") setTimeout(load_my_modal,200);

        else hprcnatptm();

    }

</script>

Reply From: Likno Customer Support

Hello again,

It seems I am a pretty sloppy “genius” too... I forgot the most important line where the function is called! Sorry about that.

Please change this:

<script>

    function load_my_modal() {

        if (typeof(hprcnatptm)=="undefined") setTimeout(load_my_modal,200);

        else hprcnatptm();

    }

</script>

Into this:

<script>

    function load_my_modal() {

        if (typeof(hprcnatptm)=="undefined") setTimeout(load_my_modal,200);

        else hprcnatptm();

    }

load_my_modal();

</script>

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Buddy

thank you, working like a charm.

Buddy

Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.

Initial Email From: John
Initial Email Subject: Megamenu behaviour
Support Case Month: April 2012

Hi Kostas,

Me again. I'm working on a horizontal menu with megamenus that drop down from each item. When testing this I found that when I move the cursor from one top-level item to another via the space of the dropdown (ie not along the top level menu, but inside the megamenu space), the old dropdown closes but the new dropdown does not appear. This occurs even if the megamenus are shifted down so that there is a gap between them and the top-level menu.

Bests

John

Reply From: Likno Customer Support

Dear John,

This is to let you know that we just uploaded a new AllWebMenus version which corrects the double-slash issue (and also has a great new feature called Image Sets):

http://www.likno.com/whatsnew.html

PS: We also changed our “what’s new” pages and some other things, so we did not have time to fix the “closing submenu” issue. Don’t worry, we’ll probably deal with this tomorrow.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Likno Customer Support

Dear John,

It seems that in your project you have set the submenus to appear instantly but hide after 200ms. This is what causes the problem, as when you move from a submenu to another main menu item, its submenu opens and then both submenus close after 200ms.

Unfortunately it seems that you cannot have a submenu opening before the previous one closes. So the solution is to make sure that the “Appears – How” has at least the same amount of delay time as the “Disappears – How”:

(you now have Appears: 0ms, Disappears: 200ms)

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.

Initial Email From: Claudio
Initial Email Subject: Highlight Menu Item
Support Case Month: April 2012

We developed a vertical menu for the page:  http://www.miamiarch.org/ip.asp?op=Business_Offices, which opens the “Business Offices”  section of the web site.

However, when I navigate the buttons on the top of the page (Non-Parochial Collections, Tamper Evident Bags and ADOM Financial Report), I lose my reference to the vertical menu.  I would like to keep the item “Business Offices” inside “Business & Finance Office” highlighted.

I could use a script similar to :

<script type="text/javascript">

       var awmShowItem=["vm,it7,1","hm,it12,2,0"];

</script>

which works perfectly in the project http://www.stakb.org/stagnes/School/school.asp?op=Art.

The problem is that this solution references on the ordinary position of the item in the list of menu items (1^st, 2^nd, 3^rd, etc…).  In the case of http://www.miamiarch.org/ip.asp?op=Business_Offices, I have a large number of menu items in the vertical menu and they constantly change.  If I add a new menu item, it will change the ordinary position of the rest of the list, affecting the effectiveness of the JavaScript code above.

Is there a way I can refer to a menu items that will not be referenced to the ordinary position of the menu list?

I am trying to provide a similar experience of the pages in the section http://www.miamiarch.org/ip.asp?op=PGC_Policies_P&PGuidelines.  In this case the vertical menu is pure HTML code, and the option “Safe Environment Procedures” is highlighted in the following 5 pages:

· http://www.miamiarch.org/ip.asp?op=PGC_Policies_P&PGuidelines

· http://www.newmiamiarch.org/ip.asp?op=PGC_Policies_Employees

· http://www.newmiamiarch.org/ip.asp?op=ParishSchoolCarnivalPolicy

· http://www.newmiamiarch.org/ip.asp?op=PGC_Policies_SafeEnvironment

· http://www.newmiamiarch.org/ip.asp?op=PGC_Policies_Volunteers

Claudio

Reply From: Likno Customer Support

Dear Claudio,

If I understood correctly, then you do not need to have ANY code in your pages.

Just choose the automatic highlight option:

This will automatically highlight the menu item that corresponds to the current page URL.

Note that if you forget your old “awmShowItem” code in a page, it will overwrite the automatic highlight.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Claudio

Kostas,

Thanks for responding to my email so quickly.

I know the option below, but that is not what I need.

That resource is activated and it works automatically when the URL is the same as in Webmenu.

However, there are pages inside the web site that are NOT listed in the menu items, but they do belong to a section of a page. 

The page http://www.miamiarch.org/ip.asp?op=Business_Offices makes the menu option “Business Offices” highlight automatically as per the setting you described below.

However, there are 3 other buttons on the top of the page (pure HTML buttons), that link to other pages, related to “Business Offices”.

I want to use the JavaScript code to highlight the menu option, but I don’t want to use a reference to the ordinary position of the menu, because I know it will change during the course of the year.   Now Business Office is the 2^nd position of the vertical menu, but tomorrow it may be the 3^rd.

Most importantly, I would be using the JavaScript code in several other places in this vertical menu.   Can you imagine how difficult it will be to update several JavaScript codes every time I add or remove a menu option?

Claudio

Reply From: Likno Customer Support

Dear Claudio,

Ok, now I understand what you mean. However there has been a misunderstanding…

When you write:

var awmShowItem=["vm,it7,1","hm,it12,2,0"];

The “it7” is the ID of this specific item. It is NOT just its order in the menu. If you add other items before or after it, this item will still be referenced by “it7”.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter