somnamblst

Ugh! Double scroll bars on my 300x250 on Washington Post

  • 6 posts in this topic

6 posts in this topic

Obviously I control nothing that DCM uses to insert banner ads, and yes I am bending the DCM vs DCRM rules (video equals Rich Media). The horizontal scroll is really wide, the vertical about 10 pixels.

 

That being said does anyone see anything that jumps out at them.

<style type="text/css" style="display: none !important;">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		overflow-x: hidden;
	}
	#wrapper{
		position: relative;
		width: 300px;
		height:250px;		
		z-index: 1;

	}
	#player {
	top:55px;
	left:8px;
		width: 280px;
		position: absolute;
		
	}

</style>

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="mealKit_300x250_youtube_noZindex_TS.js?1493820012728"></script>


<script>
var canvas, stage, exportRoot;
function init() {
	// --- write your JS code here ---
	canvas = document.getElementById("canvas");
	exportRoot = new lib.mealKit_300x250_youtube_noZindex_TS();
	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.enableMouseOver();
	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}
</script>


<!-- write your code here -->
<script type="text/javascript">var clickTag = "https://www.google.com";</script>
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">

<div id="wrapper">
<div id="player"></div>

<canvas id="canvas" width="600" height="500" style="background-color:rgba(205, 152, 101, 1.00); width:300px; height:250px" onclick="javascript:window.open(window.clickTag)"></canvas>
	
	</div>
	
	<script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '154',
            width: '250',
            videoId: 'XAtmYu0bbKo',
            playerVars: {
                'autoplay': 1,
				'modestbranding':1,
                'controls': 1,
				'fs': 0,
				'rel': 0
            },
            events: {
                'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
            }
        });

    }

    var playerReady = false;
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        playerReady = true;
		 player.mute();

    }


    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            <!-- alert('done'); -->

        }
    }

 
</script>

 

Share this post


Link to post
Share on other sites

Coworker saw the 300x600 on a different site on his phone and there were no scrollbars. Could be a Washington Post issue.

Share this post


Link to post
Share on other sites

I would set the canvas to position:absolute.

Share this post


Link to post
Share on other sites

Still waiting for AdOps to answer my email about a DCM support ticket. But I will certainly try that.

 

Nothing extends beyond the 300x250 space, and the scrollbars which shouldn't be there, scroll=no, actually overlap the right and bottom of the 300x250 canvas element. The horizontal scroll shows a fair amount of white space to the right, and no additional space vertically. The top and left are aligned, as they should be. 

 

I do remember getting rid of a 1 pixel border in an iFrame requiring multiple border parameters. It appears that preventing scrollbars in iFrames isn't bullet proof in all browsers. The browser is Chrome for desktop.

 

http://help.simplytestable.com/errors/html-validation/the-x-attribute-on-the-y-element-is-obsolete-use-css-instead/the-scrolling-attribute-on-the-iframe-element-is-obsolete-use-css-instead/

 

 

 

 

Share this post


Link to post
Share on other sites

Last year, I had the same problem with some banners I built in Animate (still Flash CC at the time), and using absolute positioning fixed it for me.  I only noticed the scrollbars after uploading the banners to my portfolio and seeing them appear when the banners were opened within a lightbox; they looked fine the rest of the time in regular iframes.

 

Animate now positions the canvas absolutely in their default templates so it should be done automatically, but it looks like you're using an older template/older version of Animate.

 

The newer templates include this: 

<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>

 

Share this post


Link to post
Share on other sites

Thanks. I will republish for 2017. Sucks that I have no ability to QA in this Enterprise Security environment. And I let my domain and hosting expire because I realized my plans for blogging weren't going to happen.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.