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


Initial Email From:
Josef
Initial Email Subject: Multiple menus in a page - highlight item
Support Case Month: July 2013

Hi,

the website {URL REMOVED} is a Drupal based CMS multilange website. Most of the content pages use a mixture between AllWebmenus based submenus and a Drupal Main Menu on the left sidebar of the template.

The problem is, that the highlighted item of the drupal mainmenu loses its highlighted state when a Allwebmenu Submenu item is activated.

Is it possible to realize the mainmenu with AllwebMenus AND still showing the selected main item in a highlighted state when a subpage via an AllWebmenu Submenu is called?

If yes, what would be the best configuration setup to achieve this?

Thank you for your help!

Regards

Josef

Reply From: Likno Customer Support

Hello Josef,

The way you have now implement your menu will not work as you expect. It would work if you had also the left  sidebar menu on AllWebMenus. Now, they are 2 different menus. So, the highlight feature cannot work for another menu.

You could achieve that if the left menu and the bottom menu are one menu. You could have the main menu group as a vertical menu and the submenu group as horizontal menu with the appropriate offsets so that appears in the bottom as you want it. You should then set the submenu to be sticky and set the highlight feature according to your desired settings.

Let me know if you need further information.

Thank you!

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!

 

Tags: , , , , , , , , ,

 

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 color 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 behavior.  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)

background color in tab header

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.

style tag in tab header

CSS class in tab header

highlighted text in tab header

Kind 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)

Bests,
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 general 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
</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:

highlight text in tabs header

Kind 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 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:
Claudio
Initial Email Subject: awmShowItem
Support Case Month: May 2013

Kostas,

I am back with the same technical problem I encountered in the Blog below:

http://www.likno.com/blog/highlight-menu-item/2418/

You are saying in the blog response:

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”.

==================

In the AllWebMenus Help, I read a different explanation:

About the awmShowItem variable when the menu is populated using a "UL/LI structure". 

In order to find the correct ID to use as a parameter, you should count the loading order of the ULs and LIs. So you should count how many LI tags are found in the UL/LI structure until the desired item is found.
For example this is a usual UL/LI code:
<ul id="awmULLI-menu" style="display:none;">
<li>Main Item 1</li>
<li>Main Item 2
   <ul>
     <li>Sub Item 1</li>
     <li>Sub Item 2
       <ul>
         <li>Sub Item 4</li>
         <li>Sub Item 5</li>
         <li>Sub Item 6</li>
       </ul>
     </li>
     <li>Sub Item 3</li>
   </ul>
</li>
<li>Main Item 3</li>
</ul>

According to the awmShowItem technique, if you want to make the “Sub Item 6” highlighted, you should use it7 since its LI tag is the 7th LI in the structure

==================

Testing the theory on the new project:  {URL REMOVED}

I am using the function var awmShowItem=["MainMenu,it5,1,0"];

IF I add another item in the BISHOP menu list, the highlighted menu option will move to the BISHOP group, since that option changed to it6.

The only solution to the problem is to create a javascript function where the selection of the menu item is based either on the URL or the anchor text:

awmShowItem=["MainMenu,Ministries,1,0"];  

awmShowItem=["MainMenu,CatholicDiocese.php?op=ILS_Information,1,0"];

Otherwise, I will have to go page by page to update the javascript code of similar pages, every time I add a new LI item into the structure.

Reply From: Likno Customer Support

Dear Claudio,

When you are using a menu project and you populate your menu in there, then each menu item gets a specific ID that will not change when you move this item around or add other items around it.

However, when you are using a UL/LI menu then the menu is dynamically created at runtime, so the menu items also get their ID at runtime and there is no way to have a specific item keep a specific id.

In this case, indeed, when you add items you may need to change the highlight code too.

However you say that you need to change this in every page. This suggests that you manually included the code in each of your pages in the first place. Our recommendation is that you use an include file (e.g. a PHP or ASP file) and keep the menu Linking Code, Structure Code and highlight code there. This way it will be automatically included in all pages, but it will be much easier to maintain as you will only need to change and upload a single file when you need to change the menu again.

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!

 

Tags: , , , , ,

 

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


Initial Email From:
User
Initial Email Subject: AllWebMenus floating image selected
Support Case Month: February 2013

How could I keep a floating image indicator unhidden on a selected menu item? For example, I would like the indicator of the home page to be shown while the user is in the home page.

Reply From: Likno Customer Support

Hello,

This is not possible exactly the way you describe it. What you can do instead, is to use the floating image on the “click state”, and set your menu to automatically highlight the “current item”.

This will automatically set the “current item” to the “click state”, based on the URL shown in the address bar:

floating image on click state

highlight menu item bases on URL

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!

 

Tags: , , , , , , ,

 


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