Show
Ignore:
Timestamp:
09.02.2015 12:11:28 (5 years ago)
Author:
bmt11
Message:

Tooltip is now polished and finished

Location:
other-projects/nz-flag-design/trunk/render-3d
Files:
1 added
3 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/render-3d/CSS/slider.css

    r29720 r29721  
    4242    border: none; 
    4343    outline: 0; 
    44     color: white; 
    4544} 
    4645 
    47 .tooltip { 
    48     position: absolute; 
    49     z-index: 1020; 
    50     display: block; 
    51     padding: 5px; 
    52     font-size: 11px; 
    53     visibility: visible; 
    54     margin-top: -2px; 
    55     bottom:120%; 
    56     margin-left: -2em; 
     46.tt{ 
     47    margin-top: 29px; 
     48    width: calc(782px/11); 
     49    height: calc(405px/11); 
     50    margin-left: -10px; 
     51    position: absolute; 
     52    background: url('../images/tooltip.png') no-repeat center; 
     53    background-size: cover; 
    5754} 
    5855 
    59 .tooltip .tooltip-arrow { 
    60     bottom: 0; 
    61     left: 50%; 
    62     margin-left: -5px; 
    63     border-top: 5px solid #000000; 
    64     border-right: 5px solid transparent; 
    65     border-left: 5px solid transparent; 
    66     position: absolute; 
    67     width: 0; 
    68     height: 0; 
     56.text{ 
     57    color: #3385FF; 
     58    width: 100%; 
     59    height: 100%; 
     60    text-align: center; 
     61    position: absolute; 
     62    margin-top: 5px; 
     63    font-size: 22px; 
     64    font-family: "Calibri", Serif; 
     65 
    6966} 
    70  
  • other-projects/nz-flag-design/trunk/render-3d/Flag_files/slider.js

    r29719 r29721  
    22     
    33    var initialValue = 100; 
    4     var curValue = initialValue; 
    5     var tooltip = 'Wind Speed: '+curValue+''; 
     4    var tooltip = '<span class="tt"><span class="text">'+getDescript(initialValue)+'</span></span>'; 
     5    var target; 
    66     
    77    $("#speed").slider({ 
     
    2020     
    2121    function initTooltip(ui){ 
    22         tooltip = 'Wind Speed: '+curValue+''; 
    23         var target = ui.handle || $('.ui-slider-handle');   
    24         $(target).html(tooltip); 
     22        target = ui.handle || $('.ui-slider-handle');   
    2523    } 
    2624     
    2725    function setSpeed(ui){ 
    2826        windStrength = ui.value; 
    29         curValue = ui.value; 
    30         tooltip = 'Wind Speed: '+curValue+''; 
    31         target = ui.handle || $('.ui-slider-handle');  
    32         $(target).html(tooltip);         
     27        tooltip = '<span class="tt"><span class="text">'+getDescript(ui.value)+'</span></span>'; 
     28        target = ui.handle || $('.ui-slider-handle'); 
     29        $(target).html(tooltip);         
     30    } 
     31     
     32    function getDescript(speed){ 
     33        if(speed < 50) return 'calm'; 
     34        if(speed < 100) return 'light'; 
     35        if(speed < 150) return 'fair'; 
     36        if(speed < 200) return 'heavy'; 
     37        return 'gusty'; 
    3338    } 
    3439     
    3540    $(".ui-slider").mouseenter(function(){ 
    3641        controls.enabled = false; 
     42        $(target).html(tooltip); 
    3743    }); 
    3844     
    3945    $(".ui-slider").mouseleave(function(){ 
    4046        controls.enabled = true; 
     47        $(".tt").remove(); 
    4148    }); 
    4249 
  • other-projects/nz-flag-design/trunk/render-3d/weather/rain.js

    r29719 r29721  
    33     
    44    this.isInit = false; 
    5     this.MASS = 0.01; 
     5    this.MASS = 0.9; 
    66     
    77    this.init = function() { 
     
    1414     
    1515        // create the particle variables 
    16         this.particleCount = 10000, 
     16        this.particleCount = 8000, 
    1717        this.particles = new THREE.Geometry(), 
    1818        this.pMaterial = new THREE.ParticleBasicMaterial({ 
     
    3939            // create a velocity vector 
    4040            this.particle.velocity = new THREE.Vector3( 
    41                 (windForce.x * (1-this.MASS)), // x 
    42                 -Math.random() * 0.01, // y 
    43                 (windForce.z * (1-this.MASS))); // z 
     41                (windForce.x * this.MASS),  // x 
     42                -Math.random() * this.MASS, // y 
     43                (windForce.z * this.MASS)   // z 
     44            );  
    4445 
    4546            // add it to the geometry