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


Initial Email From:
Laurie
Initial Email Subject: AllWebMenus - Footer Slide-up Capabiliy 
Support Case Month: January 2014

Hello,

Does your AllWebMenus product support footer slide-up menus?  If so, how many layers deep will it display? Can it display both vertically and horizontally?

For ease of communication, please understand that I am from the design/ergonomics side of web production rather than into coding.  Give me a menu or  wysiwyg and no problem; talk about code or the back end and I am lost.

Best of the season to you!

Thank you for bearing with me.

Kind regards,
Laurie

Reply From: Likno Customer Support

Hello Laurie,

First, thank you for your interest in our Likno Products.

Do you have an example of a footer slide up menu that you would like to achieve?

Don't worry, you don't need to feel comfortable on coding in order to use our software. They have a WYSIWYG interface, so in an easy way and codeless you can create what you need.

Thank you.

Kind Regards,

Aggelos Tsakonas 
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: Laurie

Hi Aggelos,

Thank you for getting back to me so quickly.

Please have a look at my website, which is still in the early stages of development:

{URL REMOVED}

As you see, I am using the drop-down menu that was packaged with my theme.

In essence, I would like to install the mirror image of this drop-down in the footer.  I believe this feature is known as a slide-up menu; it behaves much the same as a drop-down but propagates upwards

I think what I am asking for is a relatively new concept.  I have not come on a WordPress theme or plugin that offers the footer slide-up feature out of the box but I see that your product is quite new; hence, my inquiry.

Thanks in advance for your help.

Kind regards,

Laurie

Reply From: Likno Customer Support

Hello Laurie,

Please, find attached a zip file containing a test menu project that shows what you refer.

A menu that its first level submenus appear above it with a slide up effect.

You need to download AlWebMenus Pro in order to open the menu project and see how it is created. You can download it here: http://www.likno.com/download.html

We also have a WordPress plugin for AllWebMenus which you can find it here: http://www.likno.com/addins/wordpress-menu.html

Let me know if you need more help.

Thank you!

Kind Regards,

Aggelos Tsakonas 
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: Laurie

Hi Aggelos,

Thank  you for your excellent support.

Now I must play!

All the best,
Laurie

 

Tags: , , , , , , , , ,

 

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


Initial Email From:
User
Initial Email Subject:  Menu floats on scroll
Support Case Month: September 2013

Hi,

I have a vertical menu on left side of my page that scroll when the user go down in to the page.  Is there a way to limit the down movement of the menu to avoid the menu to enter in the footer of the page?

Thanks

Reply From: Likno Customer Support

Hello,

In order to have your menu to work as you described, you need to have the Advanced Floating Menu Add-in. http://www.likno.com/addins/floating-menu.php

Let me know if you need more information.

Thank you!

Kind Regards, 
Aggelos Tsakonas
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:
Larry
Initial Email Subject: Multiple menu locations
Support Case Month: August 2013

I was just wondering if it is possible to have the same menu in two place on the same page, i.e. header and footer, and if so how to do it.

Thank you for your assistance,

Larry

Reply From: Likno Customer Support

Hello Larry,

You could have the same menu in two places in the same page. All you should need to do is: Change the “Compiled Name” of the menu in the Project Properties.

Change the positioning (position one according to your header and the other according to your footer).

You should leave the folders as they are by default so that all of your menus see the same library files.

Things to note:

1) All your menus should be compiled with the same AllWebMenus version.

2) You should make sure that you properly Compiled, Linked and uploaded your second menus as you did with the first.

3) There is no limit to the number of  menus you can add this way.

Let me know if you need more information.

Thank you!

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

 

Hello, we have released a new version of AllWebMenus Pro: Version 5.3 build #920.

Check out What's New

- Enhanced the Color Picker for the "Background Color" property on menu items, so that it supports opacity (rgba).

CSS background color opacity

- Fixed the "3D Menu" Theme.

3D menu theme

- Fixed the Show Footer property.

- Fixed an issue on Cross Frame Support.

- Fixed Import Missing Images issue.

All features here: http://www.likno.com/allwebmenusinfo.html

Download the new version here: http://www.likno.com/download.html

--------
Likno Software - 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 for Likno Web Modal Windows Builder.

New attributes have been added in Likno Web Modal Windows Builder v. 2.2 build #264.

Now, you are able to call a Modal Window with specific parameters for width, height, header and footer.

The general syntax is:

For width:

data-lwmw-width="{width value}"
where {width value} you can have a value in px, percentage (%) or auto.

For example: data-lwmw-width="300px"
                    data-lwmw-width="50%"
                    data-lwmw-width="auto"

For height:

data-lwmw-height="{width value}"
where {height value} you can have a value in px, percentage (%) or auto.

For example: data-lwmw-height="300px"
                    data-lwmw-height="50%"
                    data-lwmw-height="auto"

For header:

data-lwmw-header="your custom header content here"
As a custom header content you can use either simple text or HTML code.

For Example: data-lwmw-header="New Header 1" (Simple Text)
                    data-lwmw-header="<span style='color:#FFF;'>This is a new Header</span>" (HTML code)
                    or
                    data-lwmw-header="<span style=/"color:#FFF;/">This is a new Header</span>" (HTML code)

Note: Be extra careful when using quotes inside the custom header content. You can use either single quotes or /". It is recommended to use single quotes.

For footer:

data-lwmw-footer="your custom footer content here"
As a custom footer content you can use either simple text or HTML code.

For Example: data-lwmw-footer="New Footer 1" (Simple Text)
                    data-lwmw-footer="<span style='color:#FFF;'>This is a new Footer</span>" (HTML code)
                    or
                    data-lwmw-footer="<span style=/"color:#FFF;/">This is a new Footer</span>" (HTML code)

Note: Be extra careful when using quotes inside the custom header content. You can use either single quotes or /". It is recommended to use single quotes.

All the above attributes can be used in the following cases.

1. Show content as specified inside this project


1.1 Multi-sheet > Embedded

multisheet modal window, embedded code

Then, the HTML code could be like below for 4 sheets;

<!-- Code for Modal Window Sheet 1 -->

<div style="text-align: center;" data-lwmw-width="40%" data-lwmw-height="500px" data-lwmw-header="New Header 1" data-lwmw-footer="New Footer 1">
    <p>&nbsp;</p>
    <p>Embedded text of<br>1st sheet</p>
    <p>&nbsp;</p>
    <p>Hello!</p>
</div>

<!-- Code for Modal Window Sheet 2 -->

<div style="text-align: center;" data-lwmw-width="400px" data-lwmw-height="auto" data-lwmw-header="New Header 2" data-lwmw-footer="New Footer 2">
    <p>&nbsp;</p>
    <p>Embedded text of<br>2nd sheet</p>
    <p>&nbsp;</p>
    <p>How are you?</p>
</div>

<!-- Code for Modal Window Sheet 3 -->

<div style="text-align: center;" data-lwmw-width="auto" data-lwmw-height="auto" data-lwmw-header="New Header 3" data-lwmw-footer="New Footer 3">
    <img src="
http://www.likno.com/Images/lwmw_example_kid.jpg"
width="174"
height="175"
style="margin-top: 10px;"/>
    <p>Framed photo created with our Photo Frame Show software<br><a href="
http://www.frameshow.com">check it out!</a></p>
</div>

<!-- Code for Modal Window Sheet 4 -->

<div style="text-align: center;" data-lwmw-width="40%" data-lwmw-height="40%" data-lwmw-header="New Header 4" data-lwmw-footer="New Footer 4">
    <p>&nbsp;</p>
    <p>Embedded text of<br>4th sheet</p>
    <p>&nbsp;</p>
    <p>Let us know what to improve, thanks!<br><br>
        <i>(use the 'Send Feedback' button in the application)</i>
    </p>
</div>

With the code above each sheet is declared to have different width, height, header and footer.

Open When

You can use the data-lwmw-width, data-lwmw-height, data-lwmw-header, data-lwmw-footer as  you wish, in order to call the modal window. This option will override the above declared attributes and all the modal window sheets will have the values you declared on modal window calling.

<a href="#" target="Modal_Window_1" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">Info on Product 1</a>

 

1.2 Multi-Sheet > Page Elements

multisheet modal window, page elements

The HTML code in the page that the modal will be opened should look like below:

<!-- Code for Modal Window Sheet 1 -->

<div class="sampleClass" style="display: none;" data-lwmw-width="40%" data-lwmw-height="500px" data-lwmw-header="New Header 1" data-lwmw-footer="New Footer 1">
    <p>&nbsp;</p>
    <p>Text of<br>1st sheet</p>
    <p>&nbsp;</p>
    <p>Hello!</p>
</div>

<!-- Code for Modal Window Sheet 2 -->

<div class="sampleClass" style="display: none;" data-lwmw-width="400px" data-lwmw-height="auto" data-lwmw-header="New Header 2" data-lwmw-footer="New Footer 2">
    <p>&nbsp;</p>
    <p>Text of<br>2nd sheet</p>
    <p>&nbsp;</p>
    <p>How are you?</p>
</div>

<!-- Code for Modal Window Sheet 3 -->

<div class="sampleClass" style="display: none;" data-lwmw-width="auto" data-lwmw-height="auto" data-lwmw-header="New Header 3" data-lwmw-footer="New Footer 3">
    <img src="
http://www.likno.com/Images/lwmw_example_kid.jpg"
width="174"
height="175"
style="margin-top: 10px;"/>
    <p>Framed photo created with our Photo Frame Show software<br><a href="
http://www.frameshow.com">check it out!</a></p>
</div>

<!-- Code for Modal Window Sheet 4 -->

<div class="sampleClass" style="display: none;" data-lwmw-width="40%" data-lwmw-height="40%" data-lwmw-header="New Header 4" data-lwmw-footer="New Footer 4">
    <p>&nbsp;</p>
    <p>Text of<br>4th sheet</p>
    <p>&nbsp;</p>
    <p>Let us know what to improve, thanks!<br><br>
        <i>(use the 'Send Feedback' button in the application)</i>
    </p>
</div>

Notes:
- "sampleClass" is an example, you can use any other value you like.
- If an element already uses another class value, HTML allows you to use multiple class values separated by space:
       <div class="anotherClass sampleClass" style="display: none;">

- Once the modal window appears the elements disappear from your page afterwards. Therefore make sure that your page elements are not visible elements, but hidden through the style="display: none;" code.

- Keep in mind that if no elements are found in your page with that class the modal window will not appear. Make sure that you have correctly selected which elements will appear by adding the correct class attribute.

1.3 Multi-sheet > HTML file

multi-sheet modal window, HTML file

The HTML File option is the same as the Embedded option but you place the code in an external HTML file.

In the HTML File input box, you insert the name of the HTML page that holds the code for the Modal Windows.

 

 

2. Make certain links/forms in page open in this window


2.1 Single

Single Modal Window

In case of External URL

<a href="http://www.likno.com/product1_info.html" target="Modal_Window_1_single" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">Info on Product 1</a>

In case of an Element

<a href="#company_info" target="Modal_Window_1_single" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">Company Info</a>

The modal window shows the following "in-page" element that uses this ID:

<div id="company_info" style="display:none; text-align: center;">
     <p>&nbsp;</p>
     <p>Hello!</p>
    
<p>&nbsp;</p>
     <p>Our company is here to serve you!</p>
</div>

Notes:

- You are not restricted to a DIV, you can show any type of element, like an image for example:

<img id="company_info" src="http://www.mysite.com/images/company_info.gif" style="display:none;" />

- The ID is always unique per element, you will get an error if you use the same ID on another page element.

- Once the modal window appears the element disappears from your page afterwards. Therefore make sure that your page element is not a visible element, but it is hidden through the style="display: none;" code.

- Keep in mind that if the element you specified is not in your page the modal window will not appear. Make sure that you have correctly selected which element will appear by adding the correct ID attribute.

2.2 Multi by Divs

Multi by Divs Modal Window

In case of External File

<a href="http://www.likno.com/product1_info.html" target="Modal_Window_1_multi_divs" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">Info on Product 1</a>

In case of an Element

<a href="#products_info" target="Modal_Window_1_multi_divs">Products Info</a>

...the modal window shows the following "in-page" elements (one sheet per DIV), that use this "class":

<div class="products_info" style="text-align:center; display: none;" data-lwmw-width="40%" data-lwmw-height="500px" data-lwmw-header="New Header 1" data-lwmw-footer="New Footer 1">
        <p>&nbsp;</p>
        <p>Modal Window for<br><br><b>AllWebMenus</b></p>
        <p>Create javascript menus for<br>websites in just a few clicks!</p>
        <p><a href="http://www.likno.com/allwebmenusinfo.html" target="_top">more info on this product</a></p>
</div>

<div class="products_info" style="text-align:center; display: none;" data-lwmw-width="400px" data-lwmw-height="auto" data-lwmw-header="New Header 2" data-lwmw-footer="New Footer 2">
     <p>&nbsp;</p>
     <p>Modal Window for<br><br><b>Likno Web Button Maker</b></p>
     <p>Create professional and stylish<br>web buttons in just a few clicks!</p>
     <p><a href="http://www.likno.com/web-button-maker/index.html" target="_top">more info on this product</a></p>
</div>

<div class="products_info" style="text-align:center; display: none;" data-lwmw-width="auto" data-lwmw-height="auto" data-lwmw-header="New Header 3" data-lwmw-footer="New Footer 3">
      <p>&nbsp;</p>
      <p>Modal Window for<br><br><b>Photo Frame Show</b></p>
      <img src="http://www.likno.com/Images/lwmw_example_kid.jpg" width="250" height="233" style="margin-top:10px;"/>
      <p>Framed photo created with our Photo Frame Show software<br><a href="http://www.frameshow.com">check it out!</a></p>
</div>

2.3 Multi by Links

Multi by Links Modal Window

In case of External URL

The window shows content located outside the containing page, such as another html page, an image, pdf file etc.

<a href="http://www.likno.com/product1_info.html" target="Modal_Window_1_multi_links" data-lwmw-width="40%" data-lwmw-height="500px" data-lwmw-header="New Header 1" data-lwmw-footer="New Footer 1">Info on Product 1</a>

<a href="http://www.google.com" target="Modal_Window_1_multi_links" data-lwmw-width="400px" data-lwmw-height="auto" data-lwmw-header="New Header 2" data-lwmw-footer="New Footer 2">Open Google</a>

<a href="http://www.likno.com/Images/logo.gif" target="Modal_Window_1_multi_links" data-lwmw-width="auto" data-lwmw-height="auto" data-lwmw-header="New Header 3" data-lwmw-footer="New Footer 3">View Image</a>

<a href="http://www.likno.com/downldd/AllWebMenus_Manual.pdf" target="Modal_Window_1_multi_links" data-lwmw-width="40%" data-lwmw-height="40%" data-lwmw-header="New Header 4" data-lwmw-footer="New Footer 4">View PDF</a>

In case of Element (DIV, IMG etc.) of the containing page

The window shows an element located inside the containing page.

Which element?

The one that uses the same ID as the one used in the href attribute, without the "#".

For example, for this <a> link...

<a href="#company_info" target="Modal_Window_1_multi_links">Company Info</a>

...the modal window shows the following "in-page" element that uses this ID:

<div id="company_info" style="display:none; text-align: center;">
   <p>&nbsp;</p>
   <p>Hello!</p>
   <p>&nbsp;</p>
   <p>Our company is here to serve you!</p>
</div>

Notes:

- You are not restricted to a DIV, you can show any type of element, like an image for example:

<img id="company_info" src="http://www.mysite.com/images/company_info.gif" style="display:none;" />

- The ID is always unique per element, you will get an error if you use the same ID on another page element.

- Once the modal window appears the element disappears from your page afterwards. Therefore make sure that your page element is not a visible element, but it is hidden through the style="display: none;" code.

- Keep in mind that if the element you specified is not in your page the modal window will not appear. Make sure that you have correctly selected which element will appear by adding the correct ID attribute.

 

2.4 Form

Form Modal Window

Contrary to the other 3 methods, this method is not related to page links (<a> tags) but to page forms (<form> tags).

It is used so that the user views the results of a form (i.e. the content after the form's "submit" button is pressed) into a modal window opening above the page.

This use case applies when you use the _form suffix next the window's name inside the "target" attribute of a page's <form> element:

Examples of such forms in the HTML of a page:

<!-- FORM 1 -->

<form action="http://www.likno.com/form1.php" method="POST"  target="Modal_Window_1_form">
   What is your name?<br>
   <table class="highlightText" style="width: 220px; border: none;">
       <tr><td> Name: </td><td> <input type="text" name="user_name"/> </td></tr>
       <tr><td> Surname: </td><td> <input type="text" name="user_surname"/> </td></tr>
       <tr><td colspan="2" align="center"><input type="submit" value="Submit"></td></tr>
   </table>
</form>

<!-- FORM 2 -->

<form action="http://www.likno.com/form2.php" method="POST"  target="Modal_Window_1_form">
   How would you like to travel today?<br>
   <input type="radio" name="transport" id="car" value="car" checked="checked"/><label for="car">by car</label>
   <input type="radio" name="transport" id="bus" value="bus"/><label for="bus">by bus</label>
   <input type="radio" name="transport" id="bike" value="bike"/><label for="bike">by bike</label>
   <input type="submit" value="Select">
</form>

And you can call the form in the Modal Window using the specific parameters as shown below:

<form action="http://www.likno.com/form2.php" method="POST" target="Modal_Window_1_form" data-lwmw-width="70%" data-lwmw-height="auto" data-lwmw-header="This is a new HEADER!" data-lwmw-footer="This is a new FOOTER!">

 

Tags: , , , , , , , , ,

 


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