Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    21
    Thanks
    4
    Thanked 2 Times in 2 Posts

    White Background with IE9 and 10

    Hello!

    I have a javascript-powered scroller on a site that allows the visitor to scroll a box containing text vertically.

    The problem is that something about this box is forcing the background of the entire site to be white. And when I say "background" I am talking about the body of the site, which has a static background image. It is like the site will not call the background-image I am assigning on the pages I have the slider.

    I have tried adding "transparent" layers to the HTML/PHP and CSS and nothing seems to be working. The issue is only in IE9 and IE10. The stranger thing is, the all white background does not always show up. Just most of the time.

    Thanks for any help you can provide!

    The code is below:

    Relevant HTML/PHP

    Code:
    <div rel="scrollcontent1" style="background-color: transparent;">
    <div class="contentholder">
        <?php the_content(); ?>
    						<?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
    					
    
    				<?php comments_template( '', true ); ?>
    
    <?php endwhile; ?>
        </div>
    </div>
    Relevant CSS:

    Code:
     /* Height & width for the container - The rest is done by the jQuery part. */
      div[rel='scrollcontent1'] { width: 490px; height: 490px;}
      
      /* Basic CSS for the elements - If rel is "scrollcontent1", style its scrollbar by referring to ".scrollcontent-content", ".scrollcontent-bar", etc. */
      .scrollcontent1-content { /* background: #eee; */ } /* for vertical content, no explicit width is required for inner DIV */
      .scrollcontent1-bar { width: 9px; background: #a67aea; overflow: hidden; }
      .scrollcontent1-drag { background: #6c40b0; cursor: pointer; }
      
      div[rel='scrollcontent2'] { width: 300px; height: 300px; }
      
      /* Basic CSS for the elements - If rel is "scrollcontent2", style its scrollbar by referring to ".scrollcontent2-content", ".scrollcontent2-bar", etc. */
      .scrollcontent2-content { width: 999px; } /* for horizontal content, width should be set to total width of all floated inner container elements */
      .scrollcontent2-bar { height: 15px; background: #ccc; border-radius: 5px; box-shadow: inset 0px 0px 5px #444444; overflow: hidden; }
      .scrollcontent2-drag { background: #425a8a; border-radius: 5px; cursor: pointer; }
      
      /* Not needed elements */
      #contentwrap { padding: 5px; border: 1px #444444 solid; display: block; width: 300px; border-radius: 10px; }
      .scrollcontent1-content p, .scrollcontent2-content p {margin:0; padding:0}
    
    body {background-image: url(../images/main-bg.jpg); background-repeat: no-repeat; background-position: top center; font-family: Arial, Helvetica, sans-serif; color: #fff; font-size: 14px;}
    
    .content {background-color: rgba(128, 91, 185, 0.85); box-shadow: 0px 0px 4px #222; height: 580px; width: 500px; padding: 20px; position: absolute; right: 0; top: 126px; border-radius: 10px;}
    .pagetitle, .content h1 {font-family: 'Quattrocento Sans', sans-serif; font-size: 41px; color: #fff; text-align: center; border-bottom: 1px solid #66438f; display: block; font-weight: 100; margin-bottom: 20px;}
    .contentholder h2, .contentholder h2 a, .content h2, content h2 a {font-size: 26px; font-family: 'Quattrocento Sans', sans-serif; padding-bottom: 15px; text-decoration: none; font-weight: 100; padding-top: 22px;} 
    
    .contentholder, scrollcontent1, div.scrollcontent1 {width: 470px; padding-right: 10px;}
    .contentholder p, .contentholder a, .contentholder li, scrollcontent1 p, scrollcontent1 a, scrollcontent1 li, div.scrollcontent1 p, div.scrollcontent1 a, div.scrollcontent1 li {color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
    .contentholder p, scrollcontent1 p, div.scrollcontent1 p {padding-bottom: 15px!important;}
    Relevant Javascript:

    Code:
    jQuery.fn.customscroll = function( d ) {
        return this.each( function() {
            var direction = d.direction, bounce = typeof d.bounce === 'number'? d.bounce : 20;
            var drag = {
                d: direction,
                t: $( this ).attr( "rel" ),
                id: $( this ),
                setdimensions: function(orientation) { //DD added function
                    if (orientation=="horizontal"){
                        drag.b.css( { width: drag.id.width(), left: 0, bottom: 0, position: "absolute", "z-index": 10 } );
                        drag.c.css( { display: "block", position: "absolute", height: drag.id.height() - drag.b.height() - 5, "overflow-y": "hidden" } );
                        drag.s.css( { width: drag.b.width(), top: 0, width: 70, height: drag.b.height(), position: "absolute", "z-index": 100 } );
                   	    drag.tickB = parseFloat( parseInt( drag.c.width() - drag.s.parent().width() ) / parseInt( drag.s.parent().width() - drag.s.width() ) );
                        drag.tickC = parseFloat( parseInt( drag.s.parent().width() - drag.s.width() ) / parseInt( drag.c.width() - drag.s.parent().width() ) );
    		    return [drag.b.width() - drag.s.width() + bounce, drag.id.width() - drag.c.width() - bounce * drag.tickB];
    		} else {
                        drag.b.css( { height: drag.id.height(), right: 0, top: 0, position: "absolute" } );
                        drag.c.css( { display: "block", position: "absolute", width: drag.id.width() - drag.b.width() - 5 } );
                        drag.s.css( { width: drag.b.width(), top: 0, height: 70, position: "absolute" } );
                        drag.tickB = parseFloat( parseInt( drag.c.height() - drag.s.parent().height() ) / parseInt( drag.s.parent().height() - drag.s.height() ) );
                        drag.tickC = parseFloat( parseInt( drag.s.parent().height() - drag.s.height() ) / parseInt( drag.c.height() - drag.s.parent().height() ) );
    		    return [drag.b.height() - drag.s.height() + bounce, drag.id.height() - drag.c.height() - bounce * drag.tickB];
    		}
    	    },	
                create: function() {
                    switch ( drag.d ) {
                        case "horizontal":
                            drag.elements( "horizontal" );
                            var maxs=drag.setdimensions( "horizontal" );
                            drag.s.data( { click: false } );
                            drag.s.mouseover( function() {
                                drag.s.data( { click: true } );
                            });
                            drag.s.mouseout( function() {
                                drag.s.data( { click: false } );
                            });
                            drag.id.bind('mousewheel', function( f, delta ) {
                                f.preventDefault();
                                clearTimeout(drag.wheeltimer);
                                var initial = drag.s.position().left, moveby;
                                drag.s.css({left: Math.min(Math.max((moveby = -10 * delta + initial), -bounce), maxs[0])});
                                drag.c.css({left: Math.max(Math.min(- drag.tickB * moveby, drag.tickB * bounce), maxs[1])});
                                drag.wheeltimer = setTimeout(drag.redrawH, 100);
                            });
                            drag.s.mousedown( function( f ) {
                                f.preventDefault();
                                drag.s.data( { hold: false } );
                                var initial = drag.s.parent().offset().left - ( drag.s.offset().left - f.pageX );
                                $( document ).mousemove( function( e ) {
                                    e.preventDefault();
                                    if ( drag.s.data( "hold" ) == false )
                                    {
                                        drag.s.css( { left: Math.min(Math.max(e.pageX - initial, -bounce), maxs[0]) } );
                                        drag.c.css( { left: Math.max(Math.min(- drag.tickB * ( e.pageX - initial ), drag.tickB * bounce),maxs[1]) } );
                                    }
                                });
                            });
                            $( document ).mouseup( function() {
                                drag.redrawH();
                            });
                            drag.b.click( function( e ) {
                                if ( drag.s.data( "click" ) == false )
                                {
                                    var initial = drag.s.parent().offset().left + ( drag.s.width() / 2 );
                                    drag.s.animate( { left: e.pageX - initial } );
                                    drag.c.animate( { left: - drag.tickB * ( e.pageX - initial ) }, {
                                        complete: function() {
                                            drag.redrawH();
                                        }
                                    });
                                }
                            });
                        break;
                        case "vertical":
                            drag.elements( "vertical" );
                            var maxs=drag.setdimensions( "vertical" );
                            drag.s.data( { click: false } );
                            drag.s.mouseover( function() {
                                drag.s.data( { click: true } );
                            });
                            drag.s.mouseout( function() {
                                drag.s.data( { click: false } );
                            });
    			drag.id.bind('mousewheel', function( f, delta ) {
                                f.preventDefault();
                                clearTimeout(drag.wheeltimer);
                                var initial = drag.s.position().top, moveby;
                                drag.s.css({top: Math.min(Math.max((moveby = -10 * delta + initial), -bounce), maxs[0])});
                                drag.c.css({top: Math.max(Math.min(-drag.tickB * moveby, drag.tickB * bounce), maxs[1])});
                                drag.wheeltimer = setTimeout(drag.redrawV, 100);
                            });
                            drag.s.mousedown( function( f ) {
                                f.preventDefault();
                                drag.s.data( { hold: false } );
                                var initial = drag.s.parent().offset().top - ( drag.s.offset().top - f.pageY );
                                $( document ).mousemove( function( e ) {
                                    e.preventDefault();
                                    if ( drag.s.data( "hold" ) == false )
                                    {
                                      drag.s.css( { top: Math.min(Math.max(e.pageY - initial, -bounce), maxs[0]) } );
                                        drag.c.css( { top: Math.max(Math.min(- drag.tickB * ( e.pageY - initial ), drag.tickB * bounce), maxs[1]) } );
                                    }
                                });
                            });
                            $( document ).mouseup( function() {
                                drag.redrawV();
                            });
                            drag.b.click( function( e ) {
                                if ( drag.s.data( "click" ) == false )
                                {
                                    var initial = drag.s.parent().offset().top + ( drag.s.height() / 2 );
                                    drag.s.animate( { top: e.pageY - initial } );
                                    drag.c.animate( { top: - drag.tickB * ( e.pageY - initial ) }, {
                                        complete: function() {
                                            drag.redrawV();
                                        }
                                    });
                                }
                            });
                        break;
                    }
                    $( "a" ).click( function() {
                        if ( $( this ).attr( "rel" ) )
                        {
                            drag.move( "#" + $( this ).attr( "rel" ), $( this ).attr( "parent" ) );
                        }
                    });
    
                    $( window ).resize( function() { //DD added event
                        drag.setdimensions(drag.d);
    										var resetpos=( drag.d=="horizontal" )? {left: 0} : {top: 0}
    										drag.c.css( resetpos )
                    });
    
                    $( window ).unload( function() {
                        drag.destroy();
                    });
                },
                redrawV: function() {
                    drag.s.data( { hold: true } );
                    if ( drag.s.parent().height() < drag.s.position().top + drag.s.height() )
                    {
                        drag.s.animate( { top: drag.s.parent().height() - drag.s.height() }, 250 );
                        drag.c.animate( { top: drag.s.parent().height() - drag.c.height() }, 250 );
                    }
                    else if ( drag.s.position().top < 0 )
                    {
                        drag.s.animate( { top: 0 }, 250 );
                        drag.c.animate( { top: 0 }, 250 );
                    }
                },
                redrawH: function() {
                    drag.s.data( { hold: true } );
                    if ( drag.s.parent().width() < drag.s.position().left + drag.s.width() )
                    {
                        drag.s.animate( { left: drag.s.parent().width() - drag.s.width() }, 250 );
                        drag.c.animate( { left: drag.s.parent().width() - drag.c.width() }, 250 );
                    }
                    else if ( drag.s.position().left < 0 )
                    {
                        drag.s.animate( { left: 0 }, 250 );
                        drag.c.animate( { left: 0 }, 250 );
                    }
                },
                move: function( where, par ) {
                    if ( drag.d == "vertical" && drag.t == par )
                    {
                        if ( drag.tickC * $( where ).position().top > drag.s.parent().height() - drag.s.height() )
                        {
                            drag.s.animate( { top: drag.s.parent().height() - drag.s.height() }, { duration: 250 } );
                            drag.c.animate( { top: drag.s.parent().height() - drag.c.height() }, { duration: 250 } );
                        }
                        else
                        {
                            drag.s.animate( { top: drag.tickC * $( where ).position().top }, { duration: 250 } );
                            drag.c.animate( { top: - $( where ).position().top }, { duration: 250 } );
                        }
                    }
                    else if ( drag.d == "horizontal" && drag.t == par )
                    {
                        if ( drag.tickC * $( where ).position().left > drag.s.parent().width() - drag.s.width() )
                        {
                            drag.s.animate( { left: drag.s.parent().width() - drag.s.width() }, { duration: 250 } );
                            drag.c.animate( { left: drag.s.parent().width() - drag.c.width() }, { duration: 250 } );
                        }
                        else
                        {
                            drag.s.animate( { left: drag.tickC * $( where ).position().left }, { duration: 250 } );
                            drag.c.animate( { left: - $( where ).position().left }, { duration: 250 } );
                        }
                    }
                },
                elements: function( where ) {
                    drag.id.css( { overflow: "hidden", position: "relative" } );
                    drag.id.wrapInner( '<div class="' + drag.t + '-content"></div>' );
                    drag.c = $( '.' + drag.t + '-content' );
                    drag.id.append( '<div class="' + drag.t + '-bar"></div>' );
                    drag.b = $( '.' + drag.t + '-bar' );
                    drag.b.append( '<div class="' + drag.t + '-drag"></div>' );
                    drag.s = $( '.' + drag.t + '-drag' );
                },
                destroy: function() {
                    // What happens in DOM, stays in DOM. Unless...
                    $( "*" ).each( function() {
                        $( this ).remove();
                    });
                }
            };
            drag.create();
        });
    };

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Width is defined twice in here:
    Code:
    drag.s.css( { width: drag.b.width(), top: 0, width: 70,
                                   height: drag.b.height(), position: "absolute", "z-index": 100 } );
    BTW It would be easier to spot this if your lines weren't so wide. You can split them easily in JS (and HTML and CSS for that matter) as long as it is at a sensible position; e.g. after a comma.

    Do you have a valid DOCTYPE declaration? And is your HTML validated? That is, it doesn't have any significant error? Either of these can cause problems, particularly with IE.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    21
    Thanks
    4
    Thanked 2 Times in 2 Posts
    Thanks Andrew,

    It is actually build into a Wordpress site with a custom theme so it is possible that this is the issue. When I validate I get the following errors which stand out a bit:

    The tag: "Meta" has an XML style closing syntax for an empty element even though version "HTML20" is not a valid XML tag language
    The tag: "Link" has an XML style closing syntax for an empty element even though version "HTML20" is not a valid XML tag language
    The tag: "image" has an XML style closing syntax for an empty element even though version "HTML4" is not a valid XML tag language


    Here is my DOCTYPE declaration:

    <!DOCTYPE html>
    <html dir="ltr" lang="en-US">


    Sounds like either of these could be causing problems, but what would be ideal to change them to given that it is a WP site? Or might this not be a problem at all?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Realistically, those errors shouldn't matter.

    They are just telling you that you did something like
    Code:
    <link ...></link>
    where the </link> is technically not allowed in HTML. But no browser that I know of will actually choke on that. Not even MSIE 9. (Can't speak for 10.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    RainingNails (12-27-2012)

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Did you fix the width error that I identified?
    Do you receive error messages in your browser's console?

    Your css identifies scrollcontent1 as the rel attribute but the remainder of your css refers to the class-name scrollcontent1. Perhaps this is something to do with WordPress(?). I wouldn't know about WP..
    Last edited by AndrewGSW; 12-27-2012 at 12:12 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    RainingNails (12-27-2012)

  • #6
    New Coder
    Join Date
    Jun 2010
    Posts
    21
    Thanks
    4
    Thanked 2 Times in 2 Posts
    Thanks for your help - I haven't received any error messages in the browser that are of any significance and I've fixed the javascript layout per Andrew's suggestions. I'm still seeing the error so I'm starting to think it might have more to do with a CSS/HTML incompatibility.

    The rel="scrollcontent1" and class="scrollcontent1" similarity might not have been the best idea, so I'll try a different name for the class. The same name for both types is probably one of the oldest mistakes in the book. I'd laugh if that was the problem.

    I'll keep my fingers crossed.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •