Wix Answers

Do not post confidential info such as passwords or financial information.
Cancel
Post Question
  • dbhostel

    Possibility to hide iframe scroll bars

    By dbhostel April 15, 2013

    Locked by moderator

    Main Category : Editor

    Sub Category : Wishlist

    Ticket # : 357733179

    Ticket Status : Closed

    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 replies total)

Show my replies first
  • dbhostel

    Replied by dbhostel April 18, 2013

    I'm aware that :)

  • Ron Wix Team

    Replied by 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
  • dbhostel

    Replied by dbhostel April 18, 2013

    typing mistake: get rid of horizontal scroll bar

  • dbhostel

    Replied by 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

  • Gabriel Wix Team

    Replied by 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
  • dbhostel

    Replied by 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 

  • dbhostel

    Replied by 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

  • dbhostel

    Replied by 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

     

  • Anat Wix Team

    Replied by 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

Add reply

Mark this reply as Best Reply
Close open child tickets
Post reply