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

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

Initial Email From: Wolfgang
Initial Email Subject: tabs
Support Case Month: July 2012

Hi,
I would like to try out the tabs but cannot figure out how to get scrollbars into it with a fixed height. At the moment the text spills out of the tab. In your sample no.4 there appear only scrollbars if there is an external page.
What I find great is that the text remains in the last position if the user comes back to the tab with the scrollbars.
Will this also be without an external page?
Another question would be, I am using Dreamweaver for the Mac, but your program is only running under windows. Is it possible to get the created HTML code to my Mac Dreamweaver CS6 site. I do have access from my Windows running under VMWare Fusion to my Mac files.
Thanks in advance and by the way, your product is just great, very user-friendly, carefully designed with good help files.
Wolfgang

Reply From: Likno Customer Support

Hello,

Regarding the scrollbars, please go to the “Body CSS” field and add the following:

overflow: auto;

This should stop the “bleeding” of the body content and create the scrollbars you want.

Regarding the Mac interaction, the best way would be to manually copy-paste the Linking Code to your file(s). The Link window has two tabs. The first is for automatic linking to your pages and the second is for manual linking. Select the second tab, copy-paste the code it gives you to your page and (if required) adjust the path to where you will upload your files.

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

Hello Kostas,

thanks for your advice, it works.

To my surprise, the interaction with the Mac works fine. I can compile in Windows and point to the shared website on the mac drive, go to Dreamweaver on the Mac, click refresh and the changes are immediately visible. Also the automatic linking works.

It took me a while to figure out how to get the tabs onto my page, I was looking for some HTML code I can copy into my page until I found the hint in the help file to create a Div with an ID which points to the Likno tabs, and suddenly the tabs appeared in my page.

So far so good, but I ran into another problem: I need the tabs in a Template where I can change the content for the tabs every time I create a new page from the template.

To make it more simple I decided to use a link to a local file for the Tab-content. Therefore I need to change only the link name, which needs to be done in an editable region.

To compile every time new tabs for hundred of pages would be a nightmare if any changes have to be done.

I hope there is a solution, please let me know how this problem could be solved.

One more thing I would like to mention. After I changed the Page link from absolute to relative the preview in the Tabs Builder did not work anymore, but it works in the compiled page. Tab builder says he cannot find the file.

I also still struggle with the auto height, it is always about 250 pix high. I expect it going down to the end of the visible page.

Thanks in advance

Wolfgang

Reply From: Likno Customer Support

Dear WolfGang,

If I understand correctly, you want to have a single Tab project that you will use in several pages, each with different content (but same design).

The way to achieve this is to populate your Tabs through a UL/LI or DIVs structure.

In the “Project Tabs (F2)” select either the UL/LI or DIV population method, then go to the “Sample Code (F4)” to see a sample code that would populate the Tabs according to sample content you have set in the application.

This allows each page to have a different content, it allows having the content in a separate include file, it even allows automatically generated content (e.g. using PHP and MySQL).

Finally, regarding the auto-height, this can indeed be several pages tall , but please keep in mind that it does not work (and cannot work) for “external” files (which are really iFrames).

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: 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: User
Initial Email Subject: modal windows
Support Case Month: July 2012

hi, can i specify a style sheet and url to content for content to be loaded into the modal window?

Reply From: Likno Customer Support

Hello,

I am not entirely sure I understand what you want to do.

Do you want to load an external page into the Modal Window? If so, then you just need to use the "external" source type:

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

Sorry about that.   I should have re-read my message.

Nonetheless you did answer it.  Thank you.

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

Initial Email From: Valeria
Initial Email Subject: scroll bars in modal window
Support Case Month: October 2012

I have put overflow:hidden; in the body css and it works beautifully in firefox.  The problem is safari, chrome and IE, there are scroll bars in all of those.  In IE8 it put additional white around the outside.

How do I fix this?

www.dpvisions.com/print_media.html  click on anyone of the images under “the Portfolio”

Thanks,

Valeria

Reply From: Likno Customer Support

Dear Valeria,

I noticed that you are loading an external page. In this case it is possible that the scrollbars are not from the modal itself, but from the inner iframe instead.

To fix this you need to make sure that your page fits in the modal window. You could do this by explicitly adding “padding: 0px; margin: 0px;” for the <body> and parent <div> in your external 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

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