Announcement

Collapse
No announcement yet.

HTML modules, iframes, and responsiveness

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • NumNum
    replied
    Thank you for your explanation, and insight!

    Leave a comment:


  • David Grove
    replied
    NumNum Here's what's going on. The ScaleSlider() function handles resizing the slider for smaller screen sizes. It works by getting the width of the HTML element that is the parent of the slider and bases the resizing off that. The slider is the div with id="jssor_1". The parent of that div is the body element of your standalone HTML slider page (that is the src of the iframe). Instead of checking the body for the resize width, it needs to check the parent element of the iframe instead. Attempting to do that will be complicated and I would recommend putting the entire slider inside the HTML module instead of using an iframe and a separate page.

    Leave a comment:


  • NumNum
    replied
    David Grove

    Code:
     <body style="padding:0px; margin:0px; background-color:#fff;font-family:arial,helvetica,sans-serif,verdana,'Open Sans'">
    
        <!-- #region Jssor Slider Begin -->
        <!-- Generator: Jssor Slider Maker -->
        <!-- Source: https://www.jssor.com -->
        <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script src="js/jssor.slider-27.5.0.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
    
                var jssor_1_SlideshowTransitions = [
                  {$Duration:800,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
                  {$Duration:800,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
                ];
    
                var jssor_1_options = {
                  $AutoPlay: 1,
                  $SlideshowOptions: {
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: jssor_1_SlideshowTransitions,
                    $TransitionsOrder: 1
                  },
                  $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$
                  },
                  $ThumbnailNavigatorOptions: {
                    $Class: $JssorThumbnailNavigator$,
                    $Orientation: 2,
                    $NoDrag: true
                  }
                };
    
                var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
    
                //make sure to clear margin of the slider container element
                jssor_1_slider.$Elmt.style.margin = "";
    
                /*#region responsive code begin*/
    
                /*
                    parameters to scale jssor slider to fill parent container
    
                    MAX_WIDTH
                        prevent slider from scaling too wide
                    MAX_HEIGHT
                        prevent slider from scaling too high, default value is original height
                    MAX_BLEEDING
                        prevent slider from bleeding outside too much, default value is 1
                        0: contain mode, allow up to 0% to bleed outside, the slider will be all inside parent container
                        1: cover mode, allow up to 100% to bleed outside, the slider will cover full area of parent container
                        0.1: flex mode, allow up to 10% to bleed outside, this is better way to make full window slider, especially for mobile devices
                */
    
                var MAX_WIDTH = 800;
                var MAX_HEIGHT = 530;
                var MAX_BLEEDING = 0.128;
    
                function ScaleSlider() {
                    var containerElement = jssor_1_slider.$Elmt.parentNode;
                    var containerWidth = containerElement.clientWidth;
    
                    if (containerWidth) {
                        var originalWidth = jssor_1_slider.$OriginalWidth();
                        var originalHeight = jssor_1_slider.$OriginalHeight();
    
                        var containerHeight = containerElement.clientHeight || originalHeight;
    
                        var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
                        var expectedHeight = Math.min(MAX_HEIGHT || containerHeight, containerHeight);
    
                        //scale the slider to expected size
                        jssor_1_slider.$ScaleSize(expectedWidth, expectedHeight, MAX_BLEEDING);
    
                        //position slider at center in vertical orientation
                        jssor_1_slider.$Elmt.style.top = ((containerHeight - expectedHeight) / 2) + "px";
    
                        //position slider at center in horizontal orientation
                        jssor_1_slider.$Elmt.style.left = ((containerWidth - expectedWidth) / 2) + "px";
                    }
                    else {
                        window.setTimeout(ScaleSlider, 30);
                    }
                }
    
                ScaleSlider();
    
                $(window).bind("load", ScaleSlider);
                $(window).bind("resize", ScaleSlider);
                $(window).bind("orientationchange", ScaleSlider);
                /*#endregion responsive code end*/
            });
        </script>
        <style>
            /*jssor slider loading skin spin css*/
            .jssorl-009-spin img {
                animation-name: jssorl-009-spin;
                animation-duration: 1.6s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }
    
            @keyframes jssorl-009-spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
    
            .jssora061 {display:block;position:absolute;cursor:pointer;}
            .jssora061 .a {fill:none;stroke:#fff;stroke-width:360;stroke-linecap:round;}
            .jssora061:hover {opacity:.8;}
            .jssora061.jssora061dn {opacity:.5;}
            .jssora061.jssora061ds {opacity:.3;pointer-events:none;}
        </style>
        <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:800px;height:530px;overflow:hidden;visibility:hidden;">
            <!-- Loading Screen -->
            <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
                <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" />
            </div>
            <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:530px;overflow:hidden;">
                <div>
                    <img data-u="image" src="img/045.jpg" />
                    <div u="thumb">Slide Description 001</div>
                </div>
                <div>
                    <img data-u="image" src="img/043.jpg" />
                    <div u="thumb">Slide Description 002</div>
                </div>
                <div>
                    <img data-u="image" src="img/046.jpg" />
                    <div u="thumb">Slide Description 003</div>
                </div>
                <div>
                    <img data-u="image" src="img/047.jpg" />
                    <div u="thumb">Slide Description 004</div>
                </div>
                <div>
                    <img data-u="image" src="img/048.jpg" />
                    <div u="thumb">Slide Description 005</div>
                </div>
                <div>
                    <img data-u="image" src="img/044.jpg" />
                    <div u="thumb">Slide Description 006</div>
                </div>
                <div>
                    <img data-u="image" src="img/050.jpg" />
                    <div u="thumb">Slide Description 007</div>
                </div>
                <div>
                    <img data-u="image" src="img/049.jpg" />
                    <div u="thumb">Slide Description 008</div>
                </div>
                <div>
                    <img data-u="image" src="img/052.jpg" />
                    <div u="thumb">Slide Description 009</div>
                </div>
    
            </div>
            <!-- Thumbnail Navigator -->
            <div u="thumbnavigator" style="position:absolute;bottom:0px;left:0px;width:800px;height:50px;color:#FFF;overflow:hidden;cursor:default;background-color:rgba(0,0,0,.5);">
                <div u="slides">
                    <div u="prototype" style="position:absolute;top:0;left:0;width:800px;height:50px;">
                        <div u="thumbnailtemplate" style="position:absolute;top:0;left:0;width:100%;height:100%;font-family:arial,helvetica,verdana;font-weight:normal;line-height:50px;font-size:16px;padding-left:10px;box-sizing:border-box;"></div>
                    </div>
                </div>
            </div>
            <!-- Arrow Navigator -->
            <div data-u="arrowleft" class="jssora061" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <path class="a" d="M11949,1919L5964.9,7771.7c-127.9,125.5-127.9,329.1,0,454.9L11949,14079"></path>
                </svg>
            </div>
            <div data-u="arrowright" class="jssora061" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <path class="a" d="M5869,1919l5984.1,5852.7c127.9,125.5,127.9,329.1,0,454.9L5869,14079"></path>
                </svg>
            </div>
        </div>
        <!-- #endregion Jssor Slider End -->
    </body>

    Leave a comment:


  • NumNum
    commented on 's reply
    if I leave the body tags it displays blank, if i remove the body tags it is also blank.

  • David Grove
    commented on 's reply
    We can start with what is in the html index page.

  • Wayne Luke
    replied
    What happens if you copy the code from banner_slide/with-jquery.html directly into the HTML module on the vBulletin page?

    Leave a comment:


  • Wayne Luke
    commented on 's reply
    You add id="mycustomid" to the iframe tag and then you use #mycustomid in the CSS to target it. IDs are more specific than Classes and each ID must be unique on the page.

  • NumNum
    replied
    Sure;

    Html module
    Code:
    <iframe id="banner" src="banner_slide/with-jquery.html" style="border: 0; max-width: 800px; max-height: 535px; overflow: auto;"></iframe>
    I'm not sure about the javascript code, do you mean what is in the html index page, or one of the files in the js folder?

    Leave a comment:


  • David Grove
    replied
    Can you post the code that you are using in your HTML module and the Javascript code that you're using to initialize the jssor slider on the separate page?

    Leave a comment:


  • delicjous
    replied
    Originally posted by NumNum View Post
    David, thank you for your time.

    Admittedly I do not need to use an iframe, I could use the html module with just the jssor banner directly in the html module, but I am not sure how to link/point to the banner index page.

    I did try 100% width but it made no change on responsiveness.
    Send you a pm with an example.
    Last edited by delicjous; Tue 1st Oct '19, 6:33am.

    Leave a comment:


  • In Omnibus
    replied
    Originally posted by NumNum View Post

    Thank you, I did try this both with just the max-width and max-width and max-height and it stays in responsive mode even when on desktop when viewed inside the vbulletin tags. I have left it in that format for now. It is fully responsive on its own when viewed in a seperate browser as described.
    You can't use fixed widths and heights. You have to use percentages that maintain the aspect ratio.

    It should look something like this:


    <head> or <headinclude>

    <meta name="viewport" content="width=device-width,

    initial-scale=1">
    </head>

    <css_additional.css>

    .div1 {

    background-color: #FFFFFF;

    position: relative;

    width: 100%;

    padding-top: 56.25%; /* 16:9 Aspect Ratio */

    }



    .iframe1 {

    position: absolute;

    top: 0%x;

    left: 0%;

    bottom: 0%;

    right: 0%;

    text-align: center;

    font-size: 2.0rem;

    color: #FFFFFF;

    }

    .iframecode1 {

    background: #FFFFFF;

    color: #000000;

    font-weight:bold;

    font-size: 2.0rem;

    padding-bottom: 20px;

    }



    <div class="div1">

    <div class="iframe1">

    <div class = "iframecode1">iframecodehere</div>

    <p>Description Text Here</p>

    </div>

    </div>

    Disclaimer: I typed this before I finished my first cup of coffee so it may have errors but it should give you the general idea.

    Leave a comment:


  • NumNum
    commented on 's reply
    I'm not 100% sure how to do this. I see the tutorial on https://www.w3schools.com/html/html_id.asp but cannot wrap my head around the rational of it, so i don't understand how it works.

  • NumNum
    replied
    Originally posted by alfreema View Post
    You should try changing:

    width: 800px

    to

    max-width: 800px

    then it can't be any bigger than 800px but it can be smaller. You probably want to remove the height:535px altogether.
    Thank you, I did try this both with just the max-width and max-width and max-height and it stays in responsive mode even when on desktop when viewed inside the vbulletin tags. I have left it in that format for now. It is fully responsive on its own when viewed in a seperate browser as described.

    Leave a comment:


  • alfreema
    replied
    NumNum, when dealing with iframes, I use FireFox (I am sure Chrome has the exact same option), and right-click some content inside the iframe (in this case your photo) and choose "This Frame --> Open Frame in New Tab".

    That opens your https://ragedink.com/banner_slide/with-jquery.html directly which lets you then test the responsiveness by itself. As you can see it is fully responsive and looks great. So that gives you a strong hint that the issue with the responsiveness is _outside_ the HTML in with-jquery.html.

    I see a bunch of hardcoded width: 800px. So I backed up to find your IFRAME, and found this:

    <iframe id="banner" src="banner_slide/with-jquery.html" style="border: 0; width: 800px; height: 535px; overflow: auto;"></iframe>

    That is forcing the iframe to 800 width, and not letting it be responsive. You should try changing:

    width: 800px

    to

    max-width: 800px

    then it can't be any bigger than 800px but it can be smaller. You probably want to remove the height:535px altogether.

    Leave a comment:


  • In Omnibus
    replied
    Originally posted by NumNum View Post
    David, thank you for your time.

    Admittedly I do not need to use an iframe, I could use the html module with just the jssor banner directly in the html module, but I am not sure how to link/point to the banner index page.

    I did try 100% width but it made no change on responsiveness.
    I haven't seen your specific code but are you assigning the div a unique ID or class? You should be doing that whether your are using an iFrame or not, otherwise the div will inherit the relative CSS used elsewhere.

    Leave a comment:

Related Topics

Collapse

Working...
X