For responsive website

(@lindseybugbee)

That worked like a charm! I also had to constrain the left property.

@media screen and (max-width: 959px) {
#sidebar {
position: relative !important;
left: 0 !important;
top: 0 !important;
}
}

Thanks for your help!

Ga?tan

(@gaetanlf)

Nice! You welcome. ??

Thread Starter

(@lindseybugbee)

I realized there is a second part to this story. I want to reset everything regarding the function when the screen width changes. For example, let’s assume the user is reading my blog in his/her iPad. The floating sidebar function will assign values to the initialPos variable in the js file. Now, if the user turns his/her iPad to landscape mode, the sidebar won’t adjust automatically, until the user scrolls up or down, assuming I have the dynamic top option checked. I don’t want the user to have to scroll to fix the issue. I want this to be automatic.

Basically, if there is a window resize event, reset completely the function. I tried calling the function again upon a window resize or adding an if statement in the js file to adjust the initialPos but this didn’t work.

Does anyone have any ideas?

Thread Starter

(@lindseybugbee)

To answer my own question if somebody else has this issue, I added to the js file:

console.log('width in onScroll: ' + lastWidth);
if ($(window).width()!=lastWidth) {
	console.log('width changed...');
	if ($(window).width() > 940) {
		sidebarTop = 60;
		$s.css({
			position: 'absolute',
			left: 690 + 'px',
			top: sidebarTop + 'px'
		}).find('.widget').css('position', 'relative');
		lastScrollY = -1;
		console.log('top=' + t + ', scrollY=' + scrollY);
	}
	lastWidth = $(window).width();
}
console.log('sidebarTop=' + sidebarTop + ', offsetTop=' + offsetTop);

[Please post code between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

The values of 690 and 60 are hardcoded to my site. The console lines are for debug purposes.

Savage3939

(@mirluin)

@lindseybugbee

Hi, is it possible that the code you posted is incomplete?
I tried it but I got this error: “lastWidth is not defined”

Thanks in advance ??

Thread Starter

(@lindseybugbee)

Here is the code in my file:

//console.log('strx-floating-sidebar/js/main.js loaded ok');
strx = {};
if (typeof console === 'undefined') {
  console = {
    log: function () {},
    dir: function () {}
  };
}

(function () {
	strx.start = function (opts) {
	jQuery(function () {
		opts = jQuery.extend({}, {
		content: '#content',
		sidebar: '#sidebar',
		wait: 3000,
		debounce: 500,
		animate: 3000,
		debug: 0
	}, opts);

	setTimeout(function(){

	var $w = jQuery(window),
		$c = jQuery(opts.content),
		$ss = jQuery(opts.sidebar),
		$b = jQuery('body');

	if ($c.length && $ss.length) {
		$ss.each(function () {
			(function ($s) {
	          	// console.log($c.height() - $s.height());
	            if ( $c.height() - $s.height() > opts.minHDiff || opts.dynamicTop) {
                $s.parent().css('position', 'relative');

                var initialSPos=$s.position(),
					initialSOff=$s.offset();

                //Recupero Top e Left iniziali di tutte le sidebar prima di iniziare il posizionamento
                setTimeout(function(){
					if ( $c.height() > $s.height()) {
	                $s.css({
						position: 'absolute',
						left: initialSPos.left + 'px',
						top:  initialSPos.top  + 'px'
	                }).find('.widget').css('position', 'relative');
					}
					else {
					$s.css({
						position: 'relative',
						left: 0 + 'px',
						top:  0  + 'px'
	                }).find('.widget').css('position', 'relative');
					}

					var lastWidth = $(window).width();
					var lastScrollY = -1,
						sidebarTop = initialSPos.top,
						offsetTop = initialSOff.top - sidebarTop,
						maxTop = sidebarTop + $c.height() - $s.outerHeight(),
					onScroll = function (e) {
						if ($s.height() > $c.height()) {
							$ss.css({
								position: 'relative',
								left: 0 + 'px',
								top : 0 + 'px'
							}).find('.widget').css('position', 'relative');
							return;
						}

						if ($(window).width()!=lastWidth) {
							if ($(window).width() > 940) {
								sidebarTop = 60;
								$s.css({
									position: 'absolute',
									left: 690 + 'px',
									top: sidebarTop + 'px'
								}).find('.widget').css('position', 'relative');
								lastScrollY = -1;
							}
							lastWidth = $(window).width();
						}

	                    var scrollY = $w.scrollTop(),
							t, scrollingDown = scrollY > lastScrollY;

	                    if ((scrollingDown && scrollY > sidebarTop + offsetTop && scrollY + $w.height() > $s.position().top + $s.height() + offsetTop - sidebarTop) || (!scrollingDown && scrollY < $s.position().top + offsetTop)) {
							if (e.type === 'scroll' && ($w.height() > $s.height() || !scrollingDown)) {
							//Scorrimento verso l'alto
							t = Math.max(sidebarTop, scrollY - (offsetTop) + (~~opts.offsetTop));
							} else {
							//Scorrimento verso il basso o resize
							t = Math.max(sidebarTop, scrollY + $w.height() - $s.outerHeight() - offsetTop - (~~opts.offsetBottom));
							}

							t = Math.min(t, opts.dynamicTop ? (sidebarTop + $c.height() - $s.outerHeight()) : maxTop);
							$s.stop().animate({
								top: t + 'px'
							}, ~~opts.animate);
							/*if (opts.debug) {
							window.scrollY = scrollY;
							console.log('top=' + t + ', scrollY=' + scrollY);
							}*/
	                    }
	                    lastScrollY = scrollY;
					};
	                if (opts.debounce && Function.prototype.debounce) {
						onScroll = onScroll.debounce(opts.debounce);
	                }

	                $w.scroll(onScroll).resize(onScroll);
	                onScroll({
						type: 'scroll'
	                });

	                $w.scroll(function(){
						$s.stop();
	                });
                },0);

	            }
	        })(jQuery(this));
	    });

	}
	else {
		if ($c.length === 0) {
			console.log(opts.content + ' not found');
		}
		if ($ss.length === 0) {
			console.log(opts.sidebar + ' not found');
		}
	}
    }, opts.wait);
    });
	};
})();

I don’t use this plugin anymore, but it worked pretty well last time I checked. It was completely responsive. I think you need to check the option dynamicTop in its settings menu.

Also, you may need to change some values in this code. 940 is the width of my content + sidebar, 60 is the height at which my sidebar started, and 690 is the width at which it started.

I’m not sure, but I think you will also need the CSS above. Good luck!

Thread Starter

(@lindseybugbee)

P.S. I just remembered I removed a lot of the debug options from the php file and this script, so that’s the reason it is a bit shorter. Just FYI.

Savage3939

(@mirluin)