1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Anyone Help With iFrames?

Discussion in 'Web Design' started by mickyfu, Mar 23, 2014.

  1. mickyfu

    mickyfu Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 14, 2011
    Messages:
    5,279
    Likes Received:
    15,473
    Location:
    Jennifers Office.
    I have a problem with iFrames, at the moment I am using this.

    Code:
    [FONT=monospace]<iframe style="width: 599px; height: 570px; margin-top: -100px; overflow: hidden;" src="[U]http://www.thegame.com[/U]" height="570" width="619" frameborder="0">[/FONT][FONT=monospace]</iframe>[/FONT]
    I am using this to cut the top off the iFrame, as the iFrame is a casino game, and the top of it links to the main site, so I do not want people clicking the top and going direct to the website.

    The problem with this code is that the -100px leaves a 100px gap after the iframe, so when I add text after the game, there is a big blank 100px space. I do not want this space, but still to be able to cut 100px off the top of the iFrame. Does anyone know how to achieve this?
     
  2. umerjutt00

    umerjutt00 Jr. VIP Jr. VIP Premium Member

    Joined:
    Oct 28, 2011
    Messages:
    3,648
    Likes Received:
    1,907
    Occupation:
    Ninja
  3. royserpa

    royserpa Jr. VIP Jr. VIP Premium Member

    Joined:
    Sep 28, 2011
    Messages:
    4,649
    Likes Received:
    3,494
    Gender:
    Male
    Occupation:
    Negative Options aka Rebills!
    Location:
    Royserpa
    Home Page:
    Some months ago I did something like this.
    Pm me if you want the code as today i dont work and it would basically be copy paste. Obv no charge :p

    Edit: I just found the oink in my phone xD
    http://snipplr.com/view/22490/
    Have fun!
    :p
     
    • Thanks Thanks x 1
    Last edited: Mar 24, 2014
  4. Amsterdammer

    Amsterdammer Power Member

    Joined:
    Aug 9, 2011
    Messages:
    515
    Likes Received:
    563
    Please ignore, just learned something new about the Blue people.... Thanks W130SN
     
    Last edited: Mar 24, 2014
  5. mickyfu

    mickyfu Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 14, 2011
    Messages:
    5,279
    Likes Received:
    15,473
    Location:
    Jennifers Office.
    Hi thanks for the response, but this is not quite what I want as I need to be able to trim certain iFrame to certain lengths, just by using the iFrame code on page.
     
  6. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,363
    Likes Received:
    5,424
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    Edit: Does this look better:
    Code:
    <iframe style="width: 789px; height: 770px; margin-top: -75px; overflow: hidden;" src="http://www.thegame.com" frameborder="0"></iframe>
     
    Last edited: Mar 24, 2014
  7. mickyfu

    mickyfu Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 14, 2011
    Messages:
    5,279
    Likes Received:
    15,473
    Location:
    Jennifers Office.
    No the height just makes the iFrame a different size, I need to be able to cut the top part of it off. I am sure I had found a page where the person had cut the top of the iFrame, but was not left with the huge gap below it.
     
  8. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,063
    Likes Received:
    2,872
    Gender:
    Male
    What I see is just a bunch of links :p

    Am I missing something?

    Also I would recommend using curl if that's feasible. A lot easier to control the structure that way.

    Edit: could you post the exact area you need to show, with a screenshot?
     
  9. Schvamp

    Schvamp Power Member

    Joined:
    Feb 13, 2012
    Messages:
    684
    Likes Received:
    549
    Location:
    Hogwarts
    Why don't you embed just the game instead of iframing the whole site?

    Maybe this will help?
    Code:
    <div style="overflow: hidden; width: 1642px; height: 386px; position: relative;" id="i_div">
    <iframe name="i_frame" src="http://www.blackhatworld.com/blackhat-seo/web-design/660586-anyone-help-iframes.html" style="border: 0pt none ; left: -246px; top: -410px; position: absolute; width: 1920px; height: 908px;" scrolling="no"></iframe></div>
     
    Last edited: Mar 24, 2014
  10. mickyfu

    mickyfu Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 14, 2011
    Messages:
    5,279
    Likes Received:
    15,473
    Location:
    Jennifers Office.
    No the game has to be the size that it is in my iFrame, and it has to have 100px snipped off the top.

    I am just iFraming the game, I have taken the games url out of the iframe so I do not give my niche away.

    The URL in the iFrame has nothing to do with what I am doing.
     
    Last edited: Mar 24, 2014
  11. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,363
    Likes Received:
    5,424
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    It's a horrible fix, I admit, but you could just move everything below the iframe up by 100px, and give it a "position: relative"..
     
  12. mickyfu

    mickyfu Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 14, 2011
    Messages:
    5,279
    Likes Received:
    15,473
    Location:
    Jennifers Office.
    I have tried a few ways of doing this, but it just sends the iFrame out of place and messes things up.
     
  13. bytzu

    bytzu Registered Member

    Joined:
    Jun 30, 2011
    Messages:
    96
    Likes Received:
    137
  14. prab1996

    prab1996 Elite Member

    Joined:
    Jan 8, 2013
    Messages:
    3,496
    Likes Received:
    2,028
    Occupation:
    your gf's <3 ♥♥♥♥
    Location:
    Prab1996.com
    Home Page:
    many people will not answer , they will think it's just your troll post.

    i hope now you will know that why people ask for help on bhw.





















    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .

    .
    .
    .






    i am not a expert but there is something called ajax try that. or make a iframe which will hide their button with your logo image or a banner.
    -=-
     
    • Thanks Thanks x 2
  15. mickyfu

    mickyfu Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 14, 2011
    Messages:
    5,279
    Likes Received:
    15,473
    Location:
    Jennifers Office.
    Me trolling serious questions, surely not, maybe the "How do you make money online" questions, but never something as serious as an iFrame question.

    I have tried to overlay something, in fact I would prefer to overlay a clickable banner that was relevant to the game. However I only seem to be able to get the banner to go behind the iFrame, and not over it to cover the websites link.
     
  16. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,148
    • Thanks Thanks x 1
  17. Raffy

    Raffy Regular Member

    Joined:
    Nov 30, 2012
    Messages:
    212
    Likes Received:
    613
    Lmao at your forum title & location.

    Have you tried asking your casino AM if they have games you can embed with your aff id? They usually have them if you ask, even if they don't show up on your casino affiliate page.

    But to answer your question, I was trying to do something very similar a few months back and from what you've described I'm almost certain you'll need to use css as well. I needed to crop the top and sides from a certain page and here's what worked for me:

    Wrap the iframe in a div tag and assign it an id, then give the iframe an id. Here's what the html looked like:

    <div id="outerdiv">
    <iframe id="inneriframe" scrolling="no" seamless="seamless" src="YOUR_URL_HERE"></iframe>
    </div>

    Here's what I think the CSS should look like for you but it's untested. You can PM me if you still need help. You might need to adjust the outerdiv width/height if too much or too little is being cropped out:

    #outerdiv
    {
    width:599px;
    height:570px;
    overflow:hidden;
    position:relative;
    }

    #inneriframe
    {
    position:absolute;
    top:-100px;
    left:0px;
    width:1280px;
    height:1200px;
    }
     
    Last edited: Mar 24, 2014
  18. mickyfu

    mickyfu Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 14, 2011
    Messages:
    5,279
    Likes Received:
    15,473
    Location:
    Jennifers Office.
    Hi, still been trying to do this, I need to be able to do it without using CSS. I am now not bothering cutting the Iframe, but would like to know how to get the iFrame in an image frame which would mask the parts of the iFrame which I do not want on show.

    I have tried moving a banner over the top of the iFrame, however the banner goes behind the iFrame and not on top.
     
  19. royserpa

    royserpa Jr. VIP Jr. VIP Premium Member

    Joined:
    Sep 28, 2011
    Messages:
    4,649
    Likes Received:
    3,494
    Gender:
    Male
    Occupation:
    Negative Options aka Rebills!
    Location:
    Royserpa
    Home Page:
    Actually i am doing this for my new site. Will post the code later as i am in the phone right now :p
     
    • Thanks Thanks x 1
  20. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    Do you want something similar? BHW top logo row (header row) is hidden in the sample below, and there is a line of text outside the i-frame.

    [​IMG]

    If the above is what you want, then the code is in the following html. Do the necessary changes:

    <html>
    <body>
    <iframe style="border: 6px solid green; width: 1000px; height: 500px; margin-top: -140px; overflow: hidden;" src="http://www.blackhatworld.com/" frameborder="1"></iframe>
    <div>
    <H2 style="color:red;"> this is the FIRST line outside iframe</h2>
    </div>

    </body>
    </html>

    (Note: I'm using a 1024 x 768 screen res., and the above image is also resized...)
     
    Last edited: Mar 29, 2014