Liquid Layout iBloc

Liquid LayoutThe Liquid Layout iBloc is a custom action that enables liquid layout (a.k.a. flexible or elastic layout) behavior. It supports dynamic scaling of selected elements, centering elements horizontally and/or vertically, wrapping or truncation (with ellipses) of text widgets, fixing position of elements while scrolling, and floating elements relative to the right and/or bottom edge of the browser.

Current Version: 3.6
Supported iRise Studio Versions: 8.7 – 9.2
Supported Browsers: IE 8.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes

What’s new in version 3.6?

  • Dynamic layout adjustment when iRise directory pane in Reader is opened or closed.
  • Proportional scaling of images with *stretch* (preserves aspect ratio).
  • Vertical scaling (*vstretch*) of widgets (instructions for use below).
  • Support for iRise 9.x.
  • NOTE: If upgrading existing projects from version 3.4 or earlier, you must delete all instances of the iBloc before inserting the new version.

What does it do?

  • ‘Stretches’ widgets relative to window size – horizontally and/or vertically.
  • ‘Fixes’ widgets independently of window scrolling. (Improves on Scroll Lock, rendering that iBloc obsolete)
  • ‘Floats’ widgets relative to the right or bottom edge of the browser.
  • Centers widgets horizontally or vertically in the browser window
  • Text widgets can be limited to one line and truncated with ellipses added if the widget is narrower than contents, or can wrap to multiple lines dynamically.
  • Works on mobile devices, and resizes/repositions content on orientation change.

How do I use it?

All features can be activated by inserting key strings anywhere in the Name property of iRise page widget(s). Different properties and behaviors can be applied to individual page widgets without requiring the use of more than one Liquid Layout iBloc.
  • To ‘stretch’ a widget horizontally relative to window size, insert ‘*stretch*’ into the Name property (replaces “Liquid” in previous versions).
    • To stretch a widget by a percentage of change in window size, including a number between % characters in the Name property. For example, to scale by 50%, include the string ‘%50%’.
  • To ‘stretch’ a widget vertically relative to window size, insert ‘*vstretch*’ into the Name property, and enter the height of the page in Studio into the “Original layout height” property of the iBloc (percentage scaling is not supported for vstretch)
  • To ‘fix’ a widget independently of window scrolling, insert ‘*fix*’.
    • To fix a widget after user scrolls a specified number of pixels, include the number of pixels between @ characters in the Name property. For example, to fix position of a widget after scrolling 100 pixels, include the string ‘@100@’.
  • To ‘float’ a widget relative to the right edge of the browser, insert ‘*right*’ (replaces “Float” in previous versions).
  • To ‘float’ a widget relative to the bottom edge of the browser, insert ‘*bottom*’
  • To center a widget horizontally in the window, insert *center*.
  • To center a widget vertically in the window, insert *middle*.
  • Text widgets with the *stretch* keyword are limited to one line and truncated with ellipses added if the text widget scales to a size that is not wide enough to display the contents — even if the widget wraps to more than one line in studio.
  • Text widgets can be forced to wrap to more than one line when contents do not fit the widget width by including the key string *wrap* in the Name property (effectively disabling truncation).
Any combination of Liquid Layout properties can be applied to a single page widget, except when properties conflict with one another. This occurs in only two cases: *center* + *right*, and *middle* + *bottom*.
All page alignment properties (Fit to window, Left, etc.) are supported, but if you are using “Fit to window”, you must insert the width of the page in Studio into the “Original layout width” property of the iBloc, or you will get an alert dialog. If you are using other alignments (Left, Center, Right), make sure the page width in Studio matches the width of your content, or enter a value for “Original layout width” (this represents the width of the page with no scaling applied).
All features work when simulated in a browser in mobile emulation modes (i.e., page Type property = iPhone, iPad, etc.).  If the id8 Orientation iBloc is used to dynamically change orientation in the browser with any mobile device mode, widgets are dynamically resized/repositioned. All features also work on Apple devices with the iOS iRise Apps, and widgets are dynamically resized/repositioned on orientation change, with or without the use of the Orientation iBloc.

You can connect any page widget to this action using any event, but in most cases you’ll want the Liquid Layout effect applied on load. To do this, you have to create a ‘dummy’ action that is associated with the page’s onLoad event. Here’s how:

  1. Select the Page (click on a blank area of the page or an empty part of the canvas).
  2. In the Properties Panel, select the Events tab.
  3. Under “Show events for:”, select “On load”.
  4. Under the Events panel, click “+ Add”, then select “Action”.
  5. In the Set Page Action window that pops up, just click “Done” (leave Show/Hide and Toggle visibility selected, with no widgets checked).
  6. Place a Liquid Layout iBloc onto the canvas near the new Show/Hide Action that you just created (it will be near the right edge of the page).
  7. Drag the Show/Hide action created in step 5 onto the Liquid Layout Action iBloc to connect them.

For best results, use the Liquid Layout at the Page level (not within Masters), and use only one Liquid Layout iBloc per page.

Download Sample iDoc

Tips & Tricks

  • Create customized liquid layout effect by applying effects to different sets of page elements.  (For example, stretch the main content area of a page and keep navigation elements fixed.)
  • Set a Minimum browser width value in the properties panel to prevent users from over-compressing elements. (For example, to preserve readability of page content areas, or overlapping widgets)
  • Set a Maximum browser width value to prevent the layout from stretching beyond a specified limit.

Feel free to download this or any of our free iBlocs here, and please tell us what you think.

8 replies
  1. Amith Kumar says:

    Hi,
    My pages are desinged in 1024*768 resolution. When I am viewing it in higher resolution, with liquid layout my section with background image stretches to cover the screen, but the content (in child sections) under it remains static wrt left edge since this iBLOC needs page align to be “Fit to Window” and doesn’t support “Centre” option. When I am applying float to child sections, it is hooking it to right edge. However, my need to align it in centre when the parent section stretches. You can check example of header, foother & content under website “http://www.yahoo.com/”, all centred only background is stretching & compressing.

    Please suggest me how to do this ?

    I tried with option of putting 3 sections in a row, Section 1 – Left Filler Liquid, Section 2 – Content, Section 3 – Right filler – Liquid. Assuming for a stretch of say 100 px required, my left & right filler will stretch 50 px (50% each) each and section 2 will auto align to centre. But it didn’t happen that way, it just gave me some weird screen. Ideally the percentage of strech required should be equally distributed to each element in a row, how this iBLOC stretch all row elements by 100% of stretch, which gives overlaps.

    Reply
    • Eric Romanik says:

      Amith, you can achieve the effect you desire using this iBloc and a table.

      Wrap all of your page content in a section, and place it inside a one-cell table (remove formatting so it’s invisible). Set alignment to center for the table cell (in the formatting panel), and make the whole table “Liquid” by adding the Liquid tag to the table name.

      If you’re using the Scroll Lock on the page, just make sure that the target element is not placed inside the table. It can be over the table, but not in it. The only drawback is that the target element won’t be centered with the rest of the page content, but you can use the “center horizontally” property of Scroll Lock to get the same effect.

      Reply
  2. Muthu says:

    I have tried to follow the “How do i use it” for Liquid layout” iBloc version 3.0, but couldn’t achieved that. Can you send me the working sample iDoc for Liquid Layout iBloc version 3.0″ .

    Thanks in Advance
    ~ Muthu

    Reply
  3. Nicholas Huba says:

    The new v3.0 Liquid Layout works great!…except for one thing: it overlaps (and hides) the iRise Reader menus.

    A widget with (0,0) X, Y coordinates and set to *fix* (i.e. a site banner) completely covers the iRise menu bar. And even if you offset the entire page design by y=25 the directory panel is covered up.

    I think that the iBlock is truly “fixing” things to the browser’s (0,0) coordinates and not the Reader’s.

    This is a great iBlock and I’d love to continue using it. I hope there is a workaround or an easy fix.

    Thanks.

    Reply
    • Eric Romanik says:

      Thanks for catching this — I’ll get an update out to fix this soon. In the meantime, you can use the Scroll Lock iBloc to ‘fix’ widgets to the top of the browser. The support page is here, and you can download it here.

      Reply
    • Eric Romanik says:

      Liquid Layout 3.1 is now available for download on the Downloads page. This version addresses the issue where ‘fixed’ elements were overlapping the iRise Reader bar and directory panel.

      Reply
  4. Doris Lin says:

    Is there a known issue with IE9 support? When i added the Liquid Layout widget to my page, it completely throws off the display: background colors missing, elements are offset to the left and wraps.

    Reply
    • Eric Romanik says:

      There aren’t any known issues with IE9. I think your issue is with your default (original) page width. Either resize your page in Studio to the width at which no stretching should occur, or enter that width in pixels (e.g. ’1000′) into the “Original page width” in the properties panel for the iBloc. Let me know if this does not correct your issue.

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Copyright 2017 - id8    Privacy Policy