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

We are happy to inform you that we have released the latest version of Likno Web jQuery Tooltips Builder, version 2.1 build #222.

Check out What's New:

- Improved compatibility for jQuery 1.8+.

- Fixed a bug in importing and converting older project files.

- Fixed a bug related to Ajax.

- Fixed a bug related to loading "in-page" content.

- Fixed a minor positioning issue.

- Fixed a case where AllWebMenus menu tooltips stayed open after opening a submenu.

- Improved installer, with uninstall icon in AppData folder and subfolder in start menu.

- Improved WYSIWYG CSS Editor, that saves new custom font groups in registry.

You can download the latest version at: http://www.likno.com/jquery-tooltips/download.php

All features here: http://www.likno.com/jquery-tooltips/index.php

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

Initial Email From: Tracey
Initial Email Subject: Likno Web Modal with links
Support Case Month: February 2013

Hi what I'm trying to do is setup Likno Web Modal with links that come in to the window from external files (as I did . These links would replace the Web Modal with another Web Modal like this if you click on one of the images below and use either

Click To View Next Project Specs
or
Click To View Previous Project Specs

I did set up the project file so that each link would have its own

Modal_Window_1
Modal_Window_2
Modal_Window_3
Modal_Window_4
etc...

but the javascript was bigger (194kb) than if I just include the html in each single Modal_Window (127kb), this does not make sense why the empty ones are bigger.
Basically I'm asking if there is a way to replace the current Modal_Window with another Modal_Window with an external file with links in that file without using The Navigation Bar and Multi-Sheet.

Any help would be great

Thanks,
Tracey

Reply From: Likno Customer Support

Hello,

I believe the best way to go around this is to have each project spec in a separate HTML page that will be loaded with Ajax. Then you can use the Modal Window API to call each page into the same Modal Window. This way your JS project will be around 11-12kb!

I am attaching an example project for you. Let me know if you need anything else.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Tracey

Thank You Very Much for the script, going to work well!!!

Tracey

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

Initial Email From: Martin
Initial Email Subject: More problems - Web Tabs - Modal 
Support Case Month: January 2013

Hello
I have start using Modal and Web Tabs and have some problems
- Web Tabs:
When I use the generated code in local Html Editor – everything looks ok

When I put the code in my portal, it show up “now and then”, same in Chrome and IE
When I make a html file and put it on the net – same problem:
{URL REMOVED}
When I link this file in a Modal window – white page inside the modal frame:
{URL REMOVED}

How is this done ?:

What code from Web Tab do I put in the Modal, Embedded: – I used this:
--------------------
<!-- ******** BEGIN LIKNO WEB TABS CODE FOR likno-tabs-project ******** -->

<script type="text/javascript">var lwtbLinkedBy="LiknoWebTabs [1]",lwtbName="likno-tabs-project",lwtbBN="216";</script><script charset="UTF-8" src="{URL REMOVED}" type="text/javascript"></script>

<!-- ******** END LIKNO WEB TABS CODE FOR likno-tabs-project ******** -->

<div id="liknotabs_positionID"></div>
----------------------------
Regards
Martin

Reply From: Likno Customer Support

Dear Martin,

What do you mean by “now and then”? I checked your webpage (index.html) and the tab shows up every time.

There is an issue with the letters floating outside the tab headers, but this is because your page does not have a valid DOCTYPE.

To correct the problem, please change this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Into this:

<!DOCTYPE html>
<html>

Regarding the Modal Window now, the problem is that you are trying to load the page with “Ajax”. The Ajax technology was developed for bringing in pure text and it does not support loading scripts (like the tab control). The solution here is to load the page as “External Page” instead of “Ajax”.

Please let me know if you have any more problems.

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

Got it to work here:
{URL REMOVED}
But if I could program this into a modal window would be nice

Regards
Martin

Reply From: Likno Customer Support

Dear Martin,

In order to load this in a Modal, you just have to make sure that you load it as “External” as I said in my previous email. Here is a screenshot:

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

Thanks!
- So it’s not possible to use the direct code from Web Tab’s into Modal ?
Like this:

<!-- ******** BEGIN LIKNO WEB TABS CODE FOR likno-tabs-project ******** -->

<script type="text/javascript">var lwtbLinkedBy="LiknoWebTabs [1]",lwtbName="likno-tabs-project",lwtbBN="216";</script><script charset="UTF-8" src="{URL REMOVED}" type="text/javascript"></script>

<!-- ******** END LIKNO WEB TABS CODE FOR likno-tabs-project ******** -->

<div id="liknotabs_positionID"></div>

- When will you include a WYSIWYG editor inside your products ?

Regards
Martin

Reply From: Likno Customer Support

Dear Martin,

1) The best/easiest way would be to have a separate page with the tab and load it as “external”. This is the same as what you tried to do before, but with “external” instead of “Ajax”.

2) Actually we are currently adding a WYSIWYG grid editor that will make it much easier to add the CSS values. You will see it in the next release of Modal Windows as well as out other builders.

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

Thanks
Yes, I have done it now – but need an easy way to update, so I “linked in” a “news system” as you now can see on my first “Investor 1” tab.
- Waiting for the next version.
- Now the Modal is working to:{URL REMOVED}

Regards
Martin

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

Initial Email From: User
Initial Email Subject: linking from external page
Support Case Month: June 2012

Hello

In the modal windows, how can I link to an external page and call on one specific item on that page?

For example, I have a group of 20 charts all on one page. I want to call up chart1 with one link, and chart6 with another. AND only that chart. Otherwise, I'd have to have separate small files for each chart. Is that possible to do and how?

Thanks.

Reply From: Likno Customer Support

Hello,

This is possible if you have the charts in separate DIVs and you call the page as “AJAX” specifying the DIV to load.

For example the following value in the AJAX field would load only the page element with ID=”container”:

test.html #container

and the following value in the AJAX field would load only the page element(s) with class=”container”:

test.html .container

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

Thanks. But could you be a bit more specific?

Like showing me with an actual link and where do I place that link inside the project builder?

I’ve had a look at some videos and  nothing I found showed how to do this.

They only speak of an entire page.

I figure, that if the division on the same page can be linked to, why not on any other page?

When encountering a url link such as “#item_1”, the browser is assuming that the container is on the same page.

I did find one item in one of your pdf files that showed an example, tried it and it did not work.

Reply From: Likno Customer Support

Hello again,

The information I gave you was for use within the application and not for page links:

Also, this is not part of the documented features of the application and hence you could not find it anywhere.

I am afraid that there is no direct support for partly loading an external document through page links.

Still, if you send me a URL to see your test page, I may be able to offer a different solution.

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

http://1littleworld.net/test/1960/sidepanel.html

This is not an AWM project but does show the problem.

The linked page shows all ten tables. There should be a way of showing only the table for that item.

So when item 1 is clicked, table 1 appears.

BTW, that’s a script you guys could offer.

As I think it’s neater and cleaner than a modal.

Reply From: Likno Customer Support

Hello again,

The effect you sent me is indeed a very interesting use-case and it can probably be achieved using our “accordion” application.

Regarding the partial Ajax loading, did you try it with Modal as I instructed you?

I am asking because I did a test locally and it seems to work fine.

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

Ok thanks.

I will have to experiment with it then.

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

Initial Email From: Glenn
Initial Email Subject: Loading html pages dynamically on page load..
Support Case Month: September 2012

Hi, I have been trying to find your articles on how to dynamically change the link of the page to load into a window as the HTML page loads. At present I am using the following link

<a href='#' target='Modal_Window_1'>
   <img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>

How do I pass a page url to the html page to be loaded into the window in this case?
Could you direct me to the solution.
Thanks,
Glenn

Reply From: Likno Customer Support

Dear Glenn,

If you want to create a link that will load the Modal Window with a specific URL, then you just need to add the proper href like this:

<a href='mypage.html' target='Modal_Window_1'> test </a>

If you want this to automatically open on page load and the URL to be defined by JavaScript (e.g. different each time), then you need something like this:

<script>

    var my_url="mypage.html";

    function open_modal() {

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

        else Modal_Window_1({bodySource:"<div externalUrl='"+my_url+"'/>"});

</script>

For more information on how you can use the JavaScript API to pass more parameters (e.g. size etc.) please have a look here:

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

Hi Kostas,
I tried your recommendations both of the following:

<a href='help01.html' target='Modal_Window_1'>
    <img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>
<a href='../help01.html' target='Modal_Window_1'>
    <img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>

The help files are in the root directory of the site and also I placed a copy in the likno-scripts folder.

<a href='http://psychcam.tv/help01.html' target='Modal_Window_1'>
    <img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>

I have selected 'External' as the source and left the link field blank in your app.

Neither of these links loaded the html page when the window opens.

Thanks,

Glenn

Reply From: Likno Customer Support

Dear Glenn,

Please try setting your project to “page links”:

Then use the following code in your page:

<a href='/help01.html' target='Modal_Window_1_single'>
    <img src='images/QMarkSmall.png' width='15' height='15' border='0' />
</a>

(note the “_single” at the end of your modal name)

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

Hi Kostas,
Thanks for the information.
check out psychcam.tv and click on a product in the left hand column.
The ? images should open the window.
I followed the instructions below, uploaded the likno folder and the index page which I relinked to the project, but now the windows aren't opening, just open the page in a new window.
There must be something else I don't have set properly.
Thanks,
Glenn

Reply From: Likno Customer Support

Dear Glenn,

This is because you are loading the links with Ajax, after the library has been loaded.

Modal Windows does support links loaded with Ajax, but this feature was added in the latest version (build 250 – August 13).

Please download the latest build and recompile your project to fix this problem.

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

Terrific thanks Kostas,
Works now.
Glenn