Jump to content

Katarys

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by Katarys

    How to draw an invert bar...

    in CSS

    Posted

    I solved it with this...playing with the margin...

     

    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.min.js"></script>
    <script>
    var valor = 0;
    var defaultmargin = 231;
    var newmargin = 0;
    $(document).ready(function()
    {
    $("#btn1").click(function()
    {
    $("#box").css("display", "inline");
    valor = parseFloat(document.getElementById("ejehorizontal").value) * 21.45;
    if (valor <= 214.5) {
    newmargin = defaultmargin - valor;
    $("#box").animate({ width: valor + "px", marginLeft: newmargin + "px" });
    }
    else {
    valor = 0;
    $("#box").animate({ width: valor + "px" });
    }
    });
    $("#btn2").click(function()
    {
    $("#box").animate({ width: "0px" });
    });
    });
    function inicializa() {
    $("#box").animate({ width: "1px", marginLeft: defaultmargin + "px" });
    }
    </script>
    <style type="text/css">
    body {
    }
    #fondo {
    background-image: url(FondoFactorVictima.jpg);
    height: 172px; width: 255px; margin:auto;
    }
    /*#box {
    height: 50px;
    position:absolute;
    margin-top: 55px;
    margin-left: 18.5px;
    width: 0px;
    background-color:orange;
    }*/
    #box {
    height: 50px;
    position:relative;
    top: 55px;
    left: 0px;
    width: 0px;
    background-color:orange;
    display: none;
    }
    </style>
    </head>
    <body onload="inicializa();">
    <button id="btn1">Animate height</button>
    <button id="btn2">Reset height</button>
    <input id="ejehorizontal" type="text" value="" />
    <div id="fondo">
    <div id="box" ></div>
    </div>
    </body>
    </html>

    How to draw an invert bar...

    in CSS

    Posted

    Hi all,
    I'm new in web languages and I need to know how to draw a bar which grow up to the left, now, my bar is growing up to the right and is no problem, but, now I need to invert the bar, and I don't know how...any ideas? I paste my code here:

     

    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.min.js"></script>
    <script>
    var valor = 0;
    $(document).ready(function()
    {
    $("#btn1").click(function()
    {
    valor = parseFloat(document.getElementById("ejehorizontal").value) * 45.3;
    if (valor <= 453) {
    $("#box").animate({ width: valor + "px" });
    }
    else {
    valor = 0;
    $("#box").animate({ width: valor + "px" });
    }
    });
    $("#btn2").click(function()
    {
    $("#box").animate({ width: "0px" });
    });
    });
    </script>
    <style type="text/css">
    body {
    }
    #fondo {
    background-image: url(FondoRiesgoLineal.jpg);
    height: 185px; width: 500px; margin: auto;
    }
    #box {
    height: 80px;
    position:absolute;
    margin-top: 47px;
    margin-left: 22px;
    width: 0px;
    background-color:orange;
    }
    </style>
    </head>
    <body style="">
    <button id="btn1">Animate height</button>
    <button id="btn2">Reset height</button>
    <input id="ejehorizontal" type="text" value="" />
    <div id="fondo">
    <div id="box"></div>
    </div>
    </body>
    </html>
    thanks all :)
×
×
  • Create New...