Move breadcrumbs to the toolbar with some jQuery

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.

Move breadcrumbs to the toolbar with some jQuery

Postby Mike Kelley on Fri Aug 22, 2014 12:33 pm

My boss wanted me to see if there was a way to move the breadcrumbs out of the topic frame and into the toolbar. I was able to use jQuery and some basic skin and CSS changes to do so.

Here's what it looks like:
Image

The only real downside is that the breadcrumbs can't be clicked to navigate the tree. It's a static, non-interactive representation of where in the content the reader is. It is possible to include the links, but it requires additional Javascript coding to help the links understand where to go and would differ from company to company or Flare project to Flare project.

Update the skin first:

    1) Open your skin from the Project Organizer. Click Toolbar.
    2) Add a new Toolbar button called "breadcrumbs".
    3) Add the new button to the Toolbar list. Place it at the top of the list and put the "Filler" element after it.
    Image
    4) Go to the Styles tab and expand Toolbar Button in the Topic section.
    5) Update the breadcrumbs item:
      a. Set both Gradients to transparent.
      b. Set the color to be whatever the background color of your Toolbar is.
      c. Set the image to "none".
    Image

Now add the jQuery to your master page:

    1) Right-click on your master page in the Content Explorer and select Open With --> Internal Text Editor.
    2) In the <head> element, copy this jQuery script code:
Code: Select all
<script type="text/javascript">/* <![CDATA[ */
  window.onload = function() {
    var $breadcrumbText = $('.MCBreadcrumbsBox_0').text();                              // Grab the breadcrumbs text
    var $breadcrumbs = $('.breadcrumbs-button', window.parent.document);        // Find the breadcrumb button
    $breadcrumbs.html($breadcrumbText);                                                        // Replace the button HTML with the text from the breadcrumb
    $breadcrumbs.css({                                // Style the text
      color : 'gray',                                          // Text color
      width : 'auto',                                          // Auto width is required
      cursor : 'default',                                      // Prevent users from thinking they can interact with the button
      'font-size' : '14px'                                     // Font size
    });
  }
/* ]]> */</script>


Modify your CSS:
    1) Set the MadCap|breadcrumbsProxy display attribute to "none".
Code: Select all
MadCap|breadcrumbsProxy
{
display: none;
}


You're done. Save your files, build an HTML5 ouput and check it out.

NOTE: You cannot test this via local files on Chrome as you'll encounter what amounts to a "same origin policy" error. It should test fine in IE or FF. If you put the output on an actual web server (even a local one), it works fine in Chrome.
Mike Kelley
Propeller Head
 
Posts: 68
Joined: Fri Aug 22, 2014 12:24 pm

Re: Move breadcrumbs to the toolbar with some jQuery

Postby doc_guy on Fri Aug 22, 2014 1:36 pm

Awesome! Thanks for sharing.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1938
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Move breadcrumbs to the toolbar with some jQuery

Postby Dave Lee on Tue Aug 26, 2014 4:21 am

Nice first post - good to see some others using a bit of jQuery.

If you're modifying/hacking in the skin, this might be of some use:
http://ukauthor.wordpress.com/2014/08/0 ... tml5-skin/
Dave Lee
Master Propellus Maximus
 
Posts: 5564
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Move breadcrumbs to the header

Postby vsunder on Tue Oct 28, 2014 5:30 pm

Hello,

I'm looking for a way to move breadcrumbs to the header area, that is, out of the Topic Container (HTML5 output). I want to place it next to the logo. I'm not able to find any information on if it is possible to do this. The closest is this post. However, I'm not sure if I can use jquery in the skin file since it is an XML file.

Any help would be appreciated.

Thanks,
VS
vsunder
Jr. Propeller Head
 
Posts: 7
Joined: Wed Aug 13, 2014 4:18 pm
Location: Sydney, Australia

Re: Move breadcrumbs to the toolbar with some jQuery

Postby Shlomo on Mon Dec 22, 2014 12:09 pm

Thanks for this post.

I was also looking to move the breadcrumb and your basic idea came in handy.
I managed to improve on the solution making the links clickable using a little jQuery magic, as follows:

Code: Select all
$('.MCBreadcrumbsLink', $('.MCBreadcrumbsBox_0'))
   .each(function() {
      // This fixes the href link so that the topic displays correctly in the Content pane
      this.href = this.href.replace('Content/', window.parent.location.pathname.replace('/','')+'#');
   });

$('.breadcrumbs-button', window.parent.document)
   .empty()
   .append($('.MCBreadcrumbsBox_0 *'));
Shlomo
Jr. Propeller Head
 
Posts: 1
Joined: Mon Jun 23, 2014 9:55 am

Re: Move breadcrumbs to the toolbar with some jQuery

Postby Dave Lee on Tue Apr 28, 2015 3:17 am

Shlomo - looks interesting, but it doesn't work for me. The replace function doesn't seem to create a valid URL for the href.
Dave Lee
Master Propellus Maximus
 
Posts: 5564
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 1 guest