updateSliderSize not working but resizing window is

simong04's Avatar

simong04

15 Feb, 2014 06:23 PM

Hey Dmitry, strange question for you: can you think of a reason why calling updateSliderSize wouldn't resize the slider after switching autoScaleSliderWidth (for example) but when I resize my browser window it fixes the slider? Is there a way to internally call whatever is being called when the browser window changes size to bypass updateSliderSize? Thanks.

  1. Support Staff 1 Posted by Dmitry Semenov on 16 Feb, 2014 05:52 PM

    Dmitry Semenov's Avatar

    Hi,

    updateSliderSize(true) always runs on window resize. There is no other method that resizes slider.

    Please link to page that you're working on.

    Dmitry

  2. 2 Posted by simong04 on 17 Feb, 2014 06:40 AM

    simong04's Avatar

    I've built an example here:
    http://jsbin.com/gudilopo/1

    Slide 1,3,4,5 are 1200px by 450px, slide 2 is 800px by 450px. The slider is initialized with autoScaleSliderHeight:4.5 and autoScaleSliderWidth:8. What you will notice is that when the browser window is smaller than 1200px that slides 1,3,4,5 will shrink and black bars will appear above/below them (this is normal).

    So when I execute $('#portslid1').data('royalSlider').st.autoScaleSliderWidth = 12 and then $('#portslid1').royalSlider('updateSliderSize', true) when one of the 1200px slides is active that nothing happens but when you drag the window width the image will suddenly fit to the width as it should because of the changed autoScaleSliderWidth.

    Any ideas on how to get this to happen without user input (stretching the window to force correction?) Thank you!

  3. Support Staff 3 Posted by Dmitry Semenov on 17 Feb, 2014 02:41 PM

    Dmitry Semenov's Avatar

    Oh, you mean dynamically change it. Try like so:

     var slider = $('#portslid1').data('royalSlider');
      slider.width = 0;
      slider.st.autoScaleSliderWidth = 12;
      slider.updateSliderSize(true);
    
  4. 4 Posted by simong04 on 18 Feb, 2014 06:51 AM

    simong04's Avatar

    okay that seemed to work, thanks. was i using updateSliderSize incorrectly?

    so now what I want to do is animate the change in size but when I add a CSS3 transition to my slider div I get very inconsistent results. basically you have to run the code you gave me twice to get things to look right

    the example (http://jsbin.com/gudilopo/1) now has this CSS on #portslid1:
    transition:all 0.15s linear; and when you click the gray box at the bottom it executes the code you suggested but pressing it once usually doesnt size things correctly. why is the transition CSS interfering with updateSliderSize?

  5. Support Staff 5 Posted by Dmitry Semenov on 18 Feb, 2014 09:47 PM

    Dmitry Semenov's Avatar

    Slider just checks for current width and multiples it by ratio that you defined. You'll need to delay the call by 15ms - so it runs after your transition is complete.

  6. 6 Posted by simong04 on 19 Feb, 2014 04:56 AM

    simong04's Avatar

    did you mean i should delay calling updateSliderSize? I did that here (delayed by 2sec now) and the gray box still needs to be pressed twice to resize the box correctly: http://jsbin.com/gudilopo/1

    or did you mean that something internally in your code needs to be delayed. it really seems like adding a CSS transition breaks something....

  7. Support Staff 7 Posted by Dmitry Semenov on 19 Feb, 2014 07:02 PM

    Dmitry Semenov's Avatar

    did you mean i should delay calling updateSliderSize?

    Yes, but you should call updateSliderSize once too.

    // forces new size - transition gets applied
    slider.updateSliderSize(true);
    
    setTimeout(function() {
       // transition finished, size is now correct
       slider.updateSliderSize(true);
    }, 200);
    
  8. 8 Posted by simong04 on 19 Feb, 2014 11:24 PM

    simong04's Avatar

    ok so you can check the code (same link) and now pressing the button does resize it correctly. do you have any ideas on how to get the slider to retain a proper ratio/size while the user is stretching the browser to various sizes?

  9. Support Staff 9 Posted by Dmitry Semenov on 20 Feb, 2014 04:34 PM

    Dmitry Semenov's Avatar

    The transition on root slider element is causing this problem, as size is calculated in the middle of transition.

    If you really need to keep the transition, you may try to run requestAnimationFrame loop that should run each time window is resized and call updateSliderSize method in it.

    Dmitry

  10. 10 Posted by simong04 on 20 Feb, 2014 08:37 PM

    simong04's Avatar

    i think you lost me on that one. would it be troublesome to show me an example of what I would put in my $(window).resize function?

  11. Support Staff 11 Posted by Dmitry Semenov on 23 Feb, 2014 07:43 AM

    Dmitry Semenov's Avatar

    Hello,

    Sorry, can't assist you much on this, as I don't provide customization support. If you don't know how to crerate requestAnimationLoop, this guide should help - https://hacks.mozilla.org/2011/08/animating-with-javascript-from-se...

    Dmitry

  12. 12 Posted by Jim Camomile on 07 Oct, 2016 10:55 PM

    Jim Camomile's Avatar

    I am a bit new to javascript but was very excited that I could make changes to the slider after initialization by changing parameters and then using updateSliderSize(true) to resize the slider afterward. This is really helpful since I am using the Wordpress plugin.

    Now after failing to make that work I see this post which seems to say this only works if the user has the presence of mind to grab the window and resize it? What possible utility is that? Generally users just load the page without changing it's size. Couldn't you make the function work on load rather than on resize?

    Otherwise this is a fairly useful slider.

  13. Support Staff 13 Posted by Dmitry Semenov on 08 Oct, 2016 07:40 AM

    Dmitry Semenov's Avatar

    @jim, not sure if I entirely understand your question, slider already updates size after the document is ready and on window resize.

  14. 14 Posted by Jim Camomile on 08 Oct, 2016 03:24 PM

    Jim Camomile's Avatar

    Based on this thread and also my experience, it does not consistently resize on load. It only resizes after dragging the window to resize it as @simong04 mentioned above.

    I am realizing now that I can change some parameters and see them applied on page load and some only work after resize. Changing slider.st.visibleNearby.centerArea works on load with updateSliderSize(true) but autoScaleSliderHeight and most other parameter changes do not. I am also realizing that it might be due to my specific configuration. I am using auto-scale and nearby slides.

  15. Support Staff 15 Posted by Dmitry Semenov on 08 Oct, 2016 07:31 PM

    Dmitry Semenov's Avatar

    Your statement is incorrect, slider is resized on document ready, on every page load. If you get incorrect size - then one of your scripts is resizing slider or one of its parents after the page is loaded or after the slider, so you have to call updateSize method one more time.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac