Support » Plugin: Promotion Slider » [Plugin: Promotion Slider] browser scroll bug using image width auto – suggested fix

  • Resolved rcain

    (@rcain)


    Hi,

    Firstly, great thanks to Woodent for a great plugin – nicely thought out design, and simple to extend/customise.

    however, whilst creating a customised scroller style for a client, intended to ‘stretch’ panel/image size to with browser width, i came across the following problem:

    having set styles in /wp-content/plugins/promotion-slider/css to

    ...
    .promo_slider_wrapper { margin:10px 0; position:relative; height: auto;}
    .promo_slider {height:auto; overflow:hidden; position:relative; }
    .promo_slider img { margin:0; padding:0; width: 100%; height: auto;}
    .promo_slider .panel { background:url('images/slide.png'); display:none; float:left; overflow:hidden; width:100%; height:100%; }
    ...

    – this allowed my scroller panel and images to stretch to browser width fine, BUT..

    when viewing on the front end (in Chrome V15) the height of the current browser position would ‘jag’ and always end up at the top (ish) of the browser window, whenever the contents of the scroller changed.

    the problem is caused because in this chosen ‘css’ configuration, the containing div for the panels ‘momentarily’ shrinks to zero (being set to auto), when it is hidden and refreshed. the browser then loses the browseer scroll position and resets it. thus the ‘jag’.

    the solution i found is the following::

    edit file: /wp-content/plugins/promotion-slider/js/promo_slider.js
    around line 165, add the line::

    sliders.height(currentSlider.innerHeight());

    so that the file reads::

    ...
    	  // Assign variables for ease of use
    	  var currentItem = jQuery('.panel-' + currentValue, currentSlider);
    	  var newItem = jQuery('.panel-' + newValue, currentSlider);
    	  var currentSpan = jQuery('.slider_selections span.current', currentSlider);
    	  var newSpan = jQuery('.slider_selections span.' + newValue, currentSlider);
    
    	//mod jrc 111211 - fix broswer scoller jag on css auto-sized images
    	sliders.height(currentSlider.innerHeight());
    	//end mod jrc 111211
    
    	  // Add / Remove classes
    	  currentItem.removeClass('current');
    ...

    (my extra line in mod marks ‘mod jrc …’

    this will ensure that the div height for the panel_wrapper, never disappears to zero, (ie. is always recalculated to currently available space), hence, no ‘jag’.

    ps. i also implemented Woodent’s fix for the JQuery bug in Chrome, causing ‘refresh’ events to ‘clash’/’stack up’ causing multiple images to appear on front end, all at the same time.

    the fix for that is::

    to add the following into your themes functions.php file::

    ...
    /*mod jrc 111211 - fiix for Promotion Slider jquery bug - upgrade jq*/
    function myname_jquery_fix(){
       if ( !is_admin() ){
          wp_deregister_script('jquery');
          wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"), false, '1.7.0');
          wp_enqueue_script('jquery');
       }
    }
    add_action( 'init', 'myname_jquery_fix');
    /*mod jrc 111211*/
    ...

    might be nice to consider including in some future build/release. (seems to work well, though i still have some further cross-browser testing to complete).

    hope this is of help to someone.

    http://wordpress.org/extend/plugins/promotion-slider/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter rcain

    (@rcain)

    STOP PRESS:: the above fix for browser ‘jag’ does NOT quite work correctly yet – (it slowly ‘grows’ div height – not good). – will be back with a fix to the fix asap.

    Plugin Author Micah Wood

    (@woodent)

    @rcain,

    Thanks for your input! It looks like this thread was marked as resolved for some reason… I ‘unresolved’ it so you could post your fix once you have it all figured out.

    Thread Starter rcain

    (@rcain)

    Hi Woodent – thanks for that.

    finally managed to get it all fixed, plus also created an alternative layout + resizable/’stretchy’ image version of the css.

    two files affected. you can find the updated code here::

    promo_slider.js :: http://pastebin.com/KP5NDVpV – NOTE: look for my mod marks ‘mod jrc …’

    slide.css :: http://pastebin.com/9JDPFas5 – NOTE: this is an alternative css file to try for those people who would like a different look and ‘stretchy’ style

    i found a number of other bugs in your code i’m afraid, some of which have been raised already. they include::

    http://wordpress.org/support/topic/plugin-promotion-slider-slider-duplicating-image?replies=2 – note: this was caused by unnecessary events firing and not getting queued properly in the stack (nested call-backs)

    and

    http://wordpress.org/support/topic/plugin-promotion-slider-slides-auto-advancing-at-varying-times?replies=4 – note: same underlying case as above.

    also, the bugs raised by me in the first post above, vis::

    – the ‘scroller jag’ bug
    – the ‘progress’ event cascade bug (responsible for both of above)

    also, a couple of newly discovered bugs::

    – ‘double click move-left/right causes unwanted browser select-text highlighting of panel content’

    – slider ‘options’ not set/incorrectly set at plugin js init

    all of which are now fixed and tested in Chrome 15.0, FF 8.0.1, IE 9.0, on MS Vista, and Safari 5.0.5 and FF 3.6.19 on Mac OSX10.5.8 – all ok.

    please feel free to incorporate what’s sound in your next release.

    ps. i’m also working on extending option to permit/swap-in jQuery ‘slider’ and ‘easing’ functions – make it even more sexy. drop me a line if you would like a copy of that code when i’m done.

    best wishes

    Rob Cain
    SystemCore.co.uk

    Thread Starter rcain

    (@rcain)

    ps. … oops sorry – one more file changed to add to the two pastebins above::

    index.php :: http://pastebin.com/yDY1Z6tZ – NOTE: look for my mod marks ‘mod jrc …’ – 1 small mod only to pass in options properly to js.

    Thanks for sharing this awesome update to a great slider. I’ve been trying to get something like this to work for quite awhile.

    Is there any way to have the width at full screen, but the height of the image at a fixed size? I’m trying to modify this to show 400px high images that will extend the full width of the browser, but without compressing or “squishing” the image when the browser isn’t as large as the image size.

    Here is what I have in the slide.css file.

    .promo_slider_wrapper { margin:0; position:relative; height: 400px; z-index:-1000;}
    .promo_slider {height:400px; overflow:hidden; position:relative; }
    .promo_slider img { margin:0; padding:0; width: 1920px; height: 400px;}
    .promo_slider .panel { background:url('images/slide.png'); display:none; float:left;

    This shows the image in proportion, but it does not allow it to align to the center of the screen anymore. Thanks so much for your time.

    -Trip

    Thread Starter rcain

    (@rcain)

    hi triplwu,

    its nothing, you are welcome, glad if it helped. we have woodent to thank for the thing.

    re. your question: well, if one dimension changes, and the other dimension remains fixed, then ‘something’ has to give. you could either:

    a) accept some ‘squishing’ in one dimension, but keep the whole of the image ‘in-frame’ (albeit ‘somewhat’ distorted).

    or

    b)accept that part of the image will become truncated/cropped (horizontally, at the bottom, in your case), when the browser/container size changes.

    this will give the appearance of a ‘zooming’ effect (though you will lose/gain detail of the bottom of the picture).

    you ‘might’ also need to ensure the image doesn’t shrink below a certain size. again, it all depends again on your design and is also browser dependent.

    i guess it is the second outcome you want to achieve.

    the css file i attach above should almost do what you want already. you will need to set a ‘hard’ HEIGHT parameter and a ‘variable’ WIDTH parameter short-code options. eg:

    [promoslider id="my_id" post_type="promotion" category="promo test cat 1" display_excerpt="excerpt" width="100%" height="300px"]

    then i think you will need to experiment with combinations of css::

    overflow:hidden;
    overflow-y:hidden;
    overflow-y:hidden;

    for the styles:

    .promo_slider_wrapper
    .promo_slider
    .promo_slider .panel

    … maybe others. if you have problems also try to use ‘absolute positioning where possible, avoid floats if you can (set float:none;), the usual cross browser malarkey.

    then, test, test, test

    good luck

    Thread Starter rcain

    (@rcain)

    ps. you may also need css for::

    min-height:
    max-height:

    ../width

    errata: typo in post above – should have included overflow-x:hidden; /visible as well, depending on what you want.

    Thread Starter rcain

    (@rcain)

    pps. on second thoughts, you will probably want:

    height="auto"

    in the short code params, and set the css height hard, as you have. sorry, its late. best of luck.

    Thanks so much for the replies. I figured something out that makes it work exactly how I envisioned it. It might be a little messy, but at least it works for the time being. That suggestion for float:none; and absolute positioning really helped me figure out what I wanted to do.

    Here’s what I ended up with in the slide.css file.

    .promo_slider_wrapper { margin:0; position:relative; height: 400px; z-index:-1000; overflow:hidden;}
    .promo_slider {height: 400px; overflow:hidden; position:relative; }
    .promo_slider img { left:50%; margin-left: -960px; padding:0; width: 1920px; height: 400px; position:absolute; float:none;}
    .promo_slider .panel { background:url('images/slide.png'); display:none; float:left;

    Thanks again rcain for your updates to this plugin and a big thanks to woodent for making IMO one of the best slider plugins for WordPress.

    -Trip

    Anonymous User 3510303

    (@anonymized-3510303)

    You fixed the “jag” excellently, but for some reason, once I manually use the navigation to scroll through the slides, they stop scrolling automatically.

    thank you for this rcain!!!! you are a life saver!

    Aptribute, are you sure that you aren’t hovering over the image and that is what is stopping the scrolling.

    (there is an option in the promotion slider settings that allows you to stop scrolling when you hover over it.)

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Plugin: Promotion Slider] browser scroll bug using image width auto – suggested fix’ is closed to new replies.