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?

How to update Cache using ApplicationCache HTML5

I want to make my web applications accessible offline, I'm using application cache to do that.

the main issue i'm facing is how to update the cache every time the user is online, I was reading that the only solution to force the browser to update the cache is to modify the manifest file (correct me please if I'm wrong).

So how I would be able to update the cache without editing the manifest file.

var appCache = window.applicationCache;
appCache.update();
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();
}

this code requires the manifest file to be changed, how could that be possible without modifying the manifest file ?

jQuery mouse scroll script speed will not change

had a google....

Tried changing my website scroll settings & nothing is happening.

Anyone have a write up or table on mouse scroll jQuery scripts and functions?

(Caches were cleared, cross browser test etc.)

jQuery(window).load(function(){  

    if(checkBrowser() == 'Google Chrome' && device.windows()){

        if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);

            window.onmousewheel = document.onmousewheel = wheel;



            var time = 330;

            var distance = 300;


            function wheel(event) {

                if (event.wheelDelta) delta = event.wheelDelta / 90;

                else if (event.detail) delta = -event.detail / 3;

                handle();

                if (event.preventDefault) event.preventDefault();

                event.returnValue = false;

            }



            function handle() {

                jQuery('html, body').stop().animate({

                    scrollTop: jQuery(window).scrollTop() - (distance * delta)

                }, time);

            }

    }

});

function checkBrowser(){

    var ua = navigator.userAgent;



    if (ua.search(/MSIE/) > 0) return 'Internet Explorer';

    if (ua.search(/Firefox/) > 0) return 'Firefox';

    if (ua.search(/Opera/) > 0) return 'Opera';

    if (ua.search(/Chrome/) > 0) return 'Google Chrome';

    if (ua.search(/Safari/) > 0) return 'Safari';

    if (ua.search(/Konqueror/) > 0) return 'Konqueror';

    if (ua.search(/Iceweasel/) > 0) return 'Debian Iceweasel';

    if (ua.search(/SeaMonkey/) > 0) return 'SeaMonkey';

    if (ua.search(/Gecko/) > 0) return 'Gecko';

    return 'Search Bot';

}

deaf language videos library

I want to find a library that having two videos:

1. Normal Video
2. Video with translation to deaf language

let me see the two simultaneous video , pause both , etc. .... If it is possible that the user can control the size of video translation

could you help me?

NOTE: I do not work subtitles, as there may be people who can not read

Pasting from a file browser and HTML5 Clipboard API

I'm trying to add an image paste function to my web application, using the standard routine:

$('textarea').on('paste', function (ev) {
    var clipboardData = ev.originalEvent.clipboardData;

    $.each(clipboardData.items, function (i, item) {
        if (item.type.indexOf("image") !== -1) {
            var reader = new FileReader();

            reader.readAsDataURL(item.getAsFile());
            reader.addEventListener('loadend', ...);
            ...
        }
    });
});

The full sample can be found here: http://ift.tt/1HjSsOD

It works correctly when I copy & paste an image from an image viewer software, but when I'm trying to do the same thing using a file browser (e.g. Finder on Mac or Nautilus on Linux) as a result I get only a text string with the file path or even an image with file type icon instead of an original file.

Is there any way to handle pastes from a file browser properly?

WebSQL:table not creating on changing window.location

I'm trying to store data when the user clicks on submit button.

Here is the code:

var db = openDatabase('CBDB', '1.0', 'mySpecialDatabaseThatWontWork',10*1024*1024);
db.transaction(function (nw) {
    nw.executeSql('Drop TABLE user');
});

function db1(){
    db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS user(empid varchar(10))');
        var x = $('#nameT').val();
        console.log(x);
        tx.executeSql('INSERT INTO user (empid) VALUES (?)', [x]);
    });
    window.location.assign("www/landing.html");
}

Now, if I comment the window.location then the code works fine. But when the window is redirected to a new page the table is not created.

Any problem with the code?

How do I count downloads from my website

Create a javascript function on the onclick event of the link that allow the user to download the file and at the same time, update the counter on the second file. we are new to this concept.plz help us

We have two files in server .We download file like this

<a href="192.168.3.134:8080/Helphands/download.txt"; download> aaaa </a> in button action .

We don't know about update count on second file

How to add permanent advertisement on html page? [on hold]

I want to display the advertisement or web_page(sign_up) on html permanently even we scroll the page?

Issue with multiple child HTML elements using Directives in AngularJS

I'm using a template to create a popup menu that will show alerts if there is a new one and it's working till now. But i wanted to add manual alert, that's why i thought to add an input text but Oupss, i can't write on the input field and i don't even know why.

My directive is like so :

$scope.tb = { x: 0, y: 0 };

module.directive('myDraggable', function ($document, $interval) {
return {
    restrict: 'EA',
    replace: true,
    //scope : true,
    scope: { menu: '=drSrc'},
    link: function (scope, element, attr) {

        var startX = 0, startY = 0, x = scope.menu.x || 0, y = scope.menu.y || 0, positionX = [], positionY = [], time = [], width, height, moveInterval;

        element.draggable({
            position: 'relative',
            cursor: 'pointer',
            top: y + 'px',
            left: x + 'px'
        });

        element.on('mousedown', function (event) {

            // Prevent default dragging of selected content
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
            $interval.cancel(moveInterval);
        });

        function mousemove(event) {
            y = event.pageY - startY;
            x = event.pageX - startX;
            //calculate the borders of the document 
            width = $(document).width() - 350;
            height = $(document).height() - 150;
            positionX.push(x);
            positionY.push(y);
            time.push(Date.now());
        }
    }
}
 });

I tried to make scope true but i faced 2 problems, : I can't move my popup anymore (yes my popup menu is Draggable) And Also the input text does not show my text i'm typing.

Here's my cache template :

    $templateCache.put('control.tpl.html', '<div class="container" my-draggable dr-src="tb"><div><div class="col-sm-1 col-md-1 sidebar"><div class="list-group" ><span href="#" class="list-group-item active" >Manage<input type="text" class="pull-right" placeholder="Type..." /></span><div ng-repeat="Alert in Alerts"><a href="#" ng-click="showLocation(Alert.id)" class="list-group-item" >Alert {{Alert.id}}</span><img src="../images/alert_icon_manage.png"  class="pull-right"/> </a></div><span href="#" class="list-group-item active"></span></div></div></div></div>');

I'm new with AngularJS and Directive and I don't know how to solve this but I think it's a problem with Scopes!! Thank you

asynchronously load script with html 5 async attribute

I use async attribute with the simplest way :
<script async type="text/javascript" src="path/jquery-1.10.2.min.js"></script>
for all .js in my page but problem is that once it loads good and once no.
Especially when i refresh page .js scripts doesn't load.
As soon as i delete async, everything works fine but it is no solution.
Someone know, where problem could be ?
Thanks

WebRTC - Receive video from another peer using an offer from an audio-only stream

Is is possible to receive both video and audio from another peer if the peer who called createOffer() only allowed audio when requested via getUserMedia()?

Explanation by scenario:

1. Alice connects to a signalling server, and when getUserMedia() is called, chooses to share both video and audio.
2. Bob connects to the signalling server, and when getUserMedia() is called, only shares audio.
3. As Bob is the last to party, Bob creates the peer connection offer via RTCPeerConnection.createOffer(). He shares his localDescription which contains SDP data that does not mention video.
4. The resultant connection is audio-only as the SDP data only contained audio-related information.

Can an offer be created that asks to receive video data without sharing it?

Media queries and Safari

Here's my index.html :

<html>
<head>
    <title>My Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" media="screen and (max-resolution: 96dpi)" type="text/css" href="css/normal.css"/>
    <link rel="stylesheet" media="screen and (min-resolution: 97dpi) and (max-resolution: 192dpi)" type="text/css" href="css/medium.css"/>
    <link rel="stylesheet" media="screen and (min-resolution: 193dpi)" type="text/css" href="css/hi.css"/>

This works fine on Chrome and Firefox (I don't care IE !) but not in Safari. How should I correct this ?

Thanks

How to get submited form in action?

I have this HTML5 code:

   <form id="LogInArea"  action = "/Home/ValidateUser" >
    <fieldset>
        <legend>Login Page</legend>
        <p>
        <label>
            User name<br>
            <input type="text" id="userName" required></label></p>
        <p><label>
            Password<br>
            <input type="password" id="password" required></label></p>
        <p>@*<button id="LoginButton">
            Log in</button>*@
            <button>submit</button>
            </p>
        <a href="/Home/RegisterPage">Register</a> if you don't have an account.
    </fieldset>
</form>

When I press the submit button the ValidateUser() action in Home controller is fired.

My question is how can I get the submitted form in ValidateUser() action and how I get the values of form element?

P.S. I don't want to use model!

jQuery check if input is empty

I am trying to get it where, if there is value in the input, go ahead and do your thing but if there isn't, don't do anything. I keep getting getting it where, if there is nothing in the input, a failure message occurs but only if I hit the enter key
http://ift.tt/1HnqYHU click the space in the lower right corner, then press enter. It shouldn't pop up, because the input is not focused.

login/failure jQuery:

$(document).ready(function(){
  $('.btn1').on('click', function(){
    var login = [marion, 'FATHER1'];

    var marion = $('#logging').val();
    marion = marion.toUpperCase();

    if (marion !== 'FATHER1' && $('#logging').val()) {
      alert('Login Failed');
  } else if (marion === 'FATHER1' && $('#logging').val()) {
    $('.notify').css('margin-top', '0');
      $('#logging').val('');
  }

  });
  $('.exit').on('click', function(){
    $('.notify').slideUp('slow');
  });
});