Forum Discussion

iahiqosolutions's avatar
iahiqosolutions
Advisor
12 years ago

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 the source code of my custom component:

 

<@liaAddScript>
    ;(function($) {
         $.each($("div.BreadCrumb ul#list li"), function(index, element){
               // replace link for category "NEWS FEED" with link on custom page
               $(element).find("a[href='/t5/News-Feed/ct-p/News-Feed']").attr("href", "/t5/custom/page/page-id/CustomBlogPage");

 

               // replace text of custom page in breadcrumbs with category "NEWS FEED" title
               <#assign newsFeedTitle = rest("categories/id/news-feed/title").value />
               $(element).find('span:contains("CustomBlogPage")').text("${newsFeedTitle}");
         });
   })(LITHIUM.jQuery);
</@liaAddScript>

 

This code works pretty well, but it starts working only after second or two seconds after page loaded.
My question is the following: how can i reduce this time lag?
I want to show updated breadcrumbs as soon as possible.

Thanks for your attention.

  • DougS's avatar
    DougS
    12 years ago

    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:

     

    MethodDescriptionExample
    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):
    1. community
    2. tkb (strange, special type b/c tkb breadcrumb links include a link to a main tkb page for the community)
    3. container_node
    4. leaf_node
    5. message
    6. pre_page_title
    7. 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>

     

  • DougS's avatar
    DougS
    Khoros Oracle
    12 years ago

    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:

     

    MethodDescriptionExample
    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):
    1. community
    2. tkb (strange, special type b/c tkb breadcrumb links include a link to a main tkb page for the community)
    3. container_node
    4. leaf_node
    5. message
    6. pre_page_title
    7. 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>