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

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

Initial Email From: Clas
Initial Email Subject: Problem when linking to pages
Support Case Month: November 2012

Hi, I recently bought a license for AllWebMenus and it really is very nice to work with. I am currently trying to incorporate the menus to a site and do have problems in getting the links to work. It does work fine when I do the preview of page but when running it under Internet Explorer 8 (and Chrome as well) and clicking on the menu, nothing happens. It seems like I do something wrong. I have a "menus" which is to be the base for each page... I have tried several forms of linking but I can not get it to work

Please find enclosed sample.

Thank you in advance for assisting in this matter.

Regards,
Clas 

Reply From: Likno Customer Support

Dear Clas,

I checked your pages and realized that they are going into an endless loop!

Your page, “index.html”, is actually a frameset consisting of “databmenu.html” and “databhome.html”. When you call “downloads-intro.html”, this is loaded into the top frame where “databmenu.html”, but this is also a frameset page so now your page has a top frame which has two inner-frames and a bottom frame. However the top frame is small so you only see the first inner-frame. Then if you click again you end up with three framesets of two frames each etc.

What you need to do:

1) Keep only one frameset page, “index.html”.

2) Set all your links in the menu to target “content” (that is the name you gave to your bottom frame).

3) The link should point directly to “downloads-intro_txt.html” as the “downloads-intro.html” is no longer required.

4) If you need to call “downloads-intro.html”, then make sure you target “_top” so that it loads in the whole page and not only within the frame.

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: Ruurd
Initial Email Subject: Modal Windows iframe
Support Case Month: August 2012

Dear reader,

standard behavior of Modal Windows is to "break out" of the frame, as you call it.

How can I show it in the iFrame and limit it to the frame area only?

I did use relative to “a page element”, but then the close image appears in the center of the browser window (not at the right top corner of the Modal Window).

When I use the same code running local with Apache-PHP or on the domain changes the behavior of the Modal Window: on domain the setting: “appears relative to the browser window” does actually show within the iFrame!!

I understand what you write about iFrames in the help system under FAQ, but there is no actual difference I am aware of between the domain and local environment..

What to do?

Thank you for your help in advance.

Kind regards,
RuuRd

Related URL: http://ruurd.eu

Reply From: Likno Customer Support

Dear Ruurd,

Actually, there is a big difference as far as browser security is concerned…

The “break out of frames” feature is always trying to run, but there are cases where this is not possible due to browser security restrictions. These depend on whether you are viewing local files or not, if all your frames come from the exact same domain and even on the browser you are using.

So you may see a Modal breaking out of frames online but not locally, or you may see it work in Firefox but not Opera (which is more strict).

Right now, the modal will always try to break out of frames. The easiest way to stop it, is probably to make your iframe come from a different domain. Note here, that “likno.com” and “www.likno.com” are considered different domains, so it may be as simple  as adding “www” in your iframe src.

If this does not work in your case, then please send me the URL to see what you’ve done. At the end, we may need to add an extra checkbox in the application so that you decide whether the feature should run or not, but since you are the first to ever ask for this we’d rather avoid it for now.

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: Ruurd

Thank you for your quick reply Kostas,

For now I changed my PHP script to solve my issue with a relative URL:

{SCRIPT CODE REMOVED}

$url is used to prepare hyperlinks that create a iframe popups.

I think this is nasty and I would prefer  to escape the “break out of frames” feature in another way.

Would it be possible to toggle the feature with a parameter in the Javascript command that creates the Modal Window, like: Modal_Window_2(frames:{ relativeToFrame: true});

Thank you for your help in advance.

Kind regards,
RuuRd

Reply From: Likno Customer Support

Dear Ruurd,

I am afraid that this is not currently available. Nonetheless, we are about to release a new Modal version, so I will try to squeeze in this feature too.

I’ll let you know later today.

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: Ruurd

Thank you Kostas,

Hope you will make it to implement this “browser escape feature”  in some kind of way.

Take care.

Kind regards,
RuuRd

Reply From: Likno Customer Support

Dear RuuRd,

Please download the latest Modal Windows here:

http://www.likno.com/jquery-modal-windows/download.php

Then, when calling the modal, pass the “dontBreakOutOfFrames: true” parameter. For example:

Modal_Window_2({dontBreakOutOfFrames: true});

Let me know if this works as expected.

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: Ruurd

Maybe you need:

http://ruurd.eu/mediaecology/test/test_modal_project_a.php?stage=#

to avoid redirection

RuuRd

Reply From: Likno Customer Support

It is online. Please download again and let me know.

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: Ruurd

Sorry, Kostas, looks alright now!

Must have been something in the cache …

Running local with param:

Thanks very much for your quick fix and help!!

RuuRd

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

Initial Email From: Akash
Initial Email Subject: help/question for keyboard access to menus
Support Case Month: August 2012

Hello Support Team,

We are using AllWebMenu Pro 5.3 to create our application’s menus and have one question about it

We want the menus to be accessible with mouse AS WELL AS keyboard

Are there any keyboard shortcuts to access the menu with keyboard or a way we can provide in the menus generated with allwebmenus

So the user can use keyboard to access and use menus as well as submenu with keyboard

Our application uses frames and the menus are in the top frame

Thank you,

Akash

Reply From: Likno Customer Support

Dear Akash,

The keyboard shortcut to cycle through the page menus is “Ctrl+F12”. The navigation is performed with the arrow keys.

It is possible that the focus will have to be in the top frame in order for this to work. If this does not work, please send me the URL so that I can test it myself.

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: Akash

Hello Kostas,

We tried “ctrl+F12”  but did not worked

This is the link and login details for you, so you can test it.

Thanks

Akash

Reply From: Likno Customer Support

Dear Akash,

I tried viewing your menu, but the system you have does not let me…

Specifically, when I try to view only the frame that holds the menu it seems that I get redirected to some other page which is broken.

Also when I try to guess the menu path (using the source code info) I always get a “page not found”, for all the URLs I tried:

{URL REMOVED}

Where is the menu actually uploaded?

What I mostly wanted to check is the version of the menu you are using. If it is old it may not support keyboard navigation at all, as this is a relatively recent feature.

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: Akash

Hello Kostas,

Thank you for the quick response

Below is the link to get the menu ‘s java script

{URL REMOVED}

as I remember we deployed these menus using version 5.3

I don’t think you will be able to just load the top frame separately, the whole page has to be viewed with frames

Do let me know if you need any more information to help with this

Thanks

Akash

Reply From: Likno Customer Support

Indeed, the version you have does not support Keyboard Navigation. You are using build 870 and this feature was added in build 880.

According to your license you can get up to build 892 for free, so I suggest that you do this and recompile your menus.

(you can get this from your User Area account)

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: Akash

Hello Kostas,

Thank you for the quick help

We will recompile with the latest build and try it.

Will update you about the output

Thank you once again

Akash

Reply From: Akash

Hello Kostas,

We downloaded and installed build 892

And compiled menu in new version (menu_worker.js)

But still we are not able to use the keyboard shortcut

we did make sure the focus was on that frame the menu is in and  tried to use with

both the shortcut keys “ctrl+F12” as you said and as well shift “shift+F12” as in help file and menu options

but it did not work

we have updated that menu on the link we provided earlier

We will appreciate if we can figure this issue out

Thank you for your support

Akash

Reply From: Likno Customer Support

Dear Akash,

I am afraid I have bad news.

I discussed this issue with our main developer and he told me that the keyboard navigation was never supported for cross-frame environments due to JavaScript security restrictions.

Sorry about this!

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: Akash

Hello Kostas,

Thank you for your help and letting us know about it

Thanks

Akash

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

Initial Email From: Debbie
Initial Email Subject: Google Maps in Web Tabs
Support Case Month: June 2012

Hi,

I'm trying to put a google map into a web tab. I've managed to get the map to appear, but it isn't resizing when the tab is activated.

I've done some extensive searching and have come across many different ways to solve it, but none of them seem to work.

So I'm wondering if you can tell me how I can get the map to automatically resize to fill the whole div container, when it's tab is activated?

Many thanks if you can solve this very frustrating problem for me.

Debbie

Reply From: Likno Customer Support

Dear Debbie,

Can you please send me an example? Please send me your Tabs project and the URL to see your test-page.

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: Debbie

Hi Kostas,

Unfortunately, the website is still in development mode on my machine, so I can't give you an url to it.

Also, it's not actually a problem with the tabs project.  It's just that I can't figure out how to make a google map appear inside a tab correctly and was wondering whether you had come across this before and already had a solution to it.

The Google map js seems to be working OK, but the map itself appears as just a small square in the top left of the div.

By all accounts on the forums, this can be solved by triggering the map's resize event whenever the tab is activated.  So, what I need to know is how I can do that with your tabs.  It would need to be done dynamically, rather than included in the project, because only a few pages have a map, but the majority of pages would need to act normally.

Could you tell me how I could achieve this resizing event only on specific pages, please?

Warm Regards,
Debbie

Reply From: Likno Customer Support

Dear Debbie,

I am afraid that there is no way currently to make a JS call when the selected tab changes. I guess the best solution would be to use the “external url” and keep the google map in a separate page.

This way, the page will load into the tab only when it is shown for the first time and the map should appear properly.

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: Debbie

Hi Kostas,

That's an interesting idea, but can you confirm whether I've understood you correctly?

Are you saying create another page and get the tab to call it when it is activated?  If so, does that mean it is opened in a frame or something like that.

I tried to use your Modal Windows Builder to call the google maps url last night thinking that could be a way to avoid using a tab.  Unfortunately, it seems that google don't like their pages being displayed inside a frame, because all I got was an error message to that effect.  Grrr, and I thought I was being smart.

Will you be including a way to get your tabs to perform a custom script when an event triggers in a future release?

Warm Regards,
Debbie

Reply From: Likno Customer Support

Dear Debbie,

Well, if Google Maps do not like being in a frame, then I guess my suggestion would not work.

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: Debbie

Hi Kostas,

Anyway, I did manage to get the maps working by using your suggestion of creating a separate page that accepts the lat and long as parameters and linking to it using external url on the div of the first page.

So thank you very much for your suggestion, because I can now finally move on to the next part of the application.

Warm Regards,
Debbie

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

Initial Email From: John
Initial Email Subject: How do you ?
Support Case Month: July 2012

Hello,

Situation: A modal window is already open.

Want to do: Click a link in that modal window which first closes the existing window and then opens a new modal window.

At the moment the second window simply overlays the first making the background very dark.

I have looked through your site and can't find the solution, but I am sure I did once read something about it.

Is there a prescribed method?

Best Wishes, John

Reply From: Likno Customer Support

Dear John,

This depends on the content of the first Modal Window. If it is a plain in-page content then simply opening a second Modal should close the first.

If however the first modal is an external page, then you need to manually close the first window. You can do this with code, but I would need to see the page in order to tell you the exact code.

The main idea is: 'parent.likno_modal_project.close();' where 'likno_modal_project' is the actual compile name of your modal project.

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: John

Hello again,

Well I am getting some very strange results. I will stay with the most recent otherwise it will become very confusing.  Inside the development environment all code works exactly as required.

Please find attached the current project. All modal window code is Embedded.

How it all works..

A web page :

http:www.the-kellys.co.uk/narpo/report/W/walker_william_sergeant.shtml can call the modal window Uncle_Bill

At the bottom of Uncle_Bill is the option to call the second modal window John_Barker

It works well until Uncle_Bill calls John_Barker.

In IE9 : Nothing happens

In Chrome: a completely different base page is called. There are NO links to that page in either Modal window or from the underlying page. The page called is http://the-kellys.co.uk/narpo/absentfriends.html#

Calling John_Barker from his own page works exactly as required.

I should explain that this is a frame based environment, but all actions are called by and related to the one frame. To see the frame setup please look at http://www.the-kellys.co.uk, select Absent Friends (Either sub-menu as in this case they both call the same files) and then scroll down to "W" and select Walker, William

I have tried changing the single quotes to double quotes in the code with no effect, and because it does make a difference, made sure that both modal windows use just single quotes instead of one having single and the other double.

I won't alter any of these pages until you have the time to give a view.

Best Wishes, John

Reply From: Likno Customer Support

Dear John,

It seems that this is just an error in the HTML:

This should be:

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: John

Hello there,

The part you outlined is a link to another page (which happens to be the one on Sgt Walker). The target mentioned there “detail” is the name of the frame the new page should go into. Its not the link that calls the modal window. Or are you saying that I cant call a page and tell it where to go if I am also calling a modal window on that same page.

Best Wishes, John

Reply From: Likno Customer Support

Dear John,

Sorry, I believe that I misunderstood you… possibly because of the initial URL you sent (http:www.the-kellys.co.uk/narpo/report/W/walker_william_sergeant.shtml) which is the subpage that goes in one of the page frames. Can you please describe the way to reach this problematic link again?

What is the first page I should start from? Is it “http://www.the-kellys.co.uk/narpo/absentfriends_web.html”?

I noticed that if I open “walker_william_sergreant.shtml” directly in a browser, then click on “Funny Story”, then on “Click Here”, the modal window closes and the new one opens.

The same is not true if I start from “absentfriends_web.html” and follow the same procedure. This happens because of the frames.

I will have to investigate this further, once you send me more specific instructions.

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: John

Additional to prior message from me.

I have just taken your example 12 and compiled for my domain. I linked it to a similar page in absent friends. Clicking on the link produces the first modal window but clicking on the link inside that modal window has no effect in IE9 or Chrome.

I moved the page to the root and re-linked example 12 and all works exactly as it should, so even though my problem page is self-contained, that makes no difference, the frames are somehow breaking the code.

I suppose the easiest thing to do is forget it and modify my first modal window so as to include the contents of the second window. It’s not as though the website is important, so unless YOU feel it’s important to solve this I would leave it for one of those days you have nothing to do

Best Wishes, John

Reply From: Likno Customer Support

Dear John,

Indeed the problem is with the frames as I originally suspected. I am afraid this is not something that can be resolved on our side. Instead you can adjust your code to fix this in your side.

Instead of this:

<a href="#" target="John_Barker">Click Here</a>

Try using this in your Modal:

<a href="#" onclick="top.detail.John_Barker();">Click Here</a>

This follows the path to where the modal is actually linked (the “detail” frame within the “top” page).

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: John

Hello,

That’s great!! It works a treat. Thank You very much for the help. I was just thinking about making one larger modal window , I loaded Outlook for a quick look first and there’s that answer…Brilliant.

Best Wishes, John