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:
Tile needs to flip 180 degrees
GenericCogAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
What you have looks good.  I think your  problem is going to be with multiple ID's with the same name.   Render the html of your code with multiple Div's and see how that looks.  If you see multiple ID's with the same name, that's your problem.  Just do it using classes instead of id's.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That will not be a bootstrap thing.   Is this what you want?

http://css3.bradshawenterprises.com/flip/
0
 
GenericCogAuthor Commented:
@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
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
 
GenericCogAuthor Commented:
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

0
 
GenericCogAuthor Commented:
@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.
0
 
GenericCogAuthor Commented:
I did not find a solution to this problem however, I've let it sit for a long while and need to close it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.