1

I am using dashing widgets. I want to flip a widget on mouseover and show summary details after flip in a new widget. Any help would be much appreciated.

Thanks in advance.

Edited: Sorry for my vague question. I am a newbie to forums.

I was trying to achieve flipping widget exactly same like http://jsfiddle.net/mgechev/GpK25/16/

However after making some changes in above jsfiddle code, summary widget shows next to BGP widget but not in same area as expected.

Here is my bgp.erb code

<style>
 .gridster .panel {
  margin: 0px auto;
}

.gridster .card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
position: absolute;
top: 0px;
left: 0px;
}

.gridster .front {
z-index: 2;
}

.gridster .back {
z-index: 1;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

.gridster .panel:hover .front {
z-index: 1;
-webkit-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}

.gridster .panel:hover .back {
z-index: 2;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>

<% content_for :title do %>BGP<% end %>
<div class="gridster panel">
   <ul>
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
       <div class="front card" data-id="bgp" data-view="HotState" data-title="BGP"></div>
     </li>
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
       <div class="front card" data-id="bgpsummary" data-view="Text" data-title="BGP Summary" data-text="Details goes here..."></div>
     </li>
  </ul>
</div>
Nallappan
  • 11
  • 3
  • Welcome to Stackoverflow! Can you please elaborate your question having your effort like code or something so that people could get your problem early and help you? Thanks! – Enamul Hassan May 19 '16 at 10:08
  • Please, read [this (how to ask)](http://stackoverflow.com/help/how-to-ask) and [this (mcve)](http://stackoverflow.com/help/mcve) before asking, as those will help you get more and better answers from the community. – Bonatti May 19 '16 at 12:03
  • @Bonatti Thanks for letting me know. – Nallappan May 20 '16 at 07:06
  • @manetsus added my code – Nallappan May 20 '16 at 07:06
  • Just a note, the `moz-` transforms are usually experimental, and could not behave the same on different engines. Please, post your browser, and the engine version that is rendering your document. Also, try to be as specific as possible with the comment: `but not in same area as expected.` This is vague, and usually people will not copy/paste your CSS, to test it locally. (and the script in fiddle is behaving as expected on my Chrome) – Bonatti May 23 '16 at 11:31

0 Answers0