LITHIUM.jQuery perform code with 2 seconds lag
Hi all, I have a problem with LITHIUM.jQuery. I want to slightly modify standard Litihum breadcrumbs by using javascript. I created special custom component in Litihum Studio for that. Here is th...
You could wrap the breadcrumb in a div that is hidden (display:none) and then have your javascript un-hide the div after it has adjusted the breadcrumb.
Another approach you can take is to create a custom breadcrumb, using the freemarker objects we have for working with the breadcrumb (so all your logic is run server-side). Here is information about the freemarker breadcrumb context objects we have:
Method Description Example content.nav.breadcrumb.crumbs returns a list of breadcrumbs for the currently rendering page <#list page.content.nav.breadcrumb.crumbs as crumb> <#-\- do something \-->
content.nav.breadcrumb.css returns the main css class name for the breadcrumb component ${page.content.nav.breadcrumb.css}content.nav.breadcrumb.separator returns the character that is used to separate breadcrumb items ${page.content.nav.breadcrumb.separator}content.nav.breadcrumb.crumbs[i].text returns the localized text of an individual crumb ${page.content.nav.breadcrumb[0].text}content.nav.breadcrumb.crumbs[i].url returns the url to a page if an individual crumb is a link. This may return null, but you can check if it will be a link by calling the .link method ${page.content.nav.breadcrumb[0].url}content.nav.breadcrumb.crumbs[i].isLink returns true if the individual crumb is hyperlinked <#if page.content.nav.breadcrumb[0].isLink>\\ <#-\- do something \-->\\
content.nav.breadcrumb.crumbs[i].wrapperCss returns a css class for the li tag around an individual crumb. Will always return a string (never null, but possibly empty) ${page.content.nav.breadcrumb[0].wrapperCss}content.nav.breadcrumb.crumbs[i].css returns a css class for an individual crumb. Will always return a string (never null, but possibly empty) ${page.content.nav.breadcrumb[0].css}content.nav.breadcrumb.crumbs[i].separatorCss returns a css class for the separator character of an individual crumb. Will always return a string (never null, but possibly empty) ${page.content.nav.breadcrumb[0].separatorCss}content.nav.breadcrumb.crumbs[i].type returns a breadcrumb item type that this individual crumb fits into. Possible return values are as follows (and a breadcrumb will render links in the order below, from top to bottom): - community
- tkb (strange, special type b/c tkb breadcrumb links include a link to a main tkb page for the community)
- container_node
- leaf_node
- message
- pre_page_title
- page_title
${page.content.nav.breadcrumb[0].type}Here is an example of putting all of the above context objects together into a custom breadcrumb:
<div class="${page.content.nav.breadcrumb.css}}"> <ul> <#list page.content.nav.breadcrumb.crumbs as crumb> <li class="${crumb.wrapperCss}"> <#if crumb.link> <a href="${crumb.url}" class="${crumb.css}">${crumb.text}</a> <#else> <span>${crumb.text}</span> </#if> </li> <#if crumb_has_next> <li class="${crumb.separatorCss}"> <span>${page.content.nav.breadcrumb.seperator}</span> </li> </#if> </#list> </ul> </div>
