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

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

  • In Omnibus
    replied
    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"

    Leave a comment:


  • mrscot
    replied
    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.

    Leave a comment:


  • cjg9590
    replied
    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>

    Leave a comment:


  • tonmo
    replied
    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.

    Leave a comment:


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

    Leave a comment:


  • wdwms
    replied




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

    Leave a comment:


  • matthieu.p
    replied
    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

    Leave a comment:


  • wdwms
    replied
    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...

    Leave a comment:


  • matthieu.p
    replied
    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.

    Leave a comment:


  • wdwms
    replied
    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.

    Leave a comment:


  • matthieu.p
    replied
    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

    Leave a comment:


  • Trevor Hannant
    replied
    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

    Leave a comment:


  • DemOnstar
    replied
    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.

    Leave a comment:


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

Related Topics

Collapse

Working...