WordPress.org

Forums

Strx Magic Floating Sidebar Maker
[resolved] For responsive website (10 posts)

  1. lindseybugbee
    Member
    Posted 2 years ago #

    Hi,

    I really like this plugin. The only issue I have is that my website is responsive, so when the screen width decreases my sidebar moves to the bottom of the content. This break the plugin.

    Is there an easy way to tell the plugin to do nothing and reset the original CSS if window.innerWidth < (some threshold)?

    Any help is welcome!

    http://wordpress.org/extend/plugins/strx-magic-floating-sidebar-maker/

  2. Gaëtan
    Member
    Posted 2 years ago #

    Hi !

    I had the same issue and tried this, just using css :

    @media screen and (max-width: 767px) {
      .left-sidebar {
        top: 0 !important;
      }
    }

    It just disables movement by using css3 media query to overwrite the "top" property when screen is under a certain width. It's easy and seems to work fine... But I haven't tried on mobile devices yet.

  3. lindseybugbee
    Member
    Posted 2 years ago #

    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!

  4. Gaëtan
    Member
    Posted 2 years ago #

    Nice! You welcome. :)

  5. lindseybugbee
    Member
    Posted 2 years ago #

    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?

  6. lindseybugbee
    Member
    Posted 2 years ago #

    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.

  7. mirluin
    Member
    Posted 1 year ago #

    @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 :)

  8. lindseybugbee
    Member
    Posted 1 year ago #

    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!

  9. lindseybugbee
    Member
    Posted 1 year ago #

    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.

  10. mirluin
    Member
    Posted 1 year ago #

    Thanks a lot Lindsey!
    My layout is fluid so I think I need to translate pixels in percentages, somehow. :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Strx Magic Floating Sidebar Maker
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic