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

Check out What's New

- Added new "Row/Column" options for more control on the menu layout when using this feature.

- Access to the UL/LI structure when clicking the related "Settings" link is now faster.

- The "Add Item" command has been added to the Main Menu Group too (was on Submenu Groups already).

- Updated the "Create Google Sitemap" feature to use the latest google sitemap schema.

- Added some optimizations to the libraries.

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


Initial Email From:
User
Initial Email Subject: Responsive and Server Side API
Support Case Month: July 2013

Is it possible to use the responsive menus with the server side API?

Thank you.

Reply From: Likno Customer Support

Hello,

Yes, you are able to use the responsive feature of AllWebMenus in a Server-Side API menu.

In order to do that, after you have chosen how many versions of your responsive menu you have and you have finished editing,

                Go to Add-ins -> Server-Side Menus API -> Setup Server-Side Menu / Choose Domain and select the first choice as shown below.

Responsive Server Side Menu

Go to Add-ins -> Server-Side Menus API -> Compile Server-Side Menu (for unlimited domains) and compile your menu.

As for the code:

To create a new Item Style: (its1 is an example name, you can have your own variable name there):

its1=new ItemStyle(); For version 1 of your menu

its1_rm2=new ItemStyle(); For version 2 of your menu

its1_rm3=new ItemStyle(); For version 3 of your menu

its1_rm4=new ItemStyle(); For version 4 of your menu

To create a new Group Style: (grs1 is an example name, you can have your own variable name there):

grs1=new GroupStyle(); For version 1 of your menu

grs1_rm2=new GroupStyle(); For version 2 of your menu

grs1_rm3=new GroupStyle(); For version 3 of your menu

grs1_rm4=new GroupStyle(); For version 4 of your menu

To create a new Menu Item: (we assume that we have declared the menu as awm_M0=new Menu(), instead of awm_M0 you can have your own variable name)

awm_I1=awm_M0.newItem(); For version 1 of your menu

awm_rm2I1=awm_rm2M0.newItem(); For version 2 of your menu

awm_rm3I1=awm_rm3M0.newItem(); For version 3 of your menu

awm_rm4I1=awm_rm3M0.newItem(); For version 4 of your menu

To create a new Menu Group: (awm_S4 is an example name, you can have your own variable name there):

awm_S4=awm_I2.newGroup(); For version 1 of your menu

awm_rm2S4=awm_rm2I2.newGroup(); For version 2 of your menu

awm_rm3S4=awm_rm3I2.newGroup(); For version 3 of your menu

awm_rm4S4=awm_rm3I2.newGroup(); For version 4 of your menu

Thank you!

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!

 

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

 

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


Initial Email From:
Gisbert
Initial Email Subject: Google Translator within a menu
Support Case Month: May 2013

Hello ,

I want to implement a Google translator within my AllWebMenus.

Here is the code  with one of my website pages.

This is the meta data:

<meta name="google-translate-customization" content="80d0ad144bd83465-b5af1067486ce75c-gf85d3def40656a45-2f"></meta>

and this the code for the language choose box:

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, gaTrack: true, gaId: 'UA-1699958-2'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

I implemented it by HTM Full mode, but it doesn't work.

I can't get this run within the menu.

Any chance to get it run. I think that is a areal good feature within a menu

Thanks for your help in advance

Cheers

Gisbert

Reply From: Likno Customer Support

Dear Gisbert,

Indeed adding <script> tags within a menu element can cause unpredictable results.

The best way to implement what you want, is to do it within your actual page. To do this, you will need to change your menu into a “UL/LI” menu that takes its structure from your HTML page.

The screenshot below shows you how to change the menu to “UL/LI” and how to get the sample menu code to use in your page:

ul li menu

Note that UL/LI menus require that you have the population code in each page where the menu appears. For this reason, we highly recommend that you create an include file and put the code there, so that it is easier to maintain in the future.

You can get more help regarding this feature within the application help (just click on the question mark above the “settings” link).

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!

Reply From: Gisbert

Thanks a lot for the fast answer.
I will see what I can do , maybe I stay with the menu as it is and I implement the translator free on the page.
Have a nice day
Cheers
Gisbert

 

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

 

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


Initial Email From:
Andy
Initial Email Subject: Using Allwebmenus in Dreamweaver CC
Support Case Month: July 2013

Bought the latest version of Allwebmenus but can't get it to appear in Dreamweaver CC.

Tried the .zxp extension, but it said it "cannot be installed" because "it requires Dreamweaver version 6 or greater." I have the latest version of Dreamweaver, so what is happening, please?

Reply From: Likno Customer Support

Hello Andy,

In order to install AllWebMenus DreamWeaver  Add-in:

1. Go to this page: http://www.likno.com/wat_dreamweaver.html and download AllWebMenus DreamWeaver Add-in.

2. Extract "AllWebMenus-DW.zip"

3. Open "Adobe Extension Manager CC" and Click on "Install" .

4. A Dialog Box will appear, choose the "LiknoAllWebMenus.zxp" and then click on "Open".

Note that during the above procedure, DreamWeaver CC should be closed.

Let me know if you need any more information.

Thank you!

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

Thanks, great support

Regards

Andy

 

Tags: , , , , , , , ,

 


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