Announcement

Collapse
No announcement yet.

HTML modules, iframes, and responsiveness

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

  • HTML modules, iframes, and responsiveness

    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.
    Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

    vB Mods That Rock!

  • #2
    Take a look at this:

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

    Comment


    • NumNum
      NumNum commented
      Editing a comment
      No luck yet, but I'm still playing around with it.

  • #3
    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?
    Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

    vB Mods That Rock!

    Comment


    • #4
      I'll see if a developer can free up a few minutes to take a look.
      Translations provided by Google.

      Wayne Luke
      The Rabid Badger - a vBulletin Cloud customization and demonstration site.
      vBulletin 5 Documentation - Updated every Friday. Report issues here.
      vBulletin 5 API - Full / Mobile
      I am not currently available for vB Messenger Chats.

      Comment


      • #5
        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.
        ~~~~~

        Comment


        • #6
          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.
          Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

          vB Mods That Rock!

          Comment


          • #7
            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.

            Comment


            • NumNum
              NumNum commented
              Editing a comment
              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
              Wayne Luke commented
              Editing a comment
              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.

          • #8
            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.

            Comment


            • #9
              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.

              Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

              vB Mods That Rock!

              Comment


              • #10
                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.

                Comment


                • #11
                  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, 5:33am.
                  vBulletin-Forum.de closed!

                  Comment


                  • #12
                    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?
                    ~~~~~

                    Comment


                    • #13
                      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?
                      Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

                      vB Mods That Rock!

                      Comment


                      • David Grove
                        David Grove commented
                        Editing a comment
                        We can start with what is in the html index page.

                    • #14
                      What happens if you copy the code from banner_slide/with-jquery.html directly into the HTML module on the vBulletin page?
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                      vBulletin 5 Documentation - Updated every Friday. Report issues here.
                      vBulletin 5 API - Full / Mobile
                      I am not currently available for vB Messenger Chats.

                      Comment


                      • NumNum
                        NumNum commented
                        Editing a comment
                        if I leave the body tags it displays blank, if i remove the body tags it is also blank.

                    • #15
                      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>
                      Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

                      vB Mods That Rock!

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X