Hash Browns

Developer

Curtis Blackwell

3rd Party (Free)

Creative Commons Attribution Share Alike

EE Version Support

  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Plugin

Tags

Hash Browns: easy AJAX navigation

Hash Browns is no longer being developed or supported and is now considered a legacy add-on.

### Features
* AJAXily navigate your site. No JavaScript/AJAX knowledge required!
* Requires little to no markup changes
* Compatible with custom animations
* Navigation works fine for users with JavaScript disabled
* Compatible with browsers’ back/forward buttons[*](#footnote_1)

#### Browser Support[**](#footnote_2)
* Internet Explorer 6+
* Firefox 2+
* Chrome 5+
* Safari 3.2+
* Opera 9.6+
* iPhone 3.1+
* Android 1.6+
* BlackBerry 4.6+

*Because of the way browsers handle hash links, users cannot navigate back to the first loaded page with the back button. However, each subsequently loaded page re-navigable to via the back button.

**For more browser support info, see jQuery Hashchange Plugin’s [support info](http://benalman.com/code/projects/jquery-hashchange/docs/files/jquery-ba-hashchange-js.html#Support_and_Testing).

### Installation
1. Upload the `hash_browns` folder to `system/expressionengine/third_party`.
2. Upload the `themes/third_party/hash_browns` folder to `themes/third_party`.

### `{exp:hash_browns}`

Make sure you include jQuery before the Hash Browns code.

`{exp:hash_browns}` loads the necessary JavaScript to make your site AJAXy.

   
  {exp:hash_browns}

#### Required Settings
##### page_wrap
  page_wrap=”#page_wrap”

The `id` or `class` of your typical `page_wrap` element. Hash Browns will vertically resize this when new content loads.

Set your page_wrap element to overflow: hidden to avoid jumpy animation.

##### main
  main=”#main”

The `id` or `class` of the `main` element. In most (all?) cases, this should contain only the [`content`](#hash_browns-content) element. This helps the JavaScript load everything in its right place.

##### content
  content=”#content”

The `id` or `class` of the element that Hash Browns should discard and reload (from the linked page).

##### link_containers
  link_containers=”#nav_main”

A pipe-separated (`|`) list of elements that contain the links to content that Hash Browns should load via AJAX.

#### Optional Parameters
##### callback
  callback=”“

This allows you to set a JavaScript callback function after Hash Browns vertically resizes `page_wrap`.

If you load/reload any of the [`link_containers`](#hash_browns-link_containers), you should set this to `hash_browns`. This allows you to use Hash Browns with a dynamic nav (like the one in the [Statamic docs](http://statamic.com/learn/documentation), which changes based on the current page).

Alternatively, if you do *not* reload the initial [`link_containers`](#hash_browns-link_containers) but *do* load *new* links that you want to Hash Brown-ify, for better performance, you can set this to `initiateHashNav(’.new_link_containers’)` (replacing `.new_link_containers` with a comma-separated list of elements that contain the new links to content that Hash Browns should load via AJAX).

  {exp:hash_browns callback=“hash_browns”}

##### class_active
  class_active=”“

Setting this adds the given class to the anchor tag for the current page (or the specified parent element if you use [`class_active_parent_el`](#hash_browns-class_active_parent_el)). This does not add a class until the user clicks a link, so if you use it, you should manually add the class in the template/layout for the landing page.

  {exp:hash_browns class_active=“active”}

##### class_active_parent_el
  class_active_parent_el=”“

If you use [`class_active`](#hash_browns-class_active), Hash Browns sets the class on the clicked anchor tag by default. Sometimes people prefer to set the active class on a parent element, like an `li`. This allows you to do so.

  {exp:hash_browns
    class_active       = “active”
    class_active_parent_el = “li”
  }

##### content_add_class_in
  content_add_class_in=”“

A pipe-separated (`|`) list of classes added to [`content`](#hash_browns-content) just after Hash Browns triggers the [`fx_in`](#hash_browns-fx_in) animation. Good for CSS animations, like those found in [Animate.css](http://daneden.me/animate).

##### content_add_class_out
  content_add_class_out=”“

A pipe-separated (`|`) list of classes added to [`content`](#hash_browns-content) just before Hash Browns triggers the [`fx_out`](#hash_browns-fx_out) animation. Good for CSS animations, like those found in [Animate.css](http://daneden.me/animate).

##### duration_in
  duration_in=“500”

The duration, in milliseconds, of the animation for [`fx_in`](#hash_browns-fx_in).

##### duration_out
  duration_out=“500”

The duration, in milliseconds, of the animation for [`fx_out`](#hash_browns-fx_out).

##### fx_in
  fx_in=“fadeIn”

The animation used for incoming content.

###### Valid Values
`nofx`, `slideDown`, or your own custom effect

Have some crazy effect from a jQuery plugin you want to use? That works, too. Just include the plugin before the Hash Browns code.

   
   
  {exp:hash_browns fx_in=“crazyEffect”}

##### fx_out
  fx_out=“fadeOut”

The animation used for outgoing content.

###### Valid Values
`nofx`, `slideUp`, or your own custom effect

Have some crazy effect from a jQuery plugin you want to use? That works, too. Just include the plugin before the Hash Browns code.

   
   
  {exp:hash_browns fx_out=“otherCrazyEffect”}

##### load_hashchange
  load_hashchange=“true”

If you don’t want to load the jQuery Hashchange Plugin, set this to `false`. However, browser support narrows without it.

##### relative_links
  relative_links=“false”

If you use relative links in [`link_containers`](#hash_browns-link_containers), set this to `true`.

##### script_tags
  script_tags=“true”

Set this to `false` to not return opening or closing script tags. This allows you to add the Hash Browns tag to inline JavaScript.

   

##### url_offset
  url_offset=”“

This allows you to manually offset the characters shown in the URL hash, which makes child page urls prettier.

For example,

  http://example.com/segment_1#segment_2

instead of

  http://example.com/segment_1#segment_1/segment_2
 

###### Valid Values
Integers or the piece of the URL you want removed (`/segment_1/segment_2/`).

### `{exp:hash_browns:ajax}`

This tag returns `true` for AJAX requests or `false` otherwise. Use this in conditionals so that you don’t reload any code identical between pages (like headers and footers). This will boost the speed of your page load.

  {if {exp:hash_browns:ajax} == “false”}
    {!—your template code here—}
  {/if}

See the demo included in the downloaded files for a more thorough example.

### Basic Example

        {!—your content here—}

 

   
    {exp:hash_browns class_active=“current”}

### Pro Tips
#### Faster Page Loads
See [`{exp:hash_browns:ajax}`](#hash_browns-ajax).

#### CSS Animations
If you use [Animate.css](http://daneden.me/animate/) or something like it, you can’t use `fx_out=“nofx”`. The CSS animation needs time to run, and `nofx` causes the content to immediately disappear. So leave `fx_out` at its default and adjust `duration_out` accordingly.


If you’re updating from 1.2, make sure you change your class_current parameter.

Hash Browns Links

This entry was created September 25, 2012, 10:14 pm.
This entry was last updated April 30, 2015, 9:29 pm.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

1 Review:

Klauss 03.04.13

Rating - {addon_rating_average}

Well, it is really working. I am amazed how good it is by itself, But :
# i have a problem that somehow the background is a bit shaking during the “transition”
# the documentation related to the page that we aretaking the info from is = 0..
Please, more examples for noobs :D 5 stars from me !