Build Status


Installation Rails

Add partystreusel to your Gemfile gem 'partystreusel' and bundle.

Partystreusel depends on i18n-js. Make sure you followed install instructions on:

Include in your

#= require partystreusel/<<modulename>>

$ ->
  Streusel.selectorType = 'css_class'
  Streusel.selectorPrefix = 'js'


For example for readmore:

#= require i18n
#= require partystreusel/translations
#= require partystreusel/readmore

$ ->
  Streusel.selectorType = 'css_class'
  Streusel.selectorPrefix = 'js'


If you only want to initialize readmore for a part of the document:

Streusel.Readmore.init($('body article.loadedwithajax'))

Partystreusel Generator

If you need to change the partystreusel views and/or stylesheets, run the generator:

rails generate partystreusel:styleguide

This will copy the views and stylesheets into your rails app.

JS <-> DOM

If you have the JS object use


to access the corresponding DOM element.

If you have the DOM element use


to access the correspoindg partystreusel JS object.


Partystreusel components tirgger some events. All events are prefixed with the moulename. Eg. Readmore triggers the event 'readmore-open' and 'readmore-close'.

You can trigger an event directly on the JS object. Eg. if you have a readmore object:

readmoreObject = $('.myreadmore).data('object')

Would triger a new event on $('.myreadmore') with name 'readmore-event'.

Module Usage

Available modules:

  • Streusel.scrollTo
  • Streusel.Readmore

Scroll To

Add to

#= require partystreusel/scroll_to

This is just a function. Usage:

# scroll to a[name=linkname]
Streusel.scrollTo(link: 'linkname')

# scroll to selector

# scroll to jquery element

# you can scroll to element with a pixeloffset
# selector will be 12px below window top
Streusel.scrollTo('selector', offset: -12)

hint: If element to scroll to could not be found, the function returns false. If element was found, return the found jquery element.

Read More

Use code below depending on environment you are in. If the content is empty or contains only whitespaces, nothing will be displayed.

Readmore depends on translations and i18n js, add this to your

#= require i18n
#= require partystreusel/translations
#= require partystreusel/readmore

$ ->


- readmore do
  Your text....

You can use any haml tag option. E.g.

- readmore(class: 'mycustomclass') do
  Your text....


<div class='mycustomclass' data-streusel-readmore>
  Your text....

Will be rendered to something like:

<div class='mycustomclass' data-streusel-readmore>
  <div>Your text....</div>
  <a ...>Read more</a>

Foundation Helpers

Add to

#= require partystreusel/foundation_helpers

Available Functions:



In order to run the test suite, phantomjs 1.8.2 must be installed. With homebrew, use brew install phantomjs182.

Test with

bundle exec guard

Or run the yasmine test directly with:

bundle exec guard-jasmine

Compare documentation on:

Help for jasmine testing:

To help testing the following jasmine helpers are installed: