balsamine.www
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

testing.html
text/html

Download raw (4.2 KB)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery-3.1.1.min.js" ></script>
<style type="text/css" media="all">
.container{
width: 80%;
height: auto;
}
  .cadra{
    height: 280px;
    width: auto;
    float: left;
  }
  .cadra svg {
    height: 100%;
    width: auto;
    margin-bottom: 100px;
    overflow: visible
  }
  footer{

    display: none;
    position: fixed;
    right: 0px;
    background: white;
    width: 20%;
  }
  footer li{
    font-family: monospace;
    font-size: 10px;
    margin-bottom: 10px;
    text-decoration: none;
  }
  .container > .cadra{
    /* background: url('svg/guide.svg'); */
    background-repeat: repeat-x;
    background-size: auto 100%;
  }
</style>
</head>
<body>
<div class="container"></div>


<footer></footer>
</body>
<script type="text/javascript" charset="utf-8">

// alert('salut');
// function grad(){
//   var pathEle = $('svg');
//   var stt = 240;
//   var scl = .1
//   pathEle.each(function () {
//     // $(this).css('stroke-width', stt);
//     trs = scl*10;
//   // $(this).attr('transform', 'scale(1,'+scl+') translate(0, 0)');
//     // $(this).css('stroke-width', stt);
//     stt = stt - 6;
//     scl = scl + 0.1;
//   });
// }

var phrase = "Trois frères rencontrent un homme qui a perdu un chameau. Sans hésiter ils le lui décrivent : il est blanc et aveugle d’un oeil, il porte deux outres sur le dos, l’une pleine de vin et l’autre d’huile. Ils l’ont donc vu ? Non, ils ne l’ont pas vu.";

var result = [];

for (var i = 0; i < phrase.length; i++) {
  result.push(phrase.charAt(i));
}

console.log(result);
// var word = ['M', 'A', 'I', 'B', 'L', 'b', 'a', 'l', 's', 'a-ext', 'm', 'i', 'n', 'e', 'A'];
// var word = ['B', 'A', 'L', 'S', 'A', 'M', 'I', 'N', 'E', 'b', 'a','l', 's', 'a-ext', 'm', 'i', 'n', 'e'];
// var word = ['B-test', 'A', 'L', 'S', 'A', 'M', 'I', 'N', 'E'];
var word = ['D','A','N'];

for (var i = 0, l = word.length; i < l; i++) {
  var v = word[i];
  jQuery('<div/>', {
      id: v+'_'+i,
      class: 'cadra',
  }).appendTo('.container');
  $('#'+v+'_'+i).load('svg/'+v+'.svg');
};


$(document).ready(function(){
  var start = 100;
  $('.cadra').css('height', '370');
  // $('path.int').css('stroke-width', '100');
  // $('path.ext').css('stroke-width', start);
  // $('path.serif').css('stroke-width', '0');
  // $('path.intrap').css('stroke-width', '50');
  // $('.soleil').css('stroke-width', '0');
  // // $('path').css('filter', 'url(#filter237)');
  // $('.int').attr('transform', 'scale(1.5,1) translate(-20, 0)'  );
  // $('path').css('stroke-linejoin','bevel');
  // $('path').css('stroke-linecap','round');
  // grad();
})

// function range(idStroke, valStart, valMax, propri, attri){
//   var html = '<li>'+idStroke+' | '+propri+'<br><input data-attri="'+attri+'" data-propri="'+propri+'" type="range"  min="0" max="'+valMax+'" value="'+valStart+'" name="discount_credits" class="discount_credits" id="'+idStroke+'" /><span>'+valStart+'</span></li>';
//   $("footer").append(html);
// }
// range('cadra', 3700, 10000, 'height', 'css');
// range('int', 1000, 3000, 'stroke-width', 'css');
// range('ext', 1000, 3000, 'stroke-width', 'css');
// range('int', 10, 10, 'stroke-opacity', 'css');
// range('ext', 10, 10, 'stroke-opacity', 'css');
// range('serif', 0, 120, 'stroke-width', 'css');
//

//
// $('.discount_credits').on("change mousemove", function() {
//     var dataOver = $('.ext[data-over]');
//     var valStroke = $(this).val();
//     var idStroke = $(this).attr('id');
//     var attri = $(this).attr('data-attri');
//     var propri = $(this).attr('data-propri');
//     $(this).next().html($(this).val());
//
//     var calc = (1550 - valStroke/10/1) / 1450;
//
//     var test = valStroke/(20*calc ) - 50;
//     // $('.'+idStroke).attr('transform', 'scale(1,'+calc+') translate(0, '+test+')'  );
//     $('.'+idStroke).css(propri, ''+valStroke/10+'');
//
//
//     if ( dataOver.length != 0 ) {
//       dataOver.each(function () {
//         var valOver = $(this).data('over');
//         var valOver = new RegExp(valOver, 'g')
//         var valD = $(this).attr('d');
//         var newValOver = valD.replace(valOver, '60');
//         $(this).attr('d', newValOver);
//         console.log(newValOver);
//
//       });
//     }
// });

</script>
</html>