Hello! We have released a new version of Likno Web Scroller (jQuery Slider) Builder: Version 1.0 build #116.

Check out What's New

- Added the "Item Modal" tab in "Project Items (F2)" with the ability to show a Modal Window when the user clicks on a scroller item, either using an "internal modal window engine" or the "Likno Web Modal Windows Builder" engine (separate product).

scroller modal window

- Added the "%page_links%" variable to the available variables (%current_page%, %total_pages%) of the "Show Page Numbers (Custom)" option of the Navigation Bar.

scroller page links variable

- Updated the "Use both Text/HTML and Image values (shows both)" option to properly function for the "Item Tooltip" and "Item Modal" features.

- Updated the "Sample Code (F4)" area to show the related code of certain configurations.

- Added the "Show Scroller Only" and the "Background Color" to the "detached" Preview Pane (soon to be added to the "attached" Preview Pane too).

scroller preview background

- Added automatic correction for older projects that did not have the "Bullets" and "Spacer" Navigation Bar CSS Classes.

- Fixed a case where the Navigation Bar would appear floating on page when it was positioned into an area that did not exist.

- Fixed the "Item Tooltip" feature to correctly handle the "AJAX" & "External" (URL) sources.

- Fixed the "with acceleration (on hold)" feature, which allows the user to hold the mouse clicked on a navigation arrow and have the scroller items accelerate their movement.

- Fixed an issue where the "Play on Page Load (automatically)" option did not work in IE.

- Fixed a bug related to missing images.

- Fixed "Example 3" to have proper spacing.

- Fixed the DIV custom population classes to work properly.

- Fixed the Navigation Arrows to always stay on top of the content.

- Several minor interface improvements.

All features here: http://www.likno.com/jquery-scroller/index.php

Download the new version of our web scroller (jquery slider) builder at http://www.likno.com/jquery-scroller/download.php

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


Hello, we have released a new version of Likno Web Accordion Builder: Version 2.0 build #216.

Check out What's New:

- Added support for ULLI & DIVs in Drupal plugin.

- Several minor interface improvements.

- Fixed a case where not having the Positioning Element in the page would cause a JS error.

- Fixed some minor CMS-related CSS issues.

Download the new version at http://www.likno.com/jquery-accordion/download.php

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


Hello! We have released a new version of Likno Web Scroller Builder: Version 1.0 build #114.

Check out What's New

- Added 58 new Navigation Bars to choose from!

scroller/slider navigation bars
- Added the "Page Format" feature to the Navigation Bar, which lets you use your own string to show the current page, such as "%current_page% of %total_pages%" (example "1 of 5").

scroller/slider navigation bar pages property

scroller/slider navigation bar pages
- Added "Positioning Offsets" to the Navigation Bar, so that you can achieve a desired distance from the selected corner (or side) when the Navigation Bar is placed inside the "Items Area".

scroller/slider navigation bar offsets property

scroller/slider navigation bar offsets

- Enhanced the library so that it better supports the "Fixed" option in the Width and Height properties, as well as better support all Navigation Bars/Bullets.

- Added minor interface enhancements.

- Changed all Examples to use the appropriate Navigation Bars/Bullets and offsets.

- Changed the "Horizontal" Examples to use "Auto" in their Height so that they render properly with the new library.

- Added support for external Navigation Buttons.

scroller/slider external navigation buttons

- Fixed an issue where the "Step by Item" feature did not work properly.

- Fixed the "Use both HTML & Image" feature for the "DIV" and "UL/LI" population methods (in Sample Code and Preview).

- Added the "Highlight" feature to the Preview, so that you can highlight and understand the different elements of the scroller.

- Fixed the vertical alignment of Bullets within a Navigation Bar.

- Fixed some Navigation Bar issues (positioning and size).

All features here: http://www.likno.com/jquery-scroller/index.php

Download the new version of our web scroller/slider builder at http://www.likno.com/jquery-scroller/download.php

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


Dear Likno users, we are pleased to announce that we have just released our new product: The Likno Web Scroller Builder!

Likno Web Scroller Builder is a feature-rich tool for creating stylish, html scrollers/sliders for your web pages, with minimal effort and coding.

jQuery scroller/slider 1jQuery scroller/slider 2

View interface screenshots

Major Features
  • Rich and powerful interface!
    web scroller interface
  • Cross-browser
    Javascript engine supports all browsers, such as IE, Firefox, Chrome, Safari, Opera, Mozilla, Konqueror and more.
  • Cross-platform
    Javascript engine supports all platforms, such as Windows, Mac OS X, Linux, smartphones (iPhone, Android, Windows Phone, BlackBerry 6+) and more.
  • Cross-editor
    Works with all authoring tools (such as Dreamweaver, Expression Web, NetObjects Fusion, CoffeeCup, etc.), even a simple text editor!
  • Cross-CMS
    Works with all CMS and Blogs (such as WordPress, Joomla, Drupal, Typo3, DotNetNuke, Expression Engine, CMS Made Simple, etc.).
  • Create cross-browser jQuery scrollers to display content (items) that scroll horizontally or vertically when visitors click on (or mouse over) special navigation arrows, bars, and more.
  • ... OR make the scroller behave as a "SlideShow": its items sliding (scrolling) automatically, one at a time, at specified duration and direction, with looping or not, pause on "mouse over" and more.
    scroller slideshow
  • Use simple text, HTML code, images, videos (YouTube, etc.), animations, Flash as the content of your scroller items.
  • Create projects fast by using ready-made examples already installed in the application.
  • Universal: Use in all authoring tools (Dreamweaver, Expression Web, etc.) and CMS platforms (Joomla, Drupal, WordPress, etc.).
  • Create any type of jQuery scroller, such as: html scroller, javascript scroller, css scroller, ajax scroller, web scroller, vertical scroller, horizontal scroller, marquee, ticker, dhtml scroller, jquery ajax scroller, etc.
  • Use any of 4 methods to populate your scrollers with content:
    1. Scroller is populated by the project properties (within the application)
    2. Scroller is populated by a UL/LI structure, located inside your page.
    3. Scroller is populated by DIV elements, located inside your page.
    4. Scroller is populated by an external feed, such as RSS, ATOM, XML.
  • Position your scrollers easily on page and anywhere you like, with many options:
    1. Insert into a page element of your choice (div, span, td, etc.).
    2. Replace a page element (vs "insert into").
    3. Replace an image of your choice.
    4. Float, relative to the browser window (any corner).
    5. Float, relative to a page element of your choice (any corner).
    6. Float, relative to an image of your choice (any corner).
  • Customize the style of your scrollers through CSS ("css scrollers").
    CSS on scrollers
  • Apply images creatively to create interesting scrollers (images on scroller items, images on different "areas" such as "Top", "Bottom", "Left", "Right", etc.).
  • Use multiple scrollers on the same page (with the same or different styling).
  • Use additional Areas to your scroller around the main "Items Area" for extra information (a title, a footnote, etc.): the "Top Area", "Bottom Area", "Left Area", "Right Area".
    html scroller areas
  • Add dynamic content (database-driven or programmable) to your scrollers.
  • Use a tooltip on every scroller item (optionally), with plenty of styling options and dynamic HTML content.
  • Use a variety of transition behaviors (Continuous, Step by Item, Step by Page) and transition effects (Instantly, Fade, Slide), etc.
    html scroller transition effects
  • Use a variety of Navigation Bars to navigate through the scroller items. With CSS and dedicated properties to fully customize the appearance of "First", "Previous", "Next", "Last" buttons, text label, item numbers, background of the bar, mouse over effects and more.scroller navigation bar properties
    scroller navigation bars
  • Use a variety of Navigation Arrows to navigate through the scroller items (combined with the Navigation Bar or not). With many CSS and dedicated properties to fully customize their appearance.scroller navigation arrows propertiesscroller navigation arrows
  • Use Bullets to show paging (or even navigate through the scroller items).
  • Set a specific scroller item to be initially selected (on page load).
  • Use Rounded Corners around the scroller. Available in browsers that properly support CSS3 (IE9+, Opera 10.50+, Firefox 3.5+, Safari/Webkit 522+, Chrome and others). You can adjust the roundness of each corner all together or even separately!
  • Apply a Shadow to the scroller, in browsers that properly support CSS3 (IE9+, Opera 10.50+, Firefox 3.5+, Safari/Webkit 522+, Chrome and others).
  • Allow keyboard navigation on scrollers. The visitor can use the arrow keys to navigate through the items and the "P" key to "play/pause" their movement (if
    scroller keyboard navigation
  • Use complete help for all properties and procedures. Press F1 while you are on a property to immediately receive Help for that property.
  • Access additional designs (examples) of interesting scrollers, besides the designs coming with the application (note: applies to "Unlimited Domains" users).
  • Powered by the popular jQuery open source library.

All features here: http://www.likno.com/jquery-scroller/index.php

Download here: http://www.likno.com/jquery-scroller/download.php

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


Here you can read about an interesting Use Case of a very powerful feature of Likno Web Tooltips Builder, that is actually utilized on our own website (as of May 2012).

If you visit any page of our Likno.com website (http://www.likno.com for example), you will notice that a Likno tooltip appears when placing the mouse over any image (icon) of the "See Also" section (at the top part of the page):


The interesting part here is that each image (icon) shows the same tooltip but with different content; this content is automatically retrieved from the image's "ALT" attribute.

This means that you can dynamically change the content of a tooltip by just using a different value on the "alt" attribute (in this case) OR any other custom attribute of yours.

This capability is explained in detail here: LWTT: "In Page" feature – How to open the *same tooltip with different content*, retrieved from the page’s HTML (on-the-fly)


If you view the source code of the likno page, you will see the following code for the 1st icon ("img") of that section:


After the code screenshot above, you see the interface screenshot of the related Likno Web Tooltips Builder project, which uses the following values:

1. The "In Page" option as the Source of the tooltip's content. This means that the content of each tooltip will be retrieved from the page, dynamically.

2. The "Retrieve the content from the "title" (or "alt") attribute of page elements" option. This means that our script parses the entire page and qualifies all elements that use a "title" or "alt" attribute as potential tooltip "triggers", with their "title" or "alt" attribute values being the content of the tooltip that they will trigger.

3. The "SOME of the page elements that use the above attribute" value at the Opens When ("Trigger") property. This means that we do NOT want ALL the images of the page that use the "alt" attribute (or any page element that uses the "title" attribute) to show a tooltip. Instead we want to restrict this behavior only to those elements that ALSO use the Class="acc_hd" value in their tags.

So, if you mouse over any other image on the same web page (that uses the "alt" attribute) you will see that this tooltip does not appear for them.

For example, no tooltip appears when mousing over the top-left image (the "liknosoftware" logo):



Because while it does have an "alt" attribute (first matching criterion) in its tag, it does NOT have the Class="acc_hd" value (second matching criterion):


You realize that you can use this feature with many combinations, which makes it rather powerful.

If you want to learn more about all possible options, please read the related topic here:

LWTT: "In Page" feature – How to open the *same tooltip with different content*, retrieved from the page’s HTML (on-the-fly)

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


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