Member Avatar for sonicx2218

I'm using the app mediabox which lets me create iframe lightboxes. I don't want horizontal scroll on the iframe, just vertical. The issue is I have NO idea how to add a new class in the CSS of the program to achieve this. Here is the css.

#mbOverlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
}

        /*  Legacy fix for older browsers   */

#mbOverlay.mbOverlayFF {
    background: transparent url(/images/80.png) repeat;
}

#mbOverlay.mbOverlayIE {
    position: absolute;
}

        /*  Overlay panel styling   */

#mbCenter {
    position: absolute;
    z-index: 9999;
    left: 50%;
    background-color: #000;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    -khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');
}

#mbCenter.mbLoading {
    background: #000 url(/images/loading.gif) no-repeat center;
        /*  This style is applied only during animation.    */
        /*  For example, the next lines turn off shadows    */
        /*  improving browser performance on slow systems.  */
        /*  To leave shadows on, just remove the following: */
    -webkit-box-shadow: none;
    -khtml-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#mbImage {
    overflow: hidden;
    position: relative;
    left: 0;
    top: 0;

        /*  Inline content styling  */

    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: left;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 10px;
}

        /*  Title, Caption and Button styling   */

#mbBottom {
    min-height: 20px;
    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #999;
    text-align: left;
    padding: 0 10px 10px;
}

#mbTitle, #mbPrevLink, #mbNextLink, #mbCloseLink {
    display: inline;
    color: #fff;
    font-weight: bold;
    line-height: 20px;
    font-size: 12px;
}

#mbNumber {
    display: inline;
    color: #999;
    line-height: 14px;
    font-size: 10px;
    margin: auto 10px;
}

#mbCaption {
    display: block;
    color: #999;
    line-height: 14px;
    font-size: 10px;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
    float: right;
    outline: none;
    margin: 0 0 0 10px;
    font-weight: normal;
}

#mbPrevLink b, #mbNextLink b, #mbCloseLink b {
    color: #eee;
    font-weight: bold;
    text-decoration: underline;
}

#mbPrevLink big, #mbNextLink big, #mbCloseLink big {
    color: #eee;
    font-size: 16px;
    line-height: 14px;
    font-weight: bold;
}

#mbBottom a, #mbBottom a:link, #mbBottom a:visited {    /* Thanks to Danny Jung for feedback and corrections */
    text-decoration: none;
    color: #ddd;
}

#mbBottom a:hover, #mbBottom a:active {
    text-decoration: underline;
    color: #fff;
}


        /*  Error message styling   */

#mbError {
    position: relative;
    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 10px solid #700;
    padding: 10px 10px 10px;
    margin: 20px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {
    color: #d00;
    font-weight: bold;
    text-decoration: underline;
}

Any chance you guys can understand this and know how to achieve this?

in the code that displays the iframe, what class is the iframe, how is the iframe define

Member Avatar for sonicx2218
mediaType = 'url';
                mediaWidth = mediaWidth || "640px";
                mediaHeight = mediaHeight || "360px";
                mediaId = "mediaId_"+new Date().getTime();
                preload = new Element('iframe', {
                    'src': URL,
                     'id': mediaId,
                     width: mediaWidth,
                     height: mediaHeight,
                     'frameborder': 0
                    });
                startEffect();
            }

This is really all I have to go on. In the code earlier on, it states that the content is injected into #center.

Member Avatar for sonicx2218

I apologize. I found the answer and it was in JS

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.