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


Initial Email From:
John
Initial Email Subject: Web Tabs Builder - How to style Tab Header text to give 'highlighter' effect?
Support Case Month: June 2013

Dear Kostas & team

In AllWebMenus we are able to style menu items with a highlighter effect on mouseover

e.g.

Text (HTML formatting) 

normal : Home

mouseover: <span style="background-color: yellow">Home</span>

mouseclick: <span style="background-color: yellow">Home</span>

This highlights just the text, and does not change the background colour of the whole item.

I would like the text within the tab headers (not the whole of the tab header) in Web Tabs Builder to have the same behaviour.  How can I do this?

Many thanks

John

Reply From: Likno Customer Support

Hello John,

In case you need only the same highlight color in all  states of the header text then you just go to the Tabs Header Text/HTML and do the same as in AllWebMenus. (see image below)

tab header highlight text

In case you need different colors in each state, I would propose you to go to Tab_1 Header Text/HTML and create a class there in <style> tags. Note that then you will be able to call this class in all items.

inline style tab

hightlight class

And the result will be like in the following image:

highlight text in tabs

Best Regards,
Aggelos Tsakonas
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: John

Hi Aggelos

Many thanks for your rapid response.  I see what you are saying for tabs with headers and bodies populated within Web Tabs Builder.

How would your suggestion apply where the tabs are populated through divs?  (inside the page)

Best,
John

Reply From: Likno Customer Support

Hello John,

When you populate your tabs through DIVs, this means that tabs' content is inside your page. You can have the class I sent you before inside your page in <style> tags or have this in your external CSS file. Also, you can just have inline style in each tab header your want.

See the example code below:

<!DOCTYPE html>
<html>
<head>
     <style>
        .highlight{background-color:#FF0000;}
        .highlight:hover {background-color:yellow;}
     </style>
</head>
<body>
<!-- ******** BEGIN LIKNO WEB TABS CODE FOR highlightHeaders ******** -->
<script type="text/javascript">var lwtbLinkedBy="LiknoWebTabs [1]",lwtbName="highlightHeaders",lwtbBN="220";</script><script charset="UTF-8" src="likno-scripts/highlightHeaders.js" type="text/javascript"></script>
<!-- ******** END LIKNO WEB TABS CODE FOR highlightHeaders ******** -->

<div class="liknotabs_header" style="display: none;">
    <span class="highlight">Header 1</span>
</div>

<div class="liknotabs_header" style="display: none;">
    Header 2
</div>

<div class="liknotabs_header" style="display: none;">
    <span style="background-color:#FFFFFF;">Header 3</span>
</div>

<div class="liknotabs_body" style="display: none;">
    <p>Here is the text of the <b>first tab body</b>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="liknotabs_body" style="display: none;">
    <p>Here is the text of the <b>second tab body</b>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="liknotabs_body" style="display: none;">
    <p>Here is the text of the <b>third tab body</b>.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
</html>

And the result:

tabs highlight text

Best Regards,
Aggelos Tsakonas
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: John

Thanks Aggelos, that works for me!

John

 

Tags: , , , , , , , , ,

 

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


Initial Email From:
Pat
Initial Email Subject: Menu buttons load slow
Support Case Month: April 2013

Is there anything extra I can do to make the menu load faster?
How does it load for you?

Thanks, Pat...

Reply From: Likno Customer Support

Dear Pat,

I checked your page and I saw that the menu does take a bit of time the first time it loads, because all of your items are images and they take some time to download. After the first load, when you visit another page the menu appears instantly as the images are cached in the browser, so this is not much of a problem.

However if you want to make your menu even faster/lighter, then the solution is to keep only two background images (for normal & mouseover) and use text for your menu items.

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

Thanks Kostas,

I’ll give that a try.

Thanks again, Pat…

 

Tags: , , , , , ,

 

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


Initial Email From:
Robert
Initial Email Subject: Main Menu Mouse Over Positioning
Support Case Month: January 2013

Hello,

Please visit the link provided. My problem is with the bottom "Home" link. How do I make the mouse over image appear in alignment with the bottom right corner of the "Normal" image? (note how the link jumps down the page (84 px ?!) upon mouse over.)

Robert

Reply From: Likno Customer Support

Hello Robert,

I assume that you have a submenu with one item that opens on mouse over, correct? (if not, please use "File -> Export" to send me the project)

In that case, just use a "custom" value for the Offset of that submenu which will be related to the images height:

menu alignment offset

Thank you.

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

Finally! Everything seems to be working except in IE (v9.0.12) where the submenu breaks float constraints (see attached image). Note the house with the smoke now falls under the link “{URL REMOVED}” when the window has been resized to allow the visitor to scroll below the bottom of the page. I have tested this in Opera, Safari, Firefox and Chrome and IE is the only one with this problem (surprise!)

Everything else works just like I want it to.

Please advise.

robert

Reply From: Likno Customer Support

Dear Robert,

I just checked your page with both IE9 & IE10 and the menu seems to work just fine! do you still see the problem? If so, can you please send me a screenshot?

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

there was a screen shot attached to the original message. I have attached one here too along with the IE version. please note: I intentionally tried to break the navigation. once I had finished scrolling down the page I resized the window so that I could scroll down some more. that’s when it breaks.

Reply From: Likno Customer Support

Ok, now I understood what you meant and I was able to replicate the problem! This is because the script keeps the image within the browser window.

I will forward this to our developers for further consideration. Note however this will probably be treated as a low-priority case as it does not really affect a real viewer use-case.

I will let you know of their response.

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

 

Tags: , , , , , , , , , , , , , , , ,

 

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


Initial Email From:
Carole
Initial Email Subject: Can not position our LWAC...
Support Case Month: November 2012

Hi,
After having bought and installed a LWAC menu, we are unable to position it into our structure.
Please read the note for LIKNO in the html code.
Thank you for helping us.
Carole

Reply From: Likno Customer Support

Hello,

I tested your page again with multiple browsers and I also looked at your accordion project.

First of all, regarding your initial question, if you want the accordion to appear where its initial structure was, then you need to select this in the project. Currently in your project you have set the accordion to appear on the top-right corner, and this is what it does.

This is what you have now:

accordion position relative to window

And this is what you want instead:

accordion embedded in page

Regarding the “flickering” now, I noticed that only happening in Firefox. It seems that the header mouseover/mouseout is triggered multiple times. Do you really need this to be activated on mouseover instead of click? I am asking this because personally I feel that mouseover does not fit the accordion controls anyway! Even in all other browsers where the bug does not exist, the handling seems erratic. Plus having to mouseout and mouseover again to open or close the accordion is not very practical. For the above reasons we always recommend that you use mouse click as the trigger.

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

Hi Kostas,

Thanks again for your help. We made the changes and everything seems to work out fine.

Carole

 

Tags: , , , , , , , , , ,

 

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


Initial Email From:
Brad
Initial Email Subject: tooltip 
Support Case Month: November 2012

Hi,

I followed the steps outlined in the help file. I created my tooltip.

Put the name of the tooltip into allwebmenus/ Style/ tooltip Style for mouse over.

I linked both projects to my page. Compiled both. I checked to make sure the js file was where it was supposed to be. When  I mouseover the allwebmenus item nothing happens.

Any ideas?

Thanks,  Brad

Reply From: Likno Customer Support

Dear Brad,

The problem is that you have not set the tooltip as an “AllWebMenus” tooltip:

set tooltip as AllWebMenus tooltip

You HAVE to do this if you want the tooltips to work in AllWebMenus.

Then if you want to load an external page, you can do this with code within AllWebMenus:

tooltip value to load external page

Just make sure that the iframe size matches the tooltip size…

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

Kostas,

I have it working now.  I updated my version of AllWebMenus and that seemed to do the trick.

Thanks for your help,
Brad

 

Tags: , , , , , , , , , , , , , ,

 


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