Develop Reference

jQuery $(window).scroll event handler off but still firing?

I'm experiencing some strange behavior with a jQuery plugin that I wrote. Basically, the plugin makes a sidebar element stick to the top of the browser window when scrolling through the blog post that the sidebar belongs to. This should only happen when the window reaches a certain size (768px) or above (the plugin detects this by checking the float style of the sidebar).
Everything works as expected...until you resize the browser from large -- sidebar is sticky -- to small -- sidebar should not be sticky. My onResize function supposedly removes the scroll event handler and only adds it back if the startQuery is true (so, if the sidebar float value is something other than none). I've double and triple checked through the console: everything is working correctly as far as I can tell. I even added console.log('scroll') to the onScroll function and it doesn't show up when the event handler is supposed to be removed, but my sidebar is still turning sticky when I scroll through the blog posts.
You can see the problem in action here. To recreate the steps:
Resize your browser window to less than 768px wide and visit the page. See that the .share-bar element inside each blog post does not move as you scroll. 'scroll' is not logged in the console.
Resize your browser window to 768px or larger. See that the .share-bar element becomes sticky as you scroll through each blog post, then sticks to the bottom of the post as you scroll past it. 'scroll' is logged in the console.
Resize your browser window to less than 768px. See that the .share-bar element becomes sticky as you scroll through each blog post. 'scroll' is not logged in the console.
It's almost as if the event handler is removed, but the elements aren't updating or something. I'm sure I'm missing something fundamental, but I've researched and tried all sorts of fixes for $(window).scroll event problems and none of them are working here.
My call to plugin:
$('.share-bar').stickySides({
'wrapper': '.post-wrapper',
'content': '.entry-content' });
Plugin code:
;( function ( $, window, document, undefined ) {
var settings;
var throttled;
$.fn.stickySides = function( options ) {
settings = $.extend( {}, $.fn.stickySides.defaults, options );
// Store sidebars
settings.selector = this.selector;
settings.startQuery = '$("' + settings.selector + '").css(\'float\') != \'none\'';
// Create debounced resize function
var debounced = _.debounce( $.fn.stickySides.onResize, settings.wait );
$(window).resize( debounced );
// Create throttled scroll function
throttled = _.throttle( $.fn.stickySides.onScroll, settings.wait );
// Only continue if the start query is true
if ( eval(settings.startQuery) == true ) {
$(window).on( 'scroll.stickySides', throttled );
}
return this;
};
// Define default settings
$.fn.stickySides.defaults = {
wrapper: 'body',
content: '.content',
wait: 100,
startQuery: ''
};
$.fn.stickySides.onResize = function ( ) {
$(window).off( 'scroll.stickySides' );
// Only continue if the start query is true
if ( eval(settings.startQuery) == true ) {
$(window).on( 'scroll.stickySides', throttled );
} else {
var sides = $(settings.selector);
sides.each ( function () {
var elem = $(this);
var content = elem.siblings( settings.content );
if ( elem.css('position') == 'fixed' || elem.css('position') == 'absolute' ) {
elem.css( 'position', 'static' );
}
if ( content.css('margin-left') != '0px' ) {
content.css( 'margin-left', 0 );
}
});
}
};
$.fn.stickySides.onScroll = function ( ) {
console.log('scroll');
var sides = $(settings.selector);
// Check each sidebar
sides.each ( function () {
var elem = $(this);
var content = elem.siblings( settings.content );
var wrapper = elem.closest( settings.wrapper );
var elemHeight = elem.height();
var wrapperHeight = wrapper.height();
// Only continue if the wrapper is taller than the sidebar
if ( elemHeight >= wrapperHeight ) {
return;
} else {
var wrapperFracs = wrapper.fracs(function (fracs) {
// Only continue if the wrapper is in view
if ( fracs.visible == 0 ) {
return;
} else {
// Check if the wrapper extends beyond the top of
// the viewport
var wrapperSpaceTop = fracs.rects.element.top;
// If it does, change sidebar position as appropriate
if ( wrapperSpaceTop > 0 ) {
var visibleWrapper = fracs.rects.document.height;
// If the visible portion of the wrapper is smaller
// than the height of the sidebar...
if ( visibleWrapper <= elemHeight ) {
// ...position the sidebar at the bottom
// of the wrapper
if ( wrapperSpaceTop != 0 ) {
elem.css('position', 'absolute').css( 'top', (wrapperHeight - elemHeight) + content.position().top + 'px' );
}
// Otherwise, move sidebar to appropriate position
} else {
elem.css('position', 'fixed').css('top', 0);
}
content.css('margin-left', elem.outerWidth());
} else {
elem.css('position', 'static');
content.css('margin-left', 0);
}
}
});
}
});
};
} )( jQuery, window, document );
PS: I would use an existing plugin, but I didn't see one that got really close to the functionality I need here; feel free to point one out if you know of one. I haven't tested outside of Mac yet. And yes, I know some of the page elements don't flow very well on mobile -- ex: site header & nav -- and there are some other missing items unrelated to this problem. I'm waiting for some feedback from my client before I can address that.

Happens every time. Shortly after I ask for help, I figure it out on my own. ;)
The problem was in the fracs function inside the onScroll function. I didn't realize it called its own resize/scroll handlers, so those weren't getting unbound when I removed my scroll handler. I just reworked the plugin to take advantage of the fracs library's handlers instead of calling my own scroll handler:
;( function ( $, window, document, undefined ) {
var settings;
var throttled;
$.fn.stickySides = function( options ) {
settings = $.extend( {}, $.fn.stickySides.defaults, options );
// Store sidebars
settings.selector = this.selector;
settings.startQuery = '$("' + settings.selector + '").css(\'float\') != \'none\'';
if ( eval( settings.startQuery ) == true ) {
$.fn.stickySides.doFracs();
}
// Create debounced resize function
var debounced = _.debounce( $.fn.stickySides.onResize, settings.wait );
$(window).resize( debounced );
return this;
};
// Define default settings
$.fn.stickySides.defaults = {
wrapper: 'body',
content: '.content',
wait: 100,
startQuery: ''
};
$.fn.stickySides.doFracs = function ( ) {
var sides = $(settings.selector);
// Check each sidebar
sides.each ( function () {
var elem = $(this);
var content = elem.siblings( settings.content );
var wrapper = elem.closest( settings.wrapper );
var elemHeight = elem.height();
var wrapperHeight = wrapper.height();
// Only continue if the wrapper is taller than the sidebar
if ( elemHeight >= wrapperHeight ) {
return;
} else {
var wrapperFracs = wrapper.fracs( $.fn.stickySides.fracsCallback );
}
});
}
$.fn.stickySides.unbindFracs = function ( ) {
var sides = $(settings.selector);
// Check each sidebar
sides.each ( function () {
var elem = $(this);
var content = elem.siblings( settings.content );
var wrapper = elem.closest( settings.wrapper );
if ( elem.css('position') == 'fixed' || elem.css('position') == 'absolute' ) {
elem.css( 'position', 'static' );
}
if ( content.css('margin-left') != '0px' ) {
content.css( 'margin-left', 0 );
}
wrapper.fracs('unbind');
});
}
$.fn.stickySides.fracsCallback = function ( fracs ) {
// Only continue if the wrapper is in view
if ( fracs.visible == 0 ) {
return;
} else {
var wrapper = $(this);
var elem = wrapper.find(settings.selector);
var content = elem.siblings( settings.content );
var elemHeight = elem.height();
var wrapperHeight = wrapper.height();
// Check if the wrapper extends beyond the top of
// the viewport
var wrapperSpaceTop = fracs.rects.element.top;
// If it does, change sidebar position as appropriate
if ( wrapperSpaceTop > 0 ) {
var visibleWrapper = fracs.rects.document.height;
// If the visible portion of the wrapper is smaller
// than the height of the sidebar...
if ( visibleWrapper <= elemHeight ) {
// ...position the sidebar at the bottom
// of the wrapper
if ( wrapperSpaceTop != 0 ) {
elem.css('position', 'absolute').css( 'top', (wrapperHeight - elemHeight) + content.position().top + 'px' );
}
// Otherwise, move sidebar to appropriate position
} else {
elem.css('position', 'fixed').css('top', 0);
}
content.css('margin-left', elem.outerWidth());
} else {
elem.css('position', 'static');
content.css('margin-left', 0);
}
}
}
$.fn.stickySides.onResize = function ( ) {
// Only continue if the start query is true
if ( eval(settings.startQuery) == true ) {
$.fn.stickySides.doFracs();
} else {
$.fn.stickySides.unbindFracs();
}
};
} )( jQuery, window, document );
Voila! Problem solved.

Tympanus Page Loading Effect: Multiple pages

I would like to use Tympanus' page loading effects (see demo: http://tympanus.net/Development/PageLoadingEffects/index2.html).
Unfortunately, all demo links only use one page switch, e.g. from page-1 to page-2.
In my case, I would like to have several "pages", one for every project.
Tympanus' example looks for a class called "container" and adds/removes a "show" class to the respective div element.
<script>
(function() {
var pageWrap = document.getElementById( 'pagewrap' ),
pages = [].slice.call( pageWrap.querySelectorAll( 'div.container' ) ),
currentPage = 0,
triggerLoading = [].slice.call( pageWrap.querySelectorAll( 'a.pageload-link' ) ),
loader = new SVGLoader( document.getElementById( 'loader' ), { speedIn : 300, easingIn : mina.easeinout } );
function init() {
triggerLoading.forEach( function( trigger ) {
trigger.addEventListener( 'click', function( ev ) {
ev.preventDefault();
loader.show();
// after some time hide loader
setTimeout( function() {
loader.hide();
classie.removeClass( pages[ currentPage ], 'show' );
// update..
currentPage = currentPage ? 0 : 1;
classie.addClass( pages[ currentPage ], 'show' );
}, 2000 );
} );
} );
}
init();
})();
</script>
How can I adapt the script in order to be able to have more than just two "pages"?
PS: I write "pages" because it actually all happens in one single html file.

They just flip back and forth between pages here:
currentPage = currentPage ? 0 : 1;
Looking at the code, I believe all you need to do is:
currentPage = currentPage == pages.length - 1 ? 0 : currentPage + 1;

Masonry script is blocking another script

I was working on a website, I have a bunch of scripts working fine next to each other.
I implemented another masonry script, which works fine by itself, but when I put them with another script, I get an error in the Chrome console:
Uncaught SyntaxError: Unexpected end of input masonry.js:16
Uncaught TypeError: Object [object Object] has no method 'colladjust'
There might be some kind of collision of id or class variables. Or overwriting of objects.
Here is the masonry script:
<script type="text/javascript">
jQuery(document).ready(function($) {
var CollManag = (function() {
var $ctCollContainer = $('#ct-coll-container'),
collCnt = 1,
init = function() {
changeColCnt();
initEvents();
initPlugins();
},
changeColCnt = function() {
var w_w = $(window).width();
if( w_w <= 640 ) n = 1;
else if( w_w <= 1023 ) n = 2;
else n = 3;
},
initEvents = function() {
$(window).on( 'smartresize.CollManag', function( event ) {
changeColCnt();
});
},
initPlugins = function() {
$ctCollContainer.imagesLoaded( function(){
$ctCollContainer.masonry({
itemSelector : '.ct-coll-item',
columnWidth : function( containerWidth ) {
return containerWidth / n;
},
isAnimated : true,
animationOptions: {
duration: 400
}
});
});
$ctCollContainer.colladjust();
$ctCollContainer.find('div.ct-coll-item-multi').collslider();
};
return { init: init };
})();
CollManag.init();
});
</script>
And here is one of the conflicting scripts:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('.sidebarlink').click(function(){
if ($("#content").hasClass("sidebar-active")){
$("#content").toggleClass("sidebar-active");
$("#content").toggleClass("sidebar-active-1600");
$(".sidebarbox").toggleClass("sidebar-active");
$(".sidebarlink").css( "opacity", 1 );
}else{
$("#content").toggleClass("sidebar-active");
$("#content").toggleClass("sidebar-active-1600");
$(".sidebarbox").toggleClass("sidebar-active");
$(".commentbox").removeClass("commentbox-active");
$("#content").removeClass("commentbox-active");
$("#content").removeClass("commentbox-active-1600");
$(".sidebarlink").css( "opacity", 0 );
$(".commentbox-link").css( "opacity", 1 );
}return false;
});
});
});

Your non masonry script poison's masonry.js by defining variables it is using. Find out which one it is by removing individual statements from the non masonry script until it begins working.
The solution may be as easy as changing the id and class variable names to something else.

Backbone model.change() not firing

I'm currently writing an application using Backbone and for some reason, it doesn't update a view, but only in certain circumstances.
If I refresh the page at index.html#/blog/2 it loads the page just fine, everything works great. However, if I refresh the page at index.html#/blog/1 and then change the URL to index.html#/blog/2 and press enter(NOT refresh), the change never gets fired.
This is my router:
makeChange: function() {
// Set activePage to the current page_id => /blog/2
var attributes = {activePage: this.page_id};
var $this = this;
// Loop through all sections in the app
app.sections.some( function( section ) {
// Check if section has the page
if( !section.validate( attributes ) )
{
// If it has, set the activePage to /blog/2
section.set( attributes, {silent: true} );
// Set active section to whatever section-id was matched
app.set( {activeSect: section.id}, {silent: true} );
console.log('Calling change!');
// Calling change on both the app and the section
app.change();
section.change();
console.log('Change complete!');
return true;
}
});
}
This is the app view(which is referenced as "app" up above^):
var AppView = Backbone.View.extend({
initialize: function( option ) {
app.bind( 'change', _.bind( this.changeSect, this ) );
},
changeSect: function() {
var newSect = app.sections.get( app.get('activeSect' ) );
var newSectView = newSect.view;
if( !app.hasChanged( 'activeSect' ) )
newSectView.activate( null, newSect );
else
{
var oldSect = app.sections.get( app.previous( 'activeSect' ) );
var oldSectView = oldSect.view;
newSectView.activate( oldSect, newSect );
oldSectView.deactivate( oldSect, newSect );
}
}
});
Tell me if you need to see some other classes/models/views.

I solved it! This only happens when navigating between different pages(by changing activePage in the section) in the same section, so activeSect in app was never changed, thus never called changeSect(). Now even when activeSect is the same in the app, and activePage has changed in the section, it will call the changeSect() in the app anyway.
In Section-model, I added this:
initialize: function() {
this.pages = new Pages();
this.bind( 'change', _.bind( this.bindChange, this ) );
},
prepareForceChange: function() {
this.forceChange = true;
},
bindChange: function() {
console.log('BINDCHANGE!');
if( this.forceChange )
{
AppView.prototype.forceChange();
this.forceChange = false;
}
},
In router.makeChange() above this:
section.set( attributes, {silent: true} );
app.set( {activeSect: section.id}, {silent: true} );
I added:
var oldSectId = app.get('activeSect');
if( oldSectId == section.id ) section.prepareForceChange();

cannot debug onmouseover event

/* this is our script for monopoly_first_page.html */
var result;
var button;
var image;
var x = 0;
function animation( animatedObject ){
var hereObject = animatedObject;
alert( hereObject );
/*setInterval( animate( animatedObject, x ), 100 );*/
}
function animate( hereObject, x ){
alert( x );
if( x == 0){
hereObject.style.width++;
}
else{
hereObject.style.width--;
}
if( hereObject.style.width <= 225 ){
x = 0;
}
if( hereObject.style.width >= 300 ){
x = 1;
}
}
function disanimation( animatedObject ){
var hereObject = animatedObject;
clearInterval();
}
window.onload = init;
function init(){
result = document.getElementById( "result" );
button = document.getElementById( "button-container" );
document.getElementById( "button-container" ).onmouseclick = animation( button );
document.getElementById( "button-container" ).onmouseout = disanimation( button );
alert( button );
alert( button );
}
hi every one...this is one of my source code and im a beginner...i faced a problem and it is where i wrote this statement:
document.getElementById( "button-container" ).onmouseclick = animation( button );
when function init begins to run function animation also execetues... but im sure im not rolling my mouse over the specified DIV...
what is the problem?

You need to pass a function to any handlers. What is happening with your code is that it calls animation(button) then sets that value to the onmouseclick property. Since the animation(...) function doesn't return a function, nothing beneficial will happen.
This would be a lot closer.
whatever.onmouseclick = animation;
If you need to, you could also do this: (assuming you want a specific button passed)
whatever.onmouseclick = function(e) { animation(button); }

just wanted to add to john, you can also do
document.getElementById( "button-container" ).addEventListener("click",function(){animation(button);},true);
insetead of "onmouseclick"
:-)

As #JohnFisher already mentioned, you assign the RESULT of your function to the event
However I only ever use onclick. Where did you get onmouseclick from?
Also you repeat your getElementById unnecessarily and have an init that is an onload so consolidate it:
window.onload = function() {
var button = document.getElementById( "button-container" );
// button is not necessarily known or the same at the time of the click so use (this)
button.onclick = function() { animation(this); }
button.onmouseout = function() { disanimation(this); }
}