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


Initial Email From:
Carmen
Initial Email Subject: 2 modal windows in same project 
Support Case Month: April 2014

Hi guys,

Love your software, awesome!

I have the most strange thing happen to me with 2 modal windows in the same project.

When I simply want to change the width or the height of one of the modal windows, IT CHANGES THE WIDTH AND THE HEIGHT ON THE OTHER ONE! For the life of me I cannot understand why it does this! Please help, images attached.

Many thanks,
Carmen.

Reply From: Likno Customer Support

Hello Carmen,

Thank you for your kind words.

I believe that you have set the width/height to one modal window thus the other modal window gets the same values.

You need to go to Style Editor -> select Edit style of specific window -> select the modal window that you want to have different width/height values and make the changes you need.

modal window styling settings

Do not forget to re-compile and re-upload the produced files to your server.

If the above is not your case, please export and send me your project file, so that we can have a better look at the problem.

This is what you should do to export your project into a ZIP file and then email this ZIP to us.

export modal window project

Please, let me know if I can be of further 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!

 

Tags: , , , , , ,

 

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


Initial Email From:
Beverly 
Initial Email Subject: Help with scroller software using likno modal windows settings - project files
Support Case Month: September 2013

Any ideas on getting the ESC key and overlay click to close the modal window when opened with a scroller? I didn't find any of the examples to had a modal window attached to them to test on the likno website or in the examples included with the scroller software.
Modal window opens fine, is customized just as expected from modal windows project, and will close using the Close X icon/text in the upper right hand corner, just can't close the modal window via clicking on the overlay or the esc button.

Reply From: Likno Customer Support

Hello Beverly,

The modal window closes when i click ESC, when I click on overlay area and also when I click the close button. Tested in all browsers. I guess you get confused on overlay as your modal window is big enough and the overlay is just a small, so you might have confused it with the space right after the form, but this is part of your modal content, not the overlay area, that's why clicking there do nothing. (see the attached screenshot to see the overlay area according to your modal window).

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!

Reply From: Beverly

Got it & it makes sense - is there any way to decrease the overlay colored area inside the content window that doesn't close with click/esc &/or increase the modal overlay colored area that does close with click/overlay? I think if I was confused other users might be too. Still not sure why esc quits working to close window after clicking in the modal colored area inside the content window, seems like esc should always work.

Reply From: Likno Customer Support

Hello Beverly,

I would recommend you to use width/height values that fit your design (maybe something around 350px width).

You have set specific values for each of your modal windows and you have set the width/height to 100%, so it tries to fit in the whole window.
In order to correct that, go to each modal window and set those values to specific pixels. (see the attached screenshot).

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!

Reply From: Beverly

This makes perfect sense, thanks again for all your great technical support (it is one reason I purchase your software, unlike other companies, you actually respond).

 

Tags: , , , , ,

 

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


Initial Email From:
John
Initial Email Subject: Web Scroller Builder - How to control vertical position of items within their container
Support Case Month: June 2013

Hi Kostas and crew

A very quick question.  Starting with the Example12 BBC layout, I've removed the top area, made some other minor changes, and made the item area the same size as the container area.  I have sized my images so that there is spare height within the item area for a caption beneath the image. 

Now I need the images to align to the top of the container area, so that there is no black area above the photo of the volcano in the attached PDF (and so making the height of the black area at the bottom larger). 

How?

If you could wiz me back an answer this afternoon that would be great!

My HTML (from ASP.NET) is in this form:

<ul>
    <li>
        <img>
        <p>caption<p>
    </li>
</ul>

Many thanks for your help.

Regards,
John

Reply From: Likno Customer Support

Hello John,

You need to have the same height in BOTH the "Container" and "Items":

scroller slider container area height

scroller slider items area height

Because you cannot change the "middle" vertical alignment of the items (it is like that by design for other reasons).

So, also remove this, it cannot do anything:

scroller slider hand coded CSS

Kind Regards,
Aris
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 Aris

If I do that then there is no space for the caption beneath the image.  How can I then display the caption?

John

Reply From: Likno Customer Support

You will still have room below the image to add the caption, as long as the image height is smaller than the items height.

I did this on your project here:

scroller slider image caption

Kind Regards,
Aris
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 very much Aris. That works.

John

 

Tags: , , , , , , , ,

 

 

In this article we will see how we can change the Default Drop-Down (Horizontal and Vertical) menus from JavaScript to CSS menus. Then, we will see how to compile them and insert both of them in a page.

Step 1: We open the AllwebMenus, we create a new project and we select (Default Drop-Down) as the menu theme for the first window that appears.

SNAGHTML4942d9c

Then, we save the menu project and let's give it the name HorizontalMenu for example. You can give whatever name you want.

Step 2: We select the "Populate menu inside your page through UL/LI items" and as the Menu Genre we select "CSS menu (light, 508/WCAG)"

image

Step 3: We need to set minimum width/height values for the menu items in order for the CSS to work. In a CSS version of the menu we cannot have auto width/height.

Click on Main Items Style, then Size and set (for this example) at least 127px width and at least 30px height. In your projects you could set the width/height values that best fit your design.

image

Step 4: Click on Compile Menu. On the window that appears on Folder and Files, we select the Site_Root folder and we change the Compiled menu name to Custom and we set HorizontalMenu.js.

image

 

Let's create the Vertical Menu now.

Step 1: We open the AllwebMenus, we create a new project and we select (Default Drop-Down)[v] as the menu theme for the first window that appears.

SNAGHTML4ad239e

Then, we save the menu project and let's give it the name VerticalMenu for example. You can give whatever name you want.

Step 2: We select the "Populate menu inside your page through UL/LI items" and as the Menu Genre we select "CSS menu (light, 508/WCAG)" (same as in the HorizontalMenu).

Step 3: We need to set minimum width/height values for the menu items in order for the CSS to work. In a CSS version of the menu we cannot have auto width/height.

Click on Main Items Style, then Size and set (for this example) at least 127px width and at least 30px height. In your projects you could set the width/height values that best fit your design.

Step 4: Click on Compile Menu. On the window that appears on Folder and Files, we select the Site_Root folder and we change the Compiled menu name to Custom and we set VerticalMenu.js.

image

 

After that we can create the HMTL page in which we want both of the menus to appear.

The basic structure of our page could initially be:

<!DOCTYPE html>
<html>
<head>
<title>CSS menus</title>
</head>

<body>
</body>
</html>

and we are going to give it the name CSSmenus.html

Then, we need to go back to our AllWebMenus projects and Link the menus to the page.

First, we go to HorizontalMenu.awm and we click on Link Menu, we select the html file(s), in this example the CSSmenus.html, we click on right arrows to select it and finally we click on Link.

image

We do the same process for the VerticalMenu.awm

In the next step we need to add the UL/LI structure for our menus in the CSSmenus.html page (as in a CSS menu we need to insert the ul/li structure in the page).

So, we go back to HorizontalMenu.awm and we click on Settings as shown in the following screenshot. Then, we click on "OR <UL><LI> structure based on your current project's structure" tab, we select all the structure and we copy it. We go to our html page and we paste that structure.

image

We do the same step for the VerticalMenu.awm.

Last step but not least is to set the correct positioning for our menus.

I would suggest to select the Menu Positioning relative to an element. So, we click on Menu Positioning, we select Relative to an Element and we can leave the Default ID. We copy that value in order to paste it in the page in an element we are going to create.

After that, we need to re-compile the project, just click Compile.

image

Then, we go to the HTML page and we create the element with the ID we copied. The element could look like :
<div id="awmAnchor-HorizontalMenu"> &nbsp; </div>
and we place it before the UL/LI structure for the horizontal menu.

Then, we do the same process for the vertical menu and the element in the page could look like:
<div id="awmAnchor-VerticalMenu"> &nbsp; </div>

The final result in our page will be:

image

and the code is:

<!DOCTYPE html>
<html>
<head>
<title>CSS menus</title>
<!-- ******** BEGIN ALLWEBMENUS CODE FOR HorizontalMenu (CSS MENU)******** -->
<link href="HorizontalMenu.css" rel="stylesheet" type="text/css">
<script charset="UTF-8" src="HorizontalMenu.js" type="text/javascript"></script>
<!-- ******** END ALLWEBMENUS CODE FOR HorizontalMenu (CSS MENU)******** -->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR VerticalMenu (CSS MENU)******** -->
<link href="VerticalMenu.css" rel="stylesheet" type="text/css">
<script charset="UTF-8" src="VerticalMenu.js" type="text/javascript"></script>
<!-- ******** END ALLWEBMENUS CODE FOR VerticalMenu (CSS MENU)******** -->
</head>

<body>

<div id="awmAnchor-HorizontalMenu"> &nbsp; </div>
<ul id="awmULLI-HorizontalMenu" style="display:none;">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a>
        <ul>
          <li><a href="#">Sub Item 4</a></li>
          <li><a href="#">Sub Item 5</a></li>
          <li><a href="#">Sub Item 6</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="awmAnchor-VerticalMenu"> &nbsp; </div>
<ul id="awmULLI-VerticalMenu" style="display:none;">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a>
        <ul>
          <li><a href="#">Sub Item 4</a></li>
          <li><a href="#">Sub Item 5</a></li>
          <li><a href="#">Sub Item 6</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>
</body>
</html>

When we are done we need to upload to our server the following:

image

Which are the HTML page containing the menus, the CSS files and JS files produced after we compiled the 2 projects and the awmdata folder.

 

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

 

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


Initial Email From:
User
Initial Email Subject: Different height/width modal window 
Support Case Month: August 2013

Hi,

I have a modal window project and I need to open the modal window in different width/height each time. How can I do that with your new data-lwmw-width and data-lwmw-height attributes?

Thanks

Reply From: Likno Customer Support

Hello,

You can call (open) the modal window in different width/height as:

<a href="#" target="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</a>

and you can have another element that opens the same modal window in different dimensions.

<a href="#" target="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</a>

and so on, you can use different width/height values each time you call the modal window.

The above links will open the modal window with a width of 500px and height of 40% in the first case and with auto width and auto height in the second case.

or if you use an ID or a Class to trigger the modal window

<span id="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</span>

<p id="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</p>

<span class="Modal_Window_1" data-lwmw-width="500px" data-lwmw-height="40%">Open Modal Window (500px width)</span>

<p class="Modal_Window_1" data-lwmw-width="auto" data-lwmw-height="auto">Open Modal Window (auto)</p>

You can also use TD, DIV, IMG, INPUT to trigger the modal window.

For the data-lwmw-width and data-lwmw-height you can have any value you want as long it is px or % or you can have it as auto.

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

 


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