Alloy UI tabs and grid

Alloy UI tabs along with AUI layout

Today I want to share with you the tabs that can be created using Alloy UI 1.5.4 tabs component. I know that the demos are available when you download the latest version of the  alloy UI: http://alloyui.com/latest/alloy-latest.zip.

I had a hard time finding AUI 1.5.4 release AUI library which is compatible with Liferay 6.1 Release.

The difference is I created vertical tabs using AUI tab component. I will add the exact code later but the logic is use the grid that  gets added when you add the aui.js file on to your page.

use aui-30 in left div along with display:block and add aui-70 in right div with display as inline-block. don't forget to bind both of them in aui-100 div. This will give flexible grid structure can help in building responsive layout. With the classic theme added in the page for tabs; it will show up vertically. You've to customize few styles by overriding few CSS into your custom one.

Here you will achieve the vertical tabs via ally UI (AUI 1.5). A good reference link if you're novice to AUI: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-elements-and-events

Please respond if you find it helpful.

Implementing YUI or AlloyUI in Liferay

Implementing YUI 3.2 node menunav in Liferay

I am a novice to YUI and Alloy UI but want to share my learnings on how to implement YUI 3.2 Node MenuNav (YUI navigation) in Liferay. I am currently on Liferay 6 which has YUI 3.2 inbuilt.

 For adding YUI navigation in Liferay theme, add the following code:

1. Create a theme in Liferay.
2. Add the following code in the navigation.vm:

<div id="menu-1" class="yui3-menu"><!-- Root menu bounding box -->
<div class="yui3-menu-content"><!-- Root menu content box -->
<ul>
<li class="yui3-menuitem"><!-- Menuitem bounding box -->
<a class="yui3-menuitem-content" href="http://www.yahoo.com"><!-- Menuitem content box -->
Yahoo!
</a>
</li>
<li>
<a class="yui3-menu-label" href="#pim">PIM</a><!-- Submenu label -->
<div id="pim" class="yui3-menu"><!-- Submenu bounding box -->
<div class="yui3-menu-content"><!-- Submenu content box -->
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://mail.yahoo.com">Yahoo! Mail</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Yahoo! Address Book</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Yahoo! Calendar</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Yahoo! Notepad</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">

YUI().use("node-menunav", function(Y) {

var menu = Y.one("#menu-1");
 menu.plug(Y.Plugin.NodeMenuNav);
// Show the menu now that it is ready
menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");

});

</script>
Build the theme and apply to check the navigation working. Don't forget to add the CSS as that is not inbuilt with Liferay.

If you are trying to use some other version of YUI node menunav then add the yui folder in webapps and call it in vm, it will work.

YUI 3.2 navigation example:
http://yuiblog.com/sandbox/yui/3.2.0pr1/examples/node-menunav/node-menunav-1.html

Hope this will help.

Achieving rounded corner in IE

Achieving rounded corner in Internet Explorer - Alternate way!

Yet another example of rounded corner in IE if do not want to use htc fix.

"DD_roundies.js" is easily available to download from Internet. DD_roundies is a JS library that makes rounded corner in Internet Explorer an easy deal.

Call DD_roundies.js on the page where you want rounded corner or include in your website template to be available on all the pages. Also, you can include its code in your existing custom js.

If you use first method, calling it on your page. Follow the steps:

1.  Add this in head section of your page:

          <script src="DD_roundies.js"></script>

2. Add the following in the <script> tag after the js is called:

           DD_roundies.addRule('.box_a ', '10px');
this will set the radius of 10px on all the corners of div having box_aCSS class.

         DD_roundies.addRule('.box_a', '10px 5px');
'10px 5px' will set the top-left and bottom-right corner radius to 10px, and top-right and bottom-left to 5px;

First parameter of DD_roundies.addRule takes the class name. The second parameter follow the normal CSS rule for giving border which you can give as per your requirement.

3. Add the div with box_a class in the HTML section your page:
<div class=".box_a"> Add your content here </div>

You're good to go. The rounded corners will work here in IE as well.

Rounded corners not working in Internet Explorer (IE) using htc

Rounded corners not working in Internet Explorer

Even after using htc properly, Internet Explore (IE) is not rendering rounded corners properly. Here is quick and easy solution which worked for me. You can give it a try if nothing seem to be working for you.
For example if we have to give rounded corners to the blue box, here goes the code:
.bluebox {
                border-radius:5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                behavior: url(border-radius.htc);
                border:2px solid #e7e7e7;
                background: #e7e7e7;                           
                 padding:10px;
                float:left;
}

But even after placing htc file and similar code, it doesn't seem to be working fine. The fix is to add the "behavior: url(border-radius.htc);" in all the containers CSS in which it  falls.
Example: if the blue box is wrapped by 'maincontainer' and 'innercontainer' then in CSS for maincontainer and innercontainer, use "behavior: url(border-radius.htc);" and if you don't want rounded corners to that, add border:none to it.

The code will surely work.