HTML modules, iframes, and responsiveness

[NumNum]

I am trying to place an iframe in an html module and keep it responsive. It appears none of the html tags I use to keep the iframe from bleeding outside the module when in lower settings than desktop mode.

The iframe contains a index page locally that displays a photo banner slider from jsson as seen here.

[In Omnibus]

Take a look at this:

https://css-tricks.com/responsive-iframes/

[NumNum]

No luck yet, but I'm still playing around with it.

[NumNum]

Ok, I seem to be able to make it responsive vertically, but not horizontally.

I've tried the aformentioned css tricks without much success.

As seen here.

Any other ideas I can try?

[Wayne Luke]

I'll see if a developer can free up a few minutes to take a look.

[David Grove]

I started looking at what you're doing, but first I have a few questions. Do you need to use an iframe and include a separate page? Or could you put the jssor banner directly in the HTML module? I think jssor natively supports resizing and Responsive, so if you are able to do it without the iframe, I don't think there would be an issue.

That said, if you use a percentage width on the iframe it seems to resize horizontally better than with the fixed pixel width.

[NumNum]

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.

[In Omnibus]

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.

[NumNum]

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.

[Wayne Luke]

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.

[alfreema]

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.

[NumNum]

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.

[In Omnibus]

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.

[delicjous]

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.

[David Grove]

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?

[NumNum]

Sure;

Html module

<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?

[David Grove]

We can start with what is in the html index page.

[Wayne Luke]

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

[NumNum]

if I leave the body tags it displays blank, if i remove the body tags it is also blank.

[NumNum]

David Grove

 <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>