Cube rotation with css

I am having a bit of an issue with rotation of a cube. I want to make it cross-browser so I am transforming every side of the cube. When I am rotating from left to right the sides align perfectly on all browsers Chrome, Firefox and IE, BUT when the cube is rotated from top to bottom, the sides align only on Chrome (If I make the animation slower on Chrome the sides are broken the same way as the other browsers, so I think working properly is a bug :D). I have provided an example on jsfiddle:

http://ift.tt/1HLTof6

HTML:

<div class="flip-card-content">
  <div class="flip-card-side-a" style="background:red">
    FRONT 
  </div>
  <div class="flip-card-side-b" style="background:green">
    BACK
  </div>
  <div class="flip-card-side-c" style="background:aqua">
    LEFT
  </div>
</div>
<button id="button">Flip-top</button>
<button id="button2">Filp-right</button>

CSS:

.flip-card-content {
    position: relative;
    margin: 100px;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective:1000px;
}

.flip-card-side-a,
.flip-card-side-b,
.flip-card-side-c{
    width: 100%;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    transform-origin:50% 50% 0px;
    transition: all .5s ease-in-out;
}

.flip-card-side-a {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1;
}
.flip-card-side-b {
  transform: rotateX(90deg) translateZ(100px);
}
.flip-card-side-c {
  transform: rotateY(-90deg) translateZ(100px);
}

.flip .flip-card-side-a {

  transform: rotateX(-90deg) translateZ(100px);
}
.flip .flip-card-side-b {
  display:block;
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1;
}
.flip-right .flip-card-side-a {
  transform: rotateY(90deg) translateZ(100px);
}
.flip-

right .flip-card-side-b {
  display:none;
}
.flip-right .flip-card-side-c {
  transform: rotateY(0deg) translateZ(100px);
  z-index:1;
}

JQUERY:

$("#button").on('click', function(){
  $(".flip-card-content").removeClass("flip-right");
  setTimeout(function(){
    $(".flip-card-content").toggleClass("flip");
   },500);
});

$("#button2").on('click', function(){
  $(".flip-card-content").removeClass("flip");
  setTimeout(function(){
    $(".flip-card-content").toggleClass("flip-right");
  },500);

});

Any advice is welcomed!

How can I style my mailto form results?

So I have a basic form that takes in Name, Email, Date of Arrival, Date of Departure and Comment with a big "Send" button. Here is the code for that:

    <form class="form" id="form1" action="mailto:myemail@email.com" method="post">

  <p class="name">
    <input name="Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
  </p>

  <p class="email">
    <input name="Email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
  </p>

  <p class="email">
    <input name="Date Of Arrival" type="date" class="validate feedback-input" id="date" placeholder="Date Of Arrival" />
  </p>

  <p class="email">
    <input name="Date Of Departure" type="date2" class="validate feedback-input" id="date2" placeholder="Date Of Departure" />
  </p>

  <p class="text">
    <textarea name="Text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
  </p>


  <div class="submit">
    <input type="submit" value="SEND" id="button-blue"/>
    <div class="ease"></div>
  </div>
</form>

It successfully opens up my mail client with an email. The issue is that this is what is in the body of the email:

Name+%250D%250A+=Name+Test&Email+%250D%250A=test%40email.com&Date+Of+Arrival+%250D%250A=09%2F04%2F2015&Date+Of+Departure+%250D%250A=24%2F04%2F2015&Text=This+is+a+test+comment

How can I style this? I have looked online and can't figure it out.

For this example, this is how I would like the email body to look:

Name: Name Test Email: test@email.com Date of Arrival: 09/04/2015 Date of Departure: 24/04/2015 Message Body: This is a test comment.

I wouldn't mind having the subject field repopulated too with "booking request" or something.

Thanks!

Create new

I've got a list of available options in a first 'select' which is supposed the be the main option.
Then I want the user to choose optional options so when he choose the first option, a new select is added displaying the remaining options available.

If the user choose an optional option I want a new select to be displayed, etc until there's no more options.

The options also need (and here's my issue) to be synchronized between every select. I've got this code:

html

<form action="">
<select name="primary" id="primary">
</select>
<br/>
<div id="optional" style="display: none">
    <button id="addField">Add field</button>
    <br/>
</div>
</form>

js

var counter = 0;
var selects = [];
var categories = JSON.parse('[ { "value": "", "label": "Aucune", "taken": false }, { "value": "Électronique/Électroménager", "label": "Électronique/Électroménager", "taken": false }, { "value": "Maison Jardin", "label": "Maison Jardin", "taken": false } ]');

function addField() {
    $("#optional").append("<select name='optional' id='secondary" + counter + "'></select>");
    var jid = $("#secondary" + counter);
    fill(jid);
    jid.on("click", function () {
        updateCat(jid.val());
    });
    selects.push(jid);
    counter++;
}

function fill(select) {
    console.warn("select");
    //select.empty();
    console.groupCollapsed();
    for (var cat in categories) {
        console.log(categories[cat].label + " -> " + categories[cat].taken);
        if (!categories[cat].taken) {
            select.append("<option value=" + categories[cat].value + ">" + categories[cat].label + "</option>");
        }
    }
    console.groupEnd();
}

function updateCat(cat) {
    console.warn("update "+cat);
    var catId = findCat(cat);
    if (catId != -1) {
        categories[catId].taken = true;
    }
    for (var s in selects) {
        fill(selects[s]);
    }
}

function findCat(cat) {
    for (var i = 0; i < categories.length; i++) {
        if (categories[i].label == cat) {
            return i;
        }
    }
    return -1;
}

$(function () {
    var primary = $("#primary"), optional = $("#optional"), buttonField = $("#addField");
    fill(primary);
    selects.push(primary);
    primary.on("click", function () {
        if (primary.val() !== "") {
            updateCat(primary.val());
            optional.css("display", "block");
            buttonField.on("click", function (e) {
                e.preventDefault();
                addField();
            });
        }
        else {
            buttonField.css("display", "none");
        }
    })
});

And I'm having a hard time reloading every select, because the empty function works but I lose the previous selected option. I could save it, then reload it etc, but I'm not sure if that's the right way.

Anyone got any idea how I would do something like that ?

MYSQL Insert using Dropdowns and Session Variables

I've been trying to solve this problem for a few hours and can't seem to make headway. I am creating a booking form and it involves 2 dropdown menus and the use of some session variables. HTML

<form accept-charset="UTF-8" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"])?>" method="POST">
    <input type="date" data-role="date" name = "Date"data-inline="true" id ="Date" placeholder="Click here to select a date">

   <br>
    <select id="Time" name="Time">
        <option value="Null">Select a Time</option>
        <option value="9am">09:00</option>
        <option value="9.20am">09:20</option>
        <option value="9.40am">09:40</option>
        <option value="10am">10:00</option>
        <option value="10.20am">10:20</option>
        <option value="10:40am">10:40</option>
        <option value="11am">11:00</option>
        <option value="11:20am">11:20</option>
        <option value="11:40am">11:40</option>
        <option value="12am">12:00</option>
    </select>
  <br>
    <select id="Person" name="Person">
        <option value="Person1">Who Would you Like to See?</option>
        <option value="Person2">A Doctor</option>
        <option value="Person3">A Nurse</option>  
    </select>
    <br>
    <input type="submit" data-role="button" id="submit" value="Book" data-icon="action" data-iconpos="right">

I'm not been giving an error message, nor am I getting the success message that i've coded in if the query is successful. Any help would be appreciated

PHP

//This adds the connection file which has the details to connect to the database and what database to connect to
include_once('connection.php');
//Checks if the submit button is not set
if(!isset($_POST['submit']))
{
exit;
}
    //Declared Variables
    $Date = $_GET['Date'];
            $Time = $_GET['Time'];
            $Person = $_GET['Person'];
    $userID= $_SESSION['user'];
    $GPID= $_SESSION['GPID'];


    //Database Connection, this connects to the database using the connection.php
    $conn=ConnectionFactory::connect();

    //Insert Query
    $query="INSERT INTO `Appointments`(`AppID`, `Date`, `Time`, `Booked_With`, `UserID`, `GPID`) VALUES (NULL, :Date,:Time,:Person,:userID,:GPID)";

    $stmt=$conn->prepare($query);

    //Binding values
    //$stmt->bindValue(':post', $Post);
    $stmt->bindValue(':Date', $Date);
    $stmt->bindValue(':Time', $Time);
    $stmt->bindValue(':Person', $Person);
    $stmt->bindValue(':userID', $userID);
    $stmt->bindValue(':GPID', $GPID);

    $affected_rows = $stmt->execute();

    //Message if insert is Successful
    if($affected_rows==1){
        print "<script type=\"text/javascript\">"; 
        print "alert('Post Successful')"; 
        print "</script>";
        exit;
        }

    //Terminates the connection
            $conn=NULL;
?>
     </form>  

Authenticate Users on web-app through moodle

I am developing a mobile web-app using jQuery and HTML5 which I am going to deploy onto iOS and android app stores using PhoneGap.

This app needs users to Login using a Moodle username and password, before it can let them use the app.

I have absolutely no idea how to do this.

So here's my question. How do I take a user's Username and password, send it to Moodle to authenticate and handle the response?

Javascript shopping code? [on hold]

I have a client that doesn't want to add a shopping Cart but a simple contact-like form. In other words, let's say there's this T-shirt and someone clicks on buy. He wants the button to redirect him to a contact form with the "unique" code of the T-shirt automatically written inside the subject. Is it possible to do that by a click function or anything? I am new to JavaScript, I would appreciate all help.

Uncheck a Checkbox using Jquery

I have a page with a list of check boxes, when a check box is checked I am updating the number of check boxes selected in side a p tag. This is all working.

The problem I have is when the user selects more than 5 checkboxes I want to use Jquery to unselect it.

This is what I have so far, the first if else works but the first part of the if doe

 $("input").click(function () {

        if ($("input:checked").size() > 5) {
            this.attr('checked', false) // Unchecks it
        }
        else {
            $("#numberOfSelectedOptions").html("Selected: " + $("input:checked").size());
        }

    });

Any ideas?