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.
Post Reply
Mike Kelley
Propeller Head
Posts: 68
Joined: Fri Aug 22, 2014 12:24 pm

Move breadcrumbs to the toolbar with some jQuery

Post by Mike Kelley »

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.
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Move breadcrumbs to the toolbar with some jQuery

Post by doc_guy »

Awesome! Thanks for sharing.
Paul Pehrson
My Blog

Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Move breadcrumbs to the toolbar with some jQuery

Post by NorthEast »

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/
vsunder
Jr. Propeller Head
Posts: 7
Joined: Wed Aug 13, 2014 4:18 pm
Location: Sydney, Australia

Move breadcrumbs to the header

Post by vsunder »

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
Shlomo
Jr. Propeller Head
Posts: 1
Joined: Mon Jun 23, 2014 9:55 am

Re: Move breadcrumbs to the toolbar with some jQuery

Post by Shlomo »

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 *'));
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Move breadcrumbs to the toolbar with some jQuery

Post by NorthEast »

Shlomo - looks interesting, but it doesn't work for me. The replace function doesn't seem to create a valid URL for the href.
Post Reply