Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows and more...

A modal window consists of 4 areas:

- Header (optional)

- Body

- Navigation Bar (optional, for multi-sheet windows only)

- Footer (optional)

Below, we show an example of how the heights of these areas are specified.

Let's assume that you have the following values on your modal window project:

The modal window will then appear with the following heights:

As you can see, the jQuery modal window can be further customized for each area separately, through the powerful CSS properties!

Hello everybody,

We have released the latest version of Likno Web Modal Windows Builder - version 1.1 Build #118!

The new version includes the following enhancements and new features:

- Added several new opening/closing effects, along with the ability to set the effect duration:

Opening effects (all): Show instantly, Fade in, Slide down: linear, Slide down: easeInQuad, Slide down: easeOutQuad, Slide down: easeInOutQuad, Slide down: easeInCubic, Slide down: easeOutCubic, Slide down: easeInOutCubic, Slide down: easeInQuart, Slide down: easeOutQuart, Slide down: easeInOutQuart, Slide down: easeInQuint, Slide down: easeOutQuint, Slide down: easeInOutQuint, Slide down: easeInSine, Slide down: easeOutSine, Slide down: easeInOutSine, Slide down: easeInExpo, Slide down: easeOutExpo, Slide down: easeInOutExpo, Slide down: easeInCirc, Slide down: easeOutCirc, Slide down: easeInOutCirc, Slide down: easeOutElastic, Slide down: easeOutBack, Slide down: easeInBounce, Slide down: easeOutBounce, Slide down: easeInOutBounce

Closing effects (all): Hide instantly, Fade out, Slide up: linear, Slide up: easeInQuad, Slide up: easeOutQuad, Slide up: easeInOutQuad, Slide up: easeInCubic, Slide up: easeOutCubic, Slide up: easeInOutCubic, Slide up: easeInQuart, Slide up: easeOutQuart, Slide up: easeInOutQuart, Slide up: easeInQuint, Slide up: easeOutQuint, Slide up: easeInOutQuint, Slide up: easeInSine, Slide up: easeOutSine, Slide up: easeInOutSine, Slide up: easeInExpo, Slide up: easeOutExpo, Slide up: easeInOutExpo, Slide up: easeInCirc, Slide up: easeOutCirc, Slide up: easeInOutCirc, Slide up: easeInElastic, Slide up: easeInBack, Slide up: easeInBounce, Slide up: easeOutBounce, Slide up: easeInOutBounce

- Added the "gallery" shortcut button to all image-related attributes.

- Fixed an issue related to external urls in certain DOCTYPES.

For full release history please visit our product's What's New Page

We are pleased to have released version 1.1 (Build #116), with a number of important improvements in both speed and stability, several new features such as customization options, new opening and closing effects and more.

Due to the fact that a big part of the modal engine was rewritten, some of the changes may affect any previous modal windows you have created when re-compiling them.

These changes affect only projects compiled with Build #114 or below:

1) The $.modal.close() command is no longer supported! If you have never used this command (most likely), just skip this section as no changes are necessary.

Otherwise, you need to replace it with the following NEW one:

MyModalProjectName.close(fn)

…where “MyModalProjectName” is the name you gave to the project for the compile.

As you can see, this new command also uses an optional parameter (a function), which is executed immediately after the Modal Window closes.

For example:
MyModalProjectName.close(function() {alert(“closed!”);})

This feature is used in “Example 12”, which demonstrates how to combine the CLOSING of a window with the OPENING of ANOTHER window in one action!

2) A Modal Window now consists of 4 areas: a Header, Footer, Navigation Bar and Body area.

See the APPENDIX NOTES and SCREENSHOTS at the end of the post for more information.

This change affects the TOTAL HEIGHT of the modal window. In previous versions (build #114 or below), the property “HEIGHT” applied only to the BODY area of the window. Now, it applies to the ENTIRE window, including all areas.

Due to this, your old modal windows may now be smaller if they had a header/footer/navigation bar and you will need to readjust their window height and re-compile.

The window width and height are now calculated according to the W3C content-box, so the total window width and height will be what you set in the “Modal Width” and “Modal Height” properties plus any BORDERS/PADDINGS you set in the “Modal Window CSS” property.

3) The “Body CSS” property has been added to be able to customize the style of the BODY area, as opposed to the style of the WINDOW area (through the “Modal Window CSS” property).

4) The “Close CSS” property has been added to separate the content from styling in the Close box.

5) A programming API is now available allowing customizations of the Modal Windows from within your page code.

6) A new set of opening/closing effects is added. You can now also set the duration of an effect along with its type.

Read what else is new in our "Release History" page

If you take the above into consideration you will not experience any problems with the migration of your projects to version 1.1.

If you still encounter any problems, we are here to help.

Thank you and we hope that you will like the new features of version 1.1!

The Likno Software Team

APPENDIX

Let's assume that you have the following values on your modal window project:

The modal window will then appear with the following heights:

Hey everybody!

We just released a new version of AllWebMenus; It is version 5.2 build 792 and it has many new features and enhancements!

Take a look:

- New "Likno Web Modal Windows Builder" Add-In. This add-in introduces the "Open Modal Window" item property in order to be able to open a modal window (created through the separate "Likno Web Modal Windows Builder" product) from within a menu item!

- Added margin support on images used by the "Item Image" and "Item Foreground" property. Now you can use the "Image Margin" option to specify margins on images, allowing you to choose any white space you like at their sides.

- Added an option at the "Type" property to specify whether the Main Menu group affects the height of its positioning element or not. You now have two options:

No (default): The positioning element will keep its original height, as the menu (“Main Menu” group) will just float above it.
Yes: The positioning element will match the Main Menu height, as the menu (“Main Menu” group) will be embedded inside it.

- Added more options to the "Appears - Aligned with" property. Now you can use the "Top/Bottom/Centered" alignment to the parent item too (not only to the parent group), allowing for additional interesting alignment effects.

- Fixed an issue where a sliding menu would appear with scrollbars when positioned inside a TD and used the "Push/Pull page content" option (Mozilla browsers only).

- Fixed an issue in FrontPage AddIn, where the "Auto Item Highlight" option turned to "No", when the user updated the navigation structure.

- Fixed an issue in FrontPage AddIn, where the "Sub Items Style+" style didn't apply to items below 3rd level, when the user updated navigation structure.

- Fixed an issue where the awmShowMenu() function didn't work properly (IE for Windows only)

- Fixed an issue where a sliding menu did not push the content of the page correctly (Mozilla browsers only).

You can download this new version, please visit:
http://www.likno.com/download.html

For more details on all releases, please visit:
http://www.likno.com/whatsnew.html

Hello everybody,

We are proud to officially announce the release of our newest product, Likno Web Modal Windows Builder!

Likno Web Modal Windows Builder serves as an interface to the popular jQuery open source library, and allows you to create "Modal Windows" for web pages with minimal effort and coding.

A modal window is used to display additional content on a new page layer (window) on top of the loaded content; its main trait is that it forces the user to interact only with it, by preventing other page actions unless the user closes the window.

The produced modal windows are fully cross-browser, i.e. they work alike in all browsers supporting DHTML (like Firefox, Internet Explorer, Google Chrome, Opera, Mozilla, Konqueror, Safari and others).

Easily create web modal windows with many styles and options like showing internal HTML content, embedded content, external or internal (AJAX) pages, as well as displaying hidden Page Elements, a set of images, and more.

Read more about our new product at: http://www.likno.com/jquery-modal-windows/index.php

Check our examples at: http://www.likno.com/jquery-modal-windows/examples.php

We would like to thank you for your support - as it is essential to the development and improvement of our products!

Likno Software Team