Forum Discussion

rwm's avatar
rwm
Advisor
12 years ago

Styling Options menus on the search page

 

 

 

Greetings,

 

I want to remove both separators lines and disabled selections from the various drop-down options menus on forum/tkb/blog pages, such as Topic Options and Options on topics pages, Article Options on KB pages, Blog Options, etc.  This also includes those found on the search pages, such as the Search Options and Best Match drop-downs.  

 

In order to accomplish the removal of unwanted list items, because of the way the HTML is structured, I could not use CSS because the LI elements have no class names on them--only their child elements do.   Here is a simplified example of what I'm dealing with:

 

<ul id="dropdownmenuitems_0" class="lia-menu-dropdown-items">
  <li><a class="lia-link-navigation ..." ...>Link</a></li>
  <li><a class="lia-link-navigation ..." ...>Link</a></li>
  <li><span class="lia-separator ...">...</span></li>
  <li><a class="lia-link-navigation ..." ...>Link</a></li>
  <li><a class="lia-link-navigation ..." ...>Link</a></li>
  <li><span class="lia-link-navigation lia-link-disabled ...">Disabled Link</span></li>
  <li><span class="lia-separator ...">...</span></li>
  <li><a class="lia-link-navigation ..." ...>Link</a></li>
</ul>

 

I want to target items identified with the classes lia-separator and lia-link-disabled in red above, but these classes are on child elements of the LI, not the LI themselves.  AFAIK, you cannot assign CSS to a parent based on a child.

 

So I turned to jQuery to target those classes and then used a parent('LI').remove() sequence to take care of them.

 

This worked great, until I discovered that the search pages have option menus like these that are part of AJAX-based functionality. So when you first go to the search page the Search Options and Best Match menus look fine.   However, once a search is executed and the results section of the page is refreshed (along with the menus), there are extra lines and space in the menus, since my javascript to remove the LI's initially is not re-executed.   While I can use CSS to hide the A or SPAN elements based on class, the LI elements still remain which have the border or other styling that I cannot change.

 

So my question is, how can I fix these menus, post-AJAX refresh?    Is there an callback function I can hook into?   Or another way in studio that I have missed?

 



 

 

 

3 Replies

Sort By
  • DougS's avatar
    DougS
    Khoros Oracle
    12 years ago

    Longer term, we'd like to provide a way for you to do this server-side.  We have a xml files that describe these various drop-downs, but they can't be modified via Studio at this point.

     

    I'd also like to add CSS classes to those <li> tags -- I'll see if we can't add those.

     

    In the meantime, the jquery fix seems appropriate.  To deal with the ajax search re-load, you could try attaching a "load" event listener to those elements using jQuery.  If that doesn't work, you might be able to do what you need using global ajax event handlers (http://api.jquery.com/category/ajax/global-ajax-event-handlers/).

  • rwm's avatar
    rwm
    Advisor
    12 years ago

    Thanks for the reply Doug.   Unfortunately I was not able to get it to work by using load events on elements, nor with a global ajax event hook.   A little more research seems to indicate that the best (or only?) cross-broswer solution is to use a setInternval type of solution, which I have done and found that it works, although the delay and additional overhead is not the ideal solution.    I will probably use this method for now, pending a better solution I can find or a future Lithium update of classes for LI tags. 

    Thanks.

     

  • DavidE's avatar
    DavidE
    Lithium Alumni (Retired)
    12 years ago

    Hey rwm,

     

    We provide a loader util allows you to add a function to be run after the page has been loaded.

     

    LITHIUM.Loader(function() { /*do something*/ });

     Let me know if you have any other questions.