Creating a unique seat arrangement resembling airplane wings

Question

Creating a unique seat arrangement resembling airplane wings

I am facing a challenge of creating a seatmap for airplanes using only HTML, CSS, and jQuery. While this task is generally manageable, I'm struggling with how to incorporate wings into the design. Currently, I differentiate seats located over the wings by adding a darker outside border, but I find this approach unappealing. I would prefer to integrate some form of "wings" directly onto the plane or at least have an outer border outlining the plane's shape. Do you have any suggestions on how to achieve 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>
                    <!-- Seat rows and attributes -->
                </table>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>

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

Check out my updated Fiddle for a clearer visualization of where the wings should be situated -> Fiddle 2: http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/3/

The main issue remains wanting the border to outline the exterior of the plane rather than inside the cabin.

jquery html css

Answer 1

Answer №1

Here is my innovative solution, utilizing a CSS approach for creating the two wings:

Check out the code here

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

Incorporate the following snippet before and after your existing code.

LATEST UPDATE

You have the option to dynamically adjust the CSS using PHP. It's crucial to consider that there are only two wings on a plane.

If the wing positions align (or even if not, you can use separate CSS rules for the left and right wings), you simply need to determine the starting point of the wing and its length.

The CSS modifications would be as follows:

#wings {
    border: solid 5px #333;
    width: 80px;   % <-- Adjust the wing length
    position: relative;
    left: 153px;   % <-- Define the starting point of the wing
}

UPDATED DESIGN

If you desire a more intricate wing design, the CSS styling should be as shown below:

#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;
}

Explore the updated design here

Please note: The border: solid 5px #333; declaration has been removed as it is unnecessary.

Answer 2

Here is my innovative solution, utilizing a CSS approach for creating the two wings:

Check out the code here

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

Incorporate the following snippet before and after your existing code.

LATEST UPDATE

You have the option to dynamically adjust the CSS using PHP. It's crucial to consider that there are only two wings on a plane.

If the wing positions align (or even if not, you can use separate CSS rules for the left and right wings), you simply need to determine the starting point of the wing and its length.

The CSS modifications would be as follows:

#wings {
    border: solid 5px #333;
    width: 80px;   % <-- Adjust the wing length
    position: relative;
    left: 153px;   % <-- Define the starting point of the wing
}

UPDATED DESIGN

If you desire a more intricate wing design, the CSS styling should be as shown below:

#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;
}

Explore the updated design here

Please note: The border: solid 5px #333; declaration has been removed as it is unnecessary.

Answer 3

Answer №2

Experimenting with styling, I decided to apply the classes wingRowTop and wingRowBottom to the tr element containing the wingseat.

For a visual demonstration, you can view the changes in this JSFiddle link.

An alternative approach involved using :before pseudo-elements on the first cells to introduce a sloped effect on the wings (highlighted in red). Here's the updated example: JSFiddle link.

Utilizing negative margins and border-collapse properties, I was able to achieve the desired outcome. With additional HTML classes and adjustments like border-radius, it might be feasible to create a wing-shaped appearance within the 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 4

Experimenting with styling, I decided to apply the classes wingRowTop and wingRowBottom to the tr element containing the wingseat.

For a visual demonstration, you can view the changes in this JSFiddle link.

An alternative approach involved using :before pseudo-elements on the first cells to introduce a sloped effect on the wings (highlighted in red). Here's the updated example: JSFiddle link.

Utilizing negative margins and border-collapse properties, I was able to achieve the desired outcome. With additional HTML classes and adjustments like border-radius, it might be feasible to create a wing-shaped appearance within the 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 5

Answer №3

After coming across this post, I found it quite interesting as I happen to be developing a simulator for airport check-ins. Thank you @SchweizerSchoggi for sparking the idea and fueling my inspiration.

One feature that could enhance the simulator is a seat map generator. I have created an initial version on this playground: http://jsfiddle.net/Mikebert4/0Lu4vspq/34/

In the future, I plan to transform this into a proper constructor object like so:

var seatmap = new SeatMap(options);

Currently, the tool only visualizes complete rows of seats by using Math.floor() to determine how many rows to display. Nevertheless, it's a good starting point!

Answer 6

After coming across this post, I found it quite interesting as I happen to be developing a simulator for airport check-ins. Thank you @SchweizerSchoggi for sparking the idea and fueling my inspiration.

One feature that could enhance the simulator is a seat map generator. I have created an initial version on this playground: http://jsfiddle.net/Mikebert4/0Lu4vspq/34/

In the future, I plan to transform this into a proper constructor object like so:

var seatmap = new SeatMap(options);

Currently, the tool only visualizes complete rows of seats by using Math.floor() to determine how many rows to display. Nevertheless, it's a good starting point!

Answer 7

Answer №4

I just wanted to express my gratitude for the incredible support I have received from everyone! Ultimately, I have decided to combine elements from both of your suggestions: Wf4 provided valuable insights on wing positioning and crafted a detailed plan for the "wings outside the cabin" approach. Giacomo Alessandroni also contributed a brilliant concept for the wings layout.

If you're interested, here is the link to my final Fiddle project:

Answer 8

I just wanted to express my gratitude for the incredible support I have received from everyone! Ultimately, I have decided to combine elements from both of your suggestions: Wf4 provided valuable insights on wing positioning and crafted a detailed plan for the "wings outside the cabin" approach. Giacomo Alessandroni also contributed a brilliant concept for the wings layout.

If you're interested, here is the link to my final Fiddle project:

Creating a unique seat arrangement resembling airplane wings

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Could you identify the unique patterns present in this specific Backbone TodoMVC demonstration?

Steps to include a HTML webpage within another page

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

tips for concealing the sorting icon in the DataTables header upon initial load

The process of transmitting messages back and forth between a popup script and a content script

Issue with variable not being properly updated during each iteration - JQuery

Ways to embed an HTML file into another HTML document

What is the best approach for choosing unquoted HTML attribute values?

The problem lies in the incorrect rewriting of static resources leading them to be redirected to the

What is the best way to update a targeted component in React when triggered by an event handler?

Adjust the color of the entire modal

What is the reason for jsHint's caution: '(var) is declared but not utilized'?

I attempted to log the elements of my submit button form, but unfortunately nothing is appearing in the browser console

exercise on json result

The val() function in jQuery returns an empty string when used with a bootstrap popover input field

Ascending to the Peak within a div

Why isn't my Jquery click event able to download the csv file?

Looking to display user data within a specific div using JavaScript? Check out my code!

GTM - monitoring the most recent clicked element's input data

Chrome and Internet Explorer are not prompting to save passwords after the input type has been altered by a script