Solved

Twitter Bootstrap: How To Flip A Tile 180 Degrees?

Posted on 2013-06-18
7
1,476 Views
Last Modified: 2013-07-25
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
0
Comment
Question by:GenericCog
  • 4
  • 3
7 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39258929
That will not be a bootstrap thing.   Is this what you want?

http://css3.bradshawenterprises.com/flip/
0
 

Author Comment

by:GenericCog
ID: 39260176
@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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39260616
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:GenericCog
ID: 39260629
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
 

Author Comment

by:GenericCog
ID: 39260691
@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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39260710
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
 

Author Closing Comment

by:GenericCog
ID: 39355950
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

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now