Jump to content

How to draw an invert bar...


Katarys

Recommended Posts

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 :)
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...