Support » Plugin: Strx Magic Floating Sidebar Maker » For responsive website

Viewing 9 replies - 1 through 9 (of 9 total)
  • 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.

    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!

    Nice! You welcome. 🙂

    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?

    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.

    @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 🙂

    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!

    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.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘For responsive website’ is closed to new replies.