Building a seat map with wings for an airplane

Question

I need to build a map for planes using only HTML, CSS and jQuery. In general, nothing is a problem, but I do not know how to add wings to the plane. I am currently marking places (which are located above the wings) with a darker outer border. But this is not nice. I would like to add a few “wings” to the plane itself, where they should be. Or, if not wings, at least there should be a border on the "plane outside." Any ideas how to do this?

<div id="seatmap"> <div id="plane"> <table class="rows"> <tr> <td>F</td> </tr> <tr> <td>D</td> </tr> <tr> <td></td> </tr> <tr> <td>C</td> </tr> <tr> <td>A</td> </tr> </table> <div id="cabin"> <table> <tr> <td title="1F" class="seatAvailable"></td> <td title="2F" class="seatUnavailable"></td> <td title="" class="noSeatGalley"></td> <td title="4F" class="ExtraPay"></td> <td title="5F" class="seatAvailable wingSeat"></td> <td title="6F" class="seatUnavailable wingSeat"></td> <td title="7F" class="seatAvailable wingSeat"></td> <td title="8F" class="noSeatStorage wingSeat"></td> <td title="9F" class="seatAvailable"></td> <td title="10F" class="seatAvailable"></td> <td title="11F" class="seatAvailable LargeSeat"></td> </tr> <tr> <td title="1D" class="seatAvailable"></td> <td title="2D" class="seatUnavailable"></td> <td title="" class="noSeatGalley"></td> <td title="4D" class="ExtraPay"></td> <td title="5D" class="seatAvailable"></td> <td title="6D" class="seatUnavailable"></td> <td title="7D" class="seatAvailable"></td> <td title="8D" class="noSeatStorage"></td> <td title="9D" class="seatAvailable"></td> <td title="10D" class="seatAvailable"></td> <td title="11D" class="seatAvailable ExtraPay LargeSeat"></td> </tr> <tr> <td class="noSeatGalley">1</td> <td class="noSeatGalley">2</td> <td class="noSeatGalley"></td> <td class="noSeatGalley">4</td> <td class="noSeatGalley">5</td> <td class="noSeatGalley">6</td> <td class="noSeatGalley">7</td> <td class="noSeatGalley">8</td> <td class="noSeatGalley">9</td> <td class="noSeatGalley">10</td> <td class="noSeatGalley">11</td> </tr> <tr> <td title="1C" class="seatAvailable"></td> <td title="2C" class="seatAvailable"></td> <td title="" class="noSeatGalley"></td> <td title="4C" class="ExtraPay"></td> <td title="5C" class="seatUnavailable"></td> <td title="6C" class="seatAvailable"></td> <td title="7C" class="seatAvailable"></td> <td title="8C" class="noSeatLavatory"></td> <td title="9C" class="seatAvailable"></td> <td title="10C" class="seatAvailable"></td> <td title="11C" class="seatAvailable ExtraPay LargeSeat"></td> </tr> <tr> <td title="1A" class="seatAvailable"></td> <td title="2A" class="seatAvailable"></td> <td title="" class="noSeatGalley"></td> <td title="4A" class="ExtraPay"></td> <td title="5A" class="seatUnavailable wingSeat"></td> <td title="6A" class="seatAvailable wingSeat"></td> <td title="7A" class="seatAvailable wingSeat"></td> <td title="8A" class="noSeatLavatory wingSeat"></td> <td title="9A" class="seatAvailable"></td> <td title="10A" class="seatAvailable"></td> <td title="11A" class="seatUnavailable ExtraPay LargeSeat"></td> </tr> </table> </div> <div style="clear: both;"></div> </div> </div> 

Fiddle 1: http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/1/

Ok, I have another script, a bit updated. Here we have a better idea of ​​where the wings are (or should be) → Fiddle 2: http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/3/

The problem is that I want a border on the outside of the plane, not inside the cockpit.

Answer 1

This is my solution, with CSS for two wings:

http://jsfiddle.net/0Lu4vspq/6/

 #wings { border: solid 5px #333; width: 80px; position: relative; left: 155px; } 

and

 <div id="wings"></div> 

Before and after your code.

UPDATE

You can dynamically edit CSS through PHP. You need a different value, but there are only two wings on the plane.

If the position is the same (or not, you can use two CSS codes for the right and right wing), you only need to find the point at which the beginning of the wing and its length begin.

At this point, the CSS change at these two points:

 #wings { border: solid 5px #333; width: 80px; % <-- Length the wing position: relative; left: 153px; % <-- Where the wing start } 

SECOND UPDATE

If you want something more like a wing, CSS would be:

 #wings_down { left: 155px; width: 80px; position: relative; height: 50px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); background: #333; } #wings_up { left: 155px; width: 80px; position: relative; height: 50px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); transform: skew(-20deg); background: #333; } 

http://jsfiddle.net/0Lu4vspq/17/

Note. I removed border: solid 5px #333; because it is redundant.

Answer 2

I had a game adding a wingRowTop and wingRowBottom to tr that has wingseat .

http://jsfiddle.net/0Lu4vspq/4/

or with :before in the first cells to create a tilt on the wings (in red so you can see) http://jsfiddle.net/0Lu4vspq/5/

using negative margins and crash-crash is what I came up with. I am sure that with some other HTML classes and border radius you can create a wing shape in cells.

 .wingRowTop { border-collapse: collapse; border-spacing: 0px; position:absolute; margin-top:-37px; } .wingRowBottom { position:absolute; border-collapse: collapse; border-spacing: 0px; } #cabin tr:first-child td.wingSeat { background-color: #DEDEDE; border-right:5px solid #DEDEDE;} #cabin tr:last-child td.wingSeat { background-color: #DEDEDE; border-right:5px solid #DEDEDE 

Answer 3

Thank you for your great support! In the end, I am going to use a combination of both of your solutions: Wf4 included this solution regarding wing positioning and developed the first “wings outside the cockpit” approach. Giacomo Alessandroni had a great idea for a wing layout.

Here is my last Fiddle: http://tinyurl.com/kr5de25

Answer 4

So, I saw this and it’s pretty funny, I’m writing a simulator to check at the airport. So thanks @SchweizerSchoggi for asking the question and supporting the idea.

One thing that I would consider useful is the generator for the card, I made the first attempt on this fiddle: http://jsfiddle.net/Mikebert4/0Lu4vspq/34/

In my todo will do this in the corresponding constructor object, i.e.

 var seatmap = new SeatMap(options); 

In addition, it only shows full rows of places (uses Math.floor () to calculate the number of rows displayed, but this is the beginning!