GenericCog
asked on
Twitter Bootstrap: How To Flip A Tile 180 Degrees?
I've got a tile, thanks to @padas, (http://jsbin.com/oxopag/1/ edit) but I need to flip it and display information on its backside using Twitter Bootstrap.
It looks like this on its front side:
It looks like this on its front side:
ASKER
@padas, not really... I need something that will flip the div, like in that link, but remain on the flipped side so the user can interact with a textbox on the reverse side.
More like this: http://jsfiddle.net/habkU/
I found the above scripts at http://www.drewgreenwell.c om/project s/metrojs
More like this: http://jsfiddle.net/habkU/
I found the above scripts at http://www.drewgreenwell.c
I'm not sure I see the difference. They do the same thing. Either are good choices. I would use one of those. There will not be a "bootstrap" version of this fliping. I don't know if it just jsfiddle or if it is bigger, but the first one seems smoother.
ASKER
One more issue that is throwing a wrench in the works is that these Divs are created dynamically using a Razor syntax foreach loop.
I can get it working with a single Div on a plain vanilla webpage. But due to many Divs issue, I am at a loss. Working on a single Div here: http://jsfiddle.net/habkU/ 2/
My code to create the Divs is here:
I can get it working with a single Div on a plain vanilla webpage. But due to many Divs issue, I am at a loss. Working on a single Div here: http://jsfiddle.net/habkU/
My code to create the Divs is here:
<div class="scrollBox-patientTiles">
@{
foreach (var item in Model)
{
<div id="@item.Name@item.Mrn" onclick="" class="metro-patientTile">
<div class="box" s="@item.Name@item.Mrn"
onmouseover="showDebugInfo('s:[@item.StayId] pg:[@item.ProgramId] e:[@item.EpisodeId] l:[@item.LocationId] pt:[@item.PatientId]');"
onmouseout="window.status='';">
<div>
<div class="innerBoxHighlight">
<input value="@item.Name" id="@item.Name" name="selectedObjects" class="checkbox-patientTiles" type="checkbox" data-StayId="@item.StayId" stayId="@item.StayId" data-episodeId="@item.EpisodeId" episodeId="@item.EpisodeId" onchange="togglesForSingleCheckedTile();" />
</div>
<div class="innerBoxHighlight"><img src="~/Content/ImagesAppBar/icon18.png" width="10" height="12" /></div>
<div class="innerBoxHighlight"><img src="~/Content/ImagesAppBar/icon15.png" width="10" height="12" /></div>
<div class="innerBoxHighlight"><img src="~/Content/ImagesAppBar/icon16.png" width="10" height="12" /></div>
<div class="innerBoxHighlight"><img src="~/Content/ImagesAppBar/icon17.png" width="10" height="12" /></div>
<div class="innerBoxHighlight">[{4}]</div>
</div>
<div class="div-genericClearBoth-Small"></div>
<div>
@Html.DisplayFor(modelItem => item.Name)
</div>
<div class="innerBox-FloatLeft">
<b>Age:</b> @Html.DisplayFor(modelItem => item.Age.Years)<br />
<b>Admit: </b>(@Html.DisplayFor(modelItem => item.Mrn))<br />
<b>Room: </b>@Html.DisplayFor(modelItem => item.Room)<br />
<b>Hosp POS: </b>@Html.DisplayFor(modelItem => item.Room)<br />
<b>PCP:</b> @Html.DisplayFor(modelItem => item.PrimaryCarePhysician)
</div>
<div class="innerBox-FloatRight">
<b>MRN: </b>(@Html.DisplayFor(modelItem => item.Mrn))<br />
<b>DC: </b>(@Html.DisplayFor(modelItem => item.Mrn))<br />
<b>LOS: </b>(@Html.DisplayFor(modelItem => item.Mrn))<br />
<b>PROV:</b> @Html.DisplayFor(modelItem => item.PrimaryCarePhysician)
</div>
</div>
<div style="display:none;">
<b>HON</b> @Html.TextBoxFor(modelItem => item.PrimaryCarePhysician, new { @class = "handOffNotes-PatientTiles" })
</div>
@*<div><a href="#"><img src="~/Content/ImagesAppBar/flipArrow.png" /></a></div>*@
</div>
}
}
</div>
ASKER
@padas, your suggestion certainly has a smoother effect. However, I need the tile to not continually spin (as in the one I found) and when clicked it will flip over to the back side and present the user with a text box that is connected to a database.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I did not find a solution to this problem however, I've let it sit for a long while and need to close it.
http://css3.bradshawenterprises.com/flip/