Solved

Twitter Bootstrap: How To Flip A Tile 180 Degrees?

Posted on 2013-06-18
7
1,574 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript Loan Calculator Error 3 35
Get sourcecode path 14 48
Jquery driving me nuts... 14 29
HTML editor custom button 3 60
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
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…

730 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