Support » Plugin: Q2W3 Fixed Widget » Widgets below fixed widgets "jump" up

  • Resolved marshmallowcreme

    (@marshmallowcreme)


    Hi Max

    Great work on this plugin!

    My only problem is that when I scroll, and the widget become fixed, the widgets below the fixed ones then “jump” up behind the fixed one.

    I would like those widgets to be displayed in the exact same position as they were before the top widget became fixed. After they continue scrolling, the lower widgets would then move behind the fixed widget like normal.

    Is there any way to push the non-fixed widgets down after the fixed widget becomes fixed?

    Thanks. 🙂

    http://wordpress.org/extend/plugins/q2w3-fixed-widget/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Max Bond

    (@max-bond)

    Hi!

    My only problem is that when I scroll, and the widget become fixed, the widgets below the fixed ones then “jump” up behind the fixed one.

    I understand your problem, but … this is behavior of the position: fixed css propertie. Fixed elements are renedered in another layer then standard elements. When element became fixed it dissapears from standard elements layer and jumping occurs.

    I think you need to organize your sidebar in a different way. I always recommend to fix only last widgets in sidebar. Even without jumping sidebar looks bad when non fixed widgets are scrolling under the fixed one!

    Some people make interesting thing. For example you have 3 widgets:
    1. fixed
    2. standard
    3. standard

    Widgets overlapping looks bad. Solution:
    1. standard
    2. standard
    3. standard
    4. fixed. This is the copy of the first widget!

    That’s an ok solution.

    I think an interesting approach might be to measure the height of the fixed widget, then once it becomes fixed, add that number of pixels to the top of the next non-fixed widget, as a margin.

    I might help write the javascript, if you’re interested.

    I had this very same problem. I fixed it by installing the Drop Shadow Box Plugin. I put the content I want to be fixed in the Drop Shadow Box Widget and then fixed it. That solved the problem 🙂 http://wordpress.org/plugins/drop-shadow-boxes/

    Plugin Author Max Bond

    (@max-bond)

    marshmallowcreme!

    I might help write the javascript, if you’re interested.

    Yes, let’s try.
    But this is not an easy task!..
    The next widget may be fixed or may be not…

    It’s actually quite easy. I customised the js file …

    In the function fixed_widget(widget) add a couple more vars …

    var widget_height = widget.obj.css('height');
    var widget_replacement = widget.obj.attr('id')+'_replacement';

    then after if ( !style_applied_bottom ) { … change to this…

    widget.obj.css('position', 'fixed');
    widget.obj.css('top', '');
    widget.obj.css('width', widget_width);
    widget.obj.css('margin', widget_margin);
    widget.obj.css('padding', widget_padding);
    if(jQuery('#'+widget_replacement).length <= 0) {
    	widget.obj.after('<div id="'+widget_replacement+'" style="height:'+widget_height+';"></div>');
    }
    style_applied_bottom = true;
    style_applied_top = false;
    style_applied_normal = false;

    then after if ( !style_applied_top ) { … change to this…

    widget.obj.css('position', 'fixed');
    widget.obj.css('top', widget.fixed_margin_top);
    widget.obj.css('bottom', '');
    widget.obj.css('width', widget_width);
    widget.obj.css('margin', widget_margin);
    widget.obj.css('padding', widget_padding);
    					if(jQuery('#'+widget_replacement).length <= 0) {
    	widget.obj.before('<div id="'+widget_replacement+'" style="height:'+widget_height+';"></div>');
    }
    style_applied_top = true;
    style_applied_bottom = false;
    style_applied_normal = false;

    then after if ( !style_applied_normal ) { … change to this…

    if(jQuery('#'+widget_replacement).length > 0) {
    	jQuery('#'+widget_replacement).remove();
    }
    widget.obj.css('position', '');
    widget.obj.css('top', '');
    widget.obj.css('width', '');
    widget.obj.css('margin', '');
    widget.obj.css('padding', '');
    style_applied_normal = true;
    style_applied_top = false;
    style_applied_bottom = false;

    The code isn’t necessarily perfect but you get the idea. I’ve only tested on a top positioned sticky widget, which works very well. Not sure if it works as well with a bottom fixed widget.

    Anyway, hope it helps.

    In case you want a demo of the above code working, have a look at http://tipsrated.com

    Cheers and thanks Max for the plugin in the first place. Very useful!

    Plugin Author Max Bond

    (@max-bond)

    Greetings to all!

    The new plugin version – 4.0 is released just now.
    Widget jumping now is fixed! Thanks to angelcoding!
    I have implemented his approach with some modifications.
    Please test!

    esmi

    (@esmi)

    Forum Moderator

    These are English language forums, so please use English. Alternatively, use a WP support forum in your language.

    ОК!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Widgets below fixed widgets "jump" up’ is closed to new replies.