CODEWITHSUNDEEP
javascriptjqueryhtmlcssflash
Dan
Dan

Reputation: 7724

Keep CSS animation when a Flash layer is placed over element

I am using the ZeroClipboard library as it supports safari whereas other packages, such as clipboard.js don't. The way ZeroClipboard works is it places an invisible flash component over the button. Whilst this allows the button to keep its initial style set by the CSS, it does not allow it to use it style properties such as cursor and :active. You can see this below or on this JSFiddle

Code snippet doesn't seem to be working with ZeroClipboard. See JSFiddle for working example

ZeroClipboard.config({swfPath: "https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf"});
var client = new ZeroClipboard($("#copyH"));
body {
  background: grey;
}

h1.copybtn {
  background: #4942ff;
  display: inline-block;
  padding: 2px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  cursor: pointer;
  color: white;
  -webkit-transition: all 0.25s !important;
  -moz-transition: all 0.25s !important;
  -o-transition: all 0.25s !important;
  transition: all 0.25s !important;
  font-size: 1.2em;
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
}
h1.copybtn:active {
  -webkit-box-shadow: -1px -1px 4px #7f7aff;
  -moz-box-shadow: -1px -1px 4px #7f7aff;
  box-shadow: -1px -1px 4px #7f7aff;
  -webkit-transform: translate(1px, -4px);
  -moz-transform: translate(1px, -4px);
  -o-transform: translate(1px, -4px);
  transform: translate(1px, -4px);
  -webkit-transition: all 0.25s !important;
  -moz-transition: all 0.25s !important;
  -o-transition: all 0.25s !important;
  transition: all 0.25s !important;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.js"></script>

<h1 class="copybtn" data-clipboard-text="Won't copy">Has effects working</h1>
<br>
<h1 id="copyH" class="copybtn" data-clipboard-text="Will copy">Has copy working</h1>

Is there a way that I can keep the functionality from the package and the CSS styling?

Upvotes: 0

Views: 30

Answers (2)

Dan
Dan

Reputation: 7724

ZeroClipboard has a class .zeroclipboard-is-active which would allow for this example to work correctly.

For example, the code could be re-written to 

&:active, &.zeroclipboard-is-active {
  @include box-shadow(-1px -1px 4px #7f7aff);
  @include transform(translate(1px, -4px));
  @include transition(all 0.25s !important);
}

The documentation for this can be found here

Upvotes: 0

Whothehellisthat
Whothehellisthat

Reputation: 2152

You could put the styling on the flash object itself instead of the button. Or even on both using multiple selectors:

#global-zeroclipboard-flash-bridge, #copyH { cursor:pointer; }

Not sure how the ids are generated, so you may want to be careful about that when figuring out how to write your css.

Upvotes: 1

Related Questions