2

I used iframe for delivering an image icon for the pdf links in an html page. I have tried using overflow:hidden, scrolling: "no" etc for removing the scroll bar from iframe. But none of them is working in chrome. When tried in firefox,the scroll bar is removed,but image is not available. Please help me on this. Here is the complete code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" href="cssjquery/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<title>Unit 3, ADS</title>
<style type="text/css">
/* one */
.imagewrap {
    display: inline-block;
    position: relative;
}

.icon-remove-sign {
    position: absolute;
    top: 0;
    right: 0;
}
iframe{
    overflow:hidden;
}

</style>


<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="jsjquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jsjquery/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){ 
$('i.icon-remove-sign').on('click',function(e){
    e.preventDefault();
    pdfID = $(this).closest('.imagewrap')[0].id;
    $('#dialog').dialog('open');
  alert('Deleting '+pdfID+'');
   $(this).closest('.imagewrap')
        .fadeTo(300,0,function(){
            $(this)
                .animate({width:0},200,function(){
                    $(this)
                        .remove();
                });
        });   
});
}); 

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>
</head>
<body>


    <h1>PDF Files</h1>
<br><br>
    <div class="imagewrap" id="pdf1">
        <a href="something.pdf">
        <img  width="100" height="100" border="0">
        <iframe src="something.pdf" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe></img>
        </a>&nbsp;&nbsp;<i class=" icon-remove-sign" ></i>
    </div>
Vineetha
  • 31
  • 2
  • 2
  • 4
  • Please refer the following link http://stackoverflow.com/questions/15494568/html-iframe-disable-scroll –  Feb 26 '14 at 04:58

3 Answers3

8

You can set attribute scrolling= 'no' in your iframe.

<iframe src="..." style="overflow:hidden" scrolling="no" />

Here is a fiddle

UPDATE

Here is a fiddle with a valid pdf link. It looks ok on my browser (ff, chrome)

MaVRoSCy
  • 17,747
  • 15
  • 82
  • 125
  • Thank you. I tried it. But its not working for my page. Please try giving the iframe src link to an existing pdf file in your system. Then you will still get the scroll bar. – Vineetha Jul 25 '13 at 06:38
  • the src line of iframe is not for displaying pdfs – MaVRoSCy Jul 25 '13 at 06:39
  • Ok fine. My requirement was to display the first page of a pdf document as the icon. Can you please suggest me a possible way to do this? – Vineetha Jul 25 '13 at 06:40
  • I have seen your previous post about this. Please refer to that post for solutions on that question – MaVRoSCy Jul 25 '13 at 06:43
2

Please try this code

<iframe src="your site url" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe>

<script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

Add demo link

Ashish Kasma
  • 3,594
  • 7
  • 26
  • 29
1
<style>
iframe::-webkit-scrollbar {
     display: none; 
}
</style>

Use the above to remove scrollbars from iframes on chrome

Ian Everall
  • 41
  • 4