Solved

Twitter Bootstrap: How To Flip A Tile 180 Degrees?

Posted on 2013-06-18
7
1,526 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

813 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

16 Experts available now in Live!

Get 1:1 Help Now