Wix Help Center

    Possibility to hide iframe scroll bars

    Ticket by dbhostel | April 15, 2013 | Feature Request
    • Html5 is using CSS overflow attribute for this (overflow:hidden):

      http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

      but it is not working in wix. This is my code, everything is working fine, except overflow attribute is ignored:

      <style>
      #myframe
      {
          margin-left:-25px;
          margin-top:-25px;
          width: 800px;
          height: 600px;
          overflow: hidden;
          border: none;
      }
      </style>
      <iframe id="myframe" src="http://www.example.com"></iframe>

      Please remove this limitation so simple Web scraping will be possible with Wix. When someone want to use part of webpage via iframe, usually that part is somewhere in the middle of the page and you must position iframe to position and dimension of that part. In most of the cases you don't want scroll bars to appear.

      Best regards,

      Milan Košir

    Replies (9)

    • Reply from Anat | April 15, 2013

      Hi kosirm,

       

      Thank you very much for your details and informative feedback.

       

      We have added your request to our Wishlist.

       

       

      Anat - Wix Team
    • Reply from dbhostel | April 17, 2013

      Hi,

      I finally figured out how it can be done. It is true that iframe(html) app must me resized to match the size of site which you want to clip.

      This is the site - I want to clip just event calendar with search component:

      http://www.istra.hr/en/attractions-and-activities/events

      This is the code for my html (iframe) app, which is resized to w:690 h:2520:

      <head>
      <style>
      #content
      {
      width:680px; 
      margin:auto;
      }

      body
      {
      width:680px;
      height:2500px;
      }

      iframe
      {
      margin-left:-250px;
      margin-top:-670px;
      overflow:hidden;
      }
      </style>
      </head>
      <body>
      <div id='content'>
      <iframe src="http://www.istra.hr/en/attractions-and-activities/events" width="680" height="2500" scrolling="no">
      </iframe>
      </div>

      </body>

      Best regards,

      Milan

       

    • Reply from dbhostel | April 17, 2013

      I've redefined problem (since my iframe is very long - 2500 px height): my problem is not scrollbar, my problem is ugly scrollbar. So if someone else needs styled scrollbars, this is the source:

      http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/

      My html is this (and it looks amazing...):

      <head>
       <style>
       ::-webkit-scrollbar {
          width: 10px;
       } 
       
       ::-webkit-scrollbar-track {
          background-color: #FFAF17;
       } 
      
       ::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2); 
       }
      
       ::-webkit-scrollbar-button {
          background-color: #80580C;
       } 
      
       ::-webkit-scrollbar-corner {
          background-color: #80580C;
       } 
       
       
      </style>
      
      <style>
      #content
      {
      width:680px; 
      margin:auto;
      }
      
      iframe
      {
      margin-left:-250px;
      margin-top:-670px;
      overflow-y:hidden;
      }
      </style>
      </head>
      <body>
      <div id='content'>
      <iframe id="iframe" src="http://www.istra.hr/en/attractions-and-activities/events" width="680" height="2550" scrolling="no">
      </iframe>
      </div>
       <link rel="stylesheet" type="text/css" href="https://kalendar-dogadanja-gge.googlecode.com/svn/trunk/jquery.jscrollpane.css" /> 
        
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
       <script type="text/javascript" src="https://kalendar-dogadanja-gge.googlecode.com/svn/trunk/jquery.jscrollpane.min.js"></script>
       
       <script type="text/javascript">
       
         $(document).ready(function () {
             if (!$.browser.webkit) {
                 $('.container').jScrollPane();
             }
         });
       
       </script>
      
      </body>

      Best regards,

      Milan

    • Reply from dbhostel | April 17, 2013

      If someone knows how to inject some style to html page loaded via iframe with jquery, I would be grateful for help (I need to change background color).

       

      Best regards, Milan 

    • Reply from Gabriel | April 17, 2013

      Hi Milan,

      Thanks a lot for the elaboration above! Hopefully it will assist other users as well.

      We cannot assist regarding to HTML related questions, but as an exception I'll try to give some pointers:

      It's not possible to change the whole site's background color, as due to cross-platform security an iFrame cannot alter it's parent (or the opposite if the two aren't located on the same domain, and iFrames that contain the HTML app are hosted on our static server, which is not connected to your domain.

      If you are trying to change the background color of the document inside the HTML app, you can simply use something like (native JS):

      document.body.style.backgroundColor='#eeaaee" (or any other color).

       

      I'm afraid that you will need to refer to programming related forums for further assistance in jQuery / HTML such as stackoverflow.

       

      If any doubt is left regarding the limitations of the HTML app please let us know.

       

      Thanks,

       

       

      Gabriel - Wix
    • Reply from dbhostel | April 18, 2013

      Thanks, Gabriel,

      yes, cross domain policy is a nasty thing to hack, so I gave up on this.

      I've updated my "pretty scrollbar" example (get rid of vertical scroll bar, which I don't need):

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Pragma" content="no-cache"/>
      <style>
      ::-webkit-scrollbar {
      width: 10px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
      -webkit-border-radius: 10px;
      border-radius: 10px;
      }
      
      /* Handle */
      ::-webkit-scrollbar-thumb {
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background: #C08411; 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
      }
      ::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(255,0,0,0.4); 
      }
      ::-webkit-scrollbar-corner {
      background-color: #FFAF17;
      }
      } 
      </style>
      </head>
      <body>
      <iframe id="iframe" name="hostFrame" width="680px" height="2550px" frameborder="0" src="http://www.istra.hr/en/attractions-and-activities/events" scrolling="no" style="margin-left:-250px;margin-top:-670px;"></iframe>
      <link rel="stylesheet" type="text/css" href="https://kalendar-dogadanja-gge.googlecode.com/svn/trunk/jquery.jscrollpane.css" /> 
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type="text/javascript" src="https://kalendar-dogadanja-gge.googlecode.com/svn/trunk/jquery.jscrollpane.min.js"></script>
      
      <script type="text/javascript">
      
      $(document).ready(function () {
      if (!$.browser.webkit) {
      $('.container').jScrollPane();
      }
      });
      </script>
      
      </body>
      </html>

      Best regards,

      Milan

    • Reply from dbhostel | April 18, 2013

      typing mistake: get rid of horizontal scroll bar

    • Reply from Ron | April 18, 2013

      Hi,

       

      As mentioned below, keep in mind that by adding external HTML code you are adding products and code that we have not tested or created in Wix, therefore our support team cannot answer any questions concerning the HTML iFrame/Embed App.

      Ron, Wix Team
    • Reply from dbhostel | April 18, 2013

      I'm aware that :)