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');
  });
});

Show image background after video background autoplay

Hi i have a simple question about a video background function.

I want to show a photo background after video background is played; i have tried by adding a background image in the css but at the end of the video, the image is now shown.

Here the code

<video id="my-video" class="video" autoplay>
<source src="media/demo.mp4" type="video/mp4">
<source src="media/demo.ogv" type="video/ogg">
<source src="media/demo.webm" type="video/webm">
</video><!-- /video -->

<script>
(function() {
/**
 * Video element
* @type {HTMLElement}
*/
var video = document.getElementById("my-video");

/**
 * Check if video can play, and play it
*/
video.addEventListener( "canplay", function() {
video.play();
 });
 })();
</script>

thanks

Wordpress not installing index.html

I am trying to install a theme, but all the files in the theme are of .html extension. Due to which wordpress is not accepting index.html, I changed it to index.php, it was installed successfully this time, but the style was not applied. Can anyone help me how to solve this issue.

Menu tag in HTML5

I'm building a menu that allows users to edit an image - so color/crop buttons etc.

After looking through google, "menu" seems like the right choice.

But support appears to be limited to Firefox. I need support back to IE9.

What should I use instead?

Wow.js on elements with background images on Safari display incorrectly

I am using Wow.js on my site and it works fine on all browsers (even IE...) except Safari (running on windows). I am using Bootstrap 3.

I see the following error in the console:

MutationObserver is not supported by your browser.
wow.min.js:2WOW.js cannot detect dom mutations, please call .sync() after loading new content.

There is some mention of this issue here but it is in the context of loading content via AJAX which I am not doing.

Here's my markup:

<style>
    section#background-img{
        background: url("img.jpg");
        background-size: cover;
        background-attachment: fixed;
    }
</style>


<section id="background-img">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 wow fadeInUp" data-wow-duration="800ms">
                <h2>What I can do for you</h2>
                <h3>And how I can help your business grow</h3>
            </div>
        </div>
        <div class="row wow fadeInUp" data-wow-duration="800ms">
            <div class="col-sm-4">
                <!-- content removed for brevity-->
            </div>
        </div>
    </div>
</section>

It should look like this:

But instead I see this:

I use Wow.js elsewhere on this page which works fine. The problem seems to arise when I use background images.

how to download server side file javascript

We developing web sit.we have two textFiles in server http://ift.tt/1FZMNZM and http://ift.tt/1yKnduM .We need is When we button click we need download forTest1.txt file and then count 1 write to forTest2.txt Please guide me . We are new this

Infinite Scroll of Masonry is not working

I do have the following Sourcecode:

CSS

.item { float: left;}

.item.w2 { width:  100px; }
.item.w3 { width:  200px; }
.item.w4 { width:  300px; }

.item.h2 { height: 100px; }
.item.h3 { height: 200px; }
.item.h4 { height: 300px; }

PHP

<?php
$all = array();

$dir = "/www/htdocs/test/test.com/images";
chdir($dir);
array_multisort(array_map('filemtime', ($img = glob("*.*"))), SORT_DESC, $img);

for($i=0; $i<=count($img)-1; $i++)
{
    $name = $img[$i];
    list($wi, $he) = getimagesize($dir . "/" . $name);

    $all[$i]['url'] = $name;
    $all[$i]['reso'] = $wi;
}
?>

HTML

<div style="position: absolute; width: 100%;">
    <div style="position: relative; width: 100%; background-image: url(http://ift.tt/1J268zQ);">
            <div id="gallery-div" style="position: absolute; width: 100%; height: 2500px;">
            </div>
    </div>
</div>

<nav id="page-nav"> 
    <a href="http://ift.tt/1DCVg6Z"></a> 
</nav>

JAVASCRIPT

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

<script>
        $("#bg-top").css("height", $(window).height());

        var images = <?php echo json_encode($all); ?>;
        var buffer = "";

        // THIS PART PUTS ALL IMAGES INTO THE RIGHT DIVS
        for(i=0; i<= images.length-1; i++)
        {   
            var url = "http://test.com/images" + images[i]['url'];

            if(images[i]['reso']==100)
            {
                buffer += "<div class='item w2 h2'><img src='" + url + "'/></div>";
            }

            if(images[i]['reso']==200)
            {
                buffer += "<div class='item w3 h3'><img src='" + url + "'/></div>";
            }

            if(images[i]['reso']==300)
            {
                buffer += "<div class='item w4 h4'><img src='" + url + "'/></div>";
            }
        }

        // HERE ALL THE IMAGES WILL BE APPENDED TO #GALLERY-DIV
        $('#gallery-div').append(buffer);

$(function(){
    var $container = $('#gallery-div');

    // THIS WORKS PERFECTLY FINE!
    // Masonry + ImagesLoaded
    $container.imagesLoaded(function(){
        $container.masonry({
            // selector for entry content
            itemSelector: '.item',
            columnWidth: 100
        });
    });
    // UNTIL HERE ...

    // THIS DOES NOT WORK !!!
    // Infinite Scroll
    $container.infinitescroll({
        // selector for the paged navigation (it will be hidden)
        navSelector  : '#page-nav',
        // selector for the NEXT link (to page 2)
        nextSelector : '#page-nav a',
        // selector for all items you'll retrieve
        itemSelector : '.item',

        // finished message
        loading: {
            finishedMsg: 'No more pages to load.'
            }
        },

        // Trigger Masonry as a callback
        function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });

    });
    // UNTIL HERE ...
 });
</script>

And the Output of GALLERY.PHP is this

GALLERY.PHP

<div class='item'><img src='http://ift.tt/1wwssvZ'/></div>
<div class='item'><img src='http://ift.tt/1wwssvZ'/></div>

What i want to have now is the infinite scroll functions. When i scroll down to the bottom of the page the content of GALLERY.PHP should appear, but it doesnt. Everything else works perfectly fine, means also the MASONRY function to order the images. The only thing not running is the infinite scroll. When i scroll to the bottom nothing happens.

Save coordinates of image drawn on canvas in a variable/object-HTML5

I need to get the coordinates of the last drawn shape so as to be able to apply transformations such as scaling, rotating etc. to it. This is the part of the code i used to draw the shape:

function drawPolygon(position, sides, angle) {
var coordinates = [],
    radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
    index = 0;

for (index = 0; index < sides; index++) {
    coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
    angle += (2 * Math.PI) / sides;
}

context.beginPath();
context.moveTo(coordinates[0].x, coordinates[0].y);
for (index = 1; index < sides; index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
}

context.closePath();
context.stroke();
context.strokeStyle = strokeColor.value;

}

How can i save the coordinates for later use? Any help will be appreciated. Thanks.

How to automatically pause a video in html?

I am making a Starbuzz coffee Webpage, in which I am putting some videos. Whenever I come on that page, the video starts automatically. Even without me clicking on the play button. I want the video to only start when the user clicks on the play button.

Basically I want the video to be put in pause by default. I use Google Chrome. Is there a way to do that?

Select contenteditable span

I have a multiple <span> with contenteditable, I am trying to programmatically "select" a <span> and force into editable mode. But it seems I am having a lot of trouble doing this.

With <input> I can use

element.select();

but a <span> obviously does not have this method.

I need to use <span> has the content is designed to be copy/pasted out with a bunch of uneditable content which <input> does not allow the mix and matching when selecting all the code.

I could do a bunch of funky work with putting the content of the <input> into a hidden <span> within the content that is being copied/pasted out so it could fake that it would work, but I have everything else working as expected and it is almost a finished product and do not wish to rewrite everything as the only problem I have is knowing how to select the next <span> when necessary.

PS: prefer no jQuery for this question.

Crazy private memory usage when using css gradient

Can someone tell me why this uses such crazy amounts of private memory? Just at page load my task manager shows 300mb, and every button click that memory goes up a huge arbitrary amount, until it crashes. Tested on chrome.

JSFiddle: http://ift.tt/1GOQ5o8

<div id='main-box' class="BodyGradient BodyBorder" >
    <div id="muteBox1" onclick="moveBtnDown(this)" onmouseup="moveBtnUp(this)">
        MUTE
    </div>

var clickedFlag = false;

function moveBtnDown(btn) {
    clickedFlag = true;
    var top = $(btn).css('top');
    var left = $(btn).css('left');
    $(btn).css('top', parseInt(top) + 1);
    $(btn).css('left', parseInt(left) + 1);
}

function moveBtnUp(btn) {
    if (clickedFlag) {
        var top = $(btn).css('top');
        var left = $(btn).css('left');
        $(btn).css('top', parseInt(top) - 1)
        $(btn).css('left', parseInt(left) - 1);
        clickedFlag = false;
    }
}

#muteBox1 {
    position: absolute;
    color: #DEDEDE;
    font-family: sans-serif;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    top:175px;
    left:45px;
    width:60px;
    height: 30px;
    border-radius: 15%;
    border: 1px solid #DEDEDE;
    background-color: #808080;
    cursor: pointer;
}
div#main-box {
    position: absolute;
    margin: auto;
    left:0px;
    right:2px;
    top:0px;
    width: 1068px;
    height: 848px;
}
.BodyGradient {
    background: #495F5F;
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #495F5F), color-stop(1.2, #DEDEDD));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom left, #495F5F 0%, #DEDEDD 120%);
}
.BodyBorder
{
    border: #DEFFFD;/* solid 0px 3px 3px 0px;*/
    border-right: #676671 solid 5px;
    border-bottom: #4F4F55 solid 5px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

How to direct the direct access to the site resources using htaccess? but should work in normal load

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$ [NC] 
RewriteCond %{HTTP_REFERER} !^http://ift.tt/1g9d2Sy [NC] 
RewriteRule \.(jpeg|png|css|js)$ - [NC,F]

Here it blocks, but in normal loading the files are not able to load, only html contents are loaded, resources not appearing in page. Like images,css, js etc.

url pattern for html file in web.xml

we know how to set url pattern for servlet but I am unable to set url pattern for html in web.xml, can u help me to find solution, I googled but, can't able to get it, please find below for my problem.

<servlet>
    <servlet-name>Login</servlet-name>
    <servlet-class>auth.Login</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Login</servlet-name>
    <url-pattern>/login</url-pattern>
</servlet-mapping>

in above code I am setting url pattern for **Login** servlet class in web.xml, like wise can I able to set url pattern for html file in web.xml pls help to find solution thank you in advance

video.js - find the start time of a seek during playback

I am using video.js (http://www.videojs.com/) to build a video approval system and need to log user actions in the player. I can do this easily enough with play, pause, end etc. but have hit a problem when trying to log seeks.

I want to be able to log the start and end times of any seeks within the plaback, so we know if the user has not actually watched a section of the video. The player seems to offer events to support this, but I am struggling to get correct timings from it.

When the user skips through a video the player emits the following events in order: pause, seeking, seeked, play.

If I query the player object at any of these events using currentTime() the result is always the end time for the seek, even on the initial pause event. This means I can log where the seek ended but not where it started.

Can anyone help me to find the position in the video where the seek begins?

If this is not possible, I'd settle for a way to disable seeking during playback.

EDIT: adding code as requested. It's pretty simple:

var trackedPlayer = videojs('pvp-player');

trackedPlayer.on("play", function (e) {
    console.log("Video playback started: " + trackedPlayer.currentTime());
});

trackedPlayer.on("pause", function (e) {
    console.log("Video playback paused: " + trackedPlayer.currentTime());
});

trackedPlayer.on("seeking", function (e) {
    console.log("Video seeking: " + trackedPlayer.currentTime());
});


trackedPlayer.on("seeked", function (e) {
    console.log("Video seek ended: " + trackedPlayer.currentTime());
});

trackedPlayer.on("ended", function (e) {
    console.log("Video playback ended.");
});

If I can get all the tracking I want I will replace console.log with ajax calls to store the data.

How can i make an app that will work for desktop windows and IOS with phonegap?

I want to be able to access folders and files via my app, the problem is, when i want to access files on the desktop, i have to run it from a server or at least to emulate one using a program like xampp. I know PhoneGap has it's own API to access files, but i need to make the app work on desktop too, and i don't mind it to be as normal offline website ( via index.html, not an exe ), but i still need to solve the security issues, i can't tell clients to run it from a server...

The big idea after it, is that i need the app to check for new files in the server, if there are any, to download them. Also, i want the app to be able to access those downloaded files when it is offline as well.

I guess using only phonegap in ios will solve this, but i still need it to work on windows desktop as well.

Phone doesn't vibrate if screen is locked when using HTML5 Vibration API

I have a website (app, but still in browser only), where I've implemented some vibrations on particular events using HTML5 Vibration API.

All works fine until screen is locked. Then the vibration stops and if it's continuous - continue when I unlock the screen again. Any ideas?

I've tested on Android 4.2.2, and Chrome Mobile 42 (version 42.0.2311.108).

How to link galary to uploads folder

I have a image slider with an uploads folder. When I upload into the slider, it goes into the uploads folder.

How can I make my galary collect the images and display within a container?

My code is here:

code previously posted on stack overflow

html5 video not starting

I'm trying to use a video as a background for my div. I've loaded the mp4 version of the video into my server, inside the public folder. When I load the page the video doesn't seem to be there since it's all white, but when I try another video from another website this works fine. Is there something I need to do while loading the video into my server or there is something wrong with my code?

<body>
 <video id="bgvid" controls="controls" autoplay muted>
     <source src="http://MyUrl/public/video.mp4" type="video/mp4">
 </video>
 <div class="overlap">
     <div class="overlapalign"><div class="overlaptext">OVER TEXT</div></div>
 </div>
</body>

click function was executed everytime the document is loaded

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>click demo</title>
  <script src="http://ift.tt/1rfghyb"></script>
</head>
<body> 
<script>
    for(var c=1; c<=5; c++){
        var btn = $("<button>Button "+c+"</button>");
        btn.click(new function(){
            alert("You click button "+c);
        });
        $("body").append(btn);
   }
   </script>
</body>
</html>

Can someone explain to me why the click function get executed everytime the page is loaded? I am expecting the button to show an alertbox when it is clicked but unfortunately nothing happens! Any idea?

How to place pie charts instead of markers in kendo ui maps

I need to create a map widget using kendo map UI .I have to replace the markers with pie chart like this . Is it possible to create a map widget using kendo ??? , If it is possible how can I do that .I dont know how to make this I'm new to Kendo. Please Help me...

How Do I Use My Own Buttons For Google Login And Facebook Login?

How do i use my own buttons for google login and facebook login?

This is my current code, Hide Copy Code

 <span id="signinButton">          
          <span
            class="g-signin"
            data-callback="signinCallback"
            data-clientid="XXXXXXXXXXXXXXXX"
            data-cookiepolicy="single_host_origin"
            data-requestvisibleactions="http://ift.tt/1jv0cif"
            data-scope="http://ift.tt/18tkxUQ">
          </span>
        </span><br />
            <fb:login-button  size="large" >  Sign   In </fb:login-button>

but these buttons are coming in different size. So i want to add two other buttons which will trigger these actions, Hide Copy Code

<input type="button" class="btn btn-primary" value=""Connect with facebook> //Clicking on this button should trigger fb:login-button
<input type="button" class="btn btn-danger" value=""Connect with Google>/Clicking on this button should trigger google button

I have seen some sites using their on buttons for google\facebook login. How do i do this?

Text on a image

I am working on a project where I have to set the text on an image. After setting the text on image, I am saving the picture. But the written text on the image is not displaying after saving. I need that the image should be saved with the over written text.
Here is my HTML Code so far:

    .image {
      position: relative;
      width: 100%;
    }
    h2 {
      position: absolute;
      top: 200px;
      left: 0;
      width: 100%;
    }

<!Doctype html>
<html>

<head>
  <title>Hello World</title>

</head>

<body>
  <div class="image">
    <img src="attraction/a.jpg" alt="" />
    <h2>Good friends are like stars</h2> 
  </div>
</body>

</html>

Write (0,0) in center of the canvas-HTML5

I'm currently developing a drawing app which allows the user to click and drag to determine the size of the shape and also be able to make transformations with the shape drawn. This is the screenshot of what i have till now:

I positioned the axis in the center of the canvas but now i want to write (0,0) in the center. As you can see, the CSS i wrote only makes it appear at the top but i want it at the center. Here's my codes for the transformation.html:

    <!DOCTYPE html>
    <head>
         <title>Drawing Application</title>
         <link href="transform.css" rel="stylesheet">

    </head>

    <body>

    <canvas id="myCanvas" width="1000" height="500"></canvas>
    <span style="margin-left:820px; margin-top:500px;">(0,0)</span> <!--tried with some CSS-->
    <br><output id="out"></output>
    <script src="transform.js"></script>
    <div id="shapeProperties">
    <p>
    <label>
    <div id="shape">
    <p><b>Fill shapes option:</b> <input type="checkbox" id="fillType"></b><br/>
    <p><b><center><u>Shapes</u></center></b>&nbsp; &nbsp;

    <p>Polygon&nbsp;<input type="checkbox" id="polyBox"><br/>

    </div>

    <div id="color">
    <b><p><center><u>Color Properties</u></center></b><br/>
    <p>Fill Color&nbsp;<input type="color" id="fillColor" value="#000000"/><br/>
    <p>Stroke Color&nbsp; <input type="color" id="strokeColor" value="#000000"/><br/>
    </div>
    <div id="range">
    <b><p><center><u>Other Properties</u></center></b><br/>
    <label>Polygon Sides&nbsp; <input type="range" id="polygonSide" step="1" min="3" max="9" value="3"></label>
    </div>
    <div id="clear">
    <p> <center><input id="clearCanvas" type="button" value="CLEAR"></center></p>
    </div>
    </label>
    </p>
    </div>

    </body>

    </html>

How can i do this? If you need the transformation.js please let me know. Any suggestions will be appreciated. Thanks.

Incorrect codec parameters for webm conversion

I am using a shared hosting server with ffmpeg installed. i have been told they cant upgrade the version I have. I am trying to convert video files to html5 formats. When I try to convert to webm, I get below error. Can anyone help with this problem?

exec("/usr/bin/ffmpeg -i eliza.mp4 -acodec copy -vcodec copy 2>&1 video.webm");

    array(29) { [0]=> string(67) "FFmpeg version 0.6.5, Copyright (c) 2000-2010 the FFmpeg developers" 
[1]=> string(74) " built on Jan 29 2012 23:55:02 with gcc 4.1.2 20080704 (Red Hat 4.1.2-51)" [2]=> 
string(649) " configuration: --prefix=/usr --libdir=/usr/lib64 --shlibdir=/usr/lib64 
--mandir=/usr/share/man --incdir=/usr/include --disable-avisynth --extra-cflags='-O2 -g -pipe 
-Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 
-mtune=generic -fPIC' --enable-avfilter --enable-avfilter-lavf --enable-libdirac --enable-libfaac 
--enable-libfaad --enable-libfaadbin --enable-libgsm --enable-libmp3lame --enable-libopencore-amrnb 
--enable-libopencore-amrwb --enable-libx264 --enable-gpl --enable-nonfree --enable-postproc 
--enable-pthreads --enable-shared --enable-swscale --enable-vdpau --enable-version3 
--enable-x11grab" [3]=> string(35) " libavutil 50.15. 1 / 50.15. 1" [4]=> string(35) " 
libavcodec 52.72. 2 / 52.72. 2" [5]=> string(35) " libavformat 52.64. 2 / 52.64. 2" 
[6]=> string(35) " libavdevice 52. 2. 0 / 52. 2. 0" [7]=> string(35) " libavfilter 1.19. 0 / 1.19. 0" [8]=> 
string(35) " libswscale 0.11. 0 / 0.11. 0" [9]=> string(35) " libpostproc 51. 2. 0 / 51. 2. 0" [10]=> 
string(52) "Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'eliza.mp4':" [11]=> string(11) " Metadata:" [12]=>
string(26) " major_brand : mp42" [13]=> string(23) " minor_version : 0" [14]=> string(35) " compatible_brands: 
mp42isomavc1" [15]=> string(48) " encoder : HandBrake 0.9.4 2009112300" [16]=> string(59) " Duration: 
00:00:05.56, start: 0.000000, bitrate: 551 kb/s" [17]=> string(94) " Stream #0.0(und): Video: h264, 
yuv420p, 560x320, 465 kb/s, 30 fps, 30 tbr, 90k tbn, 60 tbc" [18]=> string(62) " Stream #0.1(eng): 
Audio: aac, 48000 Hz, mono, s16, 83 kb/s" [19]=> string(72) "[webm @ 0x7200a0]Only VP8 video and 
Vorbis audio are supported for WebM." [20]=> string(33) "Output #0, webm, to 'video.webm':" 
[21]=> string(11) " Metadata:" [22]=> string(33) " encoder : Lavf52.64.2" [23]=> string(89) " 
Stream #0.0(und): Video: libx264, yuv420p, 560x320, q=2-31, 465 kb/s, 90k tbn, 30 tbc" [24]=> 
string(61) " Stream #0.1(eng): Audio: libfaac, 48000 Hz, mono, 83 kb/s" [25]=> string(15) 
"Stream mapping:" [26]=> string(21) " Stream #0.0 -> #0.0" [27]=> string(21) " Stream #0.1 -> 
#0.1" [28]=> string(72) "Could not write header for output file #0 (incorrect codec parameters ?)" } 

issue of re-call plugin fs.zoomer plugin for dynamic images

• my Jquery Code for getting Images and adding ui-li-img tages:

$(document).ready(function() {
  $.ajax({
        url: "localpath/folder/",
        success: function(data){
        $(data).find("a:contains(.jpg)").each(function(){
        var images = $(this).attr("href");
        Array.push(images);
        });
        $('<ul id="imgul" />').appendTo('#imagesDiv');
   //here create dynamic ui-li-ima tage append to div
        for(var i=0;i<Array.length;i++)
        {
            $('<li>').append($('<img  class=""img-responsive/>').attr('src',"herepath" )).appendTo('#imgul');
        }
        });
       $(".demo .zoomer_basic").zoomer();// call plugin
     });
 function buttonClicked(){
  $("#imagesDiv").empty();
$(".demo .zoomer_basic .zoomer_tiled").empty();
  $.ajax({
        url: "localpath/folder-1/",
        success: function(data){
        $(data).find("a:contains(.jpg)").each(function(){
        var images = $(this).attr("href");
        Array.push(images);
        });
        $('<ul id="imgul" />').appendTo('#imagesDiv');
        for(var i=0;i<Array.length;i++)
        {
            $('<li>').append($('<img  class=""img-responsive/>').attr('src',"herepath" )).appendTo('#imgul');
        }
        }); 
     $(".demo .zoomer_basic").zoomer();//recall plugin
 }

• My Html Code :

<script src="/jquery.fs.zoomer.js"></script>  
<div class="zoomer_basic" id="imagesDiv"></div>

And button code:

• Here initial page loding images getting forward,next,zoom controls worked corectly.
• Here i got issue is when i click on button and called buttonClicked() function for loading other images then zoom controls and plugin controls not worked only images showing..and i tried look into fs.zoomer.js but may be old images effecting and how to remove these from plugin.
  • used plugins are plugin and fs.zoomer.js

FabricJS - referencing after loading serialized canvas

I serialize my canvas with the following code:

var user_canvas = JSON.stringify(canvas.toDatalessObject());

All works fine. I then load the serialized canvas with the following code where 'serial' is the var for the serialized canvas:

canvas.loadFromJSON(serial,canvas.renderAll.bind(canvas));

All elements are displayed on the page as expected. From here though I cannot figure out how to reference these objects, canvas.getObjects() comes up as a blank array, however if I console.log(canvas) I can see the elements inside, I just cannot reference them. How can I do this?

How to set height on canvas after filled some text?

I'm filling canvas with some dynamic texts in ArrayList. And I set the height as length of ArrayList like ArrayList.length * 20 or something like that.

HTML:

<canvas id="myCanvas" width="272px" style="border: 1px solid black"></canvas>

JS :

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var myheight = 10;
for(var i = 0; mylist.length > i; i++){
     context.fillText("my text", 10, myheight);
     myheight += 10;
}

loop works fine, texts are filled.. and I'm trying to calculate the canvas.height after the loop.

When I set canvas.height = myheight and all filled texts are gone.. canvas gone blank.

How can I set height after canvas filled by texts dynamically?

Help me.. Thank you.. And sorry for bad English..

HTML5 Offline Application: How to view TIFF files from localStorage (FileSystem API)

I have a potential customer who wants an application that can download large amounts of TIFF files locally on a machine for display.

After having discarded Java apps and Windows apps as too difficult to distribute (he has no control over the client computers) I am suggesting an offline HTML5 application.

TIFF is only natively displayed by Safari, and the FileSystem API only works on Google. WebSQL will be too small for the amount of data required (3-4 GB).

I've looked at different plug-ins (AlternaTIFF and BlackIce) but both need to be installed separately, which most of the users will probably find difficult to do.

I am wondering if there was a local TIFF Viewer that I could call from the browser that would open the TIFF from the FileSystem?

If this does not work, the last solution would be a conversion of the TIFFs to something else on the server, but it's going to make my database double in volume.

Any suggestions would be welcome!

UPDATE:

The target computers are not under the control of the client. There is no easy way to distribute the software to all the target computers. I'm assuming they are all windows machines, but it's no guarantee that .NET is installed.

That's the reason I opted for HTML5. At the moment I'm considering a Java Application launched with Java Web Application.

Customer has not yet confirmed the type of files they are using.

The customer is in the construction industry, the TIFFs are scans of large plans which (I assume) will need to be high-quality (zoomable, printable etc) so I don't think a rescaling to JPG will be accepted.

SECOND UPDATE

I'm coming to the conclusion that an HTML5 App is not going to be able to answer all the requirements. In particular there is one requirement that requires a multi-document print (select n documents and have them printed out in a batch). I'm starting to consider standalone applications that can be deployed and updated easily over a wide range of Windows configurations. I'm thinking of a Java Rich Client distribution over Java Web Start or a Microsoft application distributed via one-click-run. I'd simply write the files on the local filesystem and have the client display the images in-line. Would that be a good idea?

How to create road lines using HTML5 canvas

I have created a road using canvas. There I wish to add lines in the middle. Also width, height and gap between lines must be increase accordingly.

<canvas id="myCanvas" width="578" height="500"></canvas>

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var j = 0;
    for(var i = canvas.height*.30; i< canvas.height; i=i+20){
        context.beginPath();
        context.rect(canvas.width*.50, i-j, 3+j, 10+(j*2));
        context.fillStyle = '#000000';
        context.fill();
        j++;
    }

But I couldn't make it by above code. Please help me to solve this. jsfiddle

carousel image in big screen

i just deploy an website using bootstrap framework with a fluid-container all is fine but the problem is when i open the homepage in big screen with resolution > 1700px like 1920 ... the image in carousel squeezed and get stretched
how can i put a carousel to show in all kind of screen without having problem with image (stay with a good ratio)

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;

}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it     into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* wen bi bayen l div l */
/* Carousel base class */
.carousel {

  height: 300px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 350px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 350px;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

jQuery mobile and html5 location permission and values

I am trying to make a android webview app to use the user geoLocation :

if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition,showError,{maximumAge:60000, timeout:20000, enableHighAccuracy:true}); 
        console.log("Location supported")
        }

To show the position on success :

    function showPosition(position) {
            currentLatitude = position.coords.latitude;
            currentLongitude = position.coords.longitude;
                console.log( "In show :  " + position.coords.latitude + ", " +position.coords.longitude)
      }   

To show the error code :

    function showError(error) {
      var x = $('#curr_loc_target');
        console.log("In show Error");
      switch(error.code) {
        case error.PERMISSION_DENIED:
          console.log("permission denied"); 
          break;
        case error.POSITION_UNAVAILABLE:
          console.log("Location information is unavailable.");
          break;
        case error.TIMEOUT:
          console.log("The request to get user location timed out.");
          break;
        case error.UNKNOWN_ERROR:
          console.log("An unknown error occurred.");
          break;
        }

It works fine on any desktop web browser but not and mobile browser, there are to problems that : 1- The app don't ask the user for permission the use Location and the error from showError function is TIMEOUT,i think the webview code is irrelevant because even on a mobile browser the problem is the same.

2- The values in longitude , latitude are equal to ' '. If anyone think that i need to add it here, i will.

Thank for any help!

Unrecognized option from ffmpeg converting to html 5 video on upload

I am gradually getting the hang of video conversion with ffmpeg but am stuck. I am on shared hosting. I can convert with simple code like -

ffmpeg -i out.avi -acodec copy -vcodec copy output.mp4

I need to convert to html5 video formats but whenever i use code like this, I always get the same type of error 'Unrecognized option c:v' or 'Unrecognized option b'. Is my version of ffmpeg too old? Please help.

exec("/usr/bin/ffmpeg -i input -c:v libx264 -preset slow -crf 18 -vf yadif -strict -2 output.mp4");



    array(31) { [0]=> string(67) "FFmpeg version 0.6.5, Copyright (c) 2000-2010 the FFmpeg developers"
 [1]=> string(74) " built on Jan 29 2012 23:55:02 with gcc 4.1.2 20080704 (Red Hat 4.1.2-51)" 
 [2]=> string(649) " configuration: --prefix=/usr --libdir=/usr/lib64 --shlibdir=/usr/lib64 
 --mandir=/usr/share/man --incdir=/usr/include --disable-avisynth --extra-cflags='-O2 -g -pipe 
 -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 
 -mtune=generic -fPIC' --enable-avfilter --enable-avfilter-lavf --enable-libdirac --enable-libfaac 
 --enable-libfaad --enable-libfaadbin --enable-libgsm --enable-libmp3lame --enable-libopencore-amrnb 
 --enable-libopencore-amrwb --enable-libx264 --enable-gpl --enable-nonfree --enable-postproc 
 --enable-pthreads --enable-shared --enable-swscale --enable-vdpau --enable-version3 --enable-x11grab" 
 [3]=> string(35) " libavutil 50.15. 1 / 50.15. 1" [4]=> string(35) " libavcodec 52.72. 2 / 52.72. 2" 
 [5]=> string(35) " libavformat 52.64. 2 / 52.64. 2" [6]=> string(35) " libavdevice 52. 2. 0 / 52. 2. 0" 
 [7]=> string(35) " libavfilter 1.19. 0 / 1.19. 0" [8]=> string(35) " libswscale 0.11. 0 / 0.11. 0" 
 [9]=> string(35) " libpostproc 51. 2. 0 / 51. 2. 0" [10]=> string(72) "[flv @ 0xb278b0]Estimating 
 duration from bitrate, this may be inaccurate" [11]=> string(0) "" [12]=> string(99) "Seems stream 0 
 codec frame rate differs from container frame rate: 1000.00 (1000/1) -> 25.00 (25/1)" [13]=> string(42) 
 "Input #0, flv, from 'destinationfile.flv':" [14]=> string(11) " Metadata:" [15]=> string(23) " duration : 
 6" [16]=> string(25) " width : 320" [17]=> string(25) " height : 240" [18]=> string(25) " videodatarate : 
 195" [19]=> string(24) " framerate : 25" [20]=> string(23) " videocodecid : 2" [21]=> string(24) " 
 audiodatarate : 31" [22]=> string(27) " audiosamplerate : 22050" [23]=> string(24) " audiosamplesize : 
 16" [24]=> string(27) " stereo : false" [25]=> string(23) " audiocodecid : 2" [26]=> string(28) " 
 filesize : 352720" [27]=> string(59) " Duration: 00:00:05.64, start: 0.000000, bitrate: 232 kb/s" 
 [28]=> string(79) " Stream #0.0: Video: flv, yuv420p, 320x240, 200 kb/s, 25 tbr, 1k tbn, 1k tbc" 
 [29]=> string(63) " Stream #0.1: Audio: mp3, 22050 Hz, 1 channels, s16, 32 kb/s" [30]=> string(25) 
 "Unrecognized option 'c:v'" }

HTML5 canvas-Drawing on axis positioned in the center on the canvas

I'm trying to draw on a canvas which already has an axis drawn on it. I need to draw a polygon n sides on either side of the axis. When i click and drag on the canvas, the shape needs to appear but it's not working. Here's the codes for the transform.html:

<!DOCTYPE html>
<html>
<head>
 <title>Drawing Application</title>
</head>
<body>
<center>
<canvas id="myCanvas" width="1100" height="550"></canvas>
<br><output id="out"></output>
</center>
<div id="controls">
  <p><input type="radio" name="shape" value="polygon">Polygon</p>
</div>
<p><label>Polygon Sides: <input id="polygonSides" type="range" step="1" min="3" max="10"></label></p>
<script src="transform.js"></script>
</body>
</html>

The transform.js:

var canvas, ctx;

canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");

var transX = canvas.width * 0.5;
var transY = canvas.height * 0.5;


ctx.translate(transX, transY);

ctx.fillRect(0, -transY, 1, canvas.height);
ctx.fillRect(-transX, 0, canvas.width, 1);

function dragStart(event) {
dragging = true;
dragStartLocation = getCanvasCoordinates(event);
takeSnapshot();
}

function drag(event) {
var position;
if (dragging === true) {
    restoreSnapshot();
    position = getCanvasCoordinates(event);
    draw(position, "polygon");
}
}

function dragStop(event) {
dragging = false;
restoreSnapshot();
var position = getCanvasCoordinates(event);
draw(position, "polygon");
}

canvas.onmousemove = function(e) {
var pos = getMousePos(canvas, e);
out.innerHTML = 'X:' + pos.x + ' Y:' + pos.y;    
}

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
    x: evt.clientX - rect.left - transX,
    y: evt.clientY - rect.top - transY
};
}

function drawPolygon(position, sides, angle) {
var coordinates = [],
    radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
    index = 0;

for (index = 0; index < sides; index++) {
    coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
    angle += (2 * Math.PI) / sides;
}

ctx.beginPath();
ctx.moveTo(coordinates[0].x, coordinates[0].y);
for (index = 1; index < sides; index++) {
    ctx.lineTo(coordinates[index].x, coordinates[index].y);
}

ctx.closePath();
}


function draw(position) {

var shape = document.querySelector('input[type="radio"][name="shape"]:checked').value,
    polygonSides = document.getElementById("polygonSides").value;

if (shape === "polygon") {
    drawPolygon(position, polygonSides, Math.PI / 4);
}

else {
    ctx.stroke();
}
}

canvas.addEventListener('mousedown', dragStart, false);
canvas.addEventListener('mousemove', drag, false);
canvas.addEventListener('mouseup', dragStop, false);

I can't find my mistake. Please help.

Create a working submit button for form to send email

How can I write a code to create a working submit button where somebody click the submit button on my page and that data goes to my working email id for example to smrithikollam@gamil.com.

"Not preferring JavaScript.. Prefer to write code in HTML 5 & CSS3 "

---

Here is the HTML code for my form

<div id="forms">
    <form class="form">

        <p class="name">
            <input type="text" name="name" id="name" placeholder="Enter Your Name" />
        </p>

        <p class="email">
            <input type="text" name="email" id="email" placeholder="mail@example.com" />
        </p>

        <p class="web">
            <input type="text" name="web" id="web" placeholder="9876 543 210" />
        </p>        

        <p class="text">
            <textarea name="text" placeholder="Write something to us" /></textarea>
        </p>

        <p class="submit">
            <input type="submit" value="Send" />
        </p>
    </form>
</div>

---

and Here is my CSS code for submit button

.submit input {
    width: 100px; 
    height: 40px;
    background-color: #474E69; 
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;     
}

Adding elements when button is clicked

JavaScript:

    <script type="text/javascript">

    function createRow() {
        var d = document.createElement("section");
        d.className = "gallery-row";
        document.getElementById("gallery").appendChild(d);

    }

    </script>

HTML:

    <section id="container-main">
        <section id="gallery">
            <section class="gallery-row">
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
            </section>
            <section class="gallery-row">
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
            </section>
            <section class="gallery-row">
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
                <img src="../images/circles/myresume-a.png" alt="image" width="150px" height="150px" />
            </section>
        </section>
        <section id="load-more"><button onclick="createRow();">Load More</button></section>
    </section>

The Problem:

Simply put, the script does not create a section element after the last element in the section with the ID "gallery" as intended. I've been struggling with this for hours and I'm not sure how to proceed. If someone could point out what I am doing wrong, I would appreciate it. I've looked over documentation, but to no avail.

image slider making problems on mobile view

So i'm trying to make a full screen slider (fits auto to every screen-using the VH units)

anyway it's working great on most browsers . but when i enter the website on my Samsung galaxy I get this weird problem that the : fixed menu is getting wider and thinner as the animation proceed .

another weird thing that maybe will help:

if you open the mobile menu and then close it , the problem disappears !

i've tried playing with the width (100% / 100vw) but noting helps..

here is the website:

short url: http://goo.gl/EOoXoZ

css:http://ift.tt/1HIm4Wl

Thanks in advance guys and enjoy the slider :) (work of mine and another dude who wrote a full screen slider)

BOOTSRAP 3 vertical-align

Using Boostrap 3, I'm struggling with vectical alignment of DIV. I'm quite lost with all the different css DISPLAY types.

I have a piece of code with a responsive image taking the full viewport. There is a TITLE displayed in the center of the page.

This is a leagacy code. You can find it in CODEPEN here: http://ift.tt/1G8ozPK

Now I would like to add another DIV with a content that would display at the bottom of the image (bottom of the viewport). I tried adding the DIV with some CSS to put it at the bottom. But could not succeed. I think BOOSTRAP is floating left the elements. So I tried with a css snipped like this:

display: inline-block;
vertical-align: bottom;
float: none;

I'm pretty sure I'm misusing the display type.

Here is the CODEPEN attempt: http://ift.tt/1H3Txvg

Any hint or help would be appreciated.

Smooth html5 compass movement

I'm trying to smooth the compass movement of an app using the HTML5 Compass API.

I understood I need to make a low-pass filter, I found this wich seems to be perfect http://ift.tt/1DAaQjA :

onSensorChanged(angle) {
 lastSin = smoothingFactor * lastSin + (1-smoothingFactor) * sin(angle)
 lastCos = smoothingFactor * lastCos + (1-smoothingFactor) * cos(angle)
}

getAngle() {
 return atan2(lastSin, lastCos)
}

but I can't make it work using javascript.

Currently I have something like that :

var compass = document.getElementById('compass');
if(window.DeviceOrientationEvent) {
 window.addEventListener('deviceorientation', function(event) {
  alpha = event.alpha;
  compass.style.Transform = 'rotate(' + alpha + 'deg)';
 }
}

Any suggestions appreciated.

How can I connect my python script with my HTML file?

Basically I am getting some data from a webpage, and putting it into an array, I want to output the contents of that array into a table in a HTML file. After some research I found that using a mako template might be the best solution, but I don't understand how to use it? Can any one guide me through the steps or offer a better solution to execute this python script and output its result on the web?

import urllib2
import mako
from bs4 import BeautifulSoup as BS

html = urllib2.urlopen("<link-to-web-page>")
soup = BS(html)
data = []


for each_course in soup.findAll('li',{'class':'<class-name>'}):
    inner_text = each_course.text
    data.append(inner_text)


for i in data:
    print (i+"\n")

Passing a parameter to a url using javascript or html5

Newbie here.... I have an html5 and javascript webpage where a user can select an image by pausing a video. I display a thumbnail of the image displaying at the pause time, and the image either side of it in case the timings are tricky. This works well. Now I have three variables that hold the name of the .jpg files selected (there are 217 of them). I want to open a new web page and pass it the .jpg filename of the image the user has clicked to order a print. I have looked at many ways to pass variables to urls: query strings, sessionStorage, form with link method and others. All of them tell me how to pass a text string, which works fine. How do I pass a variable?

For example, the statements below works fine, but the sessionStorage returns null.

var nextImg = "VideoImages/sniperImg" + i + ".jpg";
document.getElementById("threeOfThree").src = nextImg; //this works 
sessionStorage.name=nextImg; //this does not

Another example:

<a href="OrderPrint.html?imgSel=preImg"
  img id="oneOfThree" src="" width="226" height="300" >
</a>

This works OK if I specify a text string like "?image.jpg", but not if I specify the variable name.

I am sure the answer is obvious to others, but I would really value some help here.

JQuery Mobile app, make a mobile call with HTML 5

I am using JQuery Mobile with Phonegap and I am trying to create a button and when I click it a phone call should be made. I have mad a lot of research for this problem and I have found the following solution

<a href="tel:+123456789">Call</a>

or

<a href="#" onclick="window.open('tel:+123456789', '_blank', 'location=yes');" data-role="button">Call</a>

This solution is working on browsers (is asking me to open Skype) but when I run it on Android with a Samsung Galaxy S2 is not working. It is not doing anything.

I have tried to add to the config.xml file the following permission:

<access launch-external="yes" origin="tel:*" />

but is not working either. If you have any solution to suggest please do so. Thank you!

HTML5 data attribute access using jquery

Which is the difference between code bellow?

$("demo").data("title");

and,

$("demo").attr("data-title");

or both are same?

jQuery audio playlist plugin support advertisements

I want a jquery plugin that make html5 or flash audio playlist and support advertisement

for ex : ( i have a playlist consist of 3 mp3 songs , i want before each song , an advertisement work automatically and user can skip it , this adv normally mp3) ... Like youtube advertisements before playing video and can skip add , but in my case , i want it in audio only

i'm already used "Jplayer"

new jPlayerPlaylist({
          jPlayer: "#jquery_jplayer_1",
          cssSelectorAncestor: "#jp_container_1"
        }, [
          {
            title: "Cro Magnon Man",
            mp3: "http://ift.tt/1uXWlCZ",
            oga: "http://ift.tt/1D8PYN8"
          },
          {
            title: "Thin Ice",
            mp3: "http://ift.tt/1FZdxPx",
            oga: "http://ift.tt/1D8Q1sr"
          }
        ],
                {
                  swfPath: "../../dist/jplayer",
                  playlistOptions: {
                    enableRemoveControls: true
                  },
                  supplied: "oga, mp3",
                  wmode: "window",
                  useStateClassSkin: true,
                  autoBlur: false,
                  smoothPlayBar: true,
                  keyEnabled: true,
                });

but i cannot customize in it and make an automatic advertisement

if any one can help me to customize in jplayer or tell me another jquery pulgin

Thanks

HTML5 audio tag won't play MP3s in iPhone browsers

I'm not talking about autoplay or anything like that.

This will not play when the user clicks the play button:

<audio controls>
  <source src='/file.mp3' type='audio/mpeg'>
</audio>

Also, when navigating directly to the file it still won't play nor will it prompt for download.

The files are being served via Google Cloud Storage. The MIME types are set properly.

This all works on Android, so what gives? Any ideas?

responsive VIdeo background odd behavior in Mobile

I built a page where I have a video playing in the background of my page. It works find on desktop but on mobile, I am having some issues I cannot seem to iron out. For mobile phones, what should happen is instead of playing the video , it puts in a poster image in its place, Which it does, however I am getting a black color overlaying this poster image on the top part of my page, you can kind of see the poster image sneaking a view (when you scroll the page, but when you stop the black color covers up the poster image again).... as you scroll down the page, you will notice that the background poster image is there showing up fine, but I just cant figure out where the black color thats covering up the top part is coming from and how to fix it.

Here is my page url: http://ift.tt/1O5D1z4

Go ahead and view it on desktop, then go ahead and view it on mobile phone, you should notice the weirdness I am speaking of.... so basically, on mobile if you scroll towards the bottom of the page, you will see my "orange particles" poster image showing under some dummy text, as it should, well the same thing should be happening at the top of the page, but instead its all black

Please help!

HTML5, Knockout url redirect function

I have created an HTML5 application which uses knockoutjs to make call to a restful service and get/post JSON messages. This is my first application using HTML5 so I am not sure how to implement a URL redirect.

In the application I have two html pages, one is a DataGrid page which shows all the data received by doing a get rest call. I have added a hyperlink to one the field in the display which I would like to use to redirect to the details page and make the rest call to get data for that particular id and display it in the editable page later would like to save the changes.

UserGridPage.html

<tbody data-bind="foreach:userList">
<tr>
<td><a data-bind="attr:{href: userInfoUrl()}, text:userInfoId"></a></td>
<td data-bind="text: UserName" ></td>
</tr>

UserGridPage.js

MyUserInfoViewModel = function () {
var self = this;
self.userList = ko.observableArray();
$.getJSON("http://localhost:8080/user/webresources/userinfo/").
        then(function (userinfos) {
            $.each(userinfos, function () {
                self.userList.push({
                           userInfoUrl:ko.observable('/USERUI/UserEntry.html#'+this.userInfoId),
                    userInfoId:ko.observable(this.userInfoId),
                    policyHolderEmail: ko.observable(this.policyHolderEmail),
                });
            });
        });

I would like to know how can UserEntry page would know which Id is getting passed to its page and also how would I make the rest call to have the Id passed to the restful URL.

Appreciate any help with code samples, links etc..

Thanks

HTML5 Canvas Drawing in Real Time

Question: How can I make putImageData() update the canvas in real time, as various parts of the image have been computed?

---

I am working on a JavaScript/TypeScript application to draw the Mandelbrot set on an HTML5 <canvas> element. Math and details aside, my application draws the set just fine. However, if you are familiar with visualizing the set, you know that it can take a long time to draw.

It will draw in a few seconds, but until then, the canvas is completely blank, then the image appears. I'm looking for a way to draw each row as it is computed using putImageData(). Here is what I am trying:

// part of the class definition
private Context: CanvasRenderingContext2D;
private ImageData: ImageData;
private Pixels: number[];

constructor() {
    var c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("can");

    this.Context = c.getContext("2d");
    this.ImageData = this.Context.createImageData(this.Size.Width, 1);
    this.Pixels = this.ImageData.data;
}

public draw() {
    for(var i: number = 0; i < this.Size.Height; ++i) {    // Loop over each row
        for(var j: number = 0; j < this.Size.Width; ++j) { // Calc px. for one row
            // all the math to compute the set... (works)

            this.setPixelColor(j, color); // sets a color in this.Pixels (works)
        }

        this.Context.putImageData(this.ImageData, 0, i); // Draw the row on the canvas?
    }
}

Somehow, the putImageData() function, which is called after a row in the image has been computed, only shows the image after the entire image has been generated.

How can I make putImageData() update the canvas in real time, as each row has been been computed?

How to change background-repeat and background-size by javascript

I currently have this and it's working for me:

<script type='text/javascript'>
            $(function () {
                var body = $('body');
                var backgrounds = [
                  'url(http://localhost:12448/css/images/back1.jpg) no-repeat',
                  'url(http://localhost:12448/css/images/back2.jpg) no-repeat'];
                var current = 0;

                function nextBackground() {
                    body.css(
                        'background',
                    backgrounds[current = ++current % backgrounds.length]);

                    setTimeout(nextBackground, 5000);
                }
                setTimeout(nextBackground, 5000);
                body.css('background', backgrounds[0]);               
            });
</script>

I need to implement also this part of css code in to my javascript, so i can get dynamically changing background and the same css settings as it changes:

body
    {
        background-image:           url('images/overlay.png'),      url('images/bg.jpg');
        background-repeat:          repeat,                         no-repeat;
        background-size:            auto,                           100% 100%;
    }

Can anyone help me with this?

How can I embed my own .mov in to a web page ?

I just exported a .mov file from Final Cut Pro. I want to embed that video into my HTML. I tried :

<object width="800" height="600"
    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    codebase="http://ift.tt/wPlsfB">
    <param name="src" value="FRIEND.mov">
    <param name="autoplay" value="true">
    <param name="controller" value="false">

    <embed src="FRIEND.mov" width="160" height="144"
    autoplay="true" controller="false"
    pluginspage="http://ift.tt/OdxnXu">
    </embed>

</object>

I got :

Then, I tried :

<video width="800" height="600" src="FRIEND.mov" controls ></video>

I got this :

Then, when I press the play btn, I got the sound to play, but not the video. ??? Curious ?

What is the most efficient way to achieve something like that ?

Javascript images loading function hangs up my browser

I'm trying to make simple game in Javascript and HTML so I need images function to load sprites. I'd like it to wait until image is loaded and then proceed to another image. Unfortunatly code I wrote stops my browser from working. I think that it's endless while loop that should be finished.

Here's my code:

var Sprites = {};
function NewSprite( Name, URL )
{
    Sprites[ Name ] = new Image( );
    Sprites[ Name ].Ready = false;
    Sprites[ Name ].onload = function ( )
    {
        this.Ready = true;
    }
    Sprites[ Name ].src = URL;

    while ( Sprites[ Name ].Ready === false );
}

When I run it without while loop at the end and check Sprites[ Name ].Ready value it gives me true so I think it should work.

I'm calling my function like this:

NewSprite( "img", "http://ift.tt/1D2GxhK" );

Thanks for help!

HTML5 and Java server application deployment on AWS

I have created a Java restful server application which can be compiled as a JAR/WAR file and I have another front-end application built using knockoutjs and HTML5 which talks to the Restful Server side application.

I am trying to deploy both on to Amazon Linux AMI EC2 Instance. I was successfully able to deploy the JAR after setting up a glassfish server on the server. The server side application is running completely fine.

I am having problems in understanding how the HTML5 application needs to be deployed on the AWS server. So that both can be accessible from the same server.

It would be great if some best practices are also suggested.Appreciate any help

Thanks

dynamically add boostrap rows and columns in mvc

I am having an issue with my foreach loop:

@foreach (var item in Model) 
{
    <div class="row">
        <div class="col-md-4 portfolio-item">
            <a href="@Html.DisplayFor(modelItem => item.UrlSlug)">
                <img class="img-responsive" src="http://ift.tt/1yI890U" alt="">
            </a>
            <h3>
                <a href="@Html.DisplayFor(modelItem => item.UrlSlug)">@Html.DisplayFor(modelItem => item.Title)</a>
            </h3>
            <p>@Html.DisplayFor(modelItem => item.ShortDescription)</p>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
            @Html.ActionLink("Details", "Details", new { id = item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </div>
    </div>

This method displays one big long list, however I only want to display three (3x) <div class="col-md-4 portfolio-item"> inside <div class="row"> after three portfolio items has been populated I then want to create another <div class="row"> and populate the next three <div class="col-md-4 portfolio-item">.

How can I achieve this?

If loop in jquery is not working

i want to add a class to a tag using jquery based on a if condition the code is

  if ($(".asp:contains('Home')")) {
    $("ul.nav-pills a:contains('Home')").
    parent().addClass('active');
}
else if ($(".asp:contains('List')")) {
    $("ul.nav-pills a:contains('List')").
    parent().addClass('active');
}

am i doing it right?

Multitrack player with 0 latency

I have a big challenge. Currently searched on the internet, content that could help me with this question: I need to develop a Multitrack Player as those of music recording studios. The idea is to make 3 or more MP3 files play at the same time, simultaneously and synchronized like a player example of this page: http://ift.tt/1O5fw9l

Ok. I have used the <audio> of html5. 0 of latency on a user of PC. But when testing realized on a cell phone, audio is out of sync. For there is a minimum latency of 1 second or longer to begin each tag <audio>.

I have also tested Web Audio API and derivatives. This API is amazing. There are several ways of developing what I want with it however, the support is only for users with CHROME.

So the challenge is this. How do I develop a Multitrack Player as the sample page where audios touch without latency and the entire script development is compatible with all browsers?

CSS - Can I do an label behind the image?

I wanted to do something like this:

http://ift.tt/1yHNv0V

Is there a possibility to do something like this in CSS?

JavaScript encryption function

I need to create a basic JavaScript encryption function to encrypt the username and password on my login page. The only information I can find is the use of online software to provide encryption, but I need to use JavaScript and place a simple encryption function in my HTML code for my login page.

I would also like to better understand what type, application, and method actually mean when referring to encryption functions using JavaScript.

Thank you.

Location-based networking website for students

I want to make a location-based academic website(bootstrap project ) where a said question will be visible only to those present in the pre-specified radius. I can code in HTML,CSS and currently learning JavaScript and PHP. Anyone willing to give me some pointers? (code resources, relevant templates or useful literature)

Integrating Adobe Edge Animation into HTML

I have a quiz created in javascript and CreateJS, and I have intros for each section created in Adobe Edge.

I have the main quiz in a Canvas div

And I have a div for the Edge animation

I am able to activate the Edge animation by doing: $('#Stage').show(); $('#mainCanvas').hide();

When the Edge animation ends a button comes up.

In the button handler I am able to hide the Edge animation with:

sym.$("Stage").hide();

However I am not able to make the mainCanvas visible again.

I assume it's because the mainCanvas is out of the current scope that the button handler is in. I tried many different ways to access the root or parent element but I can't get it to work.

This is my main html:

<!doctype html>

<html class="no-js" lang="">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Burst Training</title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">





    <script src="lib/jquery-1.11.1.min.js"></script>

    <script src="lib/jquery-ui.js"></script>

    <script src="lib/edge.1.0.0.min.js"></script> 

    <script src="lib/easeljs-NEXT.combined.js"></script>

    <script src="lib/preloadjs.js"></script>

    <script src="js/plugins.js"></script>

    <script src="js/jafLib.js"></script>

    <script src="js/Hover.js"></script>

    <script src="js/Button.js"></script>

    <script src="js/ToggleButton.js"></script>

    <script src="js/Dropdown.js"></script>

    <script src="js/ClickAndDrag.js"></script>

    <script src="js/main.js"></script>

 <!--   <script>

     yepnope({load: "http://ift.tt/1HHK1gB"});  

    </script>-->

    <!--Adobe Edge Runtime-->

    <script type="text/javascript" charset="utf-8" src="animations/section1/Scenario-1_edge.js"></script>

    <style>

    .edgeLoad-EDGE-4024456 { display:none; }

    </style>

    <!--Adobe Edge Runtime End-->

    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" charset="utf-8">


</head>


<body>

     <div id="mainContainer">



        <canvas id="mainCanvas" width="1280" height="720">    

        </canvas>


         <div id="loadingScreen">

            <div id="loadingmessage"></div>

        </div> 

        <!--

        <div id="animationScreen" style="width:100%;height:100%;"></div>

        -->



        <div id="Stage" class="EDGE-4024456"></div>


    </div>

</body>

This is the button handler code in Adobe Edge.

(Including stuff I tried that fails)

console.log("pause button clicked");

sym.stop();

// Pause an audio track 
sym.$("_1_-_Receiving_Emails_v22")[0].pause();

// Show an element 
sym.$("play-button").show();

//var div = document.getElementById("mainCanvas");
//div.show();
//sym.getComposition().getStage().getSymbol("symbolName1").getSymbol("symbolName2").play(0);
//sym.getComposition().getSymbol("mainCanvas").show();
//sym.getSymbol("#mainCanvas").show();

sym.$("Stage").hide();
sym.$("mainCanvas").show();
sym.$("#mainCanvas").show();

var s = sym.getParentSymbol(); //valid object
s = document.documentElement; //valid object

console.log("1="+s);

//error
//s = sym.$("Stage").getParentSymbol(); 
s = s.getSymbol("mainCanvas"); //js error
console.log("2="+s);

s.show();
//s = sym.getComposition().getSymbol("mainCanvas");

console.log("3="+s);