Link to home
Start Free TrialLog in
Avatar of GenericCog
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:
User generated image
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

That will not be a bootstrap thing.   Is this what you want?

http://css3.bradshawenterprises.com/flip/
Avatar of GenericCog
GenericCog

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.com/projects/metrojs
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.
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:

        <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>

Open in new window

@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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I did not find a solution to this problem however, I've let it sit for a long while and need to close it.