ZeroClipboard / Flash transparency issues with IE10 and VMWare View

Recently I put a shiny new application together for work that required the implementation of ZeroClipboard for one-click copying of data. Things worked perfectly in Chrome, Firefox, etc. But unfortunately we were seeing some really strange behavior with IE10, which most of the user base is stuck on.

ZeroClipboard creates an invisible .swf file that overlays certain web elements to pick up the click event in Flash. In IE10 this would only ever display as a big opaque white box instead of as transparent.

Example from ZeroClipboard's Demo Page

Example from ZeroClipboard’s Demo Page

I scoured the web off and on for a few days but found nothing resembling my issue with Flash transparency and IE10. It was only after I broke down and created a Stack Overflow question that made me go back over everything that I discovered an Add-On in my IE10 settings I didn’t know was there:

VMWare Adobe Flash Optimizer

VMWare Adobe Flash Optimizer Add-On

The company I work for has everyone working entirely on VMWare View remote machines… part of that environment unfortunately involves this IE Add-On called “VMWare Adobe Flash Optmizer” which in this case “optimizes” flash to not ever be transparent.

Disabling that Add-On solved all my problems.

Share
facebooktwittergoogle_plusredditlinkedinfacebooktwittergoogle_plusredditlinkedin

Sequence contains no elements LINQ error

I had a problem today that reminded me to expect the error you’re asking for (even if you don’t expect the error).

When using LINQ, .Single() and .SingleOrDefault() have different behaviors. Specifically if the result set is empty, .Single() will throw the error “Sequence contains no elements” but .SingleOrDefault() will return a null value. Expecting and handling one behavior but actually asking for the other means things are going to get messy.

Even though this particular piece of code is never supposed to come back empty, it inevitably did and resulted in the thrown error.

C#

// Throws poorly handled exception
var entity = dataConnection.Entity.Single(e =>
                             e.ID == Guid.Parse(entityID));

if (entity != null)
{ ... }

// Keeps going
var entity = dataConnection.Entity.SingleOrDefault(e =>
                             e.ID == Guid.Parse(entityID));

if (entity != null)
{ ... }
Share
facebooktwittergoogle_plusredditlinkedinfacebooktwittergoogle_plusredditlinkedin

Scroll a div until it reaches the top of the page

Problem
I have a div that always needs to be visible to the user. In this particular page design, having it simply be position: fixed; looks a little awkward as it leaves white-space above the control as the user scrolls. What I needed was something that lets the div scroll a little bit but stop once it hits the top of the page, and stick there.

Solution
By attaching a jquery function to the window’s scroll event I am able to update the div’s CSS based on the current location of the user’s scroll. This lets me set the pinned div’s position to fixed only once the div hits the top of the page. However, this has the effect of pulling that control div out of the document flow, so I simultaneously set the content div’s margin-left to the width of the control div (plus it’s normal margin) so it stays in place.

Demo on JSFiddle

JQuery

     $(function ($) {
        function pinDiv() {
            var $divToPin= $('.control_column');
            var $contentToAlign = $('.content_column');
            if ($(window).scrollTop() > 91) {
                $divToPin.css({
                    'position': 'fixed',
                    'top': '-1px'
                });
                $contentToAlign.css({
                    'margin': '0 0 0 182px'
                });
            } else {
                $divToPin.css({
                    'position': 'relative',
                    'top': 'auto'
                });
                $contentToAlign.css({
                    'margin': '0 0 0 10px'
                });
            }
        }
        $(window).scroll(pinDiv);
        pinDiv();
    });

HTML


<div class="header"><h1>Page Header</h1></div>
<div class="control_column">
    <button type="button">I'm a button!</button>
    <button type="button">Always show me!</button>
</div>
<div class="content_column">
 
     Scroll this happy talk away! 
<!-- Fill with long scrolling content -->

</div>

CSS

.content_column
{
     float: left;
     width: 400px;
     padding: 10px;
     background-color: #EAF0FF;
     border: 1px solid #98A3C5;
}
.control_column
{
     float: left;
     width: 150px;
     padding: 10px;
     background-color: #EAF0FF;
     border: 1px solid #98A3C5;
}
.header
{
     float: left;
     width: 100%;
     height: 90px;
}
button
{
    float: left;
    width: 100%;
}
Share
facebooktwittergoogle_plusredditlinkedinfacebooktwittergoogle_plusredditlinkedin