Announcement

Collapse
No announcement yet.

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

Collapse
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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 customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    Vote for your most annoying bugs.
    I am not currently available for vB Messenger Chats.

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


    • #3
      Originally posted by DemOnstar View Post
      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 View Post
      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 View Post
      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*
      -
      *PM - Add ability to reply to originator only*
      - Add Admin ability to auto-subscribe users to specific channel(s)
      - Highlight the correct navigation tab when you are on a custom page
      - "Quick Route" Interface...
      - Allow to use custom icons for individual forums

      Comment


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


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


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


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


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


                • #9
                  www.diecastmodelaircraft.com



                  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


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

                    Comment


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


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


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


                          • #14
                            Originally posted by mrscot View Post
                            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

                            Working...
                            X