responsivness with expandable sidebar

nikokelli's Avatar

nikokelli

30 Sep, 2016 11:15 AM

hi there,
I am trying to use the slider in a page with a fixed width, expandable sidebar. When I expand the sidebar though the main window does not contract to follow.(thumbs are responsive though). It seems to me that the width of the overflow element is calculated based on the size of the browser window rather than its container tag, and that causes the problem. Is there any way around it?

  1. 1 Posted by nikokelli on 30 Sep, 2016 11:22 AM

    nikokelli's Avatar

    I use a jquery to add class to the overflow element in order to respond to the button I use for expanding the sidebar. I also attach the clean files here . The ones above are after my efforts to solve it and might be confusing. Press the art button to bring in the slider...

  2. Support Staff 2 Posted by Dmitry Semenov on 30 Sep, 2016 05:45 PM

    Dmitry Semenov's Avatar

    Hello,

    Please link to the page with the issue, just HTML won't help much.

    If you're modifying width of slider parent element(s), either use updateSliderSize method: $('.royalSlider').royalSlider('updateSliderSize', true); or trigger resize event on window via jQuery.

    Dmitry

  3. 3 Posted by nikokelli on 03 Oct, 2016 09:58 AM

    nikokelli's Avatar

    hi again and thanks for the quick replay. I am not a web designer, just working on my portfolio site, and therefore I am not very familiar with java and jquery. So I am not sure how I should implement your advice above.

    here is the page though
    http://www.nikokelli.com/pages/deepFLEX_theme/works_html5.html

    press the art button on the left, to bring in the slider element and then the (i) button on the right-over the social media buttons- to expand the sidebar and see the issue.Tell me if you there is an easy way arround it...
    thanks again
    nikos

  4. Support Staff 4 Posted by Dmitry Semenov on 03 Oct, 2016 11:52 AM

    Dmitry Semenov's Avatar

    You need to update size of slider after the animation ends, with code $('.royalSlider').royalSlider('updateSliderSize', true);, if you're using jQuery to animate element - it has finish fallback http://api.jquery.com/animate/#basic-usage

  5. 5 Posted by nikokelli on 03 Oct, 2016 12:30 PM

    nikokelli's Avatar

    sorry man but i dont quite get it, bare with me if you can

    I use a script that when I press the (i) button assigns extra classes to the relative divs, that carry on the animation

    <script>
    $(document).ready(function(){
        $("#info").click(function(){
            $('.R-SIDEBAR').addClass("click");
    $('.R-SIDEBARexp').addClass("click");
    $('.close').addClass("click");
    $('.Content-resp').addClass("click");

        });
    });
    </script>

    <script>
    $(document).ready(function(){
        $("#closeBTTN").click(function(){
            $('.R-SIDEBAR').removeClass("click");
    $('.R-SIDEBARexp').removeClass("click");
    $('.close').removeClass("click");
    $('.Content-resp').removeClass("click");

        });
    });
    </script>

    I tried to put the code that you sent me inside that script :

    <script>
    $(document).ready(function(){
        $("#info").click(function(){
            $('.R-SIDEBAR').addClass("click");
    $('.R-SIDEBARexp').addClass("click");
    $('.close').addClass("click");
    $('.Content-resp').addClass("click");
                     $('.royalSlider').royalSlider('updateSliderSize', true);

        });
    });

    I also tried to add a .click class to the .royalSlider class and then add the script

    <script>
    $(document).ready(function(){
        $("#info").click(function(){
            $('.R-SIDEBAR').addClass("click");
    $('.R-SIDEBARexp').addClass("click");
    $('.close').addClass("click");
    $('.Content-resp').addClass("click");
    $('.royalSlider').addClass('click');
    $('.royalSlider').royalSlider('updateSliderSize', true);
        });
    });
    </script>

    <script>
    $(document).ready(function(){
        $("#closeBTTN").click(function(){
            $('.R-SIDEBAR').removeClass("click");
    $('.R-SIDEBARexp').removeClass("click");
    $('.close').removeClass("click");
    $('.Content-resp').removeClass("click");
    $('.royalSlider').removeClass('click');
    $('.royalSlider').royalSlider('updateSliderSize', true);
        });
    });
    </script>

    finaly I tried to add your code as an individual script after the above script

    <script>
    $(document).ready(function(){
        $("#info").click(function(){
           $('.royalSlider').royalSlider('updateSliderSize', true);

        });
    });
    </script>

    <script>
    $(document).ready(function(){
        $("#closeBTTN").click(function(){
             $('.royalSlider').royalSlider('updateSliderSize', true);

        });
    });
    </script>

    and nothing worked. Obviously I dont really know what I m doing. Any more help would be highly appriciated
    In order to force the container of the slider to respond to the expantion of the side bar I use a margin. So the size of the element does not really change, I mean the width value is allways 100%.

  6. 6 Posted by nikokelli on 03 Oct, 2016 12:59 PM

    nikokelli's Avatar

    also the slider seems to adapt. its the rsOverflow div that does not follow

  7. Support Staff 7 Posted by Dmitry Semenov on 03 Oct, 2016 02:20 PM

    Dmitry Semenov's Avatar

    Try delaying the method, e.g. like so:

    $(document).ready(function(){ 
        $("#closeBTTN").click(function(){ 
    
            setTimeout(function() {
                $('.royalSlider').royalSlider('updateSliderSize', true); 
            }, 1000);
    
        }); 
    });
    

    above code will delay it by 1000ms (1 second), reduce/increase the delay if needed.

    also the slider seems to adapt. its the rsOverflow div that does not follow

    Root element will always adapt, as it has 100% set via CSS, while inner elements require JS events to update.

  8. 8 Posted by nikokelli on 04 Oct, 2016 09:02 AM

    nikokelli's Avatar

    thanks a lot Dimitri,
    all the best
    nikos

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • works_html5.html 68.7 KB
  • deepFLEX_mama.css 43.1 KB
  • deepFLEX_works.css 26.2 KB
  • rs_deep-works.css 4.37 KB

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