JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Create</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
<!-- Description, Keywords -->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- JS -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="~/scripts/jquery.isotope.js" type="text/javascript"></script>
<script src="~/scripts/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="~/scripts/filter.js" type="text/javascript"></script>
<script src="~/scripts/jquery.tweet.js" type="text/javascript"></script>
<script src="~/scripts/jquery.cslider.js" type="text/javascript"></script>
<script src="~/scripts/custom.js" type="text/javascript"></script>
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/Content/slider.css" rel="stylesheet" />
<link href="/Content/prettyPhoto.css" rel="stylesheet" />
<link href="/Content/font-awesome.css" rel="stylesheet" />
<link href="/Content/style.css" rel="stylesheet" />
<link...
JavaScript
var isFirstLoad = true;
var loadingImg;
$(document).ready(function () {
//On check s'il y a quelque chose dans le champ hidden
if (document.getElementById("PictureThumbnail").value != "") {
//Si oui, on affiche l'image et on cache le form upload
var fileUploader = document.getElementById("fileuploader");
$(fileUploader).hide();
var imgDiv = document.getElementById("Images");
var img = new Image();
img.src = document.getElementById("PictureThumbnail").value;
img.name = "uploadedImage";
$(img).hide();
imgDiv.appendChild(img);
$(img).addClass('img-polaroid');
$(img).show();
//Now fade the image in
$(img).fadeIn(500, null);
}
else {
//On valide la visibilité du html
var fileUploader = document.getElementById("informations");
$(fileUploader).hide();
}
});
function UploadImage() {
var fileUploader = document.getElementById("fileuploader");
$(fileUploader).hide();
var fileUploader = document.getElementById("informations");
$(fileUploader).show();
//Create a new image and insert it into the Images div. Just to be fancy,
//we're going to use a "FadeIn" effect from jQuery
var imgDiv = document.getElementById("Images");
loadingImg = new Image();
loadingImg.src = "http://www.milkandhoneyshoes.com/design2/images/loading.gif";
//Hide the image before adding to the DOM
$(loadingImg).show();
imgDiv.appendChild(loadingImg);
//Now fade the image in
$(loadingImg).fadeIn(500, null);
$("#ImgForm").submit();
}
function UploadImage_Complete() {
//Check to see if this is the first load of the iFrame
if (isFirstLoad == true) {
isFirstLoad = false;
return;
}
...