iFrame: How to show specific part of a webpage using iframe


Someone ask me “how can i display a specific area of a website using iframe ?” So today I’m going to show a way to display specific area/portion of a webpage using iframe tag. Iframing an external webpage is not so tough. We just need a little knowledge about basic HTML and CSS to do that.
The <iframe> tag specifies a floating inline frame, used to embed external content in a webpage. Using ifrmae easily we could display an external webpage including text, images, and videos etc. But here we're going to see "how to display a specific part of a website using <iframe>"

Why do we need to iframe a specific area of a website?

Sometimes if we want to show certain part of an external webpage in our site/blog; iframing is the best easy way to do so.

Follow the instruction below to display a specific area of a webpage using iFrame & CSS

To do that just copy the code below and paste it wherever you want display.
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;"> <iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;"> </iframe> </div>
Note: Replace the URL with yours. And to achieve your deserving result change the value of max-width, margin-left, height, margin-top, width.
This is as an example of iframing a site’s specific area. as an example here I iframed some part of a page from www.w3schools.com.

Subscribe To Get Update In Your Email

11 comments:

  1. Howdy! I could have sworn I've been to this website before but after browsing through some of the post I realized it's new to me. Nonetheless, I'm definitely happy I found it and I'll be book-marking and checking back frequently!

    ReplyDelete
  2. I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz answer back as I'm looking to construct my own blog and would like to know where u got this from.

    ReplyDelete
    Replies
    1. Thanks for commenting. I did all these stuff by myself here.

      Delete
  3. Thank you for this, after some tweaking with the positions and size it turned out to be exactly what I was looking for!

    ReplyDelete
  4. Hi! First of all, thank you for the trick! I've been searching for it for a while... But what I'd like to ask you is: How can I make it so that the background of the embedded page is shown? Thanks!

    ReplyDelete
  5. hello,
    nice post sir, I have on query. can i display the resulting page after the click in the same iframe?

    ReplyDelete
  6. Hi, I am sorry to say that its not working for all sites. Is there any way out for displaying some portion of aspx webpage that is showing some data on regualr interval basis ?

    ReplyDelete
  7. wow this actually works, didn' even think this was possible, thank you!

    ReplyDelete
  8. awesome... this truelly what i looking for... thanks a lot for this iframe sciprt. very useful for me :D

    ReplyDelete
  9. it`s not working in Firefox 27.0.1 for me. In IE works fine.

    ReplyDelete