We have a row of header menu links where a couple of them need to be fancybox popups. However, when I insert the appropriate fancybox code into the menu section the text is slightly smaller and higher than the other links (and does not incorporate the minislide background button etc.):
<li><a id="tip6"><strong>How it works</a></li> <li class="line">|</li>
I realised for the text to appear correct it needs to have an actual href= link so the menu system knows it's a link (which it doesn't need to be). So of course when a link is added it overrides the fancybox operation. This is what a functional link needs to be formulated as in our menu system:
<li><strong>How it works</strong></li> <li class="line">|</li>
I want it to function as a fancybox link though, so how can I remove the actual href= link and fool the menu into thinking it's a link so it's correctly displayed?
I've already tried the following, without success:
<li><strong><a id="tip4" href="link.php">How it works</a></strong></li> <li class="line">|</li>
You could also use href="javascript:;" to avoid overriding the fancybox functionality and still having the href attribute to work with your style settings so
<li><strong><a id="tip4" href="javascript:;">How it works</a></strong></li> <li class="line">|</li>
or with the strong tag inside the anchor (doesn't really matter)
<li><a id="tip4" href="javascript:;"><strong>How it works</strong></a></li> <li class="line">|</li>
On the other hand, if you are planning to use the same script for more than one element within the same html document, the better use classes instead of ID. Check http://fancybox.net/faq No. 7 for more
Related
My end goal is to have a page that displays a Heading then links.
The Heading text would come from child folder, and the links would be pages within that folder.
I'm not concerned about the actual HTML at this point, but say an h2 for the header, an LI for each link.
I had thought i could create a repeater with a transformation to grab the folder name, and then all the sub nodes, but i'm struggling here since I've never tackled something like this in Kentico before, and have never attempted to build a navigation system using hierarchical transformations.
Here's my current content tree
Missed Payments
Group
Arrears Overview
Arrears Deductions
Flex
When rendered, Missed Payments should have the following code. When i add mew pages to Group and Flex, page links are shown
<h2>Group</h2>
<ul>
<li><a href='link to overview'></a>Page Name</li>
<li><a href='link to deductions'></a>Page Name</li>
</ul>
<h2>Flex First</h2>
I have a Header, Item and Footer transformation types, with Header, Link and Footer transformation. The HTML is simple, but i'm missing the piece to bring it all together.
Have you looked at the Creating a Mega Menu using Hierarchical transformations how to on Kentico?
For your level 0 header have <ul><li>
Level 1 header have
<ul>
<li><h2>{% Documents[NodeAliasPath].Parent.DocumentName #%}</h2></li>
<li>
All levels item: <a href="{% Transformation.GetDocumentUrl() #%}" >{%DocumentName%}</a>
All level separator: </li><li>
Footer: </li><li>
Make sure transformation type is Text/XML
I have index.html and the catalog.html, in this page I have some Id in order to move throw diferents sections in that page.
I have a menu, with Hone and Catalog, this option it´s a dropdownmenu, so, what I need is if I´m index and clic on catalog can go to specific section (named "canal-prisma") of cataglo page, I have this code but didn´t work, thank you for your help
<li class="dropdown">
Catálogo<span class="caret"></span>
<ul class="dropdown-menu">
<li>CANAL PRISMA</li>
</ul>
Are you trying to go to a section on the page with the id or name attribute set as canal-prisma? If you set the id attribute, you should change that to the "name" attribute. Otherwise, more code is really needed to determine the answer to your question.
For example, in order to create a section of the page called canal-prisma:
Go to the Canal Prisma section
And in catalog.html:
<a name="canal-prisma">#</a>
Sorry if my tone is not good,
How to display top menu in Adobe Business Catalyst.
Example:
My custom menu code is given below. Instead of this, I want to display menu created by adobe business catalyst.
<ul class="main_menu">
<li class="current">Home</li>
<li>Case Studies</li>
<li>Traning</li>
<li>Coaching</li>
<li>Local groups</li>
<li>Deals</li>
<li>Resources</li>
<li>Gear</li>
<li>Contact Us</li>
</ul>
I am using this {tag_menugroup} to display menu. but menu is not displaying.
The tag you're using should only be used within custom layouts for menu version 2.
For inserting a dynamic menu to a template use you should instead
use {module_menu,ID#}
or for a more customisable version use {module_menu, version="2", menuId="5475", moduleTemplateGroup="Default"}
Sources:
http://kb.worldsecuresystems.com/134/bc_1345.html#main_Menu_Modules
http://helpx.adobe.com/business-catalyst/partner/menu-module-v2.html
I'm trying to get a bottom tab bar in Xpages Mobile controls. It's typically black with dark icons and the page changes has you press an icon.
I couldn't figure out how to get the look and feel with the actual Mobile Controls Tab bar. That seems geared for segmentedTabBar rather then I guess standard Tab bar. I tried to access Dojo manually with the code below and I got the look and feel but the tab bar is showing at the top and not the bottom of the screen.
I'd rather use the mobile controls version but regardless I'm easy. I'd love to get a bottom tab bar working in XPages.
Any advice would be appreciated.
<xe:singlePageApp id="singlePageApp1" selectedPageName="home">
<xe:appPage id="appPage1" pageName="home">
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/Add_32x32.png",
selected:true'>
Featured
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/1_48x48.png"'>
Categories
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Top 25
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"Add_32x32.png"'>
Search
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Updates
</li>
</ul>
</xe:appPage></xe:singlePageApp></xp:view>
Look in the Extension Library book from IBM Press on page 295. This chapter on Tab Bar contains an example of an action bar at the bottom of the screen:
<xe:tabBar id="tabBar1">
<xe:tabBarButton id="tabBarButton1" label="Button 1"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton2" label="Button 2"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton3" label="Button 3"></xe:tabBarButton>
</xe:tabBar>
It appears only to be a segmented tab bar if you use barType="segmentedControl".
I am trying to accomplish the same thing myself. I suspect the issue is caused because the XPages Mobile Controls do not yet support a Mobile Scrollable Pane which would allow for the positioning of fixed size (scrollable) content between the header and the footer. The css will most likely used absolute positioning of the tab bar to prevent it scrolling with the content. But when that has been accomplished you are going to need to implement some form of scrollable pane t stop the main content from scrolling over/under the toolbar.
The following CSS works "most" of the time but I found it is sometimes reluctant to snap into the correct location.
.rpTabBar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
height: 50px;
margin-top: -50px;
clear: both;
}
After looking at the dojo examples I have noticed the examples of the navbar remaining fixed at the bottom use the scrollableView control. The XPages appPage control is based on the standard view control. All of those examples seem to have the navBar float at the base of the content. After trying for a few weeks, I can see why. It seems next to impossible to get the navBar to stick to the bottom when using this control.
We haven't found a way yet to implement scrollableView without throwing away all the Xpages mobile controls. Instead we created a div inside each appPage that implements the dojo scrollablePane. Using this we can provide control ids for a fixed header and a fixed footer. And the navBar now sticks nicely at the bottom of every page.
I'm new to liferay and I'm almost positive this is blazingly simple to do: Using velocity markup, I want to be able to generate links to pages within my Liferay website and embed them inside of my portlets on different pages.
I have a vague idea of how it might be done so I searched around figuring it would be posted somewhere, but I can't find anything on it. Incidentally, I want to put whatever code I come up with inside the view.jsp of the portlet. I would use velocity markup here but I don't think (don't know for sure) if that is allowed inside of a jsp.
Please let me know if you need more information to respond.
I would use velocity markup here but I don't think (don't know for sure) if that is allowed inside of a jsp.
Why would you want to use Velocity mark-up inside a JSP (view.jsp)? I don't see any advantages in doing that apart from the argument that you are really great at velocity.
Though here is a link that would help you embed velocity inside of JSP.
Note: In my opinion it is not a good practice to embed velocity within JSP in a portlet
In JSP:
You will need a Layout object which you can get with the help of static methods in LayoutLocalServiceUtil.
After you get the Layouts, you can use the static methods of com.liferay.portal.util.PortalUtil like getLayoutFriendlyURL or getLayoutFullURL etc to build the URL.
In VM (these would be *.vm files in themes):
You can follow all the same steps as mentioned in JSP. The things you would need to do that are:
Instance of LayoutLocalService, can be found out by using the following code (taken from this answer):
#set($layoutLocalService = $serviceLocator.findService("com.liferay.portal.service.LayoutLocalService"))
now you can use the velocity variable $layoutLocalService to make calls to service methods for getting the layouts.
Then you can call methods of PortalUtil class by using the variable $portalUtil available for *.vm files in themes.
You can check-out the following files for more details (if you are interested):
docroot/html/themes/_unstyled/templates/init.vm, this contains all the velocity variables available in themes. Variables of interest might be $theme, $theme_display, $layout, $navItems.
docroot/html/themes/_unstyled/templates/portlet.vm, this file is a template to display the individual portlets.
docroot/html/themes/_unstyled/templates/navigation.vm, contains code for displaying the navigation menu with page links.
docroot/html/themes/_unstyled/templates/portal_normal.vm, this file represents a page-template in liferay and this contains the other files like navigation.vm & portlet.vm.
For Velocity:
Okay so for generating the links for Liferay pages in velocity take a look at the following file in the Liferay source code:
/portal-web/docroot/html/themes/_unstyled/templates/navigation.vm
In there you'll see how the default Liferay theme generates the navigation structure for your site. To make life easier for you here it is:
<nav class="$nav_css_class" id="navigation">
<h1>
<span>#language("navigation")</span>
</h1>
<ul>
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
#if ($nav_item.hasChildren())
<ul class="child-menu">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
So the Velocity is looking through a collection called $nav_items, and then calls the getURL() method on each item to generate the link.
For JSP:
You'll need to make use of the LayoutLocalServiceUtil class, and in
particular one of the getLayouts() methods.You'll have to pick the one that best suits your need.
This will return the list of Layouts (your pages), and then you can
call getFriendlyURL() on each of these layouts to return it's url
This will be a relative url to your site, so something like
/my-site-home-page.
Let me know if you have any more questions!