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


Initial Email From:
Becky
Initial Email Subject:  adding drop down menu to website
Support Case Month: March 2012

Hi.

I am done building my web menu. My coding is set so the drop down menus have an auto width however they aren’t adjusting to the correct widths..some have extra space and others have too little thus forcing the sub menus to become vertical instead of horizontal. Since each Sub Menu has somewhere between 1-3 columns I wasn’t sure how many to put in the style editor. I am wondering if it will in fact still look right on an html page. Which brings me to my other issue. I am planning on adding the menu to an existing site. It’s through Network Solutions, the menu would thus need to appear in the header design coding (to apply to all pages of the site). I’ve been reading through your knowledge bank but keep finding information on linking the menu to a site that has a local root on the desktop, this site does not. The site is {URL REMOVED}.

I’ve attached my menu.

Thank you for all of your help and assistance!

Cheers,

Becky.

Reply From: Likno Customer Support

Dear Becky,

If you turn the “Menu Structure” option back to “inside this project” you will see that you have set custom widths for most of your submenus:

custom submenu width

This is why these submenus are not becoming vertical, while the ones that do not have a width set become vertical.

There are two solutions for this:

1) change the menu back to “populate inside this project” so that the custom widths are actually active, and set widths for all submenus

OR

2) change your HTML code for each submenu so that it does not “brake”. One way would be to add your DIVs within TDs of a single table row, for example:

<table><tr>

<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; height:325px; float: left; line-height:20px; border-right:1px solid #BBBBBB;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="{LINK REMOVED}">Car Audio</a></p>

  <p style="margin:10px 15px 20px 15px;"><a href="{LINK REMOVED}" style="color:#ffffff;">Car Stereo & Head Units</a><br/>

    <!-- MANY MORE LINKS HERE -->

    <a href="{LINK REMOVED}" style="color:#ffffff;">Satellite Radio</a></p>

</div>
</td>

<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; float: left; height:325px; line-height:20px; border-right:1px solid #BBBBBB;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="{LINK REMOVED}">Car Speakers</a></p>

  <!-- MANY MORE LINKS HERE -->

  <p style="margin:10px 15px 20px 15px;">
    <a href="{LINK REMOVED}
" style="color:#FFFFFF;">Tweeters</a>
  </p>

</div>

</td>

<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; float: left; height:325px; line-height:20px; border-right:1px solid #BBBBBB;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="{LINK REMOVED}">Car Amplifiers</a></p>

  <p style="margin:10px 15px 20px 15px;">
    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Class D</a><br/>

   <!-- MANY MORE LINKS HERE -->

    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Vehicle Specific</a></p>

</div>

</td>

<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; float: left; height:325px; line-height:20px; border-right:1px solid #BBBBBB;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="http://www.driveinautosound.com/carsubwoofers.aspx">Car Subwoofers</a></p>

  <p style="margin:10px 15px 20px 15px;">
    <a href="{LINK REMOVED}
" style="color:#FFFFFF;">6 1/2" Subwoofers</a><br/>

    <!-- MANY MORE LINKS HERE -->

    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Vehicle Specific</a></p>

</div>

</td>
<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; float: left; height:325px; line-height:20px;;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="{LINK REMOVED}">Installation Accessories</a></p>

  <p style="margin:10px 15px 20px 15px;">
   <a href="{LINK REMOVED}
" style="color:#FFFFFF;">Car Stereo Installation</a><br/>

    <!-- MANY MORE LINKS HERE -->
    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Batteries</a></p>

</div>

</td>
</tr></table>

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

Kostas,

Thanks for your assistance I was able to fix the alignment issue I was having with my submenus.

Thanks,
Becky

 

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

 

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


Initial Email From:
Paul
Initial Email Subject:  Setting width of sliding menu
Support Case Month: April 2012

Sorry for really basic question but just changed the image on a menu item and the width of the whole menu has increased.

Image width is 168px and should be the widest item, can not see that I have introduced any margins or padding anywhere and can't find anywhere to set width other than min width that doesn't help!

MTIA

Paul

Reply From: Likno Customer Support

Dear Paul,

The extra width of the menu is due to the space reserved for the “hasSubmenu” image:

menu image

You can remove this if you want:

menu image settings

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

Hi Kostas
Many thanks for that
Obvious next question can the "hasSubmenu" be included without adding width - it would be good to set a width or max width for dropdown sliding menus as their width is often an important design and layout consideration
Thanks again
Paul

Reply From: Likno Customer Support

Dear Paul,

I am afraid that it is not possible to add “hasSubmenu” images without affecting the menu width.

Still, your image does not really have to be part of the menu… Why don’t you just add it directly beneath the menu? This way you can also keep your “HasSubmenu” images.

To do this properly you need to:

1) Change this line:

<td id="awmAnchor-BraidsVert" style="width: 163px; height: 470px;" class="style1" >&nbsp;</td>

Into this:

<td style="width: 163px; height: 470px;" class="style1" >   
       <div id="awmAnchor-BraidsVert">&nbsp;</div>
   
       <a href="/ContactUs.asp">
               <img src=" http://www.braidhillsgolf.co.uk/awmdata/BraidsVert/ContactusLate2.jpg"/>
              </a>
</td>

Obviously you can move the image file somewhere else and change the img “src” accordingly

2) Make sure that the menu has the desired width:

menu minimum width

3) Make sure that the menu will push/pull its positioning element (hence the extra <div> in the HTML code above):

menu positioning

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 AllWebMenus, abstracted and stripped of all user’s private info.


Initial Email From:
Julia
Initial Email Subject: Menu not displaying when I view web pages
Support Case Month: April 2012

Hello,
I've used AWM for years without incident at home. I just installed AWM pro today on my work computer, but for some strange reason, I cannot get any menus to work. They preview fine while building them, but after compiling and attaching to my web pages, they don't work.
I designed my pages using dreamweaver CS5. I confirmed all my awm files are in the proper place - including the .js, and the awmdata folder.
The following code also appears in the body tag:

<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu_side ******** -->

<script type=\"text/javascript\">var MenuLinkedBy=\"AllWebMenus [4]\",awmMenuName=\"menu_side\",awmBN=\"888\";</script><script charset=\"UTF-8\" src=\"menu_side.js\" type=\"text/javascript\"></script><script type=\"text/javascript\">awmBuildMenu();</script>

<!-- ******** END ALLWEBMENUS CODE FOR menu_side ******** -->


I tried to view it in ie8 and google chrome 18.0.1025.151 m.
Any idea why it's not working? I tried to compile & link several of your menu samples and none are displaying for some strange reason.
Thanks!

Reply From: Likno Customer Support

Hello,

Did you Link the menu to your pages after you compiled? Did you also upload the linked pages?

I am asking because I checked the URL you sent me and I did not see any AllWebMenus code there.

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

Hi,

Thanks for getting back to me. Actually, I included that URL only because your form required I enter one. I’m actually working offline on my laptop. All files are there… so I’m perplexed as to why it’s not working. I have zipped my site for you to see.

Let me know if you can offer any insight.

Best,

Julia

Reply From: Likno Customer Support

Dear Julia,

It seems that you set your menu to be positioned “Relative to Element”, but you did not add the appropriate Element Anchor ID to your page.

Please try adding the following to wherever the menu should appear in your page:

id="awmAnchor-menu_side"

For example, you can change the following line:

<td width="11" height="16" valign="bottom"><img src="images/corner_right_top.png" width="11" height="16" alt="shadow" /></td>

Into this:

<td id="awmAnchor-menu_side" width="11" height="16" valign="bottom"><img src="images/corner_right_top.png" width="11" height="16" alt="shadow" /></td>

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 AllWebMenus, abstracted and stripped of all user’s private info.


Initial Email From:
Graham
Initial Email Subject: Menu position in Chrome browser
Support Case Month: October 2012

My AWM menu position works fine in IE but is too low in Chrome.

The image below indicates the problem.

chrome menu positioning misplaced

I have viewed your solution that suggests the coding of valign="top" should be the solution - but it is not! This problem occurs throughout all the pages in my site and they all have embraced within their coding valign="top". The only page that is not a problem is the index page because I have added an extra blank space line in within the page display.

Is there a solution?

Graham A. Hardy


Reply From:
Likno Customer Support

Dear Graham,

I just checked your page and I see the menu properly positioned in all browsers:

IE menu positioning

Chrome menu positioning

Firefox menu positioning

I any case if you still see a problem, then this most likely happens because you are using a paragraph (<p> element) as the positioning element.

Please try moving the element ID into the <td> instead of the <p> and see if this fixes the 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!


Reply From:
Graham

Dear Kostas,

Many, many thanks for your swift response. I am greatly relieved that you found the menu perfectly placed.

This means only I have the problem on my machine – maybe?

The menu system was always perfectly placed until I upgraded my Chrome to version 22.0.1229.94 about two weeks ago.

Were you using the same version of Chrome? The problem only occurs in Chrome.

I have altered the element id into the <td> but it has not corrected the problem.

Is there anything more you could suggest?

Graham

Reply From:

Likno Customer Support

Dear Graham,

Do you by any chance use any plugin that could be interfering?

Or do you maybe have “Google translate” loaded on top of the page?

Please send me a full screenshot of what you see.

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!


Reply From:
Graham

Dear Kostas,

There are 9 built in apps within my Chrome browser! I cannot find any option to eliminate them. They are all “Hidden” as per Chrome “spanner” options.

I am not aware of using, nor can find any plugins. This doesn’t mean they are not there though. Google Translate is not present.

Graham


Reply From:
Likno Customer Support

Dear Graham,

Can you tell me what this is?

Chrome plugin snapper

It seems to be inserted within the actual page, and it is 99% the cause of the problem. If you tell me what it is, I can install it in a test-machine and check it out.

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!


Reply From:
Graham

Hi Kostas,

Well done!  It is a bar put up, not consciously by me, but from a company named {COMPANY NAME REMOVED}.

I always thought it was part of the Chrome browser!

I have no idea how it got there. It has now been deleted and my menus are perfectly placed.

Many many thanks for identifying this as my problem.

I am sorry to have taken your time up on a problem that I should have spotted and been able to cure by myself!

Well done, and thank you once again.

Tell all you know I think you are great!

Graham

 

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

 

The tooltip shows content which is retrieved from a specified attribute (like "title", "alt", your own attribute, etc.) that exists on the tooltip's "trigger" element.

View tooltip examples that use the "In Page" feature here

This feature is quite powerful, as you can open the same tooltip with different content that simply exists on each element that opens it ("trigger" element). You do not have to specify any content inside the application, you just edit your page to add/update/remove your tooltip's content per element.

In addition, this feature can be used on any page element that uses the specified attribute OR it can be restricted to some of these elements through conditions of yours (read the "Opens - When" section below).

Examples with the "title" (or "alt") attribute:

image

<a href='info.html' title='Show this text inside a tooltip!'>Info</a>
<img src='image.gif' alt='Show this text inside a tooltip!' />

Note: the "alt" attribute applies only to images, all other elements (tags) should use the "title" attribute OR your custom one.

Read how we use the "alt" option (combined with the "SOME" option) on our own website here:
Use Case: Tooltip content retrieved from "Page", from the "ALT" attribute of "SOME" elements that use a specific "CLASS" value (only)

<img src='image.gif' title='Show this text inside a tooltip!' />
<div title='Show this text inside a tooltip!'>
Blah... Blah... Blah...
</div>
<span title='Show this text inside a tooltip!'>
Blah... Blah... Blah...
</span>

 

You can use the "title" attribute on any elements you like, such as links ("a" tag), table cells ("td" tag), images ("img" tag), DIVs ("div" tag), SPANs ("span" tag), etc. The "alt" attribute can also be used for images ("img" tags only). This feature can be very useful if you want to automatically replace the standard browser tooltips with stylish ones.

Same examples but with a custom attribute instead of the "title" (or "alt") attribute:

image

<a href='info.html' likno_tooltip='Show this text inside a tooltip!'>Info</a>
<img src='image.gif' likno_tooltip='Show this text inside a tooltip!' />
<div likno_tooltip='Show this text inside a tooltip!'>
Blah... Blah... Blah...
</div>
<span likno_tooltip='Show this text inside a tooltip!'>
Blah... Blah... Blah...
</span>

 

All the above page elements show the following content on your project's tooltip:

image

 

HOW TO SHOW ADVANCED (RICH) CONTENT (instead of simple text)

You have several methods to choose from:

<a href='info.html' likno_tooltip='<p>Show me in <b>BOLD</b></p>'>Info</a>

This example shows that you can have HTML (instead of simple text) as the value of the attribute. Be careful however because quotes or special characters can break it.

Instead, you may use the "ID" or "CLASS" method (presented below) for showing complex HTML on the tooltip without any problems!

<a href='info.html' likno_tooltip='lwtt_content[id=myID21]'>Info</a>

<div id='myID21' style='display:none;'>

<p> ANY HTML WITHIN THIS DIV WILL SHOW AT THE TOOLTIP ABOVE </p>

</div>

...or...

<img id='myID21' style='display:none;' src='http://www.mysite.com/image1.gif' />

...etc.

You can use the "ID" attribute on any page element you like.

<a href='info.html' likno_tooltip='lwtt_content[class=myClass43]'>Info</a>

<div class='myClass43' style='display:none;'>

<p> ANY HTML WITHIN THIS DIV WILL SHOW AT THE TOOLTIP ABOVE </p>

</div>

...or...

<img class='myClass43' style='display:none;' src='http://www.mysite.com/image1.gif' />

...etc.

You can use the "CLASS" attribute on any page element you like.

<a href='info.html' likno_tooltip='lwtt_content[imageurl=http://www.mysite.com/image1.gif]'>Info</a>

This example shows that you can have a reference to an image as the value of the attribute. This image is shown at the tooltip.

<a href='info.html' likno_tooltip='lwtt_content[ajaxurl=http://www.mysite.com/products.html]'>Info</a>

This example shows that you can have a reference to an internal web page (note: within the same site and without javascripts) as the value of the attribute. That page is shown at the tooltip.

 

Needless to say that the above examples can use the "title" attribute instead of the custom attribute, it is your choice.

 

WHAT ABOUT "ANY" or "SOME"?

As mentioned above, the "attribute" feature can be used on any element OR only some (specific) elements of the page. You can choose this behavior through the "Opens - When" property below:

image

 

Example 1 for "SOME" elements:

image

This image shows a Likno tooltip:

<img id="id23" src="image.gif" alt="Show this text inside a tooltip!" />

…but these ones not:

<img id="other_id" src="image.gif" alt="Show this text inside a tooltip!" />
<img src="image.gif" alt="Show this text inside a tooltip!" />

 

Example 2 for "SOME" elements:

image

This image shows a Likno tooltip:

<img class="class45" src="image.gif" alt="Show this text inside a tooltip!" />

…but these ones not:

<img class="other" src="image.gif" alt="Show this text inside a tooltip!" />

<img src="image.gif" alt="Show this text inside a tooltip!" />

Read how we use the "SOME" option combined with the "Class" option on our own website here:
Use Case: Tooltip content retrieved from "Page", from the "ALT" attribute of "SOME" elements that use a specific "CLASS" value (only)

 

Example 3 for "SOME" elements:

image

All images show a Likno tooltip:

<img src="image1.gif" alt="Show text for image 1 inside a tooltip!" />

<img src="image2.gif" alt="Show text for image 2 inside a tooltip!" />

…but other tags not:

<a href="page.html" title="Show this text inside a tooltip!"> link text here </a>

<div title="Show this text inside a tooltip!"> page text here </div>

 

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

 


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