Quantcast
Channel: responsive – WordPress.org Forums
Viewing all articles
Browse latest Browse all 16569

lindseybugbee on "[Plugin: Strx Magic Floating Sidebar Maker] For responsive website"

$
0
0

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!


Viewing all articles
Browse latest Browse all 16569

Trending Articles