This repository was archived by the owner on Nov 9, 2017. It is now read-only.
Repository navigation
This repository was archived by the owner on Nov 9, 2017. It is now read-only.
Not working with Twitter Boostrap 3 for affix, etc. #42
Description
The Affix plugin launches for any element that has data-spy="affix" but this is not getting launched after navigation to a page.
Currently have:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require underscore.1.6.0
//= require backbone.1.1.2
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree ../templates
//= require turbolinksThe Affix plugin has:
// AFFIX DATA-API
// ==============
$(window).on('load', function () {
$('[data-spy="affix"]').each(function () {
var $spy = $(this)
var data = $spy.data()
data.offset = data.offset || {}
if (data.offsetBottom) data.offset.bottom = data.offsetBottom
if (data.offsetTop) data.offset.top = data.offsetTop
$spy.affix(data)
})
})It appears it is using window object instead of document. Thoughts?
Activity
chrisjacob commentedon Jan 15, 2015
+1
I'm new to Turbolinks... how do people deal with 3rd party libraries that use
$(window).on('load', function() {});?Here is a related post on the Turbolinks issue list (currently: Open)
turbolinks/turbolinks-classic#295
chrisjacob commentedon Jan 15, 2015
You could use this hack (but probably shouldn't). It won't behave at all like Window.onload (i.e. it won't wait for Images, CSS, JS to be processed... it just triggers a fake Window.onload).
Feels very dirty... there must be a better solution?
chrisjacob commentedon Jan 15, 2015
Ok I think I have a better solution, see: turbolinks/turbolinks-classic#295 (comment)
When working with Turbolinks all JS and CSS is loaded in the header on the first page load (...or you could put your JS at the end of the body with
data-turbolinks-eval="false"). Either way the first Window.onload behaves as normal for the first page loaded.When you navigate to another page via Turbolinks the CSS and JS stays around... so the only hold up for Window.onload being fired should be Images that are in that new page's content. If we wait for those images to all load, then manually trigger the Window.onload event via
$(window).trigger('load');everyone is happy right?@supercodepoet I know this ticket was posted a long time ago, but let me know if this helps solve the Bootstrap 3 issue you were having (or if you came up with another solution).
chrisjacob commentedon Jan 15, 2015
FYI, I tested out my solution on a page with some large images and the Bootstrap Affix.js
$(window).on('load'...was triggered as expected. :)sameerkhanna commentedon Feb 1, 2015
Another cause for this could be you have your javascript placed at the end of body. It should be in the head. I noticed this when bootstrap dropdowns would work on initial page load, but not after subsequent clicks.