How to center content inside I-frame?

Discussion in 'HTML & Website Design' started by chaukar, Feb 14, 2010.

  1. #1
    Ok I have this code:

    <!-- Start J-List Product Feed -->
    <iframe style="border: 1px solid #000000;" id="jlf1266156103" src="http://moe.jlist.com/feed.php?affid=3203&size=d&length=1&site=ask&url=http://feeds.jlist.com/SEARCH/touhou/feed2.xml&order=random&title=Touhou" width="220" height="339" marginwidth="0" marginheight="0" hspace="0" vspace="0" scrolling="no"></iframe>
    <script type="text/javascript">
    var $jlFeeds1266156103 = new Array();
    $jlFeeds1266156103[0] = "http://feeds.jlist.com/S2/feed2.xml&order=random&title=Photobooks+%28all%29";
    $jlFeeds1266156103[1] = "http://feeds.jlist.com/TOPPROD/S2/feed2.xml&title=Top+Photobooks+%28all%29";
    $jlFeeds1266156103[2] = "http://feeds.jlist.com/CD/feed2.xml&order=random&title=Hentai+Games+%28all%29";
    $jlFeeds1266156103[3] = "http://feeds.jlist.com/TOPPROD/CD/feed2.xml&title=Top+Hentai+Games+%28all%29";
    $jlFeeds1266156103[4] = "http://feeds.jlist.com/HENTAI/GADL/feed2.xml&order=random&title=H-Games+by+Download";
    $jlFeeds1266156103[5] = "http://feeds.jlist.com/TOPPROD/HENTAI/GADL/feed2.xml&title=Top+H-Games+by+Download";
    $jlFeeds1266156103[6] = "http://feeds.jlist.com/MAGAZINES/MAG2/feed2.xml&order=random&title=Anime%2C+Hentai+%26+2D+Magazines";
    $jlFeeds1266156103[7] = "http://feeds.jlist.com/TOPPROD/MAGAZINES/MAG2/feed2.xml&title=Top+Anime%2C+Hentai+%26+2D+Magazines";
    $jlFeeds1266156103[8] = "http://feeds.jlist.com/MANGA/MNBA/feed2.xml&order=random&title=Manga+%26+Artbooks";
    $jlFeeds1266156103[9] = "http://feeds.jlist.com/TOPPROD/MANGA/MNBA/feed2.xml&title=Top+Manga+%26+Artbooks";
    $jlFeeds1266156103[10] = "http://feeds.jlist.com/ANIME/RES1/feed2.xml&order=random&title=Magazine+Subscriptions";
    $jlFeeds1266156103[11] = "http://feeds.jlist.com/TOPPROD/ANIME/RES1/feed2.xml&title=Top+Magazine+Subscriptions";
    $jlFeeds1266156103[12] = "http://feeds.jlist.com/MN/feed2.xml&order=random&title=Hentai+Manga+in+Japanese";
    $jlFeeds1266156103[13] = "http://feeds.jlist.com/TOPPROD/MN/feed2.xml&title=Top+Hentai+Manga+in+Japanese";
    $jlFeeds1266156103[14] = "http://feeds.jlist.com/MANGA/MNEN/feed2.xml&order=random&title=Hentai+Manga+in+English";
    $jlFeeds1266156103[15] = "http://feeds.jlist.com/TOPPROD/MANGA/MNEN/feed2.xml&title=Top+Hentai+Manga+in+English";
    $jlFeeds1266156103[16] = "http://feeds.jlist.com/YAOI/YAOI/feed2.xml&order=random&title=Yaoi+Games+%26+Manga";
    $jlFeeds1266156103[17] = "http://feeds.jlist.com/TOPPROD/YAOI/YAOI/feed2.xml&title=Top+Yaoi+Games+%26+Manga";
    $jlFeeds1266156103[18] = "http://feeds.jlist.com/DV/feed2.xml&order=random&title=DVDs+%26+More";
    $jlFeeds1266156103[19] = "http://feeds.jlist.com/TOPPROD/DV/feed2.xml&title=Top+DVDs+%26+More";
    $jlFeeds1266156103[20] = "http://feeds.jlist.com/DVD/DVLS/feed2.xml&order=random&title=DVDs+%28Lesbian%29";
    $jlFeeds1266156103[21] = "http://feeds.jlist.com/TOPPROD/DVD/DVLS/feed2.xml&title=Top+DVDs+%28Lesbian%29";
    $jlFeeds1266156103[22] = "http://feeds.jlist.com/DVD/DVBL/feed2.xml&order=random&title=Blu-Ray";
    $jlFeeds1266156103[23] = "http://feeds.jlist.com/TOPPROD/DVD/DVBL/feed2.xml&title=Top+Blu-Ray";
    $jlFeeds1266156103[24] = "http://feeds.jlist.com/ADULTTOYS/ADTY/feed2.xml&order=random&title=Adult+Toys+%26+More";
    $jlFeeds1266156103[25] = "http://feeds.jlist.com/TOPPROD/ADULTTOYS/ADTY/feed2.xml&title=Top+Adult+Toys+%26+More";
    $jlFeeds1266156103[26] = "http://feeds.jlist.com/ADULTTOYS/ADHT/feed2.xml&order=random&title=TENGA+%26+More";
    $jlFeeds1266156103[27] = "http://feeds.jlist.com/TOPPROD/ADULTTOYS/ADHT/feed2.xml&title=Top+TENGA+%26+More";
    $jlFeeds1266156103[28] = "http://feeds.jlist.com/ANIME/ANHF/feed2.xml&order=random&title=Sexy+Anime+Figures";
    $jlFeeds1266156103[29] = "http://feeds.jlist.com/TOPPROD/ANIME/ANHF/feed2.xml&title=Top+Sexy+Anime+Figures";
    $jlFeeds1266156103[30] = "http://feeds.jbox.com/WISHLIST/feed2.xml&order=random&title=Customer+Wishlist+Additions";
    $jlFeeds1266156103[31] = "http://feeds.jlist.com/WISHLIST/feed2.xml&order=random&title=Customer+Wishlist+Additions";
    $jlFeeds1266156103[32] = "http://feeds.jbox.com/UPDATES/feed2.xml&order=random&title=All+new+Products";
    $jlFeeds1266156103[33] = "http://feeds.jlist.com/UPDATES/feed2.xml&order=random&title=All+new+Products";
    $jlFeeds1266156103[34] = "http://feeds.jbox.com/TOPPROD/feed2.xml&title=Top+selling+products";
    $jlFeeds1266156103[35] = "http://feeds.jlist.com/TOPPROD/feed2.xml&title=Top+selling+products";
    $jlFeeds1266156103[36] = "http://feeds.jbox.com/SEARCH/touhou/feed2.xml&order=random&title=Touhou";
    $jlFeeds1266156103[37] = "http://feeds.jlist.com/SEARCH/touhou/feed2.xml&order=random&title=Touhou";
    $jlFeeds1266156103[38] = "http://feeds.jbox.com/SEARCH/queen's_blade/feed2.xml&order=random&title=Queen%27s+Blade";
    $jlFeeds1266156103[39] = "http://feeds.jlist.com/SEARCH/queen's_blade/feed2.xml&order=random&title=Queen%27s+Blade";
    $jlFeeds1266156103[40] = "http://feeds.jbox.com/SEARCH/evangelion/feed2.xml&order=random&title=Evangelion";
    $jlFeeds1266156103[41] = "http://feeds.jlist.com/SEARCH/evangelion/feed2.xml&order=random&title=Evangelion";
    document.getElementById('jlf1266156103').src = 'http://moe.jlist.com/feed.php?affid=3203&size=d&length=1&site=ask&url=' + $jlFeeds1266156103[Math.floor(Math.random()*$jlFeeds1266156103.length)];
    </script>
    <!-- End J-List Product Feed -->


    It displays random products from my affiliates. How can I center the products inside the I-frame? I tried <div style="text-align: center;"><iframe /><div> and <iframe style="text-align: center;" /> but it doesn't work :(

    And W3c doesn't like the code! How to make it W3C valid?
     
    chaukar, Feb 14, 2010 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    There is nothing you can do from the WRAPPING document to effect the centering of the content of an iFrame, especially since you're showing information from another domain. Technically that would be cross-site scripting, something that is not allowed for security reasons.

    You can center the iFrame, but not the content of the iFrame - you want to center the content of the iFrame, you'd have to edit what is being shown; aka the documents on the remote URL.

    NOT that one should be using frames on a modern page - since you are pulling feeds you should probably be processing (and possibly caching) those server-side.
     
    deathshadow, Feb 14, 2010 IP
  3. felixjet

    felixjet Greenhorn

    Messages:
    56
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    20
    #3
    edit the iframe content and center it, other than that, its impossible
     
    felixjet, Feb 14, 2010 IP
  4. chaukar

    chaukar Peon

    Messages:
    220
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I changed the code to:

    <iframe frameborder="0" style="border: 1px solid #000000; padding-left: 15px; background: #ffffff;" id="jlf1266156103" src="http://moe.jlist.com/feed.php?affid=3203&size=d&length=1&site=ask&url=http://feeds.jlist.com/SEARCH/touhou/feed2.xml&order=random&title=Touhou" width="205px" height="339px" marginwidth="0" marginheight="0" hspace="0" vspace="0" scrolling="no"></iframe>

    It is not really centered, but it displays how I want it. Still got 162 Errors, 89 warning(s) W3C warnings. Guess I just have to ignore it
     
    chaukar, Feb 14, 2010 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    90% of those are going to be all those unencoded ampersands. You can either change those to &amp; - or do what you SHOULD have and move all that javascript out of the markup and into an external file where it belongs.
     
    deathshadow, Feb 14, 2010 IP
  6. chaukar

    chaukar Peon

    Messages:
    220
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ok I 'll use an external file for the javascript......totally forgot that external file is also possible :)
     
    chaukar, Feb 14, 2010 IP