How to Encapsulate third party HTML in an <iframe> element...

Collapse
This is a sticky topic.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73981

    How to Encapsulate third party HTML in an <iframe> element...

    Doing this takes a little setup work but gives you more control over your Static HTML modules.

    1) First create a directory to hold your HTML files. If it were me, I'd create it in my %forumroot% directory and call it static_html.

    2) Remember that most image and CSS calls in HTML are relative. You should change these to be absolute calls with the full URL to the resource. So if you store images in the images directory, the full URL would be http://%domain%/%forumroot%/images/resourcename.png

    3) In your Static HTML module call the file like this:
    HTML Code:
    <iframe src="http://%domain%/%forumroot/static_html/file.html"></iframe>
    4) To constrain the <iframe> in size but allow it to grow to fit the widget set CSS:
    Code:
    iframe {width:99%;height:XXXpx;}
    The 99% width is due to how some browsers render boxes. The issues caused by some browsers is long and convoluted and this is the easiest solution. You want a specific height because it is often difficult to understand what 100% height is. If you want to have different CSS per iframe use CSS ID's to differentiate them. Each ID has to be unique to the page though.

    %domain% = This is your site's domain. For example, this site's domain is www.vbulletin.com
    %forumroot% = This is where vBulletin is installed. This site's %forumroot% is /forum/
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API
  • DemOnstar
    Senior Member
    • Nov 2012
    • 1912

    #2
    Why does this thread not display as closed when it sits in a sticky at the top?

    - - - Updated - - -

    And why has nobody replied when it has had over 200 view reports?

    - - - Updated - - -

    It is also over a month old.


    Comment

    • Trevor Hannant
      vBulletin Support
      • Aug 2002
      • 24326
      • 5.7.X

      #3
      Originally posted by DemOnstar
      Why does this thread not display as closed when it sits in a sticky at the top?
      Stuck threads don't need to be closed, they can simply be stuck there to be more prominent.

      Originally posted by DemOnstar
      And why has nobody replied when it has had over 200 view reports?
      Maybe because they don't have anything to say?!

      Originally posted by DemOnstar
      It is also over a month old.
      And?

      Please keep this thread on topic for the discussion of the original post
      Vote for:

      - Admin Settable Paid Subscription Reminder Timeframe (vB6)
      - Add Admin ability to auto-subscribe users to specific channel(s) (vB6)

      Comment

      • matthieu.p
        Member
        • Oct 2012
        • 76
        • 5.0.0

        #4
        ok thanks for this tutorial Wayne , it works but it looks not very good, it should be integrated without the original frame border, : (canvas-layout-container .canvas-widget) and why the option "hide title" if the header title container is still there?
        Attached Files

        Comment

        • wdwms
          Member
          • Jan 2013
          • 90
          • 4.2.X

          #5
          This here will work a bit better for you: http://www.vbulletin.org/forum/showthread.php?t=289333 takes more work, but you'll be happier in the end w/the result.

          Comment

          • matthieu.p
            Member
            • Oct 2012
            • 76
            • 5.0.0

            #6
            thanks WDWMS but is your custom work compatible when you upgrade? I am looking for a solution which allow to upgrade without loosing the customization.

            Comment

            • wdwms
              Member
              • Jan 2013
              • 90
              • 4.2.X

              #7
              Yes so far w/the upgrades it has worked... Of course if VB changes the way the headers /footers are called you'd have to fix those files.. but its working great here...

              Comment

              • matthieu.p
                Member
                • Oct 2012
                • 76
                • 5.0.0

                #8
                ok good, from which version to which version you made the upgrade? and can you show the url of the website to see the custom work

                Comment

                • wdwms
                  Member
                  • Jan 2013
                  • 90
                  • 4.2.X

                  #9




                  We actually imported from another BB system into 4.0, then upgraded it to some Betas, to 5.0 and now 5.0.1

                  Comment

                  • CygnusFTK
                    Senior Member
                    • Jun 2013
                    • 130
                    • 5.0.X

                    #10
                    Why is this thread stickied and there is nothing about "Basics of vBulletin 5 Customization" stickied?

                    Comment

                    • tonmo
                      Senior Member
                      • Dec 2004
                      • 235
                      • 5.0.X

                      #11
                      This works well and is what I need, but the fixed height is unfortunate. Still, with some work I can leverage this to be my CMS replacement.

                      Comment

                      • cjg9590
                        Member
                        • Jan 2016
                        • 34
                        • 5.1.x

                        #12
                        This works well for rotating banners, I could not make the ads module work for displaying more than one banner, seems its always showing the first one only. So with this tut and some googling I created this for rotating banners. I figured i would add to this page as someone might find it useful.

                        first create a html page named banners.html in your forum directory and add this code. Be sure to edit the image locations with your own images in adImages = new Array and the img src in the body. Save the file and upload.

                        Code:
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
                        <html>
                        <head>
                        
                        <title>Rotating Banners</title>
                        
                        <script language="Javascript" type="text/javascript">
                        
                        adImages = new Array("images/pb.png", "images/wf.png" )
                        
                        thisAd = 0
                        imgCt = adImages.length
                        
                        function rotate(){
                            if( document.images ){
                            thisAd++
                            if( thisAd == imgCt ){
                            thisAd = 0
                        }
                        document.adBanner.src=adImages[thisAd]
                        setTimeout("rotate()", 2 * 5000)
                        }
                        }
                        
                        </script>
                        </head>
                        
                        <body onload="rotate()">
                        
                        <center><img src="images/wf.png" name="adBanner" alt="Ad Banner" /></center>
                        </body>
                        </html>
                        If you want to change the speed of the rotation, edit the setTimeout ( 2 * 5000 )

                        then just add a html module were you want it like the original tutorial explains with this line here.

                        Leave the width so its the size of your forums, and the height is a bit bigger than my actual banner size for a nice looking module.
                        also edit the link to point to your site/banners.html

                        Code:
                        <iframe src="http://www.YourSite.com/forums/banners.html" width='99%' height='120'></iframe>

                        Comment

                        • mrscot
                          Member
                          • Apr 2011
                          • 54
                          • 4.1.x

                          #13
                          My banners our 720px wide. When my browser width drops below 720px, the banners are cropped. I'm trying to make them responsive so the entire banner is visible. So far I haven't been able to do this.
                          VB 5.3.3 with latest Firefox browser.

                          Comment

                          • In Omnibus
                            Senior Member
                            • Apr 2010
                            • 2310

                            #14
                            Originally posted by mrscot
                            My banners our 720px wide. When my browser width drops below 720px, the banners are cropped. I'm trying to make them responsive so the entire banner is visible. So far I haven't been able to do this.
                            VB 5.3.3 with latest Firefox browser.
                            Try changing the height attribute from a set pixel amount to "auto"

                            Comment

                            Related Topics

                            Collapse

                            Working...